要素の高さを揃えたいときはjquery.matchHeight.jsなら導入が簡単!
CMSを組み込んだホームページの制作をしているときによくある、要素が横並びのレイアウト。
コーディング前のデザインだと綺麗に整列してるけど、実際にコーディングしてみると要素内テキストの長さの可変が前提になってない…。なんてこと、よくありますよね。
そんなとき、同じ段に横並びする要素の高さを揃えるのに便利なjQueryプラグインがjquery.matchHeight.jsです。
CSS3のFlexboxでも対応できますが、jQueryのほうが慣れてるし。。という方にはおすすめです。
実際の動きはデモサイトを見てもらえればわかりますが、要素内テキストの行数が異なっていても、横並びの要素同士ならうまい具合に高さを一緒にしてくれます。
実際に使ってみよう
使い方はとっても簡単です。
jquery.matchHeight.jsのGithubページからダウンロードしたプラグインファイルを読み込んでjQueryを一行書くだけ。あらかじめjQuery本体は読み込んでおきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 | <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> |
これだけで指定したクラスが付与された横並び要素の高さがきれいに揃います。
.matchHeightというクラスは適当に変えてもOKです。
要素をfloatして2段、3段と増えていくようなレイアウトでも、良い感じに同じ段の要素同士で高さを合わせてくれます。
シンプルで使い勝手が良いプラグインなので重宝しています。ぜひお試しあれ!