CSSで単語の最初の文字を大文字にする方法（first-letterセレクタの使い方）

CSSで単語の最初の文字を大文字にするには、first-letterセレクタ（擬似要素）を使用します。HTML側のテキストを書き換えることなく、スタイルシートだけで表示を変更できるのが特徴です。

基本的な使い方

たとえば、すべて小文字で書かれた見出しがあるとします。

<h2>this is a lowercase heading</h2>

この「this」の最初の「t」を大文字にしたい場合は、CSSスタイルシートでh2にfirst-letterセレクタを指定するだけで実現できます。

h2::first-letter {
  text-transform: capitalize;
}

text-transform: capitalize;は、各単語の先頭文字を大文字に変換するプロパティです。この指定により、見出しは「This is a lowercase heading」と表示されます。

クラスに対して適用する

もちろん、first-letterセレクタはクラス属性にも適用できます。特定の要素だけに効果を与えたい場合は、以下のようにクラス名を指定します。

.name-of-class::first-letter {
  text-transform: capitalize;
}

補足：text-transformの主な値

text-transformプロパティには、目的に応じて以下の値を指定できます。

• capitalize：各単語の最初の文字を大文字にする
• uppercase：すべての文字を大文字にする
• lowercase：すべての文字を小文字にする
• none：変換を行わない（デフォルト）

なお、CSSの現行仕様では擬似要素はコロン2つの::first-letterと記述するのが正式な書き方です。コロン1つの:first-letterでも後方互換性により動作しますが、新しいコードでは::first-letterの使用が推奨されています。