ピクスログ

サイトを作っていて、複数のブロックの高さを揃えたい時があるんですが、そういうときに役立つスクリプトがあったので紹介します。
しかし、こういうのって本当にたまたま見つける場合が多いなぁ（欲しい時は見つからないのに・・・

というわけで、簡単にブロック要素の高さを統一できる「heightLine.js」をご紹介します。
使い方はいたって簡単です。

1. 製作者様のサイト「to-R」に行ってスクリプトをダウンロード
2. ＨＴＭＬに下記コードで読み込ませる

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

3. 高さを揃えたい要素のクラスに「heightLine」を指定する

それだけで要素の高さがきれいに揃います。
クラスの指定も空白をあけて「class=”class_name heightLine”」と記述しても問題なく反映されるので使い勝手はかなり良いです。

さらに「heightLine-group1」、「heightLine-group2」などのようにグループ管理で高さを統一することもできるようですので、なかなか使いどころが多いかもしれません。
グループ名で管理する場合にはクラス名がちょっと長くなるので、「hl-group2」とかにスクリプトを書き換えてたいところですが。

あと、ページの読み込み毎にＤＯＭ解析をするので、高さを揃えたい要素が極端に多い場合や1ページのコンテンツが巨大な場合は動作が重くなったりするかもしれません。

アパレルや商品管理が含まれて、フロートとかで商品のブロックを並べたいときとかに重宝しそうです。
ギャラリーページとかで使ってもよさそうかな。