jquery.heightLine.js
「jquery.heightLine.js」は、複数のブロックレベル要素の高さを揃えるJavaScriptライブラリー「heightLine.js」のjQueryプラグイン版です。
以前から愛用者の多いheightLine.jsの新バージョンとして、2013年10月に公開されました。
step1 jQueryプラグインの読み込み
jQuery本体をjQueryの公式サイトから、jquery.heightLine.jsを配布ページからダウンロードしましょう。
プラグイン配布ページの画像
jQuery本体と「 jquery.heightLine.js 」を、利用するWebページの body の閉じタグ直前で読み込みます。
//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.heightLine.js"></script>
</body>
</html>
step2 基本的な使い方
実際にプラグインの使い方を説明します。
jquery.heightLine.js を読み込んだ後に、使用したい要素をjQueryのセレクターで指定して、.(ドット)繋ぎでheightLine();を指定します。これで指定した要素の高さが揃います。
HTML
//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.heightLine.js"></script>
<script>
$(".box0>div").heightLine();
</script>
</body>
</html>
従来の heightLine.js の場合は対象要素をclass名で指定していましたが、jquery.heightLine.js ではjQuery のセレクターで指定します。上記の例では、.box0>div と指定しているので、class名「box0」の中のdiv要素の高さが揃います。
jquery.heightLine.jsで指定すると高さが揃う
オプション
jquery.heightLine.jsには、レスポンシブWebデザインでサイトを制作するときに便利なオプションが用意されています。オプションは、heightLine(); の()の中に、{}で指定します。
maxWidth オプション
ウィンドウ幅が特定のサイズより小さい場合のみブロックレベル要素の高さを揃えたい場合は、maxWidthオプションを指定します。
//(中略)
$(".box1>div").heightLine({
maxWidth:640
});
//(中略)
上記の例では、ウィンドウ幅が「640px以下」の時にclass名「box1」の中のdiv要素の高さが揃います。スマートフォンやタブレット向けのレイアウトを指定するときに便利ですね。
minWidth オプション
maxWidthとは逆で、ウィンドウ幅が特定のサイズより大きい場合のみブロックレベルの要素を揃えたい場合に利用するオプションです。PCなどの大きな画面で表示するときのみ適用したい場合に使えます。
//(中略)
$(".box2>div").heightLine({
minWidth:640
});
//(中略)
上記の例では、ウィンドウ幅が「640px以上」の時にclass名「box2」の中のdiv要素の高さが揃います。
具体的には以下のような挙動になります。
jquery.heightLine.jsで指定すると高さが揃う
横幅840pxの時は、maxWidth オプションで640を指定すると高さが揃いませんが、minWidth オプションで640を指定すると高さが揃います。
maxWidth オプション / minWidth オプション
maxWidthオプションとminWidthオプションは組み合わせて使えます。特定のウィンドウ幅でのみブロックレベルの高さを揃えることも可能です。複数のオプションを指定する場合には、(カンマ)区切りをします。
//(中略)
$(".box3>div").heightLine({
minWidth:500,
maxWidth:700
});
//(中略)
上記の例では、ウィンドウ幅が「500px以上」かつ、「700px以下」のときにclass名「box3」の中のdiv要素の高さが揃います。
以下のようにも記述できますが、可読性を上げるために、オプションごとに改行を挟むことをお勧めします。
$(".box3>div").heightLine({
minWidth:500,maxWidth:700
});
fontSizeCheck オプション
ウィンドウ幅に応じてページの文字サイズを変更したり、ユーザーがブラウザーの文字サイズ変更機能を使ったりすると、レイアウトが崩れることがあります。フォントサイズの変更で表示が崩れてしまう場合は、fontSizeCheckオプションを使います。fontSizeCheckオプションは、フォントサイズの変更を感知してレイアウトを再調整する機能です。
//(中略)
$(".box4>div").heightLine({
fontSizeCheck:true
});
//(中略)
「fontSizeCheck」というオプションの値を true にすることで、Webページ全体、あるいは指定したセレクターであるclass名「box4」の中のdiv要素のフォントサイズが変更されたときにも高さを再設定します。
メソッド
オプション以外にも、以下のメソッドが使用できます。メソットは、heightLine(); の()の中に、""で指定します。
自分で JavaScript を記述する際に役立ちそうですね。
destroy メソッド
一度適用したheightLineを取り除きたい場合は、destroyメソットを指定します。
//(中略)
$(".box0>div").heightLine("destroy");
//(中略)
上記のメソッドを利用することで、セレクターで指定したclass名「box0」の中のdiv要素に設定された、heightLine.js の処理を取り除けます。
refresh メソッド
指定したdiv要素の内容が変更されたときに、高さを再設定するメソッドがrefreshメソットです。
//(中略)
$(".box0>div").heightLine("refresh");
//(中略)
<body>
上記のメソッドを利用することで、セレクターで指定したclass名「box0」の中のdiv要素が変更された場合に、高さを再設定できます。
このプラグインはjQueryプラグインですので、jQueryが必要になります。もしjQueryの利用が難しい場合には今までのように、単体で利用できるJavaScriptライブラリーを使うとよいでしょう。以下からダウンロードできます。
このプラグインはレイアウトに関わるので、サーバーの反応速度や他に読み込んでいる処理によっては、ページが崩れた状態で表示されてから、ガクッと整形される場合があります。その際は、head 内で読み込んで、ページ読み込み時に整形されるようにしてもいいかもしれません。
ただし、jQuery を読み込んだ後に読み込む必要がありますので、ページの読み込み速度が体感的に遅くなってしまう恐れもあります。実際にページで使用してみて判断するといいでしょう。
ちなみに私はbody の閉じタグ直前で読み込んでいますが、いままで特に問題は発生していません。
前バージョンの heightLine.js も、親要素を指定できるなど、とても使いやすかったですが、新バージョンではjQuery のセレクターで要素を取得できるようになり、また、レスポンシブWebデザインに対応したオプション( maxWidth オプションなど )や、新たに追加されたメソッドによって、使い勝手がさらによくなりましたね。
高さの異なるブロックレベル要素の高さを揃える際にぜひ使ってみましょう。
