CSSだけで見出しや文章の一文字目をスマートに装飾する方法

199 view

一文字目だけサイズが違う、色が違う、背景が設定されている、、、
そんなデザインデータやコーディング指示を頂いたとき、どのようにコーディングをするのが一番スマートでしょうか?

何気なく「span」で囲ってスタイルをアテていませんか?
もっと簡単で、スマートな方法があります。

疑似要素::first-letter

はい、先に結論です。
知る人ぞ知る疑似要素「::first-letter」

疑似要素といえば、「::before」「::after」あたりは馴染み深いと思います。
ハンバーガーメニューの実装や、CSSのみで矢印を実装する時などには重宝する疑似要素です。

一般的なWEBサイト構築時には「::before」「::after」はよく使いますが、
凝ったデザインでないと「::first-letter」を使う機会はほとんどありません。

::first-letterを使うメリット・デメリット

「::first-letter」には幾つか、「span」のようなエレメント要素や「::before」「::after」とは違った特徴があります。

メリット

HTMLを美しく保てる

「::first-letter」を使うメリットはやはり、HTMLを汚さずに統一的にスタイルをアテられる点です。

特定の見出し要素や各セクションの頭の文字を目立つようにしたい場合、
簡単にスタイルを適用することが出来ます。

コード量を減らし、デザイン性を高める上でこれはかなりのメリットだと思います。

大抵のブラウザに対応している

「::first-letter」はかなり昔からあるので、ie8などの古めのブラウザでも問題なく使用することが出来ます。特定のブラウザの影響が少ないというのは、WEB制作の現場では重要です。

デメリット

デメリットというよりは、「::first-letter」の仕様、使用上の注意点です。

ブロックレベル要素にしか効かない

「::first-letter」はインライン要素に使っても無効です。ブロックレベル要素(block,table,inline-blockなど)に使える疑似要素です。

aタグやspanタグなどのinline要素に対して、使おうとしても反応しませんが、
hタグやdiv,pなどのブロック要素には反応します。

もし、aタグなどの要素に使いたい場合は、要素をブロックレベルに変更することで使用可能になります。

利用可能なCSSプロパティが限られている

また、「::first-letter」に対して使えるCSSには制限があります。

文字装飾に関連するプロパティ、背景、色、マージンやパディング、ボーダーなどです。
簡易な装飾をするのには十分ですが、display要素を変更したり、position調整をするのは難しいようです。

「::first-letter」でやりたいことが出来ない時は諦めて,「span」で囲いましょう。

その他、疑似要素について

疑似要素::first-line

「::first-letter」に似た特徴をもつ「::first-line」という、先頭の行にだけスタイルをアテることが出来る疑似要素もあります。

これも凝ったデザインを簡単にコーディングすることが出来るようになるので、オススメです。

疑似要素のコロンは1つか2つか

疑似要素を使う時のコロンは「:first-letter」のように単一でも機能します。ただ、これはCSSの文法上よろしくありません。

というのも「:first-child」や「:nth-of-type(n)」といった疑似クラスとの区別がつかなくなってしまう為です。

良識のあるコーダーは必ず二重コロンで使用するようにしてください。

公式ドキュメントをよく読みましょう

これは他のことにも言えますが、公式ドキュメントやリファレンスをよく読み、間違った使い方をしないようにしましょう。

参考になるサイト

::first-letter

MDNのリファレンス
https://developer.mozilla.org/ja/docs/Web/CSS/::first-letter

\ SNSでシェア /

WRITER

toshi

制作 toshi

1990年生まれの新米エンジニア。
慶応義塾大学文学部出身。

趣味は大学から始めた競技かるた(A級)/性格は飽きっぽいB型/移動手段はロードバイク/好きな食べものは馬刺し/わりと細身ですが、クーネルワークのクー(食)担当。

TAGS