【JavaScript】特定の要素内の複数のボックスの高さを揃える[Right Height]の使い方。

Ads by Google

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

もしテーブル・デザインで対応できる範疇ならば簡単ですが、そうではなく、ボックスの枠線を表示させたり背景に画像や「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 実装サンプル

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google