【jQuery】横並びの高さを揃える『matchHeight.js』実装サンプル集

横並びの要素の高さを揃えてくれるプラグイン『matchHeight.js』の使い方と、制作に役立つ実装サンプルをまとめました。
「flexboxの中にあるこの部分の高さを揃えたいのだけど！」って言う時にはとってもおすすめです。

flexboxの中にあるこの部分の高さを揃えたいのだけど！

そんな時には、『matchHeight.js』を使いましょうー

1.【失敗例】横並びのある要素が揃ってない

See the Pen
【失敗例】jQuery『matchHeight.js』、横並びのある要素が揃ってない by 125naroom (@125naroom)
on CodePen.

<div class="oneArea">
  <div class="oneBox">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。</div>
  <div class="oneBox">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。</div>
  <div class="oneBox">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。近くのスーパーで雨宿りをすることにした。飴でも買おうかと男が言った。女は「うん」と言った。</div>
  <div class="oneBox">赤い服を着てる。<br>青い服を着てる。</div>
  <div class="oneBox">赤い服を着てる。<br>青い服を着てる。<br>赤というよりもオレンジに近い。<br>青というよりも優しいブルー。<br>男の口調は柔らかい、女は小さく笑う。<br>少し雨が降ってきた。</div>
  <div class="oneBox">赤い服を着てる。<br>青い服を着てる。<br>赤というよりもオレンジに近い。<br>青というよりも優しいブルー。<br>男の口調は柔らかい、女は小さく笑う。<br>少し雨が降ってきた。<br>近くのスーパーで雨宿りをすることにした。<br>飴でも買おうかと男が言った。<br>女は「うん」と言った。</div>
</div>

.oneArea .oneBox {
  float: left;
  width: 32%;
  border: 4px solid #111;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  text-align: left;
  padding: 20px;
  margin: 0.6665%;
}

なし。

2.【成功例】横並びのある要素がキレイに揃っている

See the Pen
【成功例】jQuery『matchHeight.js』、横並びのある要素がキレイに揃っている by 125naroom (@125naroom)
on CodePen.

<div class="oneArea">
  <div class="oneBox">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。</div>
  <div class="oneBox">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。</div>
  <div class="oneBox">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。近くのスーパーで雨宿りをすることにした。飴でも買おうかと男が言った。女は「うん」と言った。</div>
  <div class="oneBox">赤い服を着てる。<br>青い服を着てる。</div>
  <div class="oneBox">赤い服を着てる。<br>青い服を着てる。<br>赤というよりもオレンジに近い。<br>青というよりも優しいブルー。<br>男の口調は柔らかい、女は小さく笑う。<br>少し雨が降ってきた。</div>
  <div class="oneBox">赤い服を着てる。<br>青い服を着てる。<br>赤というよりもオレンジに近い。<br>青というよりも優しいブルー。<br>男の口調は柔らかい、女は小さく笑う。<br>少し雨が降ってきた。<br>近くのスーパーで雨宿りをすることにした。<br>飴でも買おうかと男が言った。<br>女は「うん」と言った。</div>
</div>

.oneArea .oneBox {
  float: left;
  width: 32%;
  border: 4px solid #111;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  text-align: left;
  padding: 20px;
  margin: 0.6665%;
}

$(function() {
	$('.oneBox').matchHeight();
});

3.【失敗例】flexboxの中にある、横並びのある要素が揃ってない

See the Pen
【失敗例】jQuery『matchHeight.js』、flexboxの中にある、横並びのある要素が揃ってない by 125naroom (@125naroom)
on CodePen.

<div class="oneArea">
  <div class="oneBox">
    <div class="text">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。</div>
    <div class="title">やんわりとした生活</div>
  </div>
  <div class="oneBox">
    <div class="text">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。</div>
    <div class="title">やんわりとした生活</div>
  </div>
  <div class="oneBox">
    <div class="text">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。近くのスーパーで雨宿りをすることにした。飴でも買おうかと男が言った。女は「うん」と言った。</div>
    <div class="title">やんわりとした生活</div>
  </div>
  <div class="oneBox">
    <div class="text">赤い服を着てる。<br>青い服を着てる。</div>
    <div class="title">やんわりとした生活</div>
  </div>
  <div class="oneBox">
    <div class="text">赤い服を着てる。<br>青い服を着てる。<br>赤というよりもオレンジに近い。<br>青というよりも優しいブルー。<br>男の口調は柔らかい、女は小さく笑う。<br>少し雨が降ってきた。</div>
    <div class="title">やんわりとした生活</div>
  </div>
  <div class="oneBox">
    <div class="text">赤い服を着てる。<br>青い服を着てる。<br>赤というよりもオレンジに近い。<br>青というよりも優しいブルー。<br>男の口調は柔らかい、女は小さく笑う。<br>少し雨が降ってきた。<br>近くのスーパーで雨宿りをすることにした。<br>飴でも買おうかと男が言った。<br>女は「うん」と言った。</div>
    <div class="title">やんわりとした生活</div>
  </div>
</div>

.oneArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.oneArea .oneBox {
  width: 32%;
  background: #fff;
  margin: 0.6665%;
}
.oneArea .oneBox .text {
  font-size: 14px;
  padding: 20px;
}
.oneArea .oneBox .title {
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 15px 20px;
  background: #111;
}

$(function() {
	$('.text').matchHeight();
});

4.【成功例】flexboxの中にある、横並びのある要素がキレイに揃っている

See the Pen
【成功例】jQuery『matchHeight.js』、flexboxの中にある、横並びのある要素がキレイに揃っている by 125naroom (@125naroom)
on CodePen.

<div class="oneArea">
  <div class="oneBox">
    <div class="text">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。</div>
    <div class="title">やんわりとした生活</div>
  </div>
  <div class="oneBox">
    <div class="text">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。</div>
    <div class="title">やんわりとした生活</div>
  </div>
  <div class="oneBox">
    <div class="text">赤い服を着てる。青い服を着てる。赤というよりもオレンジに近い。青というよりも優しいブルー。男の口調は柔らかい、女は小さく笑う。少し雨が降ってきた。近くのスーパーで雨宿りをすることにした。飴でも買おうかと男が言った。女は「うん」と言った。</div>
    <div class="title">やんわりとした生活</div>
  </div>
  <div class="oneBox">
    <div class="text">赤い服を着てる。<br>青い服を着てる。</div>
    <div class="title">やんわりとした生活</div>
  </div>
  <div class="oneBox">
    <div class="text">赤い服を着てる。<br>青い服を着てる。<br>赤というよりもオレンジに近い。<br>青というよりも優しいブルー。<br>男の口調は柔らかい、女は小さく笑う。<br>少し雨が降ってきた。</div>
    <div class="title">やんわりとした生活</div>
  </div>
  <div class="oneBox">
    <div class="text">赤い服を着てる。<br>青い服を着てる。<br>赤というよりもオレンジに近い。<br>青というよりも優しいブルー。<br>男の口調は柔らかい、女は小さく笑う。<br>少し雨が降ってきた。<br>近くのスーパーで雨宿りをすることにした。<br>飴でも買おうかと男が言った。<br>女は「うん」と言った。</div>
    <div class="title">やんわりとした生活</div>
  </div>
</div>

.oneArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.oneArea .oneBox {
  width: 32%;
  background: #fff;
  margin: 0.6665%;
}
.oneArea .oneBox .text {
  font-size: 14px;
  padding: 20px;
}
.oneArea .oneBox .title {
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 15px 20px;
  background: #111;
}

$(function() {
	$('.text').matchHeight();
});

matchHeight.jsのダウンロード

まずはmatchHeight.jsに必要なファイルを下記サイトからダウンロードします。

matchHeight on GitHub

matchHeight.js 公式サイト

matchHeight.jsの使い方

ダウンロードファイルの中で必要なファイルは以下の1点です。（distフォルダに入っています。）

• jquery.matchHeight-min.js

※『min』のついてないファイルでもオッケーです。『min』が付いているファイルは改行などがない容量軽減版になります。

HTML

<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.matchHeight.js"></script>

CDNを使う場合は、

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

jQuery

基本的な書き方。
高さを揃えたい要素にクラスを付与する。

$(function() {
	$('.oneBox').matchHeight();
});

オプション設定

下記ページにその他のオプション内容と設定方法が詳細に載っています。
（英語ページになります。日本語翻訳するとわかりやすかったりします。）

matchHeight on GitHub

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery（英語版）

さいごに

あたしが欲しかったの、これだー！

よかったですー、さ、パン食べに行きましょうー

関連記事

【CSS】Flexbox、flex-direction: column;とflex-grow: 1;を使ってボタンの位置を合わせる

【CSS】Flexboxの使い方と実装サンプル集