ウェブサイトでよくある、以下のような「横並びにボックスが並ぶ」レイアウト。

これ自体は何てことないんだけど、これに枠が付いてたり、背景色が付いてたり、要は「ボックスの高さを認識させるための装飾」がある時は、ちょっと注意が必要。

こういうデザインを渡された時は、各要素の高さが成り行きで変動してしまうリスクがあるので、いくつか確認をする。

  • 『文字数の増減で高さがバラバラになる可能性がありますが、文字数は固定ですか?』
  • 『更新とかで手が入ることありますか?』

など。

手が入らない箇所なら、高さ固定でもいいし、テキスト画像とかでもいい。でも、流動的に更新されていくことが想定されるなら、高さを揃えてあげないといけない。

揃えるのはボックスの高さ、それとタイトルの高さ。タイトルの高さも揃えて上げないと、タイトルの高さのせいで説明文の開始位置が下にずれて、読みづらくなる。

揃えないとカッコ悪い、じゃなく可読性が下がるからってのが一番の理由。次にデザインの質が悪く見られないように、という理由。

大体、上記のようなレイアウトを使う時って、コーポレートサイトでのビジョンの打ち出しだったり、商品やサービスのキャッチだったり。

読んで欲しい、見て欲しい大切な部分なことが多いので、そこに対しては読みやすいように注意したいし、デザインの質が悪い印象を与えてしまうことで、ビジョンやキャッチが安く受け取られてしまうかもしれない。

極端な話、かっこいいとかかっこ悪いとかは、クライアント向けの満足感目的でしかない。もちろん、かっこいいに越したことはないんだけど。

で、実際に高さを文字数に応じて動的に揃えるためには、javascriptのパワーを借りなければいけないわけだけど、こういう状況での定番だったのは、「tile.js」っていうjQueryプラグイン。

自分もよくお世話になっていた。けど、もっと軽くて簡単なプラグインがあった。その名は「matchHeight.js」。以下はその設置方法。

設置例

まずは設置サンプルから。

See the Pen 【jQuery: matchHeight.js】任意を要素の高さを簡単に揃えるjQueryプラグイン by Tora (@webtoranomaki) on CodePen.

ソースコード

HTML

<div class="box">
	<h1>タイトル1</h1>
	<p>説明文</p>
</div>
<div class="box">
	<h1>タイトル2</h1>
	<p>説明文</p>
</div>
<div class="box">
	<h1>タイトル3</h1>
	<p>説明文</p>
</div>
<div class="box">
	<h1>タイトル4</h1>
	<p>説明文</p>
</div>

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.matchHeight.js"></script>
<script>
$(function() {
	$('.box').matchHeight();
	$('.box h1').matchHeight();
});
</script>

コード解説

CSSは、ボックスを横並びに配置して、幅を決めて上げて、あとは文字やボックスの装飾だけだから割愛。注目は、Javascriptのコード。今回は、.box.box h1の2つを揃えてるんだけど、指定は超簡単。上記のコードだけ。他にも高さを揃えたい要素があるなら追記するだけ。

他にも、公式サイトに使い方があるけど、以下のように高さを揃えるグループを分けることも可能。

<div data-mh="my-group">My text</div>
<div data-mh="my-group">Some other text</div>
<div data-mh="my-other-group">Even more text</div>
<div data-mh="my-other-group">The last bit of text</div>

本当に簡単。便利。