CSSで隣接する2つのdivの高さを揃える方法｜テーブル表示・Flexbox・Grid・JavaScriptを徹底解説

Web制作において、横並びに配置した2つのdiv要素の高さを揃えたいケースは非常に多くあります。どちらか一方のdivにコンテンツが追加された場合でも、両方のdivの高さが自動的に一致すれば、見た目に一貫性のあるプロフェッショナルなレイアウトを実現でき、カラムの高さが不揃いになる問題を防げます。

等しい高さのカラム（イコールハイトカラム）を実現する方法はいくつかあります。本記事では、最も効果的な以下の4つの手法を詳しく解説します。

CSSテーブル表示：display: table-cellを使った自動的な高さ合わせ
CSS Flexbox：display: flexを使ったモダンな手法
CSS Grid：グリッドレイアウトによる等高カラム
JavaScript：プログラム的に高さを設定して揃える方法

CSSテーブル表示（display: table-cell）を使う方法

display: table-cellプロパティを使用すると、同じテーブル行内の要素は自動的に同じ高さになります。古くから使われている手法でありながら、ブラウザ間の互換性が非常に高いのが特徴です。IEなどレガシーブラウザへの対応が必要な場面でも安心して利用できます。

コード例

<!DOCTYPE html>
<html>
<head>
  <title>Equal Height Divs - Table Method</title>
  <style>
    .container {
      display: table;
      width: 100%;
      border-spacing: 10px;
    }
    .box1, .box2 {
      display: table-cell;
      padding: 20px;
      vertical-align: top;
    }
    .box1 {
      background: #e74c3c;
      color: white;
      width: 50%;
    }
    .box2 {
      background: #f39c12;
      color: white;
      width: 50%;
    }
  </style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
  <h2>Table Displayによる等高カラム</h2>
  <div class="container">
    <div class="box1">
      <h3>カラム1</h3>
      <p>このカラムには多くのコンテンツがあり、両方のカラムが自動的に同じ高さに調整される様子を確認できます。</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </div>
    <div class="box2">
      <h3>カラム2</h3>
      <p>このカラムはコンテンツが少ないですが、カラム1と同じ高さになります。</p>
    </div>
  </div>
</body>
</html>

実行結果では、コンテンツ量が異なるにもかかわらず、両方のカラムが同じ高さで表示されます。

Table Displayによる等高カラム
カラム1                    カラム2
コンテンツの多いカラム...   コンテンツが少ないが
                           カラム1と同じ高さになる
（両方のカラムが同じ高さになる）

ポイント： 親要素にdisplay: table、子要素にdisplay: table-cellを指定するだけで実現できます。border-spacingを使えばカラム間の余白も簡単に制御可能です。

CSS Flexboxを使う方法

Flexboxは、等高カラムを作成するためのモダンな標準手法です。align-items: stretchプロパティ（デフォルト値）により、すべてのフレックスアイテムが自動的に同じ高さに伸縮します。特別な設定なしで動作するため、現在のWeb開発では最も広く採用されている方法です。

コード例

<!DOCTYPE html>
<html>
<head>
  <title>Equal Height Divs - Flexbox Method</title>
  <style>
    .flex-container {
      display: flex;
      gap: 20px;
      margin: 20px 0;
    }
    .flex-box {
      flex: 1;
      padding: 20px;
      color: white;
    }
    .flex-box1 {
      background: #3498db;
    }
    .flex-box2 {
      background: #2ecc71;
    }
  </style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
  <h2>Flexboxによる等高カラム</h2>
  <div class="flex-container">
    <div class="flex-box flex-box1">
      <h3>フレックスカラム1</h3>
      <p>Flexboxは両方のカラムを自動的に伸ばし、最も高いカラムに合わせます。</p>
      <p>この手法はテーブル表示よりもモダンで柔軟です。</p>
      <p>レスポンシブデザインへの対応も簡単に行えます。</p>
      <p>カラムを高くするための追加コンテンツです。</p>
    </div>
    <div class="flex-box flex-box2">
      <h3>フレックスカラム2</h3>
      <p>このカラムはカラム1の高さに自動的に一致します。</p>
    </div>
  </div>
</body>
</html>

Flexboxを使うことで、レスポンシブ対応の等高カラムを簡単に作成できます。

Flexboxによる等高カラム
フレックスカラム1            フレックスカラム2
自動的に最も高いカラムに     カラム1の高さに
合わせて伸縮される           自動的に一致する
（両方のカラムが同じ高さに伸びる）

ポイント： align-items: stretchはデフォルトで有効なため、親要素にdisplay: flexを指定するだけで等高カラムが実現します。メディアクエリと組み合わせれば、スマートフォン画面では縦積みに切り替えるといったレスポンシブ対応も容易です。

CSS Gridを使う方法

CSS Gridも、等高カラムを実現できるモダンなソリューションの一つです。grid-template-columnsでfr単位（フラクショナルユニット）を使用すると、同一行内のグリッドアイテムはデフォルトで行の高さに引き伸ばされます。

コード例

<!DOCTYPE html>
<html>
<head>
  <title>Equal Height Divs - Grid Method</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin: 20px 0;
    }
    .grid-box {
      padding: 20px;
      color: white;
    }
    .grid-box1 {
      background: #9b59b6;
    }
    .grid-box2 {
      background: #e67e22;
    }
  </style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
  <h2>CSS Gridによる等高カラム</h2>
  <div class="grid-container">
    <div class="grid-box grid-box1">
      <h3>グリッドカラム1</h3>
      <p>CSS Gridはfr単位を使用すると、デフォルトで等高カラムを作成します。</p>
      <p>この手法はレイアウトを精密に制御できます。</p>
      <p>複数行・複数列の複雑なレイアウトに最適です。</p>
    </div>
    <div class="grid-box grid-box2">
      <h3>グリッドカラム2</h3>
      <p>同じ行内で最も高いグリッドアイテムの高さに自動的に一致します。</p>
    </div>
  </div>
