【簡単】横並びブロック要素の高さを揃えるにはmatchHeight.jsを使おう

こんにちは。カスミです。

さて、以下のような悩みをお持ちですか？

横並びブロック要素の高さを揃えたいけど、CSSで調整してもうまく行かない。。
高さを判別して、自動で調整されるようにしたい。

このような疑問に回答します。

本記事では、matchHeight.jsを使って、簡単に横並びブロック要素の高さを揃える方法について紹介します。

実装サンプル

See the Pen matchheight by Kohei (@kouk05) on CodePen.dark

実装サンプルです。

横並び要素は、CSSのflexboxで横並びにしております。

本来だと、タイトル部分テキストの高さがバラバラなので、それぞれ要素の高さにバラつきが出るはずですが、matchHeight.jsを使っているので、高さが一律になっています。

導入方法については以下手順になります。

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

まずは上記matchheight.jsのCDNをhead内にコピペしましょう。

jqueryのライブラリを使うので、読み込んでいない方は先ほどのmatchHeight.jsのCDNの前に読み込ませましょう。

  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>

$(function () {
  $('横並び要素で高さが違う部分のタグを指定').matchHeight();
});

後は、上記関数をscritpt内に記述すればOK。

セレクタで、「横並び要素で高さが違う部分のタグを指定」となってる箇所に、

任意で、横並び要素内の高さが違う箇所（今回の実装サンプルで言うとタイトル部分）のタグ名、もしくはクラス名を入れて完成です。

以上で、実装終了です。

CSSでも、高さを揃えるプロパティは様々用意されていますが、matchHeight.jsは導入が簡単なので、とてもオススメです。

以上で解説を終わります。