【実務・中級編】 ::first-letter と ::first-line – CSS実践ガイド

やあ。今日もフロントエンドの泥沼で戦っている君に、少しばかり「CSSの解像度」を上げる話をしよう。

CSSの仕様書を隅から隅まで読み込んでいる猛者でも、意外と「なんとなく」で使ってしまいがちなのが `::first-letter` と `::first-line` だ。これら、単なる装飾ツールだと思っているなら少しもったいない。ブラウザのレンダリングの仕組みを知れば、これらが単なる「見た目調整」を超えた、強力なUXデザインの武器になることがわかるはずだ。

ブラウザという「魔法使い」の裏側を覗く

まず、この2つの擬似要素がどう処理されているかを知る必要がある。これらは、CSS仕様では「擬似要素」だが、実はブラウザのレンダリングエンジンは、これらを「あたかもそこにHTMLタグが存在するかのように」DOMツリーを仮想的に切り分けているんだ。

• `::first-letter` は、インラインボックスの先頭文字を独立した匿名ボックスとして扱う。
• `::first-line` は、現在のコンテナの幅に基づいて、最初の行のテキストを仮想的なブロックとして切り出す。

ここで重要なのは、ウィンドウのリサイズやフォントの読み込み遅延によって「何が1行目か」「何が最初の文字か」は動的に変わるという点だ。JavaScriptでDOMを操作して `` で囲むような愚策を打つ必要はない。ブラウザの「レイアウト計算」という最強のエンジンに任せるのが、最もパフォーマンスが良く、最も堅牢な実装になる。

—

1. `::first-letter`：タイポグラフィの品格を上げる

新聞や雑誌の導入部でよく見る「ドロップキャップ（頭文字を大きくする手法）」を実装するとき、君ならどうする？まさか文字だけ `` で囲んでいないだろうな。

/ 記事の導入文を洗練させるドロップキャップ /
.article-body > p:first-of-type::first-letter {
float: left; / これが重要。文字を浮かせてテキストを回り込ませる /
font-size: 3em;
line-height: 1;
margin-right: 0.2em;
font-weight: bold;
color: #d32f2f; / サイトのアクセントカラーを乗せる /
}

現場のTips： `::first-letter` に適用できるプロパティは限定されている（フォント系、色、背景、マージン、パディングなど）。特に `float` を使うと、魔法のように文字が本文に寄り添う。ただし、`display: inline-block` を使いたい気持ちもわかるが、浮動配置こそがこの機能の真骨頂だということを忘れないでくれ。

—

2. `::first-line`：視線の誘導を制する

`::first-line` は、文脈を強調したい時に非常に重宝する。特に長文のリード文において、最初の1行だけをスタイル変えるだけで、ユーザーの「離脱率」が変わることもある。

/ リード文の最初の1行だけを際立たせる /
.lead-text::first-line {
font-weight: 700;
text-transform: uppercase; / 英語圏のプロジェクトなら効果絶大 /
letter-spacing: 0.05em;
color: #333;
}

/ 注意：::first-lineに適用できるプロパティはさらに制限が厳しい /
/ フォント系、色、背景、text-decorationなどが基本だ /

現場のTips： 勘違いされやすいが、`::first-line` は「最初のタグの中の1行」ではなく、「その要素内のレンダリング結果としての最初の1行」だ。つまり、親要素の幅が変われば、`::first-line` の範囲もリアルタイムに再計算される。レスポンシブデザインにおいて、これほど頼もしい機能はない。

—

実務で「ハマる」ポイントを先回りしておく

中級エンジニアの君なら、以下の制約には必ずぶつかるはずだ。ここを知っておけば、デバッグで頭を抱えることはない。

1. 継承のルール: `::first-letter` や `::first-line` は、親要素から継承されたスタイルを保持した上で適用される。例えば、親に `color: blue` を指定していれば、擬似要素も青から始まる。
2. 入れ子構造の制約: `::first-letter` はブロックレベル要素（`

`, `