高さを揃えて規則正しくきれいにレイアウトするJquery

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

高さを簡単に揃えるjquery-match-height.js

jquery-match-height.js WEB制作

簡単なコードを書くだけで要素の高さを自動で揃えてくれる「jquery-match-height.js」の設置方法から、実際の使用例をわかりやすく画像付きで解説しています。サンプルのコードやキャプチャ画像を使っているので簡単に導入できます。

公開日:
最終更新日:

jquery-match-height.js 関連ワード #24
使い方
WEB制作
  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0

WEBデザインで大事なところ

WEB制作に限らずなんですが、知っているだけで差がつく知識や技術ってのがいろいろとあります。ちょっとした大きな違いじゃないけれど、ほんの少しの統一感があるだけで、全体の雰囲気が整って美しく見える。

そういった統一感を簡単に醸し出してくれる小技が今回紹介する「jquery-match-height」です。

要素の高さをそろえてくれるJquery「jquery-match-height」

<div>の高さが不揃いでfloatをかけたときに回り込んでしまってうまく<div>要素がそろってくれない。そんな時に役に立つJquery「jquery-match-height」をご紹介します。

高さをそろえてくれるJqueryはいろいろな種類が出ているのですが、私が愛用しているこの「jquery-match-height」は使い方が簡単で、重宝しています。もちろん、このサイトでも使用中。

まずは下記リンクより「jquery-match-height」をダウンロードしてください。

読み込み中
jquery-match-heightダウンロード

ダウンロードページ

ダウンロードした「jquery-match-height.js」を好きな場所に保存します。

使用したいページで保存した「jquery-match-height.js」を呼び出します。その際にこのJSを呼び出すより先にJqueryを呼び出しておいてください。

jquery-match-height.js 使用手順

まずは、Jqueryとjquery-match-height.jsを呼び出します。

下準備

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-match-height.js"></script>

次に、HTMLのソースのどこかに下記JSを記述します。Jqueryとjquery-match-height.jsを呼び出した後ならどこでもOKです。</body>の直前とかにしておくとgoogleのスピードテストで怒られずに済みますね。

HTMLのソースに記述する jquery-match-heightの呼び出し

<script type="text/javascript">
$(function(){
$('.js-matchHeight').matchHeight();
});
</script>

$('.js-matchHeight').matchHeight();の、.js-matchHeight というクラス名をつけた要素の高さを揃えてくれます。
ちなみにクラス名はなんでもOKです。

高さを揃えたい要素に記述する内容

<div class="js-matchHeight">高さを揃えたい要素1</div>
<div class="js-matchHeight">高さを揃えたい要素2</div>

これだけで不揃いだったDIV要素の高さを自動で揃えてくれます。CSSの記述も不要です。簡単!

jquery-match-height.js 使用前、使用後のイメージ

DIVの高さを揃えるというのがどういったときに使うのが便利なのか、実際に使用しているこのサイトのキャプチャーを使ってお伝えいたします。

高さが不揃いのレイアウト

高さが不揃いのレイアウト

<div>の高さが不揃いだと見た目の統一感がなく、不揃いになるだけでなく、次の要素がへこんでいる箇所に入ってしまい、本来あるべき場所に回り込んでくれなくなります。キャプチャのように。

高さをそろえたレイアウト

高さをそろえたレイアウト

そこでこの「jquery-match-height.js」を使うことで、DIV要素の高さを揃え、規則正しく並び、回り込みも想定通りにならべてくれるわけです。

指定したクラス名が付与された要素にインラインで統一された height:〇〇px が指定されているのがレンダリングされたHTMLを見るとわかります。

使用イメージ

使用イメージ

一番高い要素に合わせてheightを算出してから指定するため、読み込みに時間がかかる場合、バラバラで表示されることもありますが、読み込みが完了すると高さがそろいます。

高さを揃えられるのは親要素

jquery-match-height.jsで揃えられるのは同列の要素となります。子要素にjquery-match-height.jsを指定しても高さはそろいません。

イメージ図

イメージ図

同列の親要素の<div>に対してjquery-match-height.jsをかけると高さがそろいます。

Dreamweaverのテンプレートにセットしておくと便利

このサイトではドリームウィーバーのテンプレートに「jquery-match-height.js」を読み込んでおいて、呼び出しのfunctionもテンプレートに組み込んでつかっています。

使いたいときに<div>のclass名に「js-matchHeight」を振るだけで高さがそろってくれるので便利です。

最後に言うのもなんなんですが…

掲載当時はこれ使っていたんですが、今はCSSの display:flex で高さをそろえられるので、こちらのJSは使っておりません。(2019年10月現在)
技術の進化は素晴らしいですね。

WEBデザイナーを目指すならオンライン学習のUemy

  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0
はてなブックマーク

おもしろかったらぜひ、はてなブックマークをお願いいたします。

次の記事はこちら

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
40歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

jquery-match-height.js オススメ関連コンテンツ

jquery 関連記事はこちら すべての WEB制作 記事はこちら

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

1行のCSSで作る横スライドの作り方

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

PHPを使った漢字クイズの作り方解説 その1 POST送信

PHPを使った漢字クイズの作り方解説 その1 POST送信

【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。

14年間使ったロリポップのライトプランからスタンダードプランへ変更

14年間使ったロリポップのライトプランからスタンダードプランへ変更

14年間使っていたロリポップのライトプラン(月額250円)からスタンダードプランへランクアップしてみました。

PHPの良いところは難しいと思われていること

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

本をめくるJqueryライブラリ bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

CLS対策をしてPageSpeed Insightsを大幅改善

CLS対策をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

ブログアクセスランキング

新着記事

カテゴリリスト

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
40歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

WEB制作関連・オススメ商品 amazon