【jQuery】jquery.matchHeight.jsで要素の高さを揃える完全ガイド｜CSS Flexbox比較・レスポンシブ・Ajax・トラブルシューティングまで

カードレイアウトで各カードのテキスト量が異なると、高さがバラバラになってデザインが崩れます。jquery.matchHeight.js は一行のJavaScriptで複数要素の高さを自動的に揃えられる軽量プラグインです。この記事では基本的な使い方・グループ別管理・レスポンシブ対応・Ajax再計算・CSSとの使い分け・トラブルシューティングまで解説します。

jquery.matchHeight.js とは

jquery.matchHeight.js は、指定したセレクターの要素の高さを自動的に同じ値に揃える jQuery プラグインです。カードUI・並列ブロックの「テキスト量が違っても高さを統一したい」という場面で広く使われています。

インストール方法

CDN・npm どちらからでも導入できます。jQuery より後に読み込んでください。

<!-- CDN（最も手軽） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

npm install jquery-match-height

// ES Modules（webpack / Vite など）
import $ from 'jquery';
import 'jquery-match-height';

基本的な使い方

<div class="card-container">
  <div class="card">
    <h3>カードA</h3>
    <p>短いテキスト</p>
  </div>
  <div class="card">
    <h3>カードB</h3>
    <p>長いテキストが入っています。
       このカードに合わせて他のカードも高さが揃います。</p>
  </div>
  <div class="card">
    <h3>カードC</h3>
    <p>中程度のテキスト内容です。</p>
  </div>
</div>

$(function () {
  // .card クラスの要素を全て同じ高さに揃える
  $('.card').matchHeight();
});

複数グループ・行ごとに揃える

グループAとグループBで別々に高さを揃えたい場合は、それぞれに matchHeight() を適用します。

<!-- グループA: 記事カード -->
<div class="post-card">...</div>
<div class="post-card">...</div>

<!-- グループB: サービス紹介 -->
<div class="service-card">...</div>
<div class="service-card">...</div>

$(function () {
  // グループAのみ高さを揃える
  $('.post-card').matchHeight();

  // グループBのみ高さを揃える（グループAとは独立）
  $('.service-card').matchHeight();
});

行ごとに揃える（byRow オプション）

デフォルトでは同じクラスの全要素の最大高さに揃えます。折り返した各行ごとに揃えたい場合は byRow: true（デフォルト値）、全要素を同じ最大高さにしたい場合は byRow: false を指定します。

$(function () {
  // byRow: true（デフォルト）: 折り返し行ごとに最大高さで揃える
  $('.card').matchHeight({ byRow: true });

  // byRow: false: 全要素を同じ高さ（最大値）に揃える
  $('.card').matchHeight({ byRow: false });
});

レスポンシブ対応：ブレークポイントで無効化

スマホでは縦並びになるため高さ揃えが不要・あるいは不自然になる場合があります。{ remove: true } で設定を解除できます。

$(function () {
  function applyMatchHeight() {
    if ($(window).width() >= 768) {
      // タブレット以上: 高さを揃える
      $('.card').matchHeight();
    } else {
      // スマホ: 高さをリセット（自然な高さに戻す）
      $('.card').matchHeight({ remove: true });
    }
  }

  applyMatchHeight();

  // リサイズ時に再チェック（debounce で間引く）
  var resizeTimer;
  $(window).on('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(applyMatchHeight, 200);
  });
});

Ajax・動的コンテンツに対応した再計算

Ajax でコンテンツを追加した後は自動的に再計算されません。$.fn.matchHeight._update() を手動で呼んで再計算してください。

$(function () {
  // 最初に適用
  $('.card').matchHeight();

  // Ajax でカードを追加後に再計算
  $('#load-more').on('click', function () {
    $.get('/api/cards', function (data) {
      $('.card-container').append(data);

      // 新しく追加された要素を含めて再計算
      $.fn.matchHeight._update();
    });
  });

  // MutationObserver で自動再計算（動的追加が多い場合）
  var observer = new MutationObserver(function () {
    $.fn.matchHeight._update();
  });
  observer.observe(document.querySelector('.card-container'), {
    childList: true // 子要素の追加・削除を監視
  });
});

CSS Flexbox・Gridとの比較と使い分け

現代のプロジェクトでは CSS の Flexbox・Grid だけで高さを揃えられる場合がほとんどです。どの方法を選ぶかの判断基準をまとめます。

/* CSS Flexbox で高さを揃える（jQuery不要・最もシンプル） */
.card-container {
  display: flex;
  flex-wrap: wrap;        /* 折り返しを許可 */
  align-items: stretch;   /* デフォルト値: 行内で同じ高さに揃える */
  gap: 16px;
}

.card {
  flex: 1 1 300px;        /* 最小300px、伸縮あり */
  display: flex;
  flex-direction: column;
}

/* カード内のフッターを下に固定 */
.card .card-body {
  flex: 1;                /* コンテンツ部分を伸ばす */
}
.card .card-footer {
  margin-top: auto;       /* フッターを常に下部に配置 */
}

/* CSS Grid で揃える（複雑なレイアウト向け） */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  /* Grid の各アイテムはデフォルトで同じ行高さに揃う */
}

トラブルシューティング

画像を含む要素で高さがズレる

画像は DOMContentLoaded 時点ではサイズが確定していません。$(window).on("load") の中で実行してください。

// NG: DOMReady では画像がまだ読み込まれていない場合がある
$(function () {
  $('.card').matchHeight(); // 画像のある要素ではズレる可能性
});

// OK: 全リソース読み込み後に計算
$(window).on('load', function () {
  $('.card').matchHeight();
});

Webフォントの読み込みで高さがズレる

Webフォントが DOMReady 後に読み込まれると、フォントによってテキストの高さが変わります。document.fonts.ready を使って確実にフォント読み込み後に実行してください。

// Webフォント読み込み後に高さを揃える（モダンブラウザ対応）
document.fonts.ready.then(function () {
  $('.card').matchHeight();
});

display:none の要素が含まれる場合

display: none の要素は高さが 0 として計算されます。要素を表示してから matchHeight を実行するか、$.fn.matchHeight._update() で再計算してください。

アコーディオンやタブ内のカードがズレる

タブ切り替えやアコーディオンの開閉で要素が表示された後に再計算が必要です。タブ・アコーディオンの click イベント後に $.fn.matchHeight._update() を呼んでください。

// タブ切り替え後に再計算
$('.tab-btn').on('click', function () {
  // タブの表示切り替え処理...
  $.fn.matchHeight._update(); // 再計算
});

まとめ

jquery.matchHeight.js のポイントをまとめます。

• 基本: $(".card").matchHeight() で同じクラスの要素を揃える
• グループ別: 別々のセレクターにそれぞれ matchHeight() を適用
• 行ごと: { byRow: true }（デフォルト）で折り返し行ごとに揃える
• スマホ対応: { remove: true } でブレークポイント以下で解除
• Ajax後: $.fn.matchHeight._update() で再計算
• 画像・フォント含む場合: $(window).on("load") または document.fonts.ready 後に実行
• 新規プロジェクトは CSS Flexbox・Grid が推奨（jQuery不要・動的対応自動）

関連記事: 要素の幅・高さを取得する完全ガイド / スライダーの各スライドの高さを揃える完全ガイド / ブラウザ・要素の高さ取得完全ガイド

よくある質問（FAQ）