なぜかズレる…！インライン要素の「ベースライン問題」をスッキリ解決しよう
Web制作を始めたばかりの皆さん、こんにちは。CSSでデザインを組んでいると、こんな経験はありませんか？
「画像とテキストを並べただけなのに、なぜか下に隙間ができる」
「`vertical-align` を指定したのに、思った位置に文字が収まらない」
これ、実はプロの現場でも初心者の頃に誰もが一度は頭を抱える「CSSの七不思議」の一つなんです。でも安心してください。これはあなたのセンスが悪いわけでも、コードが間違っているわけでもありません。単に「ベースライン」というインライン要素の秘密のルールを知らないだけなんです。
今回は、この「インライン要素のモヤモヤ」を、身近な例えを交えて紐解いていきましょう！
—
1. 文字は「ノートの罫線」の上に乗っている
まずはイメージしてみましょう。インライン要素（`span` や `a` など）は、もともと「文章の一部」として生まれてきました。
みなさんが小学生の頃に使っていた「国語のノート」を思い出してください。文字を書くとき、一番下の線に足を揃えて書きますよね？ CSSの世界でも全く同じで、すべての文字は「ベースライン」という見えない線の上に座っています。
なぜ「隙間」が生まれるのか？
画像（`img`）やインライン要素を並べると、ブラウザは「こいつらは文字の一種だな」と判断します。そして、「画像の下端」ではなく「ベースライン（文字の足元）」を基準に揃えようとします。
しかし、アルファベットの「g」や「y」のように、足がベースラインの下にはみ出す文字があるため、ブラウザは「はみ出し分」を見越して、ベースラインの下に少しだけ余分なスペース（デセンダント領域といいます）を確保します。これが、画像の下にできる「謎の隙間」の正体です。
—
2. vertical-alignは「上下の整列係」
このベースライン問題を解決する魔法の道具が `vertical-align` です。
よく「中央揃えにするためのプロパティ」と思われがちですが、厳密には「親要素（行）のベースラインに対して、自分をどこに配置するか」を決める係員さんなんです。
よく使う値をイメージで覚えてしまいましょう。
- `baseline` (初期値): 「ノートの線に足を揃える」。基本はこれです。
- `middle`: 「背の高さの中央を、親要素の中央に合わせる」。アイコンと文字を並べる時によく使います。
- `top` / `bottom`: 「自分の頭（または足）を、行の一番上（または一番下）に合わせる」。
—
3. 実践！レイアウト崩れを防ぐ魔法のコード
では、実際にどう書けばいいのか見てみましょう。今回は「アイコンとテキストを綺麗に並べる」という、現場で最もよくあるパターンで解説します。
メニューの項目
現場の知恵：なぜ `vertical-align: middle` なのか？
多くの初心者がここでつまずくのは、`line-height`（行の高さ）との関係です。
`line-height` を大きくすると、ノートの罫線が上下に引き伸ばされるようなイメージを持ってください。その広い空間の中で、アイコンを「真ん中（middle）」に配置することで、テキストとアイコンの視線がピタリと揃うわけです。
—
最後に：完璧を目指さなくて大丈夫
ここまで読んで「うわ、奥が深いな…」と感じた方もいるかもしれません。でも、全部を完璧に暗記する必要はありません。
- 「隙間ができたら、まずは `vertical-align` を疑う」
- 「画像にはとりあえず `display: block` をあてて隙間を消すという荒技もある」（※これも現場でよく使うテクニックです！）
これだけ覚えておけば、大抵のトラブルは乗り越えられます。CSSは、ブラウザという「少し気難しい相棒」と対話しながら、理想の配置を見つけていくパズルのようなものです。
うまくいかない時は、まずは「ノートの罫線」をイメージして、優しく調整してあげてくださいね。あなたのWeb制作ライフが、少しでも快適で楽しいものになりますように！応援しています！
コメント