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

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

きのこさん
flexboxの中にあるこの部分の高さを揃えたいのだけど!
きのこさん
そんな時には、『matchHeight.js』を使いましょうー

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

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

HTMLとjQueryはこちら

HTML

<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>

CSS

.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%;
}

jQuery

なし。

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

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

HTMLとjQueryはこちら

HTML

<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>

CSS

.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%;
}

jQuery

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

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

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

HTMLとjQueryはこちら

HTML

<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>

CSS

.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;
}

jQuery

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

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

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

HTMLとjQueryはこちら

HTML

<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>

CSS

.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;
}

jQuery

$(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();
});

オプション設定

オプション 説明 初期値
byRow 行ごとに高さを決める false
property 高さの設定方法を指定(‘height’ or ‘min-height’) ‘height’
target 一番高い高さを使用するのではなく、指定した要素の高さを使用する null
remove 高さ揃えの設定を削除する false

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

matchHeight on GitHub

メモ

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

jQuery日本語リファレンス

jQuery(英語版)

さいごに

きのこさん
あたしが欲しかったの、これだー!
きのこさん
よかったですー、さ、パン食べに行きましょうー

関連記事

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

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

日産|ブランドサイト
日産|ブランドサイト
ぼくのトミカ #1
ぼくね、もっと走りたいんだよ