ニュースや新着情報などで横並び（float）のレイアウトを使った時、中のテキストの長さによって要素の高さが変わってしまい、見た目がガタガタになってしまうことがありますよね。
そんな時便利なのがこの『jquery.matchHeight.js』です。たった数行のjQueryを書くだけで、横並びになった要素の高さを揃え、見た目をきれいにしてくれます。
目次
実際に動きを見てみよう
まずは本家のサイトのデモを見て動きを確認してみよう
あわせて読みたい
テキストの行数や画像の縦幅が異なっていてもきれいに揃っています。[reomve matchHeight]ボタンを押すとこのプラグインを読み込む前の動作になり、その差は一目瞭然です。
導入手順
ソースコードをダウンロード
とっても簡単に導入できるので早速やってみましょう。
本家サイトのリンクからGitHubのページに移動し、ソースコードをダウンロードします。
GitHub – liabru/jquery-match-height: a responsive equal heights plugin
必要ファイルの読み込み
jQueryとプラグイン本体を自分の環境に合わせて設置して読み込みましょう。
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.matchHeight-min.js"></script>
<script>
$(function(){
$( '.matchHeight' ).matchHeight(); // ここで高さを揃えたい要素のclassを指定
});
</script>HTML
以下のようにマークアップします。
<ul>
<li class="matchHeight">
matchHeightテスト
</li>
<li class="matchHeight">
matchHeightテストmatchHeightテスト<br>
matchHeightテスト
</li>
<li class="matchHeight">
matchHeightテスト<br>
matchHeightテスト<br>
matchHeightテスト
</li>
</ul>必要な作業は以上です。簡単ですね。
クラス名に[matchHeight]の部分は自分の好きなように設定してもOKです。