お疲れ。最近、メディアサイトや海外の美しいテックブログなんかで見かける、あの冒頭の1文字目をズドンと大きくする「ドロップキャップ（イニシャル装飾）」、気になっていたんじゃないか？
「あぁ、あれね。先頭の文字だけ `` で囲んでスタイル当ててるんでしょ？」
もし君がそう思っているなら、今日でその認識をアップデートしてほしい。もちろん、昔の泥臭い実装やCMSの制約によってはそういうアプローチもあった。だが、モダンなフロントエンドにおいて、HTMLの構造を汚さずに純粋なCSSだけでこれを優雅に実現する方法がある。それが今回解説する `::first-letter` 擬似要素 だ。
中級から一段上のシニアへとステップアップしようとしている君に向けて、仕様の裏側にあるブラウザの挙動から、実務で絶対にハマる「泥臭い罠」とベストプラクティスまで、余すところなく伝授しよう。
—
1. `::first-letter` とは何か？ブラウザの裏側の世界
`::first-letter` は、ブロックレベル要素（あるいはブロックに準ずる要素）の最初の文字に対してスタイルを適用するための擬似要素だ。
「文字にスタイルを当てるだけなんて簡単じゃん」と思うかもしれないが、仕様書（CSS Pseudo-Elements Module Level 4）をめくってみると、ブラウザが裏側でどれほど高度な計算をしているかがよく分かる。
ブラウザのレンダリングエンジンはどう解釈しているか？
ブラウザはHTMLをパースしてDOMツリーを作り、CSSOMと結合してレンダーツリーを作る。この時、`::first-letter` が指定された要素に出くわすと、ブラウザは「最初の文字」を仮想的に一つのインラインコンテナとして切り出す処理を行っている。
ここで重要なのは、単に「文字コードの1番目」を切り抜いているわけではないという点だ。
ブラウザは、以下のような高度なパースを行っている。
1. 約物の無視・巻き込み: 最初の文字の前に「開き括弧（「や“）」や「引用符」がある場合、ブラウザによってはそれらも含めて（あるいは適切にスキップして）「最初の文字」を判定する。言語やフォントのグリフ情報を考慮したインテリジェントな処理だ。
2. 生成コンテンツの対象外: `::before` や `::after` で挿入されたテキストは、原則として `::first-letter` の対象にはならない（※一部ブラウザの挙動や仕様の変遷はあるが、基本は実テキストの先頭がターゲットとなる）。
この「ブラウザに賢く文字を切り出させる」という仕組みを理解しておくと、後述するスタイリングの自由度と制約の理由がスッと腑に落ちるはずだ。
—
2. 実践：美しすぎるドロップキャップの作り方
理屈はこれくらいにして、実際にコードを見てみよう。
実務でそのままコピペして、今日の記事やブログのリード文に使えるクオリティのものを組んでみた。
むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へしごとへ、おばあさんは川へせんたくへ行きました。
ある日、おばあさんが川でせんたくをしていると、どんぶらこ、どんぶらこと、大きな桃が流れてきました。
/ 記事のリード段落、あるいはすべての段落に適用 /
.article-body p {
/ 可読性を考慮した基本のタイポグラフィ /
font-size: 1rem;
line-height: 1.8;
color: #333;
}
/ ::first-letterによるドロップキャップの実装 /
.article-body p::first-letter {
/ 文字を大きくしてブロック化する /
font-size: 3.5rem;
line-height: 1;
font-weight: 700;
font-family: ‘Times New Roman’, serif, sans-serif; / イニシャルだけ高級感のあるセリフ体に /
/ 浮き沈みをコントロールするためにfloatさせる /
float: left;
/ 周りのテキストとの絶妙な余白（ここがプロのこだわり） /
margin-right: 0.75rem;
margin-top: 0.15rem;
/ ブランドカラーやアクセントカラーを適用 /
color: #2563eb;
/ テキストの切り抜きや変形も自由自在 /
text-transform: uppercase;
}
このコードをブラウザで確認してみてほしい。たったこれだけの記述で、海外のハイエンドなWebメディアのような、息を呑むほど美しいドロップキャップが立ち上がるはずだ。無駄なマークアップを増やさず、CSSだけで完結させている点がプロの仕事というものだ。
—
3. 実務で絶対に知っておくべき「CSSプロパティの制限」と罠
さて、ここからがシニアからの重要なアドバイスだ。
`::first-letter` は万能に見えて、実は適用できるCSSプロパティに厳しい制限がある。ここを知らずにハマる中級エンジニアが後を絶たない。
仕様上、`::first-letter` に対して安全に使用できるのは以下のカテゴリのプロパティに限られる。
- フォント関連: `font`, `font-style`, `font-weight`, `font-size`, `font-family`, etc.
- 色・背景関連: `color`, `background-`
- テキスト装飾: `text-decoration`, `text-transform`, `letter-spacing`, `word-spacing` (※ブラウザ依存あり)
- ボックスモデル (一部): `margin-`, `padding-`, `border-`, `float`
❌ やりがちな失敗：使えないプロパティを指定してしまう
たとえば、「最初の文字に綺麗に影をつけたい！」と思って `box-shadow` や `transform: scale()` を指定したとする。
/ これは期待通りに動かないことが多いので注意！ /
.article-body p::first-letter {
transform: scale(1.2); / 無視されるか、レンダリングが崩れる原因になる /
box-shadow: 2px 2px 4px rgba(0,0,0,0.2); / 効かない場合がある /
}
ブラウザの仕様やバージョンによって挙動が異なるため、実務で安定した出力を求めるなら、「使えるプロパティ（`float`, `font-size`, `color`, `margin` あたり）だけで立体感やデザインを表現する」のが鉄則だ。
⚠️ マルチバイト文字（日本語）特有の注意点
英語圏で作られた仕様であるため、日本語環境ではたまに挙動の揺れに直面する。
特に、最初の文字が漢字、ひらがな、カタカナ、あるいは全角記号の場合、フォントのメトリクス（文字の上下の余白や基準線）によって、意図した `line-height` や `margin-top` の相殺が英語圏とは微妙に異なることがある。
もし日本語の段落でドロップキャップを使う場合は、必ず主要ブラウザ（Safari, Chrome, Firefox）の実機確認を怠らないこと。特にApple製デバイスのSafariはフォントのレンダリングが独特なので、`margin-top` の微調整が必要になるケースが多い。
—
4. まとめ：CSSの擬似要素を使いこなすということ
`::first-letter` を用いたドロップキャップの解説、いかがだっただろうか。
フロントエンドの仕事というのは、ただ画面に要件通りの文字や画像を並べることだけではない。「HTMLのセマンティクスを汚さず、CSSの強力な仕様をいかにスマートに引き出し、保守性の高いコードを書くか」という美学の積み重ねだ。
JavaScriptで無理やりDOMを分割して `` を挿入するようなコードを書く前に、まずはCSSのネイティブな機能で解決できないか立ち止まって考えてみてほしい。大抵の場合、モダンなCSSはすでに君の想像の先を行っているはずだ。
さあ、今日のコードをさっそく次の案件のブログ記事やニュースセクションに組み込んで、チームをうならせてやろうぜ。
コメント