[JS]異なる高さのパネルを高いものに揃えたり、指定した高さに揃えるスクリプト -Equal Column Heights 2.0

異なる高さのdivなどの要素をもっとも高いものに揃えたり、指定した高さに揃えたりする「Equal Column Heights」がバージョンアップしたので、ご紹介。

簡単に実装でき、しかもさまざまな機能が強化されました。

デモのアニメーション

Equal Column Heights 2.0
Equal Column Heights 2.0 -GitHub

Equal Column Heights 2.0のデモ

デモはIE6+, Firefox4+, Chrome, Safari, Operaでご覧ください。

デモのキャプチャ

デモページ

各デモのキャプチャにコードを添えて紹介します。

デモのキャプチャ

Demo 1: 最も高い要素に高さを揃えます。

デモのキャプチャ

Demo 2: アニメーションで高さを揃えます。

デモのキャプチャ

Demo 3: 指定した高さに揃えます。

デモのキャプチャ

Demo 4: 最小の高さ(minHeight)を決め、高さを揃えます。

デモのキャプチャ

Demo 5: 最大の高さ(maxHeight)を決め、高さを揃えます。

デモのキャプチャ

Demo 6: 各オプションを組み合わせて高さを揃えます。

デモのキャプチャ

Demo 7: 高さを変更する際にさまざまなスタイルを加えることができます。
ここでは背景色をグレーに変更。

Equal Column Heights 2.0の使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/equal-height-columns.js"></script>

Step 2: HTML

各パネルを内包するラッパーを用意します。

<div class="hoge">
  <div>パネル</div>
  <div>パネル</div>
  <div>パネル</div>
</div>

Step 3: JavaScript

jQueryのセレクタでラッパーを指定し、スクリプトを実行します。

$(selector).equalHeightColumns();

スクリプトのオプションでは、アニメーションのスピード、最小・最大の高さの設定ができます。

speed
アニメーションのスピード
height
揃える高さ
minHeight
最小の高さ
maxHeight
最大の高さ

top of page

©2017 coliss