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

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

flexboxの中にあるこの部分の高さを揃えたいですー

今回はプラグインを使ってみましょうー

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

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

HTMLとCSSと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

// なし

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

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

HTMLとCSSと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();
});

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

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

HTMLとCSSと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();
});

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

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

HTMLとCSSと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