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

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

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

#24 jquery-match-height.js

WEB制作

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

公開日:
最終更新日:

サイトマップサイトマップ

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デザイナー・プログラミング学習にオススメ

jquery-match-height.jsの関連ページ

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

MusicBeeのレイアウト変更方法
1位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

ノートPCスタンド
2位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

ウルトラブースト
3位

ウルトラブースト

一度はいたら手放せない! アディダスの「ウルトラブースト」搭載のハイテクシューズのレビューとオトクに購入する方法です

コンプライ
4位

コンプライ

評判と値段の高いコンプライのイヤーピースの購入後1週間レビュー!柔らかいウレタン素材のイヤーピースは装着前に指でつぶして耳穴に装着します。

将棋を覚えなおす
5位

将棋を覚えなおす

将棋って面白いんですよ。弱ければいろいろと覚えることがあって、戦法を覚えることで強くなっていくことを実感できますし。

つまづきやすい5つのポイント
6位

つまづきやすい5つのポイント

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

ATGOIN
7位

ATGOIN

基本性能はどの商品もさほど差がない3000円台のBluetoohは音の良しあしで選ぶのがオススメ。

アンズテック
8位

アンズテック

小学生向けのゲームプログラミングオンラインスクール「アンズテック」。 仕様言語は「Scratch」と「Unity」となっています。

ツタヤディスカス
9位

ツタヤディスカス

定額レンタル宅配CD・DVDサービスのツタヤディスカスを利用してみました。 1ヵ月で20枚レンタルしました!1枚93円!

限定最強説
10位

限定最強説

マーケティングの勝ちパターン「限定」を毎日作ったら売れるんじゃないかと思って、期間限定と数量限定を掛け合わせたマーケテスト

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。