【CSS】最初の文字にだけスタイルを適用させる

2024年8月5日

見出しとかで最初の文字にだけスタイルをあてたいなぁ～

というわけで今回はテキストの最初の文字にだけスタイルを適用させる方法について
お話したいと思います。

テキストの最初の文字にスタイルを適用させる

見出しや強調したい文などでは、一部文字を大きくしたり、色を変えたりすることはよくあると思います。
この場合、spanタグで囲んで対応することが私は多いです。

一回しか出現しない箇所とかだと問題ないかもですが、見出しなど複数記述が必要な箇所だと
テキストをspanタグで囲うのは一手間かかってしまいます。
こんな感じ↓

どうでしょう？

テキストの最初の文字だけspanタグで囲う作業が複数発生しますよね？
見出しの数が増えれば増えるほど工数は増えていきます。

ここで使用するのが疑似要素「first-letter」です。
文字通り、指定した要素の最初の文字を指定することができます。
さっそく見てみましょう↓

HTMLもすっきりしましたね！
注意点としては、ブロック要素にしか効かない点と、背景色や色、マージン・パディング・ボーダーなどの
簡単なスタイルしか反映できない、という点です！

というわけで今回は、テキストの最初の文字にだけスタイルを適用させる方法についてご紹介しました！
是非ご活用ください♪

よかったらフォローしてね！！