initial-letter (drop caps)
initial-letter は CSS のプロパティで、ドロップ、レイズ、サンクンされた最初の文字のサイズとシンクを設定します。このプロパティは、 ::first-letter 擬似要素およびブロックコンテナーのインラインレベル最初の子供要素に適用されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 110 | 110 | | 9 | 110 | 9 | |
normal | 110 | 110 | | 9 | 110 | 9 |
注釈 1件
実装メモ
- 接頭辞のないプロパティについては、バグ 229090 を参照してください。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
実装メモ
- 接頭辞のないプロパティについては、バグ 229090 を参照してください。
- 10 進数値はサポートされていません。 バグ 296785 を参照してください。
基本構文
CSS
/* Drop cap with a height of 3 lines */
p::first-letter {
initial-letter: 3;
}
/* 3 lines high, 2 lines drop */
.drop-cap::first-letter {
initial-letter: 3 2;
font-weight: bold;
margin-right: 0.5em;
color: #c53030;
}ライブデモ
実務での使いどころ
-
雑誌・書籍スタイルの記事
記事の冒頭にドロップキャップを配置し、印刷物のような高品質な見出しを演出する。
注意点
- Firefox（2026年3月時点）では未対応。float ベースのフォールバックが必要。
- フォントによってドロップキャップの位置やサイズが異なるため、実際のフォントで検証が必要。
フォールバック戦略
CSS
/* Firefox 用フォールバック */
@supports not (initial-letter: 3) {
p::first-letter {
float: left;
font-size: 3.2em;
line-height: 0.8;
margin-right: 0.1em;
margin-top: 0.05em;
}
}アクセシビリティ
- ドロップキャップは視覚的な装飾であり、スクリーンリーダーは通常通り読み上げる。ただし、装飾的な理由でマークアップを分割しないこと。