initial-letter (drop caps)
initial-letter は段落の最初の文字を数行分の高さに拡大し、ドロップキャップとして表示する。値は行数で指定し、オプションでシンク行数も指定できる。雑誌や書籍のような高品質な組版をCSSだけで実現できる。
概要
initial-letter は段落の最初の文字を数行分の高さに拡大し、ドロップキャップとして表示する。値は行数で指定し、オプションでシンク行数も指定できる。雑誌や書籍のような高品質な組版をCSSだけで実現できる。
対応ブラウザ
デスクトップ
Chrome 110+
Edge 110+
Safari 未対応
Firefox 未対応
モバイル
Chrome Android 110+
Safari iOS 未対応
Firefox Android 未対応
基本構文
CSS
/* 3行分の高さのドロップキャップ */
p::first-letter {
initial-letter: 3;
}
/* 高さ3行、沈み2行 */
.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;
}
}アクセシビリティ
- ドロップキャップは視覚的な装飾であり、スクリーンリーダーは通常通り読み上げる。ただし、装飾的な理由でマークアップを分割しないこと。