【実務・中級編】 ::first-line 擬似要素による最初の行のスタイル – CSS実践ガイド

おい、ちょっといいか。画面の向こうで「CSSなんてただの見た目の味付けだろ」と高をくくっているそこの君。

……まあ、気持ちは分からなくもない。レイアウトはFlexboxやGridに任せ、コンポーネント指向でクラスを綺麗に切り分ける。現代のフロントエンド開発において、それは正しいアプローチだ。だがな、実務の現場で「デザイナーのこだわり」という名の無慈悲な要望が飛んできたとき、君はその引き出しの少なさに冷や汗をかくことになる。

例えば、「記事のリード文や段落の『最初の1行』だけ、文字サイズを大きくして、かつカラーをブランドカラーに変えてほしい。ただし、マークアップは通常の段落タグ（`

`）のままで」と言われたとする。

「え、じゃあJavaScriptでテキストノードを分割して``で囲う？ いやいや、リフローのコストやレスポンシブ時のリサイズ追従を考えたら悪夢だろ……」

そう、そんなときにこそ思い出してほしいのが、今回深掘りする `::first-line` 擬似要素 だ。
こいつを使いこなせるようになると、無駄なDOMを増やさずに、ブラウザのレンダリングエンジンを味方につけたエレガントなスタイリングが実現できる。今日は、この `::first-line` の仕様の裏側、実務でハマりがちな「罠」、そして現場で即使える実践知を、シニアの視点からみっちり伝授しよう。

—

1. `::first-line` とは何か？（ブラウザの裏側の話）

まず大前提として、`::first-line` はHTMLの構造を変えることなく、ブロックレベル要素（またはそれに準じる要素）の「最初の行」にのみスタイルを適用するための擬似要素だ。

ここで「おっ、最初の行のテキストを `` で囲んでくれる魔法の機能だな？」と思った君、半分正解で半分は大間違いだ。

ブラウザのレンダリングエンジン（BlinkやGeckoなど）の裏側の処理を覗いてみよう。ブラウザは、HTMLをパースしてDOMツリーを作り、CSSOMと結合してレイアウト計算を行う。その過程で、画面の幅やフォントの読み込み状態に応じて、テキストが「どこで折り返されるか（Line Breaking）」を動的に決定する。

つまり、`::first-line` が適用される範囲は、コード上の文字数ではなく、その時々のビューポート幅やフォントサイズに応じてブラウザが勝手に計算した「物理的な1行目」なのだ。画面サイズを縮めれば、1行目に入る文字数は減り、それに追従して `::first-line` のスタイルが適用される範囲もリアルタイムで書き換わる。この「動的な追従性」こそが、この機能の最大の強みであり、JSでは真似しにくいアドバンテージだ。

—

2. 実務で使える！ 綺麗で堅牢なサンプルコード

百聞は一見にしかずだ。まずは、ブログやメディアサイトのリード文でよく使われる、実用的なコードを見てほしい。そのままコピーして、手元のエディタで試してみるといい。

フロントエンドの開発現場において、CSSの細部へのこだわりはプロダクトの品質を大きく左右します。特にタイポグラフィの美しさは、ユーザーの読書体験に直結する重要な要素です。::first-lineを正しく理解し、無駄なマークアップを排除したクリーンなコードベースを維持しましょう。

このコードをブラウザで開いて、ウインドウの幅をグリグリと縮めてみてほしい。どんな画面サイズであっても、常に「その瞬間の1行目」だけにピンク色の太字が適用されるはずだ。これが、CSSの仕様に則った美しい実装というやつだ。

—

3. 知らないと絶対にハマる！ `::first-line` の厳格な制限事項

さて、ここからがシニアとしての本当の助言だ。
`::first-line` は便利だが、CSS仕様（CSS Pseudo-Elements Module）において、適用できるプロパティに明確な制限がある。ここを勘違いしていると、「あれ、なんでこのスタイル効かないんだ！？」とデベロッパーツールを睨みつける夜を過ごすことになる。

使えるプロパティは、基本的に以下のカテゴリに限られる。

1. フォント関連 (`font`, `font-style`, `font-weight`, `font-size`, `line-height`, `font-family` など)
2. 色・背景関連 (`color`, `background-`系)
3. テキスト装飾・レイアウト関連 (`text-decoration`, `text-transform`, `letter-spacing`, `word-spacing`, `vertical-align` など)

ハマりポイント：ボックスモデル系はほぼ効かない

ここに罠がある。`margin`, `padding`, `border`, あるいは `display: block` や `float` といった、ボックスの大きさを変えたりレイアウトをいじるプロパティは、`::first-line` に対して指定しても無視される（あるいは仕様上エラー扱いになる）。

たとえば、「最初の行だけ下にマージンを空けたい」と思って `margin-bottom: 1rem;` と書いても、微塵も動かない。最初の行はあくまで「テキストの流し込みの一部」であり、独立したブロックボックスではないからだ。この仕様の壁を理解していないと、無駄なCSSを書いて時間を溶かすことになる。

—

4. 継承と詳細度の罠

もう一つ、現場でよくある事故が「スタイルの継承」に関する挙動だ。

`::first-line` に設定したプロパティは、その行に含まれるインライン要素（例えば `` や ``）にも継承される。だが、もしそのインライン要素側に直接別の色が指定されていた場合、詳細度（Specificity）のルールによって `::first-line` のスタイルが上書きされてしまうことがある。