llc.beReady

Art × Web Design

jQuery

matchHeightで横並びの要素の高さを任意の要素に揃える方法!

要素の高さを揃えるjQuery

 

普段ウェブサイト制作をしていて、
いろいろと要素を作って、横並びにしていくのですが、
例えば右側に写真、左側に文章といった構成で作ることって
結構多いんですね。

そういったときに困るのが、要素の高さが揃わないこと。

これには原因があって、floatで要素を横並びにする場合、
要素の高さを自動的に揃えることはできないんです。

heightを指定して、高さを揃えても、中身のコンテンツの量が
増えたりした場合ははみ出してしまいます。

そんなときに役立つjQueryプラグインが
「matchHeight」です。

 

matchHeightとは

 

matchHeightではこちらで指定した要素の高さに、

他の要素の高さを自動的に調節してくれるプラグインです。

めちゃくちゃ便利なものなので解説していきますねー!!

 

matchHeightのダウンロード

 

matchHeightはこちらのリンクからダウンロードできます。

GitHub

clone or downloadからダウンロードしてください。

 

早速高さ揃えちゃうよ!!!

 

まずはDEMOページからご覧ください。

デモページ

中身のコンテンツの量が違っても、高さが揃ってるでしょ!?!?

すげえ嬉しいですよね。。。

matchHeightでは高さを合わせたい要素たちに任意でclassを与えて、
どの要素の高さに合わせるのか、

つまりターゲットを設定することで動いています。

具体的にコードで確認してみましょう。

このbox1とbox2の高さを揃えたいと思います。
box1には画像が入っており、box2にはテキストが入っていると
考えてくださいね。

box1とbox2に任意のclass=”match”を追加します。

こうなりますね。
matchは別に任意ですので、なんでもいいですよー!

ここまできたら、

こう記述します。
僕はfooter.phpにまとめてscriptが入っているので、
そこに記述していきます。

この解説をすると、任意のclass=”match”を
ターゲットを決めて、そのターゲットの高さに揃えますよ!
ってことになります。

ここではbox1の高さに揃えています。
つまり、画像が入っている要素の高さに
テキストが入っている要素の高さを揃えたってことになりますね。

これを応用すれば、横並びに要素が4つあったとしたら、
4つすべてにmatchとクラスをつけてあげて、
ターゲットを一番要素の中身が多いやつにしてあげれば、
中身のコンテンツがはみ出すことなく、4つ全ての高さを揃えることができますね。

高さを揃えるのはwebデザインの肝!!

 

要素の高さが揃ってないと気持ち悪いですよね。
最近では不均一にしてオシャレに見せるサイトもありますが、
基本は高さを揃えることです。

これでまた一段とかっこいいサイトが作れますね!!

LEAVE A REPLY

*
*
* (公開されません)