『効かない』を5分で解消！【jquery.heightLine.js】の超簡単な使い方

同じ種類の要素（ボックス）が、その中身が異なっているため高さが揃わずにレイアウトが崩れてしまうことがあります。

そんな時に、レスポンシブに対応した、要素の高さを揃えてくれるjQueryのプラグインjquery.heightLine.jsの使い方です。

1.ダウンロード

こちらからダウンロードして下さい。
jquery.heightLine.js

右クリックで「リンク先を別名で保存」でhtmlファイル階層のjsフォルダに保存してください。

2.ファイルの読み込み

htmlファイルの</body>直前に下記を設定

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="../jquery.heightLine.js"></script>

準備はこれでOKです。

3.設定

最後にjsファイルに記載します。

jsファイルの設定

$(window).load(function() {
	$('div').heightLine();
});

$(window).load(function()を記述するのは、画像の呼び込み前に実行してしまうと画像の呼びこみ前の高さに要素が揃ってしまうからです。
なので$(window).load(function()で囲むことをオススメします。

ウインドウがある横幅以内の場合のみ高さを揃えたい場合

jsファイルの設定

$(window).load(function() {
	$('div').heightLine({
	    maxWidth:767
	});
});

と記述します。上記の場合はウインドウ幅767px以内の時に要素の高さを揃えます。

ウインドウがある横幅以上の場合のみ高さを揃えたい場合

jsファイルの設定

$(window).load(function() {
	$('div').heightLine({
	    minWidth:768
	});
});

この場合だと、ウインドウ幅768px以上の時に高さを揃えます。

上の2つを組み合わせて更に細かい設定

jsファイルの設定

$(window).load(function() {
	$('div').heightLine({
	    maxWidth:767,
	    minWidth:481
	});
});

これだと481px〜767pxの場合に高さを揃えます。