要素の高さ揃えには「jquery.matchHeight.js」

こんにちは、Naya☆LogのRiku Nayaです♪

ウェブデザインのコーディングをしていると、要素の横並び&高さ揃えにはほぼほぼ100%出くわしますよね。

特に高さ揃えの可変対応は必須。

今では、CSS3のFlexboxでめちゃくちゃ簡単に対応できますが、BOX内の要素が複雑であったりすると、逆にFlexboxで対応するのが難しくなったりします。

そういう時はに便利なのが、「jquery.matchHeight.js」です。

jQueryのほうが慣れてるし！という方にもおすすめです。

jquery.matchHeight.jsのダウンロード

まずは、jquery.matchHeight.jsファイルのダウンロードが必要です。

jquery.matchHeight.jsのGithubページからダウンロードしたプラグインファイルを読み込んでjQueryを一行書くだけ。あらかじめjQuery本体は読み込んでおきましょう。

記述するべきもの

先ほど、ダウンロードしたjquery.matchHeight.jsファイルとjQuery本体を読み込みます。

そして下記のように、jQueryを1行書きます。

あとは、高さを揃えたい要素に同じクラス名を付与するだけです！

これだけで指定したクラスが付与された横並び要素の高さがきれいに揃います。

.matchHeightというクラスは適当に変えてもOKです。要素をfloatして2段、3段と増えていくようなレイアウトでも、良い感じに同じ段の要素同士で高さを合わせてくれます。

<script type="text/javascript" src="js/jquery.matchHeight.js"></script>
<script>
$(function(){
　　$('.matchHeight').matchHeight();
});
</script>

<ul>
  <li class="matchHeight">テキストが入ります。テキストが入ります。</li>
  <li class="matchHeight">テキストが入ります。テキストが入ります。テキストが入ります。</li>
  <li class="matchHeight">テキストが入ります。</li>
</ul>

まとめ

かなり便利で簡単なjQueryですが、Flexboxで可能な部分は、Flexboxで対応する方が無駄にjsファイルを増やすというリスクを回避できるので、Flexboxを使うべきだと思います。

という意味でも、Flexboxとjquery.matchHeight.jsどちらも身につけておくのがオススメです♪

Flexboxにハマった時にはオススメですので、是非是非お試しあれ♪