float（フロート）させた横並びのカラムの高さをそろえたい！！ だけど、ボックス内の内容量に差がある為、レイアウトが崩れて困っている…
今回は、そんなあなたに便利なjQueryのプラグイン『matchHeight.js』の使い方を紹介したいと思います。
matchHeight.jsの使い方
GitHubの『 liabru / jquery-match-height 』にアクセスします。
下の画像の赤枠で囲んだ『Clone or download』→『Download ZIP』をクリックします。
ダウンロードされたフォルダ『jquery-match-height-master』を開き、『jquery.matchHeight.js』をコピーします。
使用したいWebサイトのフォルダ内に『js』というフォルダを作り、その中に STEP2 でコピーした『jquery.matchHeight.js』をペーストします。
ここからは、HTML側で読み込む為の作業をしていきます。
bodyの終了タグの直前にコードを記述していきましょう。
まずは、jQueryのプラグインを動かす基本として、最初にベースとなる jQuery本体 を読み込ませる必要があります。
<!-- jquery本体 読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>ちなみに、script要素は特に問題がない限り、</body>の手前に記述するのが一般的です。
しかし、head内で読み込まないと動かないjQuery、逆にbodyの終了タグの直前でないと動かないjQueryもあります。
一度、bodyの終了タグの直前で読み込んでみて、うまく動かなければhead内で読み込んでみる方法をお勧めします。
次に『matchHeight.js』を読み込ませる為のコードを記述します。
<!-- matchHeight.js 読み込み -->
<script type="text/javascript" src="js/jquery.matchHeight.js"></script>GitHubの『 liabru / jquery-match-height 』のページに戻り、下にスクロールして使用法『Usage』をコピーしましょう。
<script>
$(function() {
$('.item').matchHeight(options);
});
</script>これは『matchHeight.js』を動かす為のコードです。
これを STEP5 で記述したコードの下にペーストします。
この時、 scriptタグ で囲むことを忘れないようにして下さい。（上記はすでに囲んであります。）
上記コード内の「options」は、ここに記述することで高さ関連の指定をすることができるのですが、今回は使わないので「options」という文字は削除します。
上記コード内の「.item」は class名になります。任意の名前に変更することができますが、今回は「.item」というclass名のまま使用することにします。
最後に、高さを揃えたい div に STEP6 の「item」という class名を追加するだけで、横一列に高さがそろった状態になります。
まとめ
今回は、float（フロート）させた横並びのカラムの高さを揃えたい時に手軽に使える『matchHeight.js』の使い方をご紹介しました。
JSライブラリーの中でも使いやすいのでお勧めです。