こんにちは！フロントエンドの世界へようこそ。
HTMLを書き始めると、必ず一度はぶつかる壁があります。そう、「なぜか要素が微妙にズレる問題」です。テキストの中にアイコンを入れたり、``タグで一部だけ色を変えたりしたとき、「あれ？なんか上に浮いてない？」「下の方が少し空いてない？」とモヤモヤした経験はありませんか？
今日は、そんなインライン要素の「垂直方向の迷子」を解決する魔法の杖、`vertical-align`のお話をしましょう。
—
そもそも「ベースライン」って何？
`vertical-align`を理解する一番の近道は、「文字には見えない足場がある」ことを知ることです。
ノートを想像してみてください。英語のノートには、アルファベットを書くための線が引かれていますよね？そのうち、小文字の「a」や「e」の底面が乗っかる線のことを、専門用語で「ベースライン（基線）」と呼びます。
Webブラウザも、インライン要素を配置するときは常にこの「ベースライン」を基準にしています。
- `baseline`（初期値）: 文字の足元を揃える。
- `middle`: 文字の高さの「ちょうど真ん中」を揃える。
- `top` / `bottom`: 行の中で一番背が高いやつの頂点、あるいは底点に合わせる。
これらを知るだけで、デザインのズレに対する恐怖心はグッと減るはずです。
—
「line-height」という見えない壁
ここで一つ、初心者が一番つまずきやすい罠を紹介します。それは`line-height`（行の高さ）です。
例えば、`line-height: 2;`のように行間を広げると、文字の上下に「余白」という名のスペースが生まれます。`vertical-align: middle`を指定したのに、期待通りに真ん中に来ない！というときは、大抵この「行の高さ」が影響しています。
例えるなら、満員電車です。
文字という乗客が、`line-height`という車両の中でどう立つか。`middle`を指定すると「車両の中央に立とう」としますが、そもそも車両そのもの（行の高さ）が広すぎると、どこが「真ん中」なのか感覚が掴みづらくなってしまうのです。
—
実践！アイコンとテキストを綺麗に揃える
よくある「テキストの横にアイコンを置く」というパターンで、`vertical-align`の効果を確かめてみましょう。
お知らせ:
★
明日はメンテナンスです！
ここがポイント！
1. `inline-block`にする: `span`のようなインライン要素は、そのままでは高さや幅を自由に変えられません。`display: inline-block`を当てて、「箱」としての性質を持たせることが先決です。
2. 両方に`middle`を当てる: 片方だけに当ててもうまくいかないことが多いです。揃えたい要素同士に同じ`middle`を当てることで、お互いに「真ん中で握手しよう」と合意してくれるイメージです。
—
大丈夫、最初はみんなズレるから！
「CSSで整列させる」というのは、ベテランのエンジニアでも「あれ、効かないな？」と首を傾げることがあるほど奥が深いテーマです。
もし思い通りにいかなくても、「今はどのラインを基準にしているのかな？」「行の高さ（line-height）が邪魔をしていないかな？」と一つずつ紐解いていけば、必ず解決策は見つかります。
最初はガチガチにルールを覚えようとせず、「お、今回は`middle`で上手くいった！」「あ、`top`にしたら揃った！」という成功体験を積み重ねてみてください。その小さな積み重ねが、気づいた時には「CSSのレイアウトなら任せて！」という自信に変わっているはずですよ。
それでは、また次回の記事でお会いしましょう。楽しいWeb制作ライフを！
コメント