Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

::first-letter

::first-letter は CSS の擬似要素で、ブロックコンテナーの最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ（画像やインラインテーブルなど）がないときに限ります。

擬似要素テキスト装飾

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:first-letter
1
12
1
1
18
1
dutch ij digraph

オランダ語のダイグラフ「IJ」のサポート
87
svg text element

SVG `<text>` 要素のサポート
124
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • 以前は別名で対応していました: :first-letter (1)
注釈 1件
対応条件
  • 以前は別名で対応していました: :first-letter (12)
注釈 1件
対応条件
  • 以前は別名で対応していました: :first-letter (1)
注釈 1件
対応条件
  • 以前は別名で対応していました: :first-letter (1)
注釈 1件
対応条件
  • 以前は別名で対応していました: :first-letter (18)
注釈 1件
対応条件
  • 以前は別名で対応していました: :first-letter (1)

基本構文

CSS 
article p:first-of-type::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
}

ライブデモ

Drop cap

CSS Dropcaps demo.

プレビュー全画面表示

Color withstartcharacter

CSS Color withstartcharacter demo.

プレビュー全画面表示

background withstartcharacter

CSS background withstartcharacter demo.

プレビュー全画面表示

実務での使いどころ

  • ドロップキャップの実装

    ブログ記事の冒頭段落にドロップキャップ（装飾的な大文字）を適用し、印刷メディアのような洗練されたデザインを実現します。

注意点

  • ::beforeで生成されたコンテンツの最初の文字もマッチ対象になるため、::beforeとの併用時は意図した動作か確認してください。

アクセシビリティ

  • 装飾目的の::first-letterはスクリーンリーダーの読み上げに影響しませんが、コントラスト比と読みやすさを確保してください。

参考リンク