作成方法：等高列

CSSを使って等高列を作成する方法を学びます。

等高列の作成方法

列が並んで表示されるべき場合、通常、同じ高さを持つことを望みます（最も高い高さに合わせます）。

自分で試してみてください

第1ステップ - HTML を追加：

<div class="col-container">
  <div class="col">
    <h2>コラム1</h2>
    <p>Hello World</p>
  </div>
  <div class="col">
    <h2>コラム2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
  <div class="col">
    <h2>コラム3</h2>
    <p>他のテキスト...</p>
    <p>他のテキスト...</p>
  </div>
</div>

第2ステップ - CSS を追加：

.col-container {
  display: table; /* コンテナ要素がテーブルのように動作するようにします */
  width: 100%; /* 全幅に設定して、ページ全体を拡張します */
}
.col {
  display: table-cell; /* コンテナ内の要素がテーブルセルのように動作するようにします */
}

自分で試してみてください

リスポンシブ等高

前の例で作成した列はリスポンシブです（ブラウザのウィンドウサイズを調整してみると、自動的に必要な幅と高さに調整されます）。しかし、スマートフォンなどの小画面であれば、水平ではなく垂直にスタック表示したいかもしれません：

これを実現するために、メディアクエリを追加し、指定するピクセル値のブレイクポイントを設定してください：

例

/* ブラウザのウィンドウサイズが 600px 未満の場合、列をスタックにします */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

自分で試してみてください

Flexbox で等高と等幅を実現

Flexbox を使用して等高のボックスを作成することもできます：

例

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

自分で試してみてください

注意：Internet Explorer 10 以前のバージョンでは Flexbox をサポートしていません。

関連ページ

チュートリアル：CSS Flexbox