要素の高さを揃えてくれるjQueryライブラリ「jquery.matchHeight.js」

javascript

2020年07月15日 8:00　

こんにちは、hgmです。

今回は他の要素と高さを揃えられるjQueryライブラリ「jquery.matchHeight.js」をご紹介します。

お知らせなどの投稿で要素が横並びの形がありますが、タイトル等のテキストの長さによっては高さが揃わずデコボコしてしまい、統一感が無く見えてしまう時があります。

flexを使用することで揃える事が可能な場合もありますが、要素内の要素を揃えたい時はCSSでは限界があります。

そのような場合は「jquery.matchHeight.js」を使用することで自動的に高さを揃えてくれます。しかも軽量・指定も簡単！

実装方法や実際の表示を確認してみましょう。

githubより「jquery.matchHeight-min.js」をダウンロードし、ダウンロードしたファイルを読み込みます。（jQuery本体はあらかじめ読み込んでおきます。）

<script type="text/javascript" src="js/jquery.matchHeight.js"></script>

その後、下記を指定します。（クラス部分は任意のものでOK）

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

あとは上記で指定したクラスを任意の要素に付与することで自動的に高さを揃えてくれます。超簡単！

デモでは、タイトル部分を揃えてみました。

See the Pen xxZYqVK by Sara Higuma (@higuma) on CodePen.dark

この記事を書いた人

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。猫センサー搭載済みの愛猫家。広い視野を持って日々邁進していきます！