jQueryプラグインのmatchHeight.jsを使って横並びの高さを揃える方法【JS/jQuery】

横並びの要素の高さを揃えてくれるmatchHeight.js。現在はdisplay: flex;である程度要素の高さは揃える事ができますが、複雑に入れ子になっているflexboxや、高さを揃えるのが難しい場面で役に立つプラグインです。

matchHeight.jsのダウンロード

matchHeight.jsは以下よりダウンロードが出来ます。
matchHeight.jsのダウンロード(GitHub)

matchHeight.jsの公式サイトはこちら

matchHeight.jsの使い方

まずはダウンロードしたmatchHeight.jsを読み込んで、高さを揃える要素を指定します。
必要なファイルはjquery.matchHeight-min.js1つとなります。(distフォルダにはいっています)
※「min」の付いていないファイルでも大丈夫です。「min」が付いているファイルは軽量版になります。

<!-- サーバーにアップロードして読み込む場合 -->
<script src="js/jquery.matchHeight-min.js"></script>

<!-- CDNの場合 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

$(function() {
    $('.mh').matchHeight();
    //高さを揃えたい要素を指定してください
});

※jquery.matchHeight-min.jsを読み込む前にjQuery本体を読み込んでください。
※最終更新が2017年と少し古いですが、現状使用できています。今後jQueryの仕様が変更になった場合使用できなくなる場合があります。

実装前の表示例

jquery.matchHeight-min.jsの実装前の表示例です。
横並びになっているコンテンツの高さがバラバラになっています。

実装後の表示例

jquery.matchHeight-min.jsの実装後の表示例です。
横並びのコンテンツの高さが綺麗に揃っています。

オプション設定がいくつかありますが、GiHubのページを見ていただければ掲載されています。(英語なので日本語に翻訳したら分かりやすいです)

さいごに

いかがでしたでしょうか。
複雑なflexboxの子・孫要素など田kさが揃えにくい部分に有効的に使えるプラグインです。ぜひ使ってみてください。