【jQuery】要素の高さを揃えたい!《matchHeight 編》

477 view

matchheight

要素を横並びにしたものの、高さがバラバラで見栄えが悪い……
せっかくなら綺麗なレイアウトで見せたいですよね。

そんなときに登場するのが…

『matchHeight』です!!!
jquery.matchHeight.js – a responsive equal heights plugin for jQuery

なんとなんと、こいつを使えば横並びの要素が同じ高さに大変身。
ちょいと便利すぎません?

挙動の確認はこちらのデモサイトからどうぞ。
(ページ上部のチェックボックスやボタンも触ってみてね!)

使い方

まずはGithubページから「jquery.matchHeight.js」をダウンロード。

あとはプラグインを読み込んでコードをちゃちゃっと書くだけ。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.matchHeight.js"></script>
<script>
jQuery(document).ready(function($) {
$('.cls-matchHeight').matchHeight();
});
</script>
<ul>
<li class="cls-matchHeight">pen</li>
<li class="cls-matchHeight">apple</li>
<li class="cls-matchHeight">applepen</li>
</ul>

……ちょいと簡単すぎません?

これで終わりでもいいくらいなんですけど、せっかくなのでmatchHeightの特徴をバババッと書いていきましょう!

3つの特徴

1. 一行ごとに高さを揃えてくれる!

これがかなり便利。

デモを見ていただければわかると思いますが、
何も指定せずとも行ごとに高さを揃えてくれるんです!

高さ揃えのプラグインを探す中で、一番欲しかった機能かもしれません。

2. レスポンシブ対応!

レスポンシブにも対応してくれてます。ありがたや。

デモサイトで画面幅を縮めてみてください。
カラム落ちした後も隣り合う要素を識別して高さを揃えてくれます。

3. グループ化もできちゃう!

HTML5のdata属性を使えば、グループ化も可能。

<li data-mh="group1">pen</li>
<li data-mh="group1">pineapple</li>
<li data-mh="group2">apple</li>
<li data-mh="group2">pen</li>

こんな風に、高さを揃えたい要素を個別に指定できます。
意外と使う機会ありそう。

というわけで今回紹介した『matchHeight
サイトの見た目が気になっている方はぜひ使ってみてください!

WRITER

ゆーた

制作 ゆーた

新潟生まれ新潟育ちの24歳。

現在は制作部として奮闘中。たまにカメラも構える。
体力なさそうなのはデフォルトです。