ウェブデザイナーの毎日のお仕事のメモ

作成日:2020.11.12  最終更新日:2021.02.03

js / jQuery

簡単に高さを揃えるjquery.matchHeight.js(jsプラグイン)の使い方

要素の高さを合わせることがcssだとどうしてもできない場合があり、そのような場合に使用するjquery.matchHeight.jsの使い方のメモです。

jquery.matchHeight.jsの使い方手順

①ファイルのダウンロード

jquery.matchHeight.jsのページ (Githubのページ)にアクセスしします。
緑色のcodeボタンを押し、Download Zipボタンを押したら、ダウンロードが始まります。

②必要なファイルを任意のフォルダに設置する

ダウンロードしたファイルは以下のような構成になっています。

実際に必要なのは、

  • jquery.matchHeight.js

の1つのファイルですので、任意のフォルダこれらのファイルを設置してください。

③ファイルを読み込む

※ファイルの読み込みパスは、ご自身の環境に合わせて変更してください。
※jquery.matchHeight.jsを読み込む前にjqueryも読み込んでおきます。

<script src='jquery.js'></script>
<script src="jquery.matchHeight.js"></script>

④JS・HTMLにjquery.matchHeight.jsを動かすコードを書く

HTML

例えば、横並びの記事のリストがあるとして、中身のテキストの量が違うため、ボタンの位置を下に揃えたいのに、ボタンの位置が合わない、という以下の図の様な場合を想定してコードを書いていきます。

記事部分のHTMLは以下の様にしています。

<div class="item">
 <div class="thumb"><img src="img/img_01.jpg" alt=""></div>
 <h2>見出し</h2>
 <p class="txt">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
 <a href="">ボタン</a>
</div>

今回は、.txtの部分の高さを揃えたいと思っています。

JS

jsは以下のようになります。

$('.txt').matchHeight();

完成サンプル

上記コードを書いた完成系は、以下の図の様になります。(一番下にサンプルもありますので、ご確認ください。)

以下、サンプルです。
ブラウザのサイズを小さくすると、4つ横に並んでいたきじが、2つ並びになって、1つ並びになって、と変化するようにしているのですが、.txtに関しては、上記のjsの記述以外、特に書かなくても、.txtの高さが、レスポンシブに対応されています。
ブラウザの幅を変えるなどしてご確認ください。

最新記事