ブロック要素の高さを揃える3つのJavascriptライブラリJavascript

こんにちは。デザイナーのツチヤです。
年明け最初の更新となります。
今年もどうぞよろしくお願いいたします！

前回、前々回とHTMLとCSSでは実現が厳しい「縦方向中央のレイアウトをjQueryで簡単に行う」という記事をご紹介しましたが、今回は「ブロック要素の高さを揃えるJavascriptライブラリ」をご紹介したいと思います。こちらもデザイナーにとって、HTMLとCSSのみでは実現が難しい悩みの種のひとつだと思います。
そこで、今回は公開されている既存のライブラリの3つを使用してサンプルを作成してみました。

ライブラリ１：heightLine.js

http://blog.webcreativepark.net/2007/07/26-010338.html
「heightLine.js」を使用する事により、ブロックレベル要素（li要素）の最大の高さに統一されます。使い方が3つ用意されていますので、制作物に合うものを選択します。

＜メリット＞

高さを揃える場合はこちらのライブラリが定番という方も多いと思います。
ネット上で多く紹介されており、安心感があります。

＜設置方法＞

配布元より「heightLine.js」をダウンロードします。
head内にheightLine.jsを読み込みます。

<script type="text/javascript" src="heightLine.js"></script>

＜サンプル＞

height_sample/height_sample1.html
配布元の「使い方3」を使用したサンプルです。
heightLineParentというclass名をul要素に付与します。
2つのheightLineParentの装飾を変えたい場合、外側にdivを追加します。

ライブラリ2：fixHeight.js

http://www.starryworks.co.jp/blog/tips/javascript/fixheightjs.html
高さを揃えたい要素の親要素に「fixHeight」というクラスを付与すれば、行ごとのグループを自動で判断して高さを揃えてくれるjQueryプラグインです。
使い方が3つ用意されていますので、制作物に合うものを選択します。

＜メリット＞

タイトルの高さ、テキスト内容の高さをどちらとも揃えたいデザインに最適です。

＜設置方法＞

jQueryを使用していますので準備します。
配布元より「fixHeight.js（fixHeight-v2.0.js.zip）」をダウンロードします。
head内にjQueryと「fixHeight.js」を読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fixHeight.js"></script>

＜サンプル＞

height_sample/height_sample2.html
配布元の「使い方3」を使用したサンプルです。
行ごとにタイトル部分とテキスト部分の高さを揃える事ができます。

ライブラリ3：jquery.tile.js

http://urin.take-uma.net/Entry/16/
http://urin.take-uma.net/Entry/13/
指定した複数の要素の高さを、その中の最大の高さに揃えるjQueryプラグインです。

＜メリット＞

とても軽量で、class名を自由に指定したい場合にオススメです。

＜設置方法＞

jQueryを使用していますので準備します。
配布元より「jquery.tile.js」をダウンロードします。
head内にjQueryと「jquery.tile.js」を読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tile.js"></script>

＜サンプル1＞

height_sample/height_sample3_1.html
配布元の「使用方法1」を使用したサンプルです。
上記＜設置方法＞に追記します。

$(function(){

$(".box ul li").tile();

});

.boxを内包するli要素の最大の高さに統一されます。

＜サンプル2＞

height_sample/height_sample3_2.html
配布元の「使用方法2」を使用したサンプルです。
上記＜設置方法＞に追記します。

$(function(){

$(".box ul li").tile(3);

});

.boxを内包するli要素の高さを各行の最大に揃えます。列数を引数に指定します。
当サンプルでは3列ですので3を指定しています（tile(3);部分）。


以上になります。
今回サンプルとして紹介させていただいたライブラリの配布元の方々に感謝したいと思います。ありがとうございました。

今後もシンプルだけどかゆいところに手が届くようなTipsをご紹介していければと思います！