matchHeight.jsで要素の高さを揃える方法【jQuery】

こんにちは！コーダーのゆうしです。

カード型レイアウトを実装していると「テキスト量によってカードの高さがバラバラになってしまう」という場面がよくあります。CSSの display: flex で解決できることも多いですが、構造上flexが使えない場合や、複数行にまたがるカードの高さを揃えたいときに便利なのが matchHeight.js です。この記事では導入方法から応用的な使い方まで解説します。

matchHeight.jsとは？

matchHeight.jsはjQueryプラグインのひとつで、指定したクラスを持つ要素の高さを最も高い要素に揃えてくれるライブラリです。テキスト量が異なるカード一覧やナビゲーション項目の高さ統一などに活用できます。

ただし、matchHeight.jsは現在メンテナンスが停止しています。新規プロジェクトではCSSの display: flex や display: grid での解決を優先して、flexやgridでは対応が難しい場合の選択肢として使うのがおすすめです。

matchHeight.jsを導入する

CDNを使う場合

</body> の直前に以下のコードを追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

最新のCDNはこちら（CDN – jquery.matchHeight）でご確認ください。

GitHubからダウンロードする場合

GitHub – jquery-match-height の「Code」→「Download ZIP」でダウンロードして、解凍した jquery.matchHeight.js をサイトのjsフォルダに設置してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="js/jquery.matchHeight.js"></script>

実装コード

表示イメージ

See the Pen matchHeight.js by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.

HTML

<div class="card-list">
  <div class="card">
    <div class="contents">
      <p>テキストが短いカード</p>
    </div>
  </div>
  <div class="card">
    <div class="contents">
      <p>テキストが長いカードテキストが長いカードテキストが長いカードテキストが長いカードテキストが長いカード</p>
    </div>
  </div>
  <div class="card">
    <div class="contents">
      <p>テキストが中くらいのカードテキストが中くらいのカード</p>
    </div>
  </div>
</div>

高さを揃えたい要素に contents クラスを付けます。

JavaScript（jQuery）

$(function() {
  $('.contents').matchHeight();
});

たったこれだけです。.contents クラスを持つ要素の中で最も高いものに合わせて、他の要素の高さが自動で揃えられます。

よく使うオプション

byRow（行ごとに高さを揃える）

デフォルトでは byRow: true になっており、横に並んでいる要素（同じ行）ごとに高さを揃えます。レスポンシブ対応でカードの並びが変わっても自動で再計算してくれます。

$(function() {
  $('.contents').matchHeight({
    byRow: true // デフォルトはtrue。falseにすると全要素で高さを揃える
  });
});

property（heightではなくmin-heightで揃える）

デフォルトでは height で揃えますが、min-height に変えることもできます。

$(function() {
  $('.contents').matchHeight({
    property: 'min-height'
  });
});

複数のグループで高さを揃える

異なるグループで別々に高さを揃えたい場合は、それぞれに matchHeight() を呼び出します。

$(function() {
  $('.card-title').matchHeight();   // タイトル部分を揃える
  $('.card-body').matchHeight();    // 本文部分を揃える
  $('.card-footer').matchHeight();  // フッター部分を揃える
});

カードの各パーツごとに高さを揃えることで、より整ったカードレイアウトが作れます。

CSSのflexで代替する方法

matchHeight.jsが不要なケースも多いです。親要素に display: flex を指定するだけで子要素の高さが揃います。

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  /* flexの子要素は自動で高さが揃う */
}

flexが使える場合はJavaScriptを使わずCSSだけで解決できるのでこちらが推奨です。matchHeight.jsはflex・gridが使えない構造の場合や、古いブラウザへの対応が必要な場合に活用してください。

躓きやすいポイント

高さが揃わない

jQueryとmatchHeight.jsの読み込み順が逆になっている場合にエラーになります。必ずjQuery → matchHeight.jsの順番で読み込んでください。またDOMが読み込まれる前にスクリプトが実行されている場合も動作しないので、$(function(){}) の中に書いてください。

レスポンシブで崩れる

matchHeight.jsはウィンドウのリサイズ時に自動で再計算しますが、画像の読み込みが遅延した場合などに高さの計算がずれることがあります。その場合は画像の読み込み完了後に再計算させます。

$(window).on('load', function() {
  $('.contents').matchHeight();
});

$(function(){}) の代わりに $(window).on('load') を使うことで、画像の読み込みが完了してから高さを計算できます。

スマホでは高さを揃えたくない

スマホでは縦並びになるので高さを揃える必要がない場合があります。ウィンドウ幅で条件分岐することで対応できます。

$(function() {
  if ($(window).width() >= 768) {
    $('.contents').matchHeight();
  }
});

まとめ

matchHeight.jsはjQueryで要素の高さを揃えるシンプルなプラグインです。テキスト量が異なるカード一覧の高さ統一などに活用できます。ただしCSSの display: flex や display: grid で解決できる場合はそちらを優先するほうが軽量でシンプルです。flexやgridで対応が難しい場面での選択肢として覚えておいてください。

ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。