高さ揃えの救世主！jQueryプラグイン「jquery.heightLine.js」を実装しよう

Update:

Flexboxが一般的に使用できるようになるまではマストのプラグインでした。しかし今でもflexbox内の子要素（例えば見出し）の高さを揃えたい場合などに有益なプラグインなので、ちゃんとまとめておきます！

開発者のサイト

レスポンシブWebデザインに対応した「jquery.heightLine.js」
多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。

日本語！ やったー！

設置と設定

ダウンロード&格納

上記サイトの「ダウンロード」でjsのページが開きますので、右クリック「別名で保存」でjquery.heightLine.jsをローカル環境に保存し、適切な場所に格納します。

読み込みタグ

headタグ内あるいは閉じbodyタグの直前で読み込みます。

<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/jquery.heightLine.js"></script>

（jsの格納場所は任意です）
作成者のサイトではjQueryのバージョンが1.10.2ですが、この記事のデモページでは3.4.1で試しています。ちゃんと動くのでjQueryのバージョンは特に気にしなくていいようです。

高さ揃えをしたい要素を指定する

$(function(){
　　$('#section01 h3').heightLine();
});

デモページでは閉じbodyタグの直前に<script>タグで囲んで配置しています。

h3自体にbackground-colorを付けてブロック範囲を分かりやすくしてみています。

デモページ

もちろんclass指定もOKです。
ここでは試しに.heightLineというclassを付加して高さを揃えてみましょう。

$(function(){
　　$('.heightLine').heightLine();
});

とします。

3つ横並びのh3のうち、前二つにだけ.heightLineを付加します。

デモページ

ブレイクポイントを指定する

PCサイズの横並び3カラムのときだけ高さを揃えて、SPサイズで縦1列になったときは高さを揃える必要が無い場合とかあるじゃないですか。jquery.heightLine.jsなら簡単に対応できるんです。素晴らしい！

ここでは768pxをブレイクポイントとします。

$(function(){
　　$('.heightLine-pc').heightLine({
　　　　minWidth:768
　　});
});

ブラウザ幅768px以上のときに.heightLine-pcを付加した要素にjquery.heightLine.jsが有効になります。

デモページ

逆にSPサイズのみ高さを揃えたい場合は、minをmaxにしてブラウザ幅の数値を1px減らして

$(function(){
　　$('.heightLine-sp').heightLine({
　　　　maxWidth:767
　　});
});

となります。
ブラウザ幅767px以下のときに.heightLine-spを付加した要素にjquery.heightLine.jsが有効になります。

デモページ

他にminWidthとmaxWidthの合わせ技（タブレットサイズのみとか、逆にPCサイズとSPサイズのみでタブレットサイズは除外したい場合とかに使えますね）、fontSizeCheck、destroy、refreshといったメソッドも使用できるので、詳しくは開発者のサイトをご覧ください。

関連記事: