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

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

サイトのキャプチャ

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');

top of page

©2017 coliss