[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height

サイト構築 -JavaScript

Post on:2015年9月10日

Right Heightのデモ

デモページ

デモページがシンプルすぎるので、いろいろなケースを試してみました。
ダミーテキスト: 日本語と英語の組見本用のダミーテキスト配布サイトのリンク集

高さを揃えるエリアと要素を指定できる

Right Heightの特徴の一つはエリアを複数設定でき、それぞれで高さを揃えられることです。

1-3、4-6で、エリアを指定

エリア内で適用する要素を指定することもできます。

7は無指定、8-9は高さを揃える

レスポンシブ対応

パネルの幅が狭くなったり、縦一列に配置されても、期待通りの動作をします。

幅が狭くなっても、高さは一緒

スマホなどで、縦一列に配置された際には、成り行きになります。

縦一列時には、成り行き

複数の行にも適用できる

高さを揃えるのは一行内だけでなく、複数の行に渡って揃えることもできます。

1-6でエリアを指定、1-6が同じ高さに

1-3、4-6でエリアを指定、1-3と4-6が同じ高さに

Right Heightの使い方

Step 1: スクリプトの準備

当スクリプトを外部ファイルとして記述し、初期化しておきます。
スクリプトは、これで完了。

<body>
  ...
  コンテンツ
  ...
<script src="js/right-height.js"></script>
<script>
  rightHeight.init();
</script>
</body>

Step 2: HTML

HTMLのポイントは、2つ。

data-right-height: 適用するエリアを指定
data-right-height-content: 適用する要素を指定

<div class="row" data-right-height>
    <div class="grid-third" data-right-height-content>
        1. 高さを揃える
    </div>
    <div class="grid-third" data-right-height-content>
        2. 高さを揃える
    </div>
    <div class="grid-third">
        3. 高さを揃えない
    </div>
</div>

「data-right-height-content」を指定した要素は高さを揃え、指定していない要素は成り行きになります。