目次
導入方法
ダウンロード
GitHubにアクセスしてzipファイルをダウンロードしてください。
zipファイルを展開してjquery.matchHeight.jsを適当なディレクトリに配置してください。
コード
まずはjQuery本体と、jquery.matchHeight.jsを読み込みましょう。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.matchHeight.js" type="text/javascript"></script>
次に高さが異なるdivタグを6個つくります。
各divには共通のclass box-groupと、個別のclassを記述します。
<div class="box-group box1"> ボックス1ボックス1ボックス1ボックス1ボックス1ボックス1<br> ボックス1ボックス1ボックス1ボックス1ボックス1ボックス1 </div> <div class="box-group box2"> ボックス2ボックス2ボックス2ボックス2ボックス2ボックス2<br> ボックス2ボックス2ボックス2ボックス2ボックス2ボックス2<br> ボックス2ボックス2ボックス2ボックス2ボックス2ボックス2 </div> <div class="box-group box3"> ボックス3ボックス3ボックス3ボックス3ボックス3ボックス3<br> ボックス3ボックス3ボックス3ボックス3ボックス3ボックス3<br> ボックス3ボックス3ボックス3ボックス3ボックス3ボックス3<br> ボックス3ボックス3ボックス3ボックス3ボックス3ボックス3 </div> <div class="box-group box4"> ボックス4ボックス4ボックス4ボックス4ボックス4ボックス4<br> ボックス4ボックス4ボックス4ボックス4ボックス4ボックス4<br> ボックス4ボックス4ボックス4ボックス4ボックス4ボックス4<br> ボックス4ボックス4ボックス4ボックス4ボックス4ボックス4<br> ボックス4ボックス4ボックス4ボックス4ボックス4ボックス4 </div> <div class="box-group box5"> ボックス5ボックス5ボックス5ボックス5ボックス5ボックス5<br> ボックス5ボックス5ボックス5ボックス5ボックス5ボックス5<br> ボックス5ボックス5ボックス5ボックス5ボックス5ボックス5<br> ボックス5ボックス5ボックス5ボックス5ボックス5ボックス5<br> ボックス5ボックス5ボックス5ボックス5ボックス5ボックス5<br> ボックス5ボックス5ボックス5ボックス5ボックス5ボックス5 </div> <div class="box-group box6"> ボックス6ボックス6ボックス6ボックス6ボックス6ボックス6 </div>
各divの共通classにwidthやfloatの設定をして、わかりやすいように個別のclassに背景色を設定します。
.box-group{
width:400px;
float:left;
margin:10px;
padding:10px;
color:#fff;
}
.box1{ background:#0000ff;}
.box2{ background:#006505;}
.box3{ background:#00A8EF;}
.box4{ background:#e29808;}
.box5{ background:#FF4E4E;}
.box6{ background:darkblue;}
各ボックスの高さが同じになるスクリプトを記述します。
$(function() {
$('.box-group').matchHeight();
});
[btn class=”rich_pink”]デモ確認[/btn]
上記のスクリプトだと画面サイズによってはbox4かbox5ぐらいで改行されると思います。
改行された場合はその行で一番高さがあるdivと同じ高さになります。
同じclassはすべて高さを同じにしたい場合は、byRowパラメータをfalseにして設定します。
$(function() {
$('.box-group').matchHeight({byRow: false});
});
[btn class=”rich_pink”]デモ確認[/btn]