</body>
</html>

ポイント： grid-template-columns: 1fr 1frのように指定すると、各カラムが均等に分割され、行内のアイテムは自動的に同じ高さになります。カード型UIやダッシュボードなど、多次元レイアウトとの相性が抜群です。

JavaScript（jQuery）を使う方法

JavaScriptを使えば、ページ読み込み後にコンテンツが動的に変更されるケースでも、高さを動的に揃えることができます。ここではjQueryを使って、各要素の高さを読み取り、最大値を全要素に適用する方法を紹介します。

コード例

<!DOCTYPE html>
<html>
<head>
  <title>Equal Height Divs - JavaScript Method</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    .js-container {
      display: flex;
      gap: 20px;
      margin: 20px 0;
    }
    .js-box {
      flex: 1;
      padding: 20px;
      color: white;
    }
    .js-box1 {
      background: #34495e;
    }
    .js-box2 {
      background: #16a085;
    }
  </style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
  <h2>JavaScriptによる等高カラム</h2>
  <div class="js-container">
    <div class="js-box js-box1" id="box1">
      <h3>JavaScriptカラム1</h3>
      <p>この手法はプログラムで高さを設定して揃えます。</p>
      <p>ページ読み込み後にコンテンツが動的に追加される場合に便利です。</p>
      <p>スクリプトが最も高い要素を見つけ、その高さを他の要素に適用します。</p>
    </div>
    <div class="js-box js-box2" id="box2">
      <h3>JavaScriptカラム2</h3>
      <p>JavaScriptによってカラム1の高さに合わせられます。</p>
    </div>
  </div>
  <button onclick="addContent()" style="padding: 10px; margin: 10px;">カラム2にコンテンツを追加</button>
  <script>
    function equalizeHeights() {
      var box1Height = $("#box1").height();
      var box2Height = $("#box2").height();
      var maxHeight = Math.max(box1Height, box2Height);
      $("#box1, #box2").height(maxHeight);
    }

    function addContent() {
      $("#box2").append("<p>動的に追加されたコンテンツです。</p>");
      // 一度高さ指定を解除してから再計算するのが確実
      $("#box1, #box2").css("height", "auto");
      equalizeHeights();
    }

    $(document).ready(function () {
      equalizeHeights();
    });
  </script>
</body>
</html>

ポイント： 高さの再計算を行う際は、一度height: autoに戻してから測定しないと正しい値が取得できない点に注意しましょう。また、ウィンドウのリサイズ時に再計算したい場合は、window.resizeイベントに処理をバインドしておくとより堅牢になります。

各手法の比較まとめ

手法	メリット	デメリット	おすすめの用途
table-cell	ブラウザ互換性が高い	セマンティクス上の違和感・レスポンシブ対応がやや面倒	レガシーブラウザ対応が必要な案件
Flexbox	シンプル・モダン・レスポンシブ対応が容易	極めて古いブラウザでは非対応	横並びレイアウト全般（第一候補）
Grid	精密なレイアウト制御が可能・多次元構造に強い	学習コストがやや高い	カードUIや複雑なグリッドレイアウト
JavaScript	動的コンテンツにも対応可能	JS無効環境で機能しない・保守コスト増	Ajaxなどで後からコンテンツが変わる場合

まとめ

隣接する2つのdivの高さを揃える方法として、本記事ではtable-cell、Flexbox、CSS Grid、JavaScriptの4つの手法を紹介しました。

現在のWeb開発では、FlexboxまたはCSS Gridを使う方法が最も推奨されます。HTML構造を汚さず、数行のCSSだけで実装でき、メンテナンス性とレスポンシブ対応に優れています。静的なレイアウトならFlexbox、複雑な多次元レイアウトならGridを選ぶとよいでしょう。

ただし、Ajax通信などでページ読み込み後にコンテンツが変化する特殊なケースでは、JavaScriptによる動的な高さ調整が有効な選択肢となります。プロジェクトの要件に応じて、最適な手法を選択してください。

企業におけるHTML活用の実態：導入企業とその用途を徹底解説

WordPress リダイレクトマルウェアを阻止する:スパムリダイレクトのクイックフィックス

HTML DOM querySelector()メソッドの使い方を徹底解説
querySelector()メソッドとはHTML DOMのquerySelector()メソッドは、引数に指定したCSSセレクタに一致する要素のうち、ドキュメント内で最初に見つかった1つの要素を返します。該当する要素が存在しない場合はnullが返されます。ID、クラス名、タグ名など、あらゆる種類のCSSセレクタを使用できるため、JavaScriptによるDOM操作において最もよく使われるメソッドの一つです。なお、一致するすべての要素を取得したい場合は、querySelectorAll()メソッドを使用してください。構文querySelector()メソッドの基本構文は以下のとおりです。doc
HTML Canvasで角丸の長方形を描く方法をわかりやすく解説
HTMLで図形を描画するには、canvas要素を使用します。通常の長方形であればrect()メソッドで簡単に描けますが、角が丸い長方形（角丸長方形）を描きたい場合は、rect()メソッドだけでは対応できません。角丸長方形を作成するには、直線を引くためのlineTo()メソッドと、二次ベジェ曲線を描くquadraticCurveTo()メソッドを組み合わせます。長方形の四隅を二次ベジェ曲線で滑らかにつなぐことで、角の丸い長方形を実現できます。 HTML5でキャンバスを作成する方法まずは、HTML5でキャンバスを作成する基本的な手順です。<canvas>要素を配置し、JavaScr