CSSのボックス整列を完全ガイド！初心者でもわかるvertical-alignの使い方

ボックスの整列を整えるテクニック（vertical-align など）

先生と生徒の会話形式で理解しよう

生徒

「CSSで画像や文字の位置をそろえたいんですけど、なかなか思ったように整列できません。どうすればきれいにそろえられますか？」

先生

「ボックスを整列させるにはいくつかの方法があります。特にvertical-alignを使うと、縦方向の位置を簡単にそろえることができますよ。」

生徒

「vertical-alignって名前は聞いたことがありますが、具体的にどういう効果があるんですか？」

先生

「それでは、vertical-alignの基本から実際の例まで一緒に見ていきましょう！」

1. vertical-alignとは？役割と仕組みを解説

CSSのvertical-align（バーティカルアライン）は、要素を「縦方向（垂直方向）」にどの位置でそろえるかを決めるためのプロパティです。Webデザインにおいて、画像とテキストが微妙に上下にずれてしまう現象を解消し、見た目のバランスを整える重要な役割を担っています。

このプロパティの最大の特徴は、「インライン要素」や「テーブルセル」に対して機能する点です。例えば、文章の中に小さなアイコンを入れた際、デフォルトでは文字の下側のライン（ベースライン）に合わせて配置されるため、アイコンが少し浮いて見えたり、沈んで見えたりすることがあります。これを「真ん中にそろえて！」と命令できるのがvertical-alignです。

ポイント： 初心者の方がよくつまずく点として、divタグなどの「ブロック要素」を中央寄せしようとしてvertical-alignを使ってしまうことがありますが、実はそれは効きません。あくまで「1行の中での並び」や「表のマス目」の中を調整するためのものだと覚えましょう。

未経験でもわかる！基本的な書き方サンプル

まずは、何も設定していない状態と、vertical-alignを使って位置を調整した状態を比較してみましょう。アイコン画像と文字の並び方に注目してください。


<style>
    .v-middle {
        /* 画像をテキストの垂直方向の中央にそろえる */
        vertical-align: middle;
    }
    .sample-box {
        background-color: #f8f9fa;
        padding: 15px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
    }
</style>

<div class="sample-box">
    <p>【設定なし】 <img src="/img/sample120-120.jpg" width="30"> 文字の基準線（下側）に合っています。</p>
    <hr>
    <p>【設定あり】 <img src="/img/sample120-120.jpg" width="30" class="v-middle"> きれいに中央でそろっています！</p>
</div>

ブラウザ表示

このように、わずかな指定を追加するだけで、ユーザーにとって読みやすく、プロが作ったような洗練されたレイアウトに仕上げることができます。次の章では、具体的な設定値（middleやtopなど）について詳しく見ていきましょう。

2. vertical-alignの基本的な値

プログラミングを始めたばかりの方が最初につまずきやすいのが、「画像とテキストが微妙にズレてしまう」という悩みです。 CSSのvertical-alignプロパティを使うと、インライン要素（テキストや画像など）を縦方向にどの位置で揃えるかを自由にコントロールできます。

特によく使われる4つの指定方法を、初心者の方向けに分かりやすく整理しました。

baseline（ベースライン）：文字の基準線に合わせます。これが初期値（デフォルト）なので、何もしないと画像の下に少し隙間ができることがあります。
middle（ミドル）：要素の「中央」に合わせます。アイコンと文字を並べるときに最もよく使われる、一番おすすめの指定です。
top（トップ）：行の一番「上」に合わせます。背の高い画像がある場合、テキストを上に詰めたい時に便利です。
bottom（ボトム）：行の一番「下」に合わせます。文字の末尾に合わせて画像を配置したい時に活用します。

それでは、実際に画像とテキストの見え方がどう変わるか、以下のサンプルコードで確認してみましょう。


<style>
    .sample-box {
        background-color: #f8f9fa;
        padding: 20px;
        border: 1px solid #dee2e6;
        line-height: 1.5;
    }
    .valign-middle {
        vertical-align: middle;
    }
    .valign-top {
        vertical-align: top;
    }
    span {
        background-color: #e9ecef;
        padding: 2px 5px;
    }
</style>

<div class="sample-box">
    <p>
        <img src="/img/sample120-120.jpg" alt="サンプル画像" width="60">
        <span>標準（baseline）は、文字の底辺に揃います。</span>
    </p>
    <hr>
    <p>
        <img src="/img/sample120-120.jpg" alt="サンプル画像" width="60" class="valign-middle">
        <span>middleを指定すると、画像と文字の中央が揃って綺麗です。</span>
    </p>
    <hr>
    <p>
        <img src="/img/sample120-120.jpg" alt="サンプル画像" width="60" class="valign-top">
        <span>topを指定すると、行の上端にピタッとくっつきます。</span>
    </p>
</div>

ブラウザ表示

このように、vertical-align: middle; を覚えるだけでも、Webサイトの見た目のクオリティがぐっと上がります。基本の4つをマスターして、デザインに合わせた自然な配置を目指しましょう。

3. テキストと画像を中央にそろえる（vertical-align）

Webサイトを作っていると「文章の途中に小さなアイコン画像を入れたい」という場面がよくあります。しかし、ただ画像を置いただけでは、文字の下端と画像の下端が微妙にズレてしまい、ガタガタした印象を与えてしまいます。

プログラミング未経験の方でも、CSSのvertical-align: middle;というプロパティを使えば、驚くほど簡単に「文字と画像の中央をピッタリ合わせる」ことができます。この設定一つで、プロが作ったような洗練された見た目に変わります。


<style>
    /* アイコン画像のサイズと位置を調整 */
    .align-middle-icon {
        width: 24px;
        height: 24px;
        /* これが重要！文字の真ん中に合わせる設定 */
        vertical-align: middle;
        /* 画像と文字の間に少しだけ隙間を作る */
        margin: 0 4px;
    }
</style>

<p>
    最新情報をチェックするには、こちらの
    <img src="/img/sample120-120.jpg" class="align-middle-icon">
    アイコンをクリックしてください。
</p>

ブラウザ表示

解説：通常、画像は文字の「ベースライン（下線）」に沿って配置されます。そのため、画像だけが浮いて見えたり、逆に沈んで見えたりします。そこで、CSSでvertical-align: middle;を指定すると、文字の高さの中心と画像の中心が直線上に並ぶようになり、視認性が大幅に向上します。

特にスマホで見た際、この数ピクセルのズレが「読みやすさ」に大きく影響するため、アイコンを使用する際は必ずセットで覚えておきたいテクニックです。

4. 表（table）のセル内での縦方向の整列

CSSのvertical-alignプロパティが最も頻繁に、そして直感的に活躍するのが「表（テーブル）」のセル内での配置です。プログラミング初心者の方でも、Excelやスプレッドシートで「上揃え」「中央揃え」を設定する感覚で使えるので、非常に覚えやすい項目です。

通常、表のセル（tdタグ）の中にある文字は、デフォルトでは「中央（middle）」に配置されることが多いですが、デザインによっては「項目の説明を常に一番上から始めたい」というケースも多々あります。そんな時にこの設定を使います。


<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    td {
        border: 2px solid #dee2e6;
        width: 150px;
        height: 120px;
        padding: 10px;
        background-color: #f8f9fa;
    }
    /* 上端に揃える */
    td.top {
        vertical-align: top;
    }
    /* 中央に揃える（初期値に近い状態） */
    td.middle {
        vertical-align: middle;
    }
    /* 下端に揃える */
    td.bottom {
        vertical-align: bottom;
    }
</style>

<table>
    <tr>
        <td class="top">【上揃え】<br>テキストがセルの上端に配置されます。</td>
        <td class="middle">【中央揃え】<br>上下の真ん中に配置されます。</td>
        <td class="bottom">【下揃え】<br>セルの底辺に配置されます。</td>
    </tr>
</table>

ブラウザ表示

このように、vertical-alignを使うことで、表のレイアウトを自由自在にコントロールできます。特に、1つの行の中で「文字量が多いセル」と「文字量が少ないセル」が混在する場合、見た目の美しさを整えるために非常に重要な役割を果たします。名簿や料金表、比較表など、データを整理して見せるウェブデザインには欠かせないテクニックです。

5. 数値を使った微調整

vertical-alignでは、数値を指定して細かく調整することもできます。単位にはpxや%を使います。


<style>
span.up {
    vertical-align: 10px;
}
span.down {
    vertical-align: -10px;
}
</style>

<p>通常の文字 <span class="up">上にずらす</span> <span class="down">下にずらす</span></p>

ブラウザ表示

こうすることで、アイコンや小さな文字の位置を微調整して自然な見た目にできます。

6. vertical-alignが効かない場合

vertical-alignはインライン要素に対してのみ効果があります。つまり、ブロック要素（divやpなど）にはそのままでは効きません。

もしブロック要素を縦方向にそろえたい場合は、テーブルレイアウトや後に学ぶフレックスボックスなど別の方法を使う必要があります。

7. 実用的な活用シーン

vertical-alignの便利な活用例をいくつか挙げてみます。

ボタンの中のアイコンとテキストをきれいに中央でそろえる
文章中のインライン画像のズレを直す
表のセルの文字を上下にそろえる
小さい文字や特殊記号の位置を微調整する

これらを知っておくだけで、Webページの見た目がぐっと整い、プロらしいデザインに近づきます。

まとめ

今回の記事では、CSSの整列において非常に重要な役割を持つvertical-alignについて詳しく解説してきました。Webデザインにおいて、画像とテキストが微妙にズレていたり、表の中の文字が意図しない場所に配置されていたりすると、ユーザーに「未完成な印象」を与えてしまいます。このプロパティをマスターすることで、ピクセル単位での精密な調整が可能になり、Webサイトのクオリティを一段階引き上げることができます。

vertical-alignを使いこなすポイントの再確認

まず覚えておくべきは、このプロパティが適用されるのはインライン要素（inline）やインラインブロック要素（inline-block）、そしてテーブルセル（table-cell）に限られるという点です。初心者が陥りやすい罠として、divタグなどのブロック要素に直接指定して「動かない！」と悩むケースがありますが、その場合は表示モードを切り替えるか、別の手法を検討する必要があります。

実践的なコード例：画像とテキストの黄金比整列

実務で最も頻出する、画像とテキストを垂直方向の中央で完璧にそろえる実装例をもう一度確認しましょう。ここでは、よくある「ニュース一覧」のアイコン表示などを想定したコードを記述します。


<style>
.news-container {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}
.news-icon {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 10px;
}
.news-text {
    font-size: 16px;
    color: #333;
    vertical-align: middle;
}
</style>

<div class="news-container">
    <img src="/img/sample150-100.jpg" class="news-icon" alt="アイコン">
    <span class="news-text">最新のニュース記事がこちらに表示されます。</span>
</div>

ブラウザ表示

上記のコードでは、画像（.news-icon）とテキスト（.news-text）の両方に vertical-align: middle; を指定することで、それぞれの要素の高さが異なっても、共通の中心線で整列するようにしています。これにより、スマートフォンのような小さな画面で見ても崩れにくい、美しいレイアウトが実現できます。

複雑なレイアウトでの応用：inline-blockとの組み合わせ

さらに、複数のボックスを横に並べつつ、それぞれの高さが異なる場合に上端をそろえたいときは、top を活用します。これは商品カードの並列表示などに非常に便利です。


<style>
.card-wrapper {
    background-color: #eee;
    padding: 10px;
}
.product-card {
    display: inline-block;
    width: 120px;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    vertical-align: top;
    margin: 5px;
}
.product-card img {
    width: 100%;
}
</style>

<div class="card-wrapper">
    <div class="product-card">
        <img src="/img/sample120-120.jpg">
        <p>短い説明</p>
    </div>
    <div class="product-card">
        <img src="/img/sample120-120.jpg">
        <p>こちらは少し長めの説明文が入るカードです。</p>
    </div>
</div>

ブラウザ表示

このように、要素の高さがバラバラでも vertical-align: top; を使うことで、ガタつきを抑えた整列が可能になります。 Web制作の現場では、FlexboxやGrid Layoutといった強力なツールが登場していますが、インライン要素の微調整においては、今でも vertical-align が最も手軽で強力な武器となります。「なぜか少し浮いて見える」「微妙に下にずれている」といった違和感を感じたときは、まずはこのプロパティを思い出してみてください。基本をしっかり押さえることで、どんなデザイン指示にも柔軟に対応できるコーディングスキルが身につくはずです。

先生と生徒の振り返り会話

生徒

「先生、ありがとうございました！vertical-alignを使うだけで、画像と文字のガタつきがスッキリ解消されました。特に middle を使う場面が一番多そうですね。」

先生

「その通りです。画像とテキストを並べるときは middle が定番ですね。でも、実は文字の基準線に合わせる baseline がデフォルトだということも忘れないでください。だからこそ、意識的に指定しないとズレて見えることがあるんですよ。」

生徒

「なるほど。だから何も書いていないと、画像の下に少しだけ隙間ができたりするんですね。納得です！あと、px単位でマイナスの値を指定できるのも驚きました。」

先生

「いいところに気づきましたね。デザインデータに忠実に作りたいとき、どうしても1px単位で調整したい場面が出てきます。そんなときに数値指定は本当に役立ちますよ。」

生徒

「ブロック要素には効かないという注意点も気をつけておきます。まずは display プロパティを確認する癖をつけますね！」

先生