【JS】matchHeight.jsで横並びの要素の高さを揃えよう

横並びのコンテンツを作る際、行数にばらつきがあるなどして要素の高さが合わず、苦労したことはありませんか？
今回は、matchHeight.jsというライブラリを使用して、横並びの要素の高さを揃える方法をご紹介します。

matchHeight.js導入前の例

まずは以下を見ください。

タイトルが1行のものもあれば、2行のものもあります。
タイトルの高さにバラつきがあるため、タイトル下のテキストの開始位置がズレてガタガタになっています。

 

 

では、matchHeight.jsを使ってタイトルの高さを揃えてあげましょう。

導入方法

手順1 ファイルのダウンロード

公式サイトのDownloadからGitHubにアクセスし、Codeと書かれた緑のボタンからzipファイルをダウンロードしましょう。
zipを展開すると、distというフォルダがあります。
フォルダ内には「jquery.matchHeight.js」と「jquery.matchHeight-min.js」が入っており、後者の方が軽量版になっています。
今回は「jquery.matchHeight-min.js」を使用します。

手順2 jsを読み込む

bodyの閉じタグ直前にscriptタグを記述して、格納場所からファイルを読み込みます。
かならずjQueryファイルの後に記述するようにしてくださいね。

手順3 matchHeightを適用したい要素にクラスを付ける

高さを揃えたい要素にクラスを付けます。クラス名は任意です。
今回はタイトルのpタグに、matchというクラスをつけておきます。

手順4 実行するためのjsを記述する

手順2で読み込んだjsより後に記述しましょう。

結果

以下のようになります。タイトルの高さが揃っているのが分かりますね。

 

オプション

matchHeightにはオプションも用意されています。
オプションは1つでも複数でも付与することができ、

といった風に記述できます。
代表的なものをいくつかご紹介します。

byRow（初期値：true）

行ごとに高さを決めるかどうかの指定ができます。
falseにした場合、要素が複数行に渡っていても全て同じ高さになります。

property（初期値：height）

高さのプロパティを、heightにするかmin-heightにするかを指定することができます。

target（初期値：null）

targetを指定することで、指定したターゲットと同じ高さに揃えられます。
以下の例だと、imageクラスと同じ高さになります。

data-mh=”groupname”

groupnameでグループ名を決めることができます。
高さ揃えをしたいタグに付与すると、同じグループの要素同士で高さが揃えられます。

remove（初期値：false）

高さ揃えが解除されます。
resizeイベントなどで使用することで、「スマートフォンのサイズになった時に高さ揃えを解除する」といった使い方ができます。

まとめ

頻繁に更新する要素などは、行数が変わるたびに高さが揃わなくなり修正の手間が増えます。
あらかじめmatchHeight.jsを導入しておけば、何行になっても綺麗に揃うのでとても便利です。
ぜひご活用ください。