SHIGANAKUNAI

しがなくないデザイナーを目指す備忘録

JavaScriptでブロック要素の高さを揃える

『同レベルの情報が入っているブロック要素を横に〇個つずつ並べる』というレイアウトのデザインをすることがあります。
僕が勤める会社は旅行サイトをよく制作するのですが、 ホテルの名前・写真・説明などが入ったボックスを並べるのがまさにそれです。

単に並べるだけなら高さを指定してfloatするだけで綺麗に並びますよね。
しかし、情報量に応じて〇個並ぶブロック要素の全ての高さを可変させるという条件がよくあります。
全ての高さを揃えるほうが次の段の面が合うので、見た目は美しく情報も読みやすくなります。が、コーディングで再現するのは結構手間なものです…

  • 〇個ずつをdivで囲い背景画像を指定する
  • tableタグを使う
  • paddingやmarginを駆使
  • CSS3のdisplay:box;を使う

などなど、いくつか再現方法がありますが、どれもデメリットがあります。
特に1つ目、2つ目の方法では並び替えが手間になるので柔軟性が低くなります。

…柔軟性を保ちつつ、もっと簡単にやりたい!!
そんな時はJavaScript!!

JavaScriptを使うと簡単に上記の表現を再現できます。すごく便利。

この手のスクリプトは何種類かありましたが動作に癖があるものもあります。
使用する機会が多いのでそれぞれの特徴をメモしておきます。

heightLine.js

heightLine.js

to-Rさん製スクリプト。記事投稿日を見ると2007年!そんな頃からあったんですね!これが一番有名な気がします。
特徴は…

  • class=”heightLine”がついた要素を全て同じ高さにする
  • class=”heightLine-group1″、class=”heightLine-group2″などグループ化可能
  • 親要素にclass=”heightLineParent”を付けると子要素の高さが同じになる

です。これ系のスクリプトで私が最初に使ったのはこのheightLine.jsでした。

とっても便利なheightLine.jsですが一つ問題が…
高さを揃えた要素に謎の余白が付きます…
firebugで調べてもpadding-bottomが付いているわけではないのでバグではないかと思いますが、コーディング時にはこの余白を考慮しなければいけません。

jquery.flatheights.js

jquery.flatheights.js

上記heightLine.jsの派生版。heightLine.jsとの違いは…

  • jQueryプラグインになった
  • 不定個数のブロック要素に対して、n個ずつのブロックごとに高さを揃える
  • 高さを揃えるclass名を自由に変更できる

heightLine.jsに加えて便利な機能が追加されています。特に2つめの「n個ずつ毎に高さを揃える」というのはとても便利です。
ただしheightLine.jsと同じ、謎の余白がつくというバグも引き継いでいます…
これ系のスクリプトではしょうがないのか?と思ってしまいます。
あとスクリプトと関係は無いけど、デモページの文字化けが気になります。

Equalbox

Equalbox

かなりシンプルなスクリプトです。
上記2つの余白バグはありませんが、機能もシンプルです。
heightLine.jsよりは良いけど…って感じです。

jquery.sameHeight.js

jquery.sameHeight.js

こちらもシンプルなスクリプト。機能的にはEqualboxと近いと思います。
cssによってバグがあるそうです。

jquery.tile.js

jquery.tile.js

こいつが本命。
jquery.flatheights.jsと同じ機能を備えながら、余白のバグもありませんでした!
本家ページには他のスクリプトとソースを比較しています。シンプルなのもプラスです。

というわけで、今後コーディング時はjquery.tile.js一択でいこうと思います。
開発者の皆さん、いつもお世話になっております!!

AKIO KAI

からあげと温泉のまち、大分県出身大阪在住8年目。しがなくないデザイナーを目指してWeb、DTP、映像編集、3DCG、VRとかやってます。

著者の最新記事

  1. うりん 2012.02.17 11:28pm

    jquery.tile.js作者のうりんです。ご利用(とご紹介)ありがとうございます!このプラグインはまだまだマイナーな部類なので、知っていただけただけでも嬉しいです。

    • 0
    • 0

HTMLタグはご利用いただけません。