jquery.matchHeight.jsのオプションの使い方を紹介!

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

コンテンツ [表示]

  1. 1jquery.matchHeight.jsのオプションを使いたい
  2. 2jquery.matchHeight.jsのオプション
  3. 2.1byRow
  4. 2.2target
  5. 2.3data-mh="グループ名"
  6. 3まとめ

jquery.matchHeight.jsのオプションを使いたい

matchHeightのオプションを使用することで、単に高さを揃えるだけではなく色々と工夫することができます。

matchHeightのオプションは以下の部分に記述します。

オプション

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

jquery.matchHeight.jsのオプション

ではよく用いるオプションをピックアップしてサンプルコード付きで紹介します。

byRow

こちらのオプションはカードなどを並べた際に、レスポンシブなどにより行が変わった際にそのカードの高さをどの要素に対して揃えるかの設定になります。

byRowがtrueの場合

まずデフォルトのbyRowtrueの場合を確認してみましょう。

byRow: trueの場合、上記のように行が変わるとその行の一番最初に来る要素の高さに揃えられることが分かります。

byRowがfalseの場合

もし全ての要素を同じ高さにしたい場合はbyRow: falseとすることで実現できます。

ではbyRow: falseの場合を確かめてみましょう。

上記のように全ての要素の高さが均一になったことが分かります。

target

targetオプションを設定することで、デフォルトだと一番最初にくる要素に対して高さが均一となるのが、targetに設定した要素で高さを揃えることができます。

ではサンプルコードにて3つ目の要素で高さを揃えてみます。

上記のように3番目の要素にて高さが揃えられていることが分かります。

data-mh="グループ名"

data-mh="グループ名"をHTML内で記述することで、グループごとに高さを揃えることができます。

どういうことかサンプルコードを用意したので確認してみましょう。

上記のようにdata-mh="グループ名"の「グループ名」ごとに高さが揃えられていることが分かります。

まとめ

ここでは特によく用いるオプションについて解説しました。

ぜひ色んなmatchHeightのオプションを試してみてください。

またここで紹介したオプション以外にもmatchHeightには多くのオプションが存在します。

他のオプションについても知りたいという方は以下のサイトを参照してください。

matchHeightのオプション
matchHeightのオプション

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。