::first-letter
ブロック要素の最初の文字にスタイルを適用する擬似要素です。雑誌やニュースサイトのような装飾的なドロップキャップ(大きな頭文字)を実現できます。適用可能なプロパティはfont、color、margin、padding、border、text-decorationなどに限定されています。
概要
ブロック要素の最初の文字にスタイルを適用する擬似要素です。雑誌やニュースサイトのような装飾的なドロップキャップ(大きな頭文字)を実現できます。適用可能なプロパティはfont、color、margin、padding、border、text-decorationなどに限定されています。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
article p:first-of-type::first-letter {
font-size: 3em;
float: left;
line-height: 1;
margin-right: 0.1em;
} 実務での使いどころ
-
ドロップキャップの実装
ブログ記事の冒頭段落にドロップキャップ(装飾的な大文字)を適用し、印刷メディアのような洗練されたデザインを実現します。
注意点
- ::beforeで生成されたコンテンツの最初の文字もマッチ対象になるため、::beforeとの併用時は意図した動作か確認してください。
アクセシビリティ
- 装飾目的の::first-letterはスクリーンリーダーの読み上げに影響しませんが、コントラスト比と読みやすさを確保してください。