【jQuery】matchHeight.jsを使って横並び要素の高さを揃えよう

【jQuery】matchHeight.jsを使って横並び要素の高さを揃えよう

どうも、ジャングルオーシャンのミケです。

今日は横並び要素の高さが揃えられるmatchHeight.jsのご紹介だよ!




なぜ高さを揃えるの?

Webサイトを制作していると

ナビゲーションなどで要素を横に並べることがあるよね。

横に並べた時に要素の中身の多さによって

要素の高さも変わってくるから

見栄えが悪くなっちゃうよね。

こんな感じで。

See the Pen
ExjeZWm
by mike (@michelangelojo)
on CodePen.

これを、一番高さがある要素に合わせて

自動で揃えてくれるのが「matchHeight.js」なんだよ。

それじゃ記述方法をみていこう!

必要なファイルの用意

ファイルのダウンロード

まずはjQueryの設置をするよ!

jQueryの公式サイトからファイルをダウンロードしてね。

jQueryの公式サイトはこちら

次にmatchHeight.jsを入れるよ。

公式サイトからダウンロードしてね。

matchHeight.jsの公式サイトはこちら

まずは「Download」という項目の

matchHeight on GitHub」と、青色で書いてある箇所をクリックしてね。

そうすると、GitHubのページに飛ぶので

Clone or download」という緑のボタンをクリックして

ファイルをダウンロードしてね。

zipファイルがダウンロードできるので解凍して

中に入っているファイルを取り出してね。

必要なファイルは

jquery.matchHeight.jsだよ。

これで必要なファイルは揃ったから

次にHTMLにファイルを読み込むコードを記述するよ。

 

CDNを利用する

CDNを利用して各ファイルを読み込むこともできるよ。

HTMLに記述するソースコードは以下になるよ。

 

必要なファイルは揃ったので

次にHMTLとjQueryを記述していくよ。

高さを揃えるための記述

HTML

jQuery

jQueryの「ul li」の所には高さを揃えたい要素を指定してね。

一つのHTMLファイルに全てを記述するとこんな感じ↓になるよ。

matchHeight.jsにCSSは特に必要ないけど、横並びにしたり見た目を整えるためにCSSを使っているよ。

これをまとめるとこんな感じ↓になるよ。

See the Pen
eYNLBBa
by mike (@michelangelojo)
on CodePen.

まとめ

最近ではWebサイト制作にflexboxを使うことも多いから

横並び要素の高さは気にすることがないかもしれないけど

もし必要だったらぜひ使ってみてね!

それじゃまた今度!

TwitterやFacebookのフォローよろしくね!

Twitter
@michelgorilla

Facebook
ミケランジェロ




プログラミングカテゴリの最新記事