なぜかズレる…！CSSの「vertical-align」で、テキストとアイコンを美しく整列させる魔法
Web制作を始めたばかりの頃、誰もが一度は「あれ？なんでこれ、微妙に上に浮いてるの？」という壁にぶつかりますよね。
特に、テキストの横に小さなアイコンを置いたり、ボタンの中に文字を入れたりしたとき。「CSSで指定しているはずなのに、なぜか微妙に上下の位置がズレる」という経験、ありませんか？
実はこれ、CSSの`vertical-align`というプロパティが深く関わっています。今日は、この少しだけクセのある、でも使いこなすと最強の味方になる「垂直配置」の世界を、一緒に紐解いていきましょう！
—
そもそも「行ボックス」って何者？
`vertical-align`を理解するための第一歩は、「行ボックス」という概念を知ることです。
想像してみてください。ノートに文字を書くとき、私たちは「罫線」の上を基準に文字を並べますよね。CSSの世界でも同じで、ブラウザは文字を並べるための「仮想的なライン」を引いています。
- ベースライン: 文字が座っている地面のような線
- 行の高さ: 行間を含めた、ひとつの行が占めるスペース
`vertical-align`は、「この行という名のステージの上で、自分をどの高さに立たせるか？」を決めるための指示書なんです。
—
実践！よく使う設定を「お買い物」に例えると？
初心者さんが最初につまずきやすい値を、身近な例えで整理してみましょう。
1. `middle`：一番の売れっ子（中央揃え）
アイコンとテキストを横並びにするなら、まずはこれ。
「行の真ん中に合わせて！」という指示です。テキストが少し大きくても、アイコンが少し小さくても、お互いの中心線を揃えてくれるので、見た目が非常に安定します。
2. `baseline`：デフォルトの住人
何も指定しないと、ブラウザはこれを選択します。「文字の地面（ベースライン）に合わせる」というルールです。これのせいで、文字のベースラインに合わせてアイコンが沈み込み、結果として「なんかズレてる」現象が起きるんです。
3. `top` / `bottom`：端っこに座りたい
「行の一番高いところ（あるいは低いところ）に合わせて！」という指示です。親要素（囲んでいる枠）の高さギリギリに合わせたいときによく使います。
—
コードで確かめてみよう
実際に、テキストの横にアイコンを置いて、`vertical-align`で整列させる様子を見てみましょう。以下のコードをコピーして、HTMLファイルとして保存してみてくださいね。
こんにちは！私は真ん中にいます。
ここがポイント！
もし`vertical-align: middle;`を外してみると、アイコンが少し下に沈んで、テキストとのバランスが悪くなるのが分かるはずです。この「わずかな違和感」を補正できるのが、`vertical-align`の醍醐味なんです。
—
つまずいたときは「大丈夫！」と唱えて
`vertical-align`を触っていると、「なんで思った通りにならないの！」とイライラすることもあるかもしれません。でも、安心してください。それはあなたのコードが悪いのではなく、「インライン要素の性質が少し複雑だから」です。
うまくいかないときは、以下の3つをチェックする癖をつけてみてください。
1. `display: inline-block;`になっているか？（`div`などはそのままでは`vertical-align`が効きません！）
2. 親要素に`line-height`が効きすぎていないか？（行間が広すぎると、中央の位置も変わって見えます）
3. 要素の高さ（height）は適切か？
最初は完璧に理解しようとしなくて大丈夫です。「あ、なんかズレてるな」と思ったら、まずは`vertical-align: middle;`を試してみる。それだけで、あなたのWebサイトはグッとプロっぽく、洗練されたものに変わりますよ。
—
編集後記
Web制作の世界は、こういった「ちょっとしたズレ」との戦いです。でも、そのズレを一つずつ解消していく作業こそ、職人としての腕の見せ所。今日からあなたのツールボックスに、この「垂直配置の魔法」をぜひ加えてあげてくださいね。
また次回の記事でも、現場のリアルな知見を共有していきます。皆さんの制作ライフが、少しでも楽しくなりますように！
コメント