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

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

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

メモ

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

さいごに

これだー
これかー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

12

/

8

2024

Googleさんの
おすすめ

12

/

8

2024

デザインの記事

映画『ラストマイル』公式サイト
映画『パレード』
【jQuery】スライダープラグイン「slick」実装サンプル集