概要
vertical-alignプロパティは、CSSで要素を縦方向に配置するためのプロパティです。主にインライン要素、インラインブロック要素、テーブルセルの内容の垂直位置を制御するために使用されます。画像とテキストの配置を揃えたり、テーブルセル内のコンテンツの位置を調整したりする際に非常に便利です。このプロパティをうまく使うことで、ウェブページのデザインがより洗練されたものになります。
vertical-alignの基本
vertical-alignプロパティは、要素を縦方向に配置する位置を指定します。インライン要素やインラインブロック要素の配置だけでなく、テーブルセル内のコンテンツの縦方向の位置を調整することも可能です。
vertical-alignの構文
.element {
vertical-align: <alignment>;
}
<alignment>には、以下のさまざまな値を指定できます。
主な値
baseline（デフォルト）: 要素を基準線に揃えます。middle要素を行の中央に揃えます。top要素を行の最上部に揃えます。bottom要素を行の最下部に揃えます。text-topテキストの最上部に揃えます。text-bottomテキストの最下部に揃えます。sub下付き文字の位置に配置します。super上付き文字の位置に配置します。%やpxなどの数値: 特定の高さに基づいて配置を調整します。
vertical-alignの使用例
画像とテキストの垂直位置を揃える
vertical-alignは、インライン要素の縦位置を調整するのに便利です。例えば、テキストとアイコンが並んでいる場合、vertical-align: middle;を使うと両者が中央揃えになり、見た目が整います。
使用例
span {
vertical-align: middle;
}
img {
vertical-align: middle;
height: 20px;
}
<p>
<img src="icon.png" alt="アイコン">
<span>テキストとアイコンが中央揃えされています。</span>
</p>
この設定では、画像とテキストが同じ行の中央に揃えられ、視覚的にバランスの取れたレイアウトが実現します。
テーブルセル内のコンテンツを中央揃えにする
vertical-alignはテーブルセル内の要素の配置にも使用されます。middleを使用すると、セル内のコンテンツが縦方向に中央揃えされます。
使用例
td {
vertical-align: middle;
border: 1px solid #ccc;
height: 100px;
width: 200px;
}
<table>
<tr>
<td>中央に配置されたテキスト</td>
</tr>
</table>
この設定では、セル内のテキストが垂直方向に中央に配置され、均等な空間が保たれます。
上付き文字や下付き文字の配置
vertical-alignを使用すると、数式や化学式などで頻繁に使用される上付き文字（super）や下付き文字（sub）の配置が可能です。
使用例
.sup {
vertical-align: super;
font-size: 0.8em;
}
.sub {
vertical-align: sub;
font-size: 0.8em;
}
<p>H<sub class="sub">2</sub>O と E = mc<sup class="sup">2</sup></p>
この例では、化学式や数式の上付き・下付き文字が適切に配置され、読みやすさが向上します。
vertical-alignの使いどころと利点
インライン要素の見た目を整える
vertical-alignを使うことで、インライン要素やインラインブロック要素の垂直位置を簡単に調整できます。これにより、画像とテキストの位置が整い、デザインの一貫性が保たれます。
テーブル内のデータの視認性向上
テーブル内のデータを縦方向に適切に配置することで、情報が見やすくなり、視認性が向上します。特に、テーブルセル内のテキストや画像の中央揃えは、レポートやデータ表の読みやすさを高める効果があります。
上付き・下付き文字の配置を簡単に
上付き文字（super）や下付き文字（sub）の配置を簡単に制御できるため、数式や注釈を含む文書に適しています。CSSだけで縦位置の調整が可能なので、HTML構造をシンプルに保てます。
vertical-align使用時の注意点
ブロック要素には無効
vertical-alignは、主にインライン要素やテーブルセル内で使用されるプロパティであり、ブロック要素には適用されません。ブロック要素の縦方向の位置を調整する場合は、flexboxやgridなどの他のレイアウト手法を使う必要があります。
要素間の配置に影響を与える
vertical-alignは要素の基準線に影響を与えるため、隣接する要素との間に予期せぬスペースが生じることがあります。このため、特に画像とテキストを並べる際には、レイアウト全体を確認しながら調整することが重要です。
まとめ
vertical-alignプロパティは、インライン要素やテーブルセル内の要素の縦方向の配置を調整するための便利なツールです。このプロパティを使うことで、要素同士の位置関係を整え、より美しいレイアウトを実現できます。インライン要素やテーブルのデザイン調整に悩んでいる場合は、ぜひvertical-alignを試して、視覚的にバランスの取れた配置を目指してみてください。