こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。
CSSを書き始めた頃って、いろんなプロパティやセレクタがあって、まるで巨大な遊園地に来たみたいにワクワクしますよね。でも同時に、「あれ、これどうやって指定するんだっけ？」「なんか思い通りにならないな……」と、ちょっとした壁にぶつかることも多いはず。大丈夫です、みんな最初はそこで立ち止まるんです。私なんて、昔は`margin: 0 auto;`の意味が分からなくて夜も眠れなかった時期がありますから（嘘です、ぐっすり寝てました）。
さて、今回はそんなCSSの旅路の中で、知っているとちょっと自慢できて、しかもパッと見のデザインを一気に「プロっぽく」格上げしてくれる魔法のような機能――`::first-letter`（ファーストレター）擬似要素についてお話ししましょう。
雑誌の最初の一文字目だけが、下の行までドンと大きく沈み込んでいるデザイン、見たことありませんか？あれです、アレ。「ドロップキャップ」と呼ばれる技法ですが、これ、実はCSSだけで、しかもほんの数行で実現できちゃうんです。一緒に紐解いていきましょう！
—
1. `::first-letter`って一体なに？（お買い物のレシートで例えてみる）
まずは、この長ったらしい名前の正体から。
`::first-letter`は、一言でいうと「ブロックレベル要素の、一番最初の文字だけをこっそり捕まえて、別のスタイルの服を着せちゃう」という強力な擬似要素です。
イメージしてみてください。
スーパーでのお買い物のレシートを思い浮かべてほしいのですが、一番上にある「お店の名前」や「日付」って、他の一列に並んだ商品名や値段よりも、なんとなく文字が大きかったり、太かったりしますよね。あんなふうに、文章の塊（ブロック）の先頭にある文字だけを、スポットライトを当てるように個別につまみ食いできちゃうんです。
これの何が嬉しいって、HTMLの構造を汚さずに済むところ。
「最初の1文字だけを大きくしたいから、わざわざHTML側で`あの日は……`なんて書く必要は一切ありません。CSSくんが、文章の先頭を勝手に見つけてビシッと装飾してくれます。HTMLはシンプルに、見た目はリッチに。これがモダンなWeb制作の美学です。
—
2. 実践！ドロップキャップ（沈み込み頭文字）を作ってみよう
百聞は一見に如かず。実際にコードを書いて、あの雑誌の表紙のような「ドロップキャップ」を自分の手で作り上げてみましょう。
以下のコードを、そのままあなたのお手元のエディタにコピペして試してみてください。
むかしむかし、あるところに、CSSのコードを書くのが大好きな見習いエンジニアがいました。彼女は日夜、どうすれば美しいレイアウトが組めるのか、画面とにらめっこしながら頭を悩ませていました。ある日のこと、彼女は『::first-letter』という不思議な呪文に出会います。
ブラウザでプレビューしてみましたか？
「む」の文字がガッツリと大きく表示され、2行目以降がその右側に回り込みながら綺麗に収まっているはずです。
ちょこっと解説：なんで `float: left;` が必要なの？
ここで「あれ？」と思ったあなたは鋭い！
実は、`font-size`で文字を大きくしただけだと、その文字だけ背が高くなってしまい、1行目の行間が不自然に広がっちゃうんです。
そこで登場するのが `float: left;` です。文字を「浮かす」ことで、まるで重力があるかのように、下の行へズブズブと沈み込んでいく（ドロップする）ようになります。これがドロップキャップの秘密のタネなんですね。
—
3. 初学者がハマりがち？ `::first-letter` の注意点と優しいお助けヒント
現場でCSSを触っていると、「あれ、効かないぞ？」という瞬間に出くわします。`::first-letter`も、いくつか「お行儀のルール」があるデリケートな子です。つまずきやすいポイントを先回りしてシェアしておきますね。
① インライン要素には効きません（ブロックレベルのお話です）
``タグのようなインライン要素に対して直接 `::first-letter` を指定しても、残念ながら効果を発揮してくれません。基本的には `
` タグや `
`など）といったブロックレベル要素（またはそれに準ずる要素）の内部にあるテキストに対して使います。 「文字を装飾したいときは、その親玉のブロック要素を指定するんだな」と覚えておいてください。 ② 先頭の文字の「前に」何かがあると……？
もし、段落の先頭に「ダブルクォーテーション（“）」や「かっこ（「）」があったり、あるいはCSSの `::before` 擬似要素でアイコンなどを無理やり挿入していたりすると、ブラウザによってはその記号自体を「最初の1文字」とカウントしてしまいます。
“昔々、あるところに……”
もし意図した文字（今回の場合は「昔」）にスタイルが当たらないときは、HTMLの書き方や、記号の扱いを少しだけ疑ってみてくださいね。「あ、記号を先にカウントしちゃってるんだな」と気づければ、もうCSS中級者の仲間入りです！
—
4. おわりに：小さなしつらえが、Webサイトを愛おしくする
お疲れ様でした！今回は `::first-letter` を使ったドロップキャップ表現についてお話ししました。
たかが「最初の1文字」、されど「最初の1文字」。
こういう細部へのこだわりや、「ちょっと読んでみたいな」と思わせる視覚的なリズム感の演出こそが、味気ないテキストの羅列だったWebページを、まるで美しい雑誌の1ページのような、愛おしい作品に変えてくれるんです。
最初はうまく動かなくても大丈夫。エラーが出るたびに、「お、CSSがまた新しいことを教えてくれたぞ」と面白がってあげてください。あなたのWeb制作の引き出しが、この小さな魔法で少しでも豊かになれば、チーフアーキテクトとしてこれほど嬉しいことはありません。
それじゃあ、また次の現場でお会いしましょう！Happy Coding!
コメント