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

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

高さを簡単に揃えるjquery-match-height.js
  • jquery > jquery-match-height.js
  • 高さを揃えて規則正しくきれいにレイアウトするJquery

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

  • LAST UP DATE:
  • 高さを揃える簡単レイアウト

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」

a responsive equal heights plugin. Contribute to liabru/jquery-match-height development by creating an account on GitHub.

転載元:https://github.com/liabru/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」を振るだけで高さがそろってくれるので便利です。

実際に使っている技術を紹介していきたいと思います

実際にこのサイトで使用している技術を中心に、WEBの便利な小技なんかを紹介していきたいと思います。

SNSでシェア&感想をつぶやく


併せて読みたい WEB制作 関連記事

ブログ新着記事一覧

ブログテーマ&記述者

WEBを使って色々と面白いことをやりたいと思っています。テーマもジャンルもなく思いついたことをつらつらと書いていきます。Amazonで買ってよかったものや、Amazonプライムで楽しんだものやオススメ商品のレビュー、アプリの紹介などを書いていきます。よろしくお願いします。

fuchi
WEBクリエイター
39歳 ♂ 鳥好き

Jquery関連書籍 アマゾン