【入門編】vertical-alignプロパティの挙動とインライン要素 – HTML実践ガイド

こんにちは！Web制作の学習、順調に進んでいますか？
HTMLとCSSを触り始めると、必ず一度はこんな悩みにぶつかりますよね。

「文字の横にアイコンを置いたのに、なぜか微妙に上に浮いている……」
「`vertical-align: middle` って書いたのに、全然中央に来ないじゃないか！」

そのイライラ、実はあなたが悪いわけではありません。CSSの `vertical-align` は、Web制作の歴史の中でも「もっとも誤解されやすいプロパティ」の代表格なんです。

今日は、この「垂直方向のモヤモヤ」を、身近な例えを使ってスッキリ解決していきましょう。

—

私たちが普段使っているテキストは、「仮想的な線」の上に乗っています。これを専門用語で「ベースライン」と呼びます。

ノートの罫線を想像してみてください。アルファベットの「a」や「c」は線の上に乗り、「g」や「p」は線から下に突き出しますよね。ブラウザは、この「ベースライン」を基準に、インライン要素（`span` や `img`、`a` タグなど）を整列させようと必死なんです。

`vertical-align` は、この「線」に対して、要素をどう配置するかを決めるためのもの。だからこそ、「基準となる線がどこにあるか」を理解するのが、攻略の近道です。

—

`vertical-align` でよく使われる値を、日常の風景に例えてみますね。

「文字の足元を揃える」状態です。多くの要素はここがデフォルト。でも、画像と文字を並べると、画像の下に少し隙間ができることがありませんか？あれは、画像が「文字のベースライン」に合わせて配置されるため、下に「文字が降りてくるための余白」が確保されているからなんです。

これが一番誤解されやすい！「親要素のど真ん中」ではありません。実は「文字の高さの、真ん中あたり」に合わせるという指定です。「要素を、文字の平均的な高さの真ん中に合わせる」という、かなり謙虚な挙動なんです。

これはイメージしやすいですよね。その行の中で「一番背の高い要素」を基準にして、上端か下端を揃えます。

—

百聞は一見にしかず。コードを書いて、ブラウザで確認してみましょう。

vertical-alignを試してみよう！

どうでしょう？アイコンが文字の少し中央寄りに配置されましたよね。でも、完璧に親要素の真ん中ではないはずです。

—

実は、プロの現場で「要素を親要素のど真ん中に配置したい」と思ったとき、最近では `vertical-align` を使わないことが多いです。

なぜなら、もっと強力で簡単な 「Flexbox（フレックスボックス）」 という魔法があるからです。

.container {
display: flex; / フレックスボックスを使うぞ！という宣言 /
align-items: center; / これだけで、中身が全部「垂直中央」に揃う /
}

「なんだ、`vertical-align` は使わなくていいの？」と思われるかもしれませんが、大丈夫。`vertical-align` は、「文章の中に、小さなアイコンやタグを自然に混ぜたい時」の微調整役として、今でも現役で活躍する大切なスキルです。

—

Web制作を始めたばかりの頃、レイアウトが崩れると「自分にはセンスがないのかな」と落ち込んでしまうこともあるかもしれません。でも、安心してください。

この `vertical-align` やベースラインの概念は、ブラウザが文字を美しく表示するために何十年もかけて培ってきた「知恵」そのものです。複雑で当たり前なんです。

まずは「あ、今自分はベースラインと格闘しているんだな」と気づくだけで、もうあなたは一歩前進しています。うまくいかなくても、少しコードをいじって、ブラウザの表示が変わるのを楽しむ。その繰り返しが、いつの間にかあなたの「確かな技術」になっていきますよ。

またいつでも、この場所へ相談しに来てくださいね。あなたのWeb制作ライフを応援しています！