「なぜかズレる」を卒業しよう！CSSの `vertical-align` で要素の配置を自由自在に操るコツ
Web制作を始めたばかりの頃、誰もが一度は「あれ？なんで隣のアイコンと文字の高さが微妙にズレてるの？」と頭を抱えた経験があるはずです。
文字の横にアイコンを置いたり、小さな注釈を添えたりしたとき、まるで積み木がうまくハマらないようなもどかしさ。その正体こそ、今回解説する `vertical-align` です。
正直に言います。このプロパティ、CSSの中でもトップクラスに「直感に反する挙動」をします。でも大丈夫。仕組みさえ分かってしまえば、もうレイアウトのズレにイライラすることはありません。一緒に紐解いていきましょう！
—
そもそも、なぜ「ズレる」のか？
私たちは普段、文字を「行」として見ていますが、CSSの世界では文字は「ベースライン（文字が乗っかる見えない線）」という基準線の上に整列しています。
`vertical-align` を理解する鍵は、「誰を基準にして、どこに合わせるか？」という視点を持つことです。
代表的なキーワードたちの正体
`vertical-align` に指定できる値はたくさんありますが、現場でよく使うものから順に見ていきましょう。
- `baseline`（初期値）: 文字の足元を揃えます。アルファベットの「a」や「e」の下線部分ですね。
- `middle`: 要素の「中央」を、親要素の「ベースライン＋x-heightの半分」に合わせます。「うわ、ややこしい！」と思いましたよね？ 簡単に言うと「だいたい真ん中」です。アイコンを文字の隣に置くならこれ一択です。
- `top` / `bottom`: その行の中で「一番背が高い要素」の天辺、または底辺に合わせます。
- `sub` / `super`: 添字（化学式の $H_2O$ の「2」など）を下げたり上げたりします。
—
実際に動かしてみよう
まずは、初心者が最もつまずきやすい「アイコンとテキスト」のズレを解消するコードを書いてみましょう。
設定メニュー
どうでしょう？ `vertical-align: middle;` を指定しただけで、アイコンと文字が綺麗に整列しましたよね。これだけで、Webサイトの「手作り感」が消えて、グッとプロっぽくなります。
—
使い分けのヒント：まるで「本棚の整理」
このプロパティを理解する一番の近道は、「本棚の整理」に例えることです。
- `baseline` は、本棚の棚板に本を揃えて置くイメージ。これが一番安定します。
- `middle` は、背の高さが違う本を、中心線で無理やり揃えるイメージ。多少の誤差は出ますが、視覚的には一番バランスが良いです。
- `top` / `bottom` は、大きな絵本に合わせて、小さな文庫本を上端や下端に引っ掛けるイメージです。
—
つまずいた時のチェックリスト
もし「指定したのに動かない！」という時は、以下の2点を疑ってみてください。
1. 要素は `inline` か `inline-block` か？
`vertical-align` は、ブロック要素（divやpなど）には効きません。もし効かないなら、CSSで `display: inline-block;` を追加してあげてください。
2. 親要素の高さは適切か？
`top` や `bottom` は「その行で一番背が高いもの」に引きずられます。もし予期せぬズレ方をしたら、どこかに巨大な画像やフォントが隠れていないか確認しましょう。
—
最後に：完璧主義を少し手放そう
実務の現場でいうと、`vertical-align` は完璧に計算して合わせるというより、「目で見て気持ちいい位置に微調整する」という側面が強いです。
もし数ピクセルのズレがどうしても気になるなら、`vertical-align` に `px` で数値を指定することもできます（例：`vertical-align: -2px;`）。これも立派なテクニックです！
最初は難しく感じるかもしれませんが、今日から「あ、これはベースラインの話だな」「ここは middle でいけそうだな」と意識するだけで、あなたのコーディングの精度は間違いなく一段階アップします。
焦らず、少しずつ体で覚えていきましょう。応援しています！
コメント