【jQuery】ブロックレベルの高さを揃える簡単な方法

2020年11月21日2025年9月25日

こんにちは、ハル@haru_elpisです。

今回は 「jQueryでブロックレベル要素の高さを揃える方法」 について、備忘録としてまとめておきます。Web制作をしていると、複数のボックスやカラムを横並びに配置したときに、高さがバラバラになってしまいレイアウトが崩れて見えることがあります。特に、商品一覧やカード型のレイアウトを作るとき、テキストの量が異なると高さが合わず、デザイン的に不揃いで見づらくなることがありますよね。

そんなときに便利なのが、jQueryプラグイン 「jquery.flatheights.js」 です。非常にシンプルで、指定した要素の高さを自動的に揃えてくれるため、初心者でも簡単に使えるのが魅力です。

jQueryで高さを揃えるメリット

レイアウト崩れを防げる
商品一覧やブログカードが整って見える
デザイン性・可読性が向上する
CSSだけでは難しいケースでも対応できる

最近は FlexboxやGridレイアウト でも高さを揃えることができますが、古いブラウザへの対応が必要な場合や、既存のサイトに簡単に導入したいときには、jQueryプラグインを利用するのが手軽です。

ダウンロードと設置方法

まず、以下のリンクからプラグインをダウンロードします。

👉 jquery.flatheights.js ダウンロード

ダウンロードした「jquery.flatheights.js」ファイルを、自分のプロジェクトの js フォルダなど任意の場所に保存しておきましょう。

HTMLファイルにjQuery本体と一緒に読み込みます。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/jquery.flatheights.js"></script>

実際のコード例

以下のように、揃えたい要素を指定するだけでOKです。

<script type="text/javascript">
$(function() { 
  $('.box1').flatHeights(); 
  $('#wrap01 > div').flatHeights(); 
  $('#ad, #main, #nav').flatHeights(); 
}); 
</script>