要素の高さを揃えたいときはjquery.matchHeight.jsなら導入が簡単!

CMSを組み込んだホームページの制作をしているときによくある、要素が横並びのレイアウト。

コーディング前のデザインだと綺麗に整列してるけど、実際にコーディングしてみると要素内テキストの長さの可変が前提になってない…。なんてこと、よくありますよね。

そんなとき、同じ段に横並びする要素の高さを揃えるのに便利なjQueryプラグインがjquery.matchHeight.jsです。

CSS3のFlexboxでも対応できますが、jQueryのほうが慣れてるし。。という方にはおすすめです。

実際の動きはデモサイトを見てもらえればわかりますが、要素内テキストの行数が異なっていても、横並びの要素同士ならうまい具合に高さを一緒にしてくれます。

実際に使ってみよう

使い方はとっても簡単です。

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

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

.matchHeightというクラスは適当に変えてもOKです。

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

シンプルで使い勝手が良いプラグインなので重宝しています。ぜひお試しあれ!

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »