フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

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

jQuery
matchHeight.js
プラグイン
使い方

Webサイトを作っていると文章量の差があり、綺麗に高さが揃わないということはよくあると思います。むしろ高さが綺麗に揃う方が珍しいですよね。
高さが揃わずガタガタした状態のままだと見栄えが悪いので綺麗に揃えたいと思いませんか?
jQueryのプラグインのmatchHeight.jsを使うことで簡単に横並びコンテンツの高さを揃えることが出来ます。
この記事ではmatchHeight.jsを使って、横並びコンテンツの高さを揃える方法をご紹介したいと思います。

この記事の目次を表示

matchHeight.jsの使い方

まずはmatchHeight.jsを使わない状態だと横並びコンテンツはどのような見た目になるのか見てみましょう。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コンテンツの内容量の違いから高さがバラバラですね。横並びコンテンツは高さを揃えた方が見た目が綺麗になります。

そんな時に使うのがmatchHeight.jsです。

matchHeight.jsはjQueryベースで作られたプラグインなので、matchHeight.jsを使うためには先にjQueryを読み込む必要があります。

まずはjQueryを読み込みます。

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

続いてmatchHeight.jsを読み込みます。

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

今回はどちらもCDNで読み込んでいます。

注意点は、jQuery → matchHeight.jsの順番で読み込むようにします。
matchHeight.jsに限らず、jQueryプラグインの場合、jQueryより先に読み込んでしまうとエラーが発生して使うことが出来ません。

jQueryとmatchHeight.jsを読み込んだ状態で、以下のようなjQueryコードを記述します。

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

この記述をするだけで先ほどの高さがばらばらだった横並びコンテンツが以下のようになります。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

先ほどまで高さがバラバラだった横並びコンテンツの高さが綺麗に揃いましたね。

まとめ

いかがでしたか?
matchHeight.jsは難しい設定も必要なく、記述も簡単なので誰でもすぐに使い始めることが出来ます。
横並びコンテンツの高さが揃わなくて困っている人は是非使ってみて下さい。