CSSフレックスボックスで高さを揃える等高カラムレイアウト完全解説｜初心者向けflexbox入門

高さを揃える等高カラムレイアウトの実現方法

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

生徒

「カードの中の文章量が違うと、高さがバラバラになるんですが、そろえる方法はありますか？」

先生

「CSSのフレックスボックスを使えば、高さをきれいにそろえた等高カラムレイアウトが作れます。」

生徒

「等高カラムって、パソコン初心者でも理解できますか？」

先生

「大丈夫です。箱を並べる感覚で、一つずつ説明します。」

1. 等高カラムレイアウトとは何か

等高カラムレイアウトとは、横に並んだ複数の要素の高さをすべて同じにそろえるレイアウトのことです。ブログの記事一覧、サービス紹介、料金表などでよく見かけます。見た目が整い、読む人に安心感を与えるため、多くのウェブサイトで使われています。

カラムとは「縦の列」という意味です。等高は「同じ高さ」という意味なので、等高カラムは「高さが同じ縦の箱」と覚えるとわかりやすくなります。

2. なぜ高さがバラバラになるのか

HTMLだけでカードを並べると、中に入っている文字の量によって高さが変わります。文章が多いカードは高くなり、少ないカードは低くなります。これはブラウザが内容に合わせて自動的に高さを決めているためです。

初心者の方は「勝手に高さが変わる」と感じるかもしれませんが、実際にはとても正直に中身の量を反映しているだけです。これをそろえるために、フレックスボックスを使います。

3. フレックスボックスで高さがそろう理由

フレックスボックスでは、横に並んだ要素を同じ高さにそろえる仕組みが最初から用意されています。親要素にフレックスボックスを指定すると、子要素は一番高い要素に合わせて引き伸ばされます。

これは、背の違う人が同じ高さの台の上に立つようなイメージです。低い人は台で高さが足され、高い人はそのままなので、全体がそろって見えます。

4. 等高カラムの基本コード

ここでは、もっともシンプルな等高カラムレイアウトを作ります。ポイントは、親にdisplayでフレックスボックスを指定することです。


<style>
	.columns {
	    display: flex;
	}
	.column {
	    border: 1px solid #ccc;
	    padding: 16px;
	    margin: 8px;
	    width: 30%;
	}
</style>

<div class="columns">
	<div class="column">短い文章</div>
	<div class="column">少し長い文章が入ります。内容が増えても高さがそろいます。</div>
	<div class="column">さらに長い文章が入るカラムです。フレックスボックスのおかげで高さは同じになります。</div>
</div>

ブラウザ表示

特別な高さ指定をしていないのに、高さがそろっていることがわかります。これがフレックスボックスの大きなメリットです。