[JS]実装も超シンプル、高さや幅が異なるエレメントを揃えるシンプルなスクリプト -equalize.js

エレメントの高さ（height）、幅（width）だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。

equalize.js

• equalize.jsのデモ
• equalize.jsの使い方

equalize.jsのデモ

デモはモダンブラウザをはじめ、IE7でも動作します。
まずは、デフォルトの高さ（height）を揃えるやつから。

デモ：高さ

デモの「run」ボタンをクリックすると、高さが揃います。

デモ

幅（width）も中身に関係なく、同じサイズに揃います。

デモ：幅

equalize.jsの使い方

Step 1: 外部ファイル

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/equalize.js" type="text/javascript"></script>

Step 2: HTML

HTMLは適用する要素を内包するラッパーを用意します。
下記はデモの高さを揃える方のHTMLです。

<div id="height-example">
	<div>equalize</div>
	<div>equalize content height</div>
	<div>equalize</div>
	<div>equalize</div>
	<div>equalize</div>
	<div>equalize content</div>
	<div>equalize</div>
	<div>equalize</div>
	<div>equalize content height</div>
	<div>equalize</div>
</div>

Step 3: JavaScript

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

$('#height-example').equalize();

スクリプトのオプション

equalize.jsはデフォルトの高さ（height）以外にも、さまざまなサイズを揃えることができます。

• height（デフォルト）
• outerHeight
• innerHeight
• width
• outerWidth
• innerWidth

上記デモにもある幅（width）を揃える時は、下記のように記述します。

$('#width-example').equalize('width');