複数のブロック要素の高さを揃えてくれるJavaScriptライブラリ「fixHeight.js」
はじめまして、こんにちは。趣味は朝練のウエニシです。
既にweb上には業界の諸先輩方が書いておられるTipsなどが星の数ほどありますが、
上級者向けに書かれた記事などで内容が省略されていて、初心者や中級者にとってはもう少し詳しく説明されているとありがたいなあと思う事がよくあります。
自分自身もその一人で、調べたい事に関して説明しているサイトをいくつか見て、要約してまとめる事が多いです。ので、
そういったものを自分のメモの中で終わらせるのではなく、自分の備忘録的な意味も込めて、
このブログで公開していきたいと思います。
もちろんその他の事もいろいろ書いて行きたいと思っております!
記念すべきブログ1号目は、弊社の代表の木村が作りました、
複数のブロック要素の高さを、一行ごとに一番高い高さに揃えてくれるJavaScriptライブラリ「fixHeight.js」の事について書きたいと思います。
※このスクリプトは古いバージョンのものです。
大幅に改良された最新版がこちらにあります。
ブロック要素の高さを揃えるJavaScriptとしては、「to-R」の西畑さんが既に「heightLine.js」というのを作っておられて、
弊社でも何例か使わせていただきました。
ただ実際の案件で使用するにする際に、極端に量の多いコンテンツを含んだブロック要素が一つでもあった場合には
他の行の全てのブロック要素もその高さに合う事になってしまいます。
できれば行ごとにその行で一番高いブロック要素に高さが合った方が便利だという事で、
弊社の代表の木村が一行ごとに、一番高いブロック要素に揃える、「fixHeight.js」というのを作りました。
ダウンロード
以下のリンクからダウンロードできます。
fixHeight.js.zip(4KB)
※このスクリプトは古いバージョンのものです。
大幅に改良された最新版がこちらにあります。
設置方法
通常のJavaScriptと同様に、headタグの中に「fixHeight.js」を読み込みます。
使用方法その1. 直属の子のブロック要素の高さを同じにする
高さを揃えたいブロック要素の直属の親のブロック要素に「fixHeight」というクラスを付けます。
全ての直属の子のブロック要素の高さを同じにする方法です。
使用方法その2. 指定した個数ごとにブロック要素の高さを同じにする
4個のブロック要素ずつ行を揃えたい、というような個数の指定がある場合、
高さを揃えたいブロック要素の直属の親のブロック要素に「fixHeightN○(最後の○には、何個ごとに揃えたいか数字で指定。<例>fixHeightN4 )」というクラスを付けます。
使用方法その3. 全自動モード
高さを揃えたいブロック要素の直属の親の階層のブロック要素に「fixHeightNAuto」というクラスを付けます。
リキッドレイアウトの際に、ウインドウサイズを大きくして直属の子のブロック要素が横に増えてもきちんと一行ごとに高さを合わせてくれます。
JavaScript上で各ブロック要素のy座標が同じもののブロック要素の高さを全て揃える、という処理を行っています。
この使用方法が一番オールマイティで実用的だと思います。
2009.5.20
2009.5.3
2009.4.27
2009.4.20
オプション使用方法
クラスを付けたブロック要素の中の、直属の子ブロック要素ではなく別のブロック要素の高さを合わせたい、という場合は
その高さを合わせたいブロック要素に「fixHeightChild」というクラスを付けます。
これは、使用方法その1・2・3、全てで使用可能です。
・ ・ ・2009.5.20
2009.5.3
2009.4.27
2009.4.20
ライセンス
MITライセンスです。個人でも商用でも無料で利用可能です。
このスクリプトの利用により直接的または間接的に生じたいかなる損害に関しても、その責任を負いません。
まだまだ未熟者の書いたスクリプトなのでバグやおかしな書き方してる部分などあれば、是非コメントください。
コメント
Commentsトラックバック
TrackBacksTrackBack URL : http://www.starryworks.co.jp/mt/mt-tb.cgi/88


誤解があるといけないのでコメントしておきます。
------
ただ実際の案件で使用するにする際に、極端に量の多いコンテンツを含んだブロック要素が一つでもあった場合には
他の行の全てのブロック要素もその高さに合う事になってしまいます。
------
とありますが、西畑氏の作成されたheightLine.jsでも1行ごとに「heightLine-group1」といったクラス名をつけることで、上記の問題は回避できるようになっています。
あと、記載されていませんが、これを使うにはjQueryが必須です。