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

こんにちは！フロントエンド・チーフアーキテクトの私です。

CSSを書き始めたばかりの頃って、「あれ？このスタイル、なぜか一部分だけ適用されないな……」「なんだか思い通りに動いてくれない！」なんて壁にぶつから ofta（よく）ありませんか？

大丈夫ですよ。最初は誰だって「CSSの気まぐれ」に振り回されるものです。特に、今回お話しする`::first-line`（ファースト・ライン）擬似要素は、その優しさゆえに、ちょっとした「ツンデレ」な一面を持っているんです。

今日は、この`::first-line`がどんな子なのか、身近な例えを交えながら、一緒に楽しく紐解いていきましょう！

—

1. `::first-line`って、一体なにをしてくれるの？

まずはイメージを膨らませてみてください。
分厚い小説や、お気に入りの雑誌を開いたとき、「最初の1行目だけ、なぜか文字の雰囲気がちょっと違うな」と感じたことはありませんか？ 雑誌の冒頭などで、最初の行だけ文字が大きかったり、雰囲気がガラリと変わっていたりする、あれです。

あれをWebサイトでいとも簡単に出現させてくれるのが、この`::first-line`という魔法の杖（擬似要素）なんです。

たとえば、「長い文章のブロック（段落）があったとして、その最初の1行だけ文字色を赤くしたい、あるいは太字にしたい」というときに使います。

パッと見のイメージ

• 通常の文章：

昔々あるところに、おじいさんとおばあさんが住んでいました。山へは芝刈りに、川へは洗濯に……（以下略）

• `::first-line`を使った文章：

昔々あるところに、おじいさんとおばあさんが住んでいました。山へは芝刈りに、川へは洗濯に……（以下略）

「最初の行」を指定するだけで、それ以降の行には影響を与えません。なんだかちょっと特別感があって、おしゃれなWebサイトを作るには欠かせないテクニックなんですよ。

—

2. 実際にコードを書いてみましょう

百聞は一見に如かず。実際に手を動かして、その動きを見てみましょう。
以下のコードを、あなたのエディタ（VS Codeなど）にコピーして、ブラウザで開いてみてくださいね。

CSSの世界へようこそ！この文章は、::first-lineの動きをテストするためのものです。
画面の幅を広げたり縮めたりしてみてください。
不思議なことに、折り返し位置が変わっても、常に「その瞬間の最初の1行」だけが赤く太字になるはずですよ。
焦らず、ゆっくりと確認していきましょうね。

ここで、すごく重要なポイントに気づきましたか？
そう、「画面の大きさを変えて、文章の折り返し位置が変わっても、ブラウザが自動的に『今の最初の1行』を見つけ出してスタイルを当て直してくれる」んです。人間が手動でタグを付け替える必要なんてありません。ブラウザって本当に優秀ですよね！

—

3. ちょっと待って！つまずきやすい「制限事項」と優しいお付き合いのコツ

さて、ここからがチーフアーキテクトとしての「現場のリアルな知見」のお時間です。
この`::first-line`さん、実は少しだけ「こだわり（制限）」が強いところがあります。ここを知らないと、「あれ、効かない！バグだ！」と迷子になってしまうので、一緒に優しく押さえておきましょう。

① 使えるプロパティが決まっている

何でもかんでも自由にいじれるわけではありません。主に使えるのは以下のような「テキスト（文字）に関するスタイル」です。

• `color`（文字色）
• `font`系（フォントの太さや大きさ、種類など）
• `background`系（背景色）
• `text-decoration`（下線など）
• `letter-spacing` / `word-spacing`（文字や単語の間隔）

逆に言うと、「ブロック自体の大きさを変えるようなプロパティ（`margin` や `padding` など）」は、ほぼ効きません。 「あ、この子は文字をドレスアップするのが仕事なんだな」と優しく見守ってあげてください。

② ブロックレベル要素にしか使えない

ここ、初心者さんが一番ハマりやすいポイントです！
`::first-line`は、ブロックレベル要素（`

`タグや `