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

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


もくじ(実装サンプル)
1.【失敗例】横並びのある要素が揃ってない
See the Pen
【失敗例】jQuery『matchHeight.js』、横並びのある要素が揃ってない by 125naroom (@125naroom)
on CodePen.
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
<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
<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
<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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに


関連記事
【CSS】Flexbox、flex-direction: column;とflex-grow: 1;を使ってボタンの位置を合わせる
おすすめ
かんれん
- web / 2020.11.1
- 【CSS】使える背景パターン、実装サンプル25選(コピペで簡単です)
- web / 2018.10.26
- 【CSS】ラインの下に三角の影をつくる
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.12.08New
- 信州アップルパイ研究所_Q
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.11.30
- 【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える
- 指定した場所で出したいのですよー そして指定した場所で消したいのですねー もくじ 実…
- 125naroom / デザインするところ(会社)です。