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

こんにちは、ハル@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>
  • .box1 → クラスを指定した例
  • #wrap01 > div → 特定の親要素配下の子要素を指定
  • #ad, #main, #nav → 複数のidをまとめて指定

このように、id名(#xxxx)でもclass名(.xxxx)でも使用可能 です。

実務での活用シーン

  • 商品一覧のカードデザインを揃える
  • サービス紹介ページでのボックス配置
  • ブログ記事一覧のレイアウト
  • 複数のバナーや広告枠の整列

高さが揃っているだけで、見た目の印象が大きく変わります。訪問者にとって「整ったデザイン=信頼できるサイト」という心理効果も期待できます。

注意点と補足

  • レスポンシブ対応:ウィンドウサイズが変わると高さが再計算されない場合があります。その場合はリサイズイベントと組み合わせて再実行すると良いです。
  • 最新環境ではCSSでも可能display: flex; align-items: stretch; を使えばCSSだけで揃えることもできます。
  • jQuery不要の実装を求めるなら、JavaScriptの matchHeight.js やCSS Gridを検討しても良いでしょう。

まとめ

jQueryの「flatHeights」プラグインを使えば、わずか数行のコードで複数のボックスの高さを自動的に揃えることができます。古いサイトの改修や、既存プロジェクトにサッと導入したいときに非常に便利です。

最近ではCSSで解決できるケースも増えましたが、Web制作の現場ではまだまだjQueryプラグインが活躍する場面があります。特に 商品一覧・ブログカード・広告枠の整列 など、ユーザーの視認性やデザインの統一感を重視する場合にはおすすめです。

[jQuery 高さ 揃える プラグイン] や [レスポンシブ レイアウト崩れ 対策] を探している方の参考になれば幸いです。

おわりっ

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次