ウェブサイト製作時に、ほぼ必ずと言っていいほど発生する問題。
その１つは「複数のボックスの高さを揃える」ことではないでしょうか。

もしテーブル・デザインで対応できる範疇ならば簡単ですが、そうではなく、ボックスの枠線を表示させたり背景に画像や「background-color」を指定する際は何らかの解決策を考える必要があります。

多くの場合は配布されているjQueryプラグインで対応することになりますが、有名なものでは［heightLine.js］または［jquery.heightLine.js］や［jQueryAutoHeight.js］、［matchHeight］などが挙げられます。

それぞれ特徴があり、掲題の問題を解決できる素晴らしいライブラリです。

今回ご紹介する［Right Height］はこの分野では比較的新しいプラグインで、動作も軽快でレスポンシブにも対応、またjQueryに依存せずに使用できるということで、個人的にはこの分野の大本命だと思っています。

［Right Height］の導入

その使い方ですが、まずは以下よりファイルをダウンロードしてきましょう。

Right Height

そしてHTMLの適当な箇所で「right-height.js」を読み込みます。
このときに初期設定のための「rightHeight.init();」というコードもあらかじめ記述しておきましょう。

<script src="/js/right-height.js"></script>
<script>
rightHeight.init();
</script>

続いて横並びにした複数のボックスの部分を作り込んでいきます。

<div class="col" data-right-height="data-right-height">
	<div class="col-3" data-right-height-content="data-right-height-content">
		Content 1
	</div>
	<div class="col-3" data-right-height-content="data-right-height-content">
		Content 2
	</div>
	<div class="col-3" data-right-height-content="data-right-height-content">
		Content 3
	</div>
</div>

ここでのポイントは、親要素となるボックスにHTML5のカスタムデータ属性で data-right-height を指定すること。さらに子要素には data-right-height-content を指定します。

基本的にこの設定で実装され、data-right-height-content を付与した要素の高さを揃えることができます。

実際に使ってみたサンプルは以下のリンク先からご覧ください。

Right Height 実装サンプル