こんにちは！フロントエンドの世界へようこそ。
HTMLとCSSを学び始めると、誰もが一度は「あれ、なんでこのアイコンと文字、微妙にズレてるの？」と頭を抱える瞬間が訪れます。特に、`vertical-align`というプロパティは、CSS界の「魔法の杖」のようでいて、実は一番の「迷宮」になりがちですよね。
今日は、そんなインライン要素の垂直配置のナゾを、身近な例えを交えながら解き明かしていきましょう。大丈夫、仕組みさえ分かればもう怖くありませんよ！
—
1. 文字は「ノートの罫線」の上に乗っている
まず、想像してみてください。Webブラウザの中にあるテキストやインライン要素（`span`や`img`など）は、「見えないノート」の上に配置されています。
このノートには、中心の「ベースライン（基準線）」という線が引かれています。アルファベットの「a」や「e」の下側がピタッと乗っかるあの線ですね。`vertical-align`のデフォルト値である`baseline`は、まさにこの線に合わせて要素を並べる、という指示なんです。
- baseline: ノートの基準線に合わせる（基本！）
- middle: 要素の「中央」を、行の高さのちょうど真ん中に合わせる
- top: 行ボックスの一番高い位置に合わせる
- bottom: 行ボックスの一番低い位置に合わせる
—
2. なぜ「middle」にしても真ん中に来ないことがあるの？
ここが一番のつまずきポイントです。「`vertical-align: middle;`を指定したのに、なんか上に寄ってる気がする…」そんな経験はありませんか？
実は、`middle`は「行全体の中央」ではなく、「文字の高さ（x-height）の中央」に合わせようと頑張る性質があるんです。そのため、隣り合う要素の大きさが違うと、計算の基準がズレてしまい、意図した「真ん中」から外れてしまうんですね。
料理で例えるなら、背の高いパフェグラスと、背の低いティーカップを無理やりお盆に乗せて「真ん中で揃えて！」と指示しているようなもの。高さが違うものを並べる時、基準になる線がどこかによって結果が変わるのは当然のことなんです。
—
3. 実践！アイコンとテキストを綺麗に並べる
では、実際にアイコンとテキストを並べるコードを見てみましょう。ここでは、CSSの`inline-block`を活用して、高さをコントロールしやすくするのがコツです。
お気に入りに追加
このコードのポイント
- `display: inline-block`: `span`のようなインライン要素に「幅や高さを持てる」という能力を付与しています。これで垂直配置の計算がしやすくなります。
- `vertical-align: middle`: 両方の要素に適用することで、お互いの「中央」を合わせようとするため、ガタつきが解消されます。
—
4. 最後に：完璧を求めすぎない勇気も大切
Webの世界は、OSやブラウザの種類によって微妙にフォントの描画が異なります。つまり、「1ピクセルたりとも狂いなく揃える」ことは、実は非常に難易度が高いのです。
もし、どうしても微調整がうまくいかないときは、`vertical-align`で無理やり合わせようとせず、`Flexbox`という別の「強力な武器」を使うのも一つの手です。
「今日はうまくいかなかったな」と思っても、それはあなたのせいではありません。ブラウザという名の複雑なシステムが、今日も一生懸命計算してくれている証拠です。
まずは、`baseline`と`middle`の違いを理解できただけで、あなたはもう一歩前進しています！また壁にぶつかったら、いつでもここに戻ってきてくださいね。一緒に少しずつ、理想のレイアウトを作っていきましょう。
コメント