【実務・中級編】::first-line擬似要素によるテキスト装飾 – HTML実践ガイド

CSSの隠れた名手「::first-line」を使いこなす：現場で役立つタイポグラフィの演出術

フロントエンドの世界には、知っているようで意外と「境界線」が曖昧なCSS仕様がいくつか存在します。その代表格が、今回取り上げる `::first-line` 擬似要素です。

「ブロック要素の最初の1行だけを変えるやつでしょ？」という認識で止まっているなら、非常にもったいない。このセレクタを正しく理解し、ブラウザのレンダリングの仕組みを把握しておけば、デザイナーから「この段落の冒頭だけ、少し強調してくれない？」という無茶振り（いや、繊細な要望）が来たときも、HTMLを汚さずにスマートに解決できるようになります。

今回は、中級エンジニアなら押さえておきたい `::first-line` の深淵と、現場で使える実装パターンを解説します。

—

1. ブラウザは「最初の1行」をどう定義しているのか

まず、ここを理解していないと痛い目を見ます。`::first-line` は、DOM上の「最初の行」を指しているわけではありません。「その時のウィンドウ幅やフォントサイズによって、動的に計算されたレンダリング結果の最初の1行」を指します。

つまり、ブラウザのレイアウトエンジンがリフロー（再計算）を行うたびに、`::first-line` の適用範囲は刻々と変化します。

技術的な制約：何が使えて、何が使えないのか

すべてのCSSプロパティが `::first-line` で使えるわけではありません。仕様上、以下のプロパティが適用可能です。

• フォント関連: `font`, `font-style`, `font-variant`, `font-weight`, `font-size`, `line-height`, `font-family` など
• 色関連: `color`
• テキスト装飾: `text-decoration`, `text-transform`, `letter-spacing`, `word-spacing`
• その他: `background`（背景色も可）、`vertical-align` など

逆に、`margin` や `padding`、`display` プロパティなどは指定しても無視されます。これは、`::first-line` が「インラインボックスの一部」として扱われるためです。ここを勘違いして「最初の行だけマージンを空けたい」と試行錯誤するのは、多くのエンジニアが通る「初心者の壁」の一つですね。

—

2. 実践：現場で使える洗練されたタイポグラフィ

では、実際の現場でどう使うのが「プロっぽい」のか。単に色を変えるだけでは芸がありません。例えば、記事のリード文（イントロダクション）において、最初の1行を「リード文らしく」際立たせる手法を紹介します。

/ 記事のリード文を想定したスタイル /
.article-lead {
font-size: 1.1rem;
line-height: 1.8;
color: #333;
}

/ 最初の行だけを際立たせるスタイル設定 /
.article-lead::first-line {
/ 太字にして視認性を高める /
font-weight: 700;
/ 大文字変換（英語テキストの場合に有効） /
text-transform: uppercase;
/ 少しだけ色を濃くしてメリハリをつける /
color: #000;
/ 余裕があれば文字間隔を調整 /
letter-spacing: 0.05em;
}

なぜこの実装が良いのか

このアプローチの最大のメリットは、マークアップを汚さないことです。もしこれを `` タグで囲んでクラスを当てようとすると、レスポンシブ対応（画面幅が変わったときに、どこで改行されるか分からない）が極めて困難になります。CSSだけで完結させることで、デバイスを選ばない堅牢なUIが実現できます。

—

3. 注意点：ここだけは気をつけて！

最後に、実務でハマりやすい罠を共有しておきます。

1. ブロック要素限定: `::first-line` は `display: block`, `inline-block`, `table-cell`, `list-item` などのブロック系要素に対してのみ機能します。`inline` 要素に指定しても期待した動作はしません。
2. 擬似要素との組み合わせ: `::before` や `::after` との兼ね合いには注意が必要です。`::before` で挿入したコンテンツも「最初の行」に含まれます。つまり、`::before` でアイコンを挿入し、`::first-line` で色を変えると、そのアイコンまで色が引きずられることがあります。
3. 継承の優先順位: `::first-line` に指定されたスタイルは、その要素内の子要素（例えば `` など）のスタイルよりも優先度が高くなります。予期せぬ上書きが発生していないか、Chromeのデベロッパーツールでしっかりと確認する癖をつけてください。