同じ種類の要素（ボックス）が、その中身が異なっているため高さが揃わずにレイアウトが崩れてしまうことがあります。
そんな時に、レスポンシブに対応した、要素の高さを揃えてくれるjQueryのプラグインjquery.heightLine.jsの使い方です。
目次
1.ダウンロード
こちらからダウンロードして下さい。
jquery.heightLine.js
右クリックで「リンク先を別名で保存」でhtmlファイル階層のjsフォルダに保存してください。
2.ファイルの読み込み
htmlファイルの</body>直前に下記を設定
|
1 2 |
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="../jquery.heightLine.js"></script> |
3.設定
最後にjsファイルに記載します。
jsファイルの設定
|
1 2 3 |
$(window).load(function() { $('div').heightLine(); }); |
なので$(window).load(function()で囲むことをオススメします。
ウインドウがある横幅以内の場合のみ高さを揃えたい場合
jsファイルの設定
|
1 2 3 4 5 |
$(window).load(function() { $('div').heightLine({ maxWidth:767 }); }); |
ウインドウがある横幅以上の場合のみ高さを揃えたい場合
jsファイルの設定
|
1 2 3 4 5 |
$(window).load(function() { $('div').heightLine({ minWidth:768 }); }); |
上の2つを組み合わせて更に細かい設定
jsファイルの設定
|
1 2 3 4 5 6 |
$(window).load(function() { $('div').heightLine({ maxWidth:767, minWidth:481 }); }); |