CSSの「行間」で迷子になっていませんか？ `line-height`とインラインボックスの不思議な関係
こんにちは！Web制作の世界へようこそ。
CSSを学び始めて、真っ先にぶつかる「謎の余白」問題。特に、テキスト周りの高さや行間の調整で、「あれ？思った通りに広がってくれないぞ？」と首をかしげた経験はありませんか？
実は、Webのテキストは私たちが思っている以上に「几帳面な箱」の中に詰め込まれています。今日は、`line-height`という魔法の杖を使って、その「見えない箱」の正体を解き明かしていきましょう。大丈夫、ひとつずつ紐解けば決して難しくありませんよ！
—
1. 文字は「透明な箱」に入っている
まず、想像してみてください。Webページ上の文字は、ただそこに浮いているわけではありません。「コンテンツエリア」と呼ばれる、文字ギリギリのサイズの透明な箱に包まれています。
`span`や`strong`といったインライン要素を並べるとき、ブラウザは「この文字の箱」を横に並べていくわけですが、ここで登場するのが「行間（leading）」です。
`line-height`の正体は「行の高さ」そのもの
`line-height`は、単なる「行間」のことではありません。「文字の箱」の高さをどれだけにするかを決めるプロパティです。
- 文字の高さ（font-size）：16px
- line-height：24px
こう設定した場合、ブラウザは「16pxの文字の上下に、合計8pxの余白（リード）を足して、24pxの背の高い箱を作ろう！」と計算します。この上下に配分された余白こそが、私たちが目にする「行間」の正体なんです。
—
2. なぜ「インライン要素」で高さがズレるの？
ここが一番のつまずきポイントです。例えば、`strong`タグで文字を強調したときや、`code`タグでプログラムっぽく装飾したとき、なぜか親要素の高さが変わってしまったことはありませんか？
それは、インライン要素の高さが「その中身（文字やアイコン）」と「line-height」の組み合わせで決まるからです。
視覚的なイメージ：お弁当箱の詰め合わせ
インライン要素は、さながら「お弁当箱」です。
- `font-size`は、中身の具材の大きさ。
- `line-height`は、お弁当箱そのものの高さ。
もし、ある要素だけ`line-height`を大きくしてしまうと、その部分だけお弁当箱が縦にビヨーンと伸びてしまいます。すると、隣り合う要素とのバランスが崩れて、レイアウトがガタガタになってしまう……というわけですね。
—
3. 実践してみよう！コードで確認する「高さ」のルール
では、実際にブラウザでどう見えるか、以下のコードで実験してみましょう。メモ帳やエディタに貼り付けて試してみてくださいね。
この黄色い背景の部分が、インラインボックスの高さです。
ここでのポイント：
背景色（`background`）をつけてみると、「どこまでがその要素の支配領域か」が一目瞭然になります。`line-height`をいじると、青い枠の高さ（親要素）も一緒に伸びていることに気づくはずです。
—
4. つまずいたときの「お助けヒント」
最後に、Web制作の現場でよく使われる「魔法のテクニック」をひとつだけ伝授します。
もし、「行間は広げたいけれど、要素の高さが伸びるのが邪魔だな」と感じたら、`display: inline-block;` を検討してみてください。これを使うと、インライン要素でありながら、`padding`や`height`を自由自在に操れるようになります。
まとめ：難しく考えすぎないで！
- `line-height`は「文字の箱」のトータルサイズを決めるもの。
- インライン要素は、中身と`line-height`で背の高さが決まる。
- 困ったら背景色をつけて「箱の形」を覗いてみる。
Webデザインの世界は、こうした「見えない箱」の積み木遊びです。最初は計算が合わなくてイライラすることもあるかもしれませんが、それはあなたが正しくレイアウトしようと頑張っている証拠。
まずは小さな要素から、背景色をつけて「箱の形」を観察する癖をつけてみてください。「あ、ここが余白の元凶だったのか！」と気づいた瞬間、CSSがもっと好きになれるはずですよ。
それでは、素敵なコーディングライフを！また次の記事でお会いしましょう。
コメント