高さを揃えて規則正しくきれいにレイアウトする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の関連ページ

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

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

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

bookblock

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

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

カレンダー

PHP+HTMLで作る 祝日対応のカレンダーの作り方

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

POST送信

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

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

PHP覚え方

PHPを手っ取り早く覚えるには作りたいものを作ること

PHP単体でもHTMLよりもできることの幅はひろがるけれど、それにプラスしてデータベースを扱えるようになると無敵感を味わえます。

WEB言語紹介

WEB制作をささえるHTML・CSS・Javascript・PHP

いつもWEB制作をささえてくれるいろいろな言語を紹介しています。 他にもMySQLがあるんですが長くなるので割愛しました

ランダム表示バナー

PHPで作るランダムバナー表示プログラム

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

カレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHPの覚え方

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

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

配列の解説

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

PHPを使って作るCMS

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

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

marginとpadding

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

CLS対策初級編

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

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

CSSで作る横スライド

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

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

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

WEBフォント設定

WEBフォント使用時の最適な設定を考える

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

アイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

tableデザイン

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

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

WEBフォント設定
1位

WEBフォント設定

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

ランダム表示バナー
2位

ランダム表示バナー

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

机上台
3位

机上台

机上台という机の上に設置し、モニターを置きデッドスペースになるモニターの下に空間を生み出す悪魔的発想の商品を使ってみました。

ノートPCスタンド
4位

ノートPCスタンド

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

CZUR
5位

CZUR

面倒な領収書のスキャニングが超簡単に完了できるLens Proのレビューです。 テクノロジーの進化を体感してびっくりしました。

ここひえ
6位

ここひえ

ショップジャパンのパーソナルクーラー「ここひえ」を購入して使った感想と気づいたこと。 風を正面に受けると涼しいです

PHPの覚え方
7位

PHPの覚え方

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

CLS対策上級編
8位

CLS対策上級編

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

ミトラ
9位

ミトラ

肩こりは普段の姿勢と肩甲骨の稼働範囲の狭さが原因なので、肩甲骨のストレッチと正しい睡眠姿勢は大事だなと感じました。

MX MASTER3
10位

MX MASTER3

ロジクールのマウスは文句なしの出来栄えなんですよ。 だから高くても私は買いますよ。これ以外使う気ないですからね。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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