jquery.matchHeight.jsの導入方法と使い方を紹介!

jquery.matchHeight.jsの導入方法と使い方をサンプルコード付きで紹介します。jquery.matchHeight.jsを用いることで要素ごとの高さが異なる場合、その高さを揃えることができます。

コンテンツ [表示]

  1. 1jquery.matchHeight.jsとは?
  2. 2jquery.matchHeight.jsの導入方法
  3. 2.1ダウンロードする方法
  4. 2.2CDNを読み込む方法
  5. 3jquery.matchHeight.jsの使い方
  6. 4まとめ

jquery.matchHeight.jsとは?

jQueryプラグインのmatchHeightを用いることで要素ごとの高さが異なる場合、その高さを揃えることができます。

例として以下のサンプルコードを用いて以降の項目にて、matchHeightを用いて高さを揃えてみます。

jquery.matchHeight.jsの導入方法

ではまずmatchHeightの導入方法について説明します。

matchHeightの導入方法としてダウンロードする方法とCDNを読み込む方法の2通りあります。

ダウンロードする方法

ダウンロードする場合、以下のサイトよりダウンロードしてください。

matchHeight
matchHeightのGitHub

ダウンロードした後、jQueryとダウンロードしたフォルダの中にある「jquery.matchHeight.js」または「jquery.matchHeight-min.js」のパスをHTML内で読み込んでください。

パスを読み込むことでmatchHeightを使用することができます。

CDNを読み込む方法

jQueryとmatchHeightのCDNを読み込みます。

CDNは以下となります。

CDN

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.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>

上記を読み込むことでmatchHeightを使用することができます。

jquery.matchHeight.jsの使い方

ではmatchHeightの使い方について解説します。

今回は1つ目のサンプルコードをオプションtargetを用い、2つ目のli要素を基準として高さを揃えてみます。

では確認してみましょう。

上記のように高さが揃っていることが分かります。

matchHeightの使い方としては以下のような形となります。

$(function () {
  $('要素').matchHeight({
    //オプションを記述
  });
});

このような形でmatchHeightを使用でき、指定した要素に対して高さを揃えることができます。

またオプションは他にもあり、詳しくは以下の記事にて説明しているので参照してください。

あわせて読みたい
jquery.matchHeight.jsのオプションの使い方を紹介!のイメージ
jquery.matchHeight.jsのオプションの使い方を紹介!
jquery.matchHeight.jsのオプションの使い方をサンプルコード付きで紹介します。jquery.matchHeight.jsにはいくつかのオプションがあり、その中でも特によく用いるものをピックアップして紹介します。

まとめ

いかがでしたでしょうか?

ここで紹介したようにmatchHeightを用いることで簡単に要素の高さを揃えれます。

ぜひmatchHeightを用いてみてください。

GeekHive採用サイト

関連記事