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

WEBデザインが学べるWEBデザインコース テックアカデミー

週2回のマンツーマンでのメンタリングや毎日15時～23時のチャット･レビューサポートなど短期間でオリジナルサイトをデザインできるようになる学習プログラムです。
1件目の副業紹介を100%紹介してくれるので、副業を始めたい方にオススメのコースになっています。