【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にファイルを読み込むコードを記述するよ。

<script src="jsを設置しているディレクトリ/jquery-3.4.1.min.js"></script>
<script src="jsを設置しているディレクトリ/jquery.matchHeight.js"></script>

1 2	<script src="jsを設置しているディレクトリ/jquery-3.4.1.min.js"></script> <script src="jsを設置しているディレクトリ/jquery.matchHeight.js"></script>

CDNを利用する

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

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

<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- matchHeight.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

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

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

高さを揃えるための記述

HTML

<ul>
  <li style="list-style-type: none">
    <ul>
      <li>ゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラ</li>
    </ul>
  </li>
</ul>
<ul>
  <li style="list-style-type: none">
    <ul>
      <li>ラッパラッパラッパラッパラッパラッパラッパラッパラッパラッパ</li>
    </ul>
  </li>
</ul>
<ul>
  <li style="list-style-type: none">
    <ul>
      <li>パンダパンダパンダパンダパンダ</li>
    </ul>
  </li>
</ul>
<ul>
  <li style="list-style-type: none">
    <ul>
      <li>ダチョウダチョウ</li>
    </ul>
  </li>
</ul>

<ul>

<ul>

<li>ゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラ</li>

</ul>

</li>

</ul>

<ul>

<ul>

<li>ラッパラッパラッパラッパラッパラッパラッパラッパラッパラッパ</li>

</ul>

</li>

</ul>

<ul>

<ul>

<li>パンダパンダパンダパンダパンダ</li>

</ul>

</li>

</ul>

<ul>

<ul>

<li>ダチョウダチョウ</li>

</ul>

</li>

</ul>

jQuery

$(function() {
	$('ul li').matchHeight();
});

$(function() {

$('ul li').matchHeight();

});

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>横並び要素の高さを揃える</title>
</head>
<body>
<style>
ul li{
  float:left;
  background-color:#424242;
  width:23%;
  margin:0 1%;
  padding:10px;
  box-sizing:border-box;
  line-height:1.5rem;
  color:#fff;
}
</style>
<ul>
  <li>ゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラ</li>
  <li>ラッパラッパラッパラッパラッパラッパラッパラッパラッパラッパ</li>
  <li>パンダパンダパンダパンダパンダ</li>  
  <li>ダチョウダチョウ</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
<script>
$(function() {
    $('ul li').matchHeight();
});
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>横並び要素の高さを揃える</title>

</head>

<body>

<style>

ul li{

float:left;

background-color:#424242;

width:23%;

margin:0 1%;

padding:10px;

box-sizing:border-box;

line-height:1.5rem;

color:#fff;

}

</style>

<ul>

<li>ゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラ</li>

<li>ラッパラッパラッパラッパラッパラッパラッパラッパラッパラッパ</li>

<li>パンダパンダパンダパンダパンダ</li>

<li>ダチョウダチョウ</li>

</ul>

$(function() {

$('ul li').matchHeight();

});

</script>

</body>

</html>

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

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

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

まとめ

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

横並び要素の高さにわざわざjQueryを使うことはあまりないかもしれないけど

もしflexboxを使わずに横並びの高さを揃える必要があったらぜひ使ってみてね！

それじゃまた今度！

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

Twitter
@michelgorilla

Facebook
ミケランジェロ