WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >作業効率化

Webサイトをコーディングしているときに横並びの要素の高さを揃えたいときって様々な場面でありますよね。ただ、文字数が長い要素と短い要素が横並びになるときがあります。
例えばこのような感じに…

See the Pen
横並びbox-01 by saki kurita (@saki_0415)
on CodePen.

自動的に高さがが揃ってくれたら楽なのに…と考えた時に使えるライブラリが「jquery.matchHeight.js」です。
このライブラリファイルを読み込み、揃えたい要素をjQueryで指定することで簡単に要素の高さを揃えることが可能です。
では導入方法について解説していきます！

まずはダウンロードします

まずはjquery.matchHeight.jsのGithubページからZIPファイルをダウンロードします。
解凍したファイルの中身は下記のように入っていて、使うファイルは赤枠で囲ったJSファイルのみです。

あらかじめ、jQuery本体ファイルを読み込み、jquery.matchHeight.jsも一緒に読み込むようにしましょう。

記述方法

下記のようにjQuery本体ファイルとjquery.matchHeight.jsを読み込みます。格納場所はご自身のディレクトリ構成に合わせて変更ください。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.matchHeight.js"></script>

<script>
$(function(){
　　$('.matchHeight').matchHeight(); //←この1行で高さを揃えます
});
</script>

そして、高さを揃えたい要素を指定してjQueryを記述します。
これだけで要素が自動的に高さが揃います！最初にお見せした、バラバラになっていたボックスを揃えたサンプルが下記になります。

実行サンプル

See the Pen
横並びbox-js by saki kurita (@saki_0415)
on CodePen.

その他オプション

デフォルトオプションは下記の通りです。

{
byRow: true,
property: ‘height’,
target: null,
remove: false
}

もっと細かく設定をしたい場合には下記のようにオプションがあります。
Githubのページ内にも記載されているので日本語訳してそちらも参考にしてみてください。

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

まとめ

横並びの要素の高さを揃えるにも方法は色々とありますが、導入が簡単なライブラリを使用するのも効率化になります。
いざという時すぐに使えるのでぜひダウンロードしておいてみてください。