ブロックレベル要素の高さを揃えるheightLine.js
Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。
ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。
このライブラリは新バージョンがあります。
レスポンシブWebデザインに対応した「jquery.heightLine.js」
CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。
このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。
設置方法
head要素内にダウンロードしたheightLine.jsを読み込みます。
<script type="text/javascript" src="./heightLine.js"></script>これだけで設置は終了です。
使い方1
統一したいブロックレベル要素に『heightLine』というclass名を付けます。
そうすれば『heightLine』というclass名が付けられたブロックレベル要素が(高さが最も高いものに)統一されます。
使い方2
『heightLine-group1』
『heightLine-group2』
などのように、heightLineの後ろに-(ハイフン)で続けてグループ名(好きなものをつけて下さい)を指定することにより複数のグループで高さを統一することができます。
使い方3
これが一番、使い勝手が良いのではないかと思うのですが
『heightLineParent』というクラス名をつけると、その要素の、子供の要素の高さを統一することができます。
ライセンス
MIT-Licenseで公開・配布しております。
バグ・不具合・要望等ありましたら、コメント欄よりお願いします。
更新情報等を配信するFeedシステムを作ってるので、それができたら公開や公開後のフォローなどもスムーズに行くかもと考えているのですが・・・
更新履歴
2007/9/24 safariで動作しない、borderを指定しない場合のieでのバグを修正しました。
2007/9/24 高さの算出の精度を上げました。
2007/8/3 prototype.jsのobjectオブジェクト汚染に対応
関連エントリー
ページ内リンクをスマートにするsmoothScroll.js
ie以外でもクリップボードが使えるsetClipboard.js
一番簡単な画像置換の方法-imageReplace.js-
アルファ画像を扱うalphafilter.jsライブラリ
Lightboxを使い画像を拡大表示する。
角丸javascriptライブラリ『curvyCorners』を使ってみる
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ
クロスフェードを実装する為のCrossfader
スポンサードリンク
«クロスフェードを実装する為のCrossfader | メイン | クリエイティブ・コモンズは万能ではない»
- このエントリーのトラックバックURL
- https://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1251
- トラックバック内容
-
» links for 2007-07-26
from hands in hands
ブロックレベル要素の高さを揃えるheightLine.js[to-R]... -
» ブロックレベル要素の高さを揃えるjsライブラリー
from ProjectDD Blog
Web標準の日々「J3 jsライブラリで実装する効率的なWeb制作」のグループデ... -
» 「ブロックレベル要素の高さを揃える」というネタ
from ネタ蔵のネタ
to-Rさんのところで・・・ 「ブロックレベル要素の高さを揃えるheightLine.js」 というのを見つけました。 これ、なかなか便利なはず。 今後、... -
» 高さを揃えてくれるheightLine.js
from SHOWTIME:WEB STUDY: とあるweb制作者のサイト
僕がコーディングをするとき、cssよりもテーブルの方が勝っている点といえば、 高さや縦位置の調整や、横に組が並んだとき。 テーブルに関しては同じ行であれば... -
» Javascriptライブラリ＆Tips紹介記事のまとめ
from 仕事の効率を上げる blog
以下の記事にて、グラフィック関連、グラフ関連、カレンダー関連、エフェクト関連な... -
» links for 2007-07-24
from hands in hands
サポート情報│Yahoo! BBサービス 無線LANパックの設定方法（... -
» CSS Nite in Osaka Vol.6（無料版）を開催
from CSS Nite公式ブログ
2007年10月26日金19時から、アップルストア心斎橋にて無料版のCSS Ni... -
» ブロックレベル要素の高さを揃えるjsライブラリー
from My Color 「ダンクハーツ-谷春樹Blog-」
商品一覧ページなどをコーディングするときに、 のように表示されてほしいのに のよ... -
» ブロックレベル要素の高さを揃えるheightLine.js
from CSS Lecture
Webサイトを作る時に「ブロックレベル要素の高さを揃えたい！」って時にはブロック...
![Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)](https://images-na.ssl-images-amazon.com/images/P/4048913913.09._OU09_SCMZZZZZZZ_.jpg)
heightLine.js のソース、拝見させていただきました。1 つ教えていただければと思いコメントさせていただきます。
addEvent 関数で、try catch で IE のための処理を分けられていますが、個人的には次のような if 文で分ける方法をこれまで採用していました。
if(elm.addEventListener) {
elm.addEventListener(listener, fn, false);
}
else {
elm.attachEvent("on" + listener, fn);
}
try catch にすることによるメリットはあるのでしょうか？ご教授いただけると幸いです。何となく try catch のほうがしっくりくる気がするようなしないような…。
うおー、本気で作られるとは！ すごいです。。 ぜひ使わせていただきます。
＞みさねさん
ご質問ありがとうございます。
(表面的な)挙動はどちらも同じなので、どちらでもよいと思いますが、個人的には文字数が少ないのでtry catchを愛用しています。
個人的な趣向ということで
＞たにぐち まことさん
そうなんですよ。つくっちゃいましたｗ
ライブラリ案の中にはどー作っていいのか見当もつかないものもあるのですが、作れるものから順番に作っていこうかなと。
またなにかありましたら相談に乗ってください。
西畑さんのセッションとっていた者 from 大阪です。
ありがとうございます。
さっそくどっかで使わせていただきたいとおもいます。
ご回答ありがとうございます！
エラー検出であれば if 文より try catch のほうが適切な気がしてきました。finally も併せて使えるのですね、知りませんでした…。
こんにちは。
Web標準の日々で西畑さんのセッションを受講した者です。
自分のグループの要望を早速叶えていただいてすごくうれしいです。
１つご質問なのですが、このスクリプトを他のスクリプトと併用したときに、上手く動かなくなり下記のようなエラーがFirebugで検出されました。
▼objCN[key][i] has no properties
changeBoxSize()
heightLine()
[Break on this error] objCN[key][i].style.height="auto";
始めはちゃんと高さが合うのですが、文字サイズを大きくしていくと高さが合わなくなっていきました。
（リロードすると、改めて揃います。）
併用したスクリプトはprototype.jsです。
とても便利なスクリプトなので、活用していきたいと思うのですが、力及ばず自身で解決できませんでした。
それともたくさんのスクリプトをガツガツ併用すること自体がおかしいのでしょうか・・・・
＞やまださん
ホントですね。修正しました。
prototype.jsが悪さをしていました。
スクリプトをガツガツ併用するのは、問題ないと思いますがライブラリ同士の相性が発生してしまうのはいたしかたないので、諦めも必要になってきますね。
(私の公開しているライブラリに関してはご指摘いただけたら頑張って対応いたしますので)
こんにちは。Web標準の日々で西畑さんのセッションを受講しました。
さっそく作ってくださるとは!!次はどのリクエストかしらって楽しみです。
早速の回答ありがとうございます！
エラーなくちゃんと動きました。どんどん活用させていただきます。
また、今後公開されるスクリプトも楽しみです。
本当にありがとうございました。
これかなり便利ですね☆
ソースがかなりすっきりしましたー。
はじめまして。
サイトの作成にこちらのスクリプトを使用させていただきたいと思うのですが、左カラムの長さより、右カラムの長さを例えば-100pxしたい場合HTMLやCSS上での指定ではなく、Javascript内でこの指定をすることは可能でしょうか。
突然の投稿で申し訳ございませんが、教えていただけると幸いです。
＞ももこさん
ご質問ありがとうございます。
このライブラリはあくまで高さを揃えるだけなので、それ以外はHTMLやCSSでがんばってください。
はじめまして。
有益なJSでしたので検証してみたところ、不具合らしき点がありましたので、
ご報告させていただきます。
高さをそろえる対象へ（サンプルのHTMLの場合ですとli要素です）
padding: 10px 0px 10px 0px;
などと指定すると、ボトムが指定した数値より大きく広がってしまうようです。
たぶん2倍くらい。
padding: 10px 0px 0px 0px;
と指定しても10pxくらいの空きができました。
padding: 10px 0px -10px 0px;
と指定すると、全方位のpaddingが無くなりました。
liではなくdivでも試してみましたが、結果はいっしょでした。
正確にpaddingが効くようにすることは可能でしょうか。
当方JSの知識が軽薄故、無理なお願いでしたらお許しください。
IE6と7、Firefox1.5と2、opera9、Netscape7と8と9で確認しました。
IE5/IE5.5では動きませんでしたが、
枠のレイアウトなので効かない場合の影響が大きそうなので、
対応可能なら動かしたいです。
Macは未検証です。
かゆいところに手が届く的を得たJSなので、、
ぜひ導入したくどうかご検討ください。
＞成海さん
コメントありがとうございます。
高さの算出が甘かったようでpaddingやborderが指定されている場合にそれだけ大きくなったようです。
修正したバージョンをアップしておりますので一度試してみてください。
これからもよろしくお願いいたします。
はじめまして。
悩んでいたブロック要素の高さ揃えがこんなに簡単にできるなんて感動です。
早速サイトに使わせて頂こうとおもったのですが、このスクリプトを使うときは必ずborderを指定しなければなりませんか？
IE6.0なのですが、borderを指定しないと「引数が無効です」というエラーが出てしまい、うまく動作しませんでした。
Firefoxでは問題なかったのですが...
ご教示いただけると幸いです。
はじめまして。
これはすごいと思い、実装の機会があったので試してみたのですが
safariでみると一切動作しないようです。
それによりフロートも崩れてしまっていました。
http://s-url.jp/?5735（スクリーンショット）
対応していただけるととても嬉しいのですが…
自分の方でも調べておりますが
お時間があればよろしくお願い致します。
たびたびすみません。
先ほどの件ですが「getComputedStyle」がsafariで対応していないようで
getComputedStyleの部分を「document.defaultView.getComputedStyle」などとしてみたところ動作しました。
動作確認はIE7、6 Firefox Opera safariです。
Javascriptはさわらないのでこれで正しいのかわかりませんが、ご報告まで。
算出精度アップ版を使ってみたのですが、グループで揃えようとしたところうまく動作してくれませんでした。
JSはさっぱりなので、ご報告まででした。
>nyambeさん
>tsukaさん
ご報告ありがとうございます。
対応が遅くなって申し訳ないのですが、いただいたバグについて修正したバージョンを公開しました。
また、なにかありましたらよろしくお願いいたします。
>hiraさん
ちょっとどこの所か分からないのですが、他で色々バグが出ていたので、その兼ね合いかもしれません。
まだ直ってないようでしたらお手数ですが、もう一度ご報告お願いいたします。
こんにちは。
バグかどうかわからないのですが、確認した現象をレポートいたします。
再現環境：
heightLine.js（beta3）
WinXP＋IE6、FireFox2、Opera8
外部CSSファイルをインポートで読み込み
サイトのレイアウト：サイド固定幅＋メインリキッド（最小幅、最大幅設定つき）のフロート
●メイン・サイド、どちらかまたは両方の下に、原因不明の余白が生じてしまう（CSSのみでは余白が出ない）。どちらに余白が出るかは、リキッドドラッグによっても変わるが、基本的にメインの下に生じるもよう。リピート背景画像を使用したサイドの下に余白が生じると、フッターまできれいにつながらないので、やや気になる。
●文字＜大＞リサイズ時にメインの内容が縦長になり、フッターに覆いかぶさるが、一瞬置いて適切な高さに反映される。（FireFox）
●画面リサイズしてリキッドの横幅を狭めた時、メインの内容が縦長になり、フッターに覆いかぶさる。（FireFox、Oreraで確認。IEは発生せず）できれば覆いかぶさらないとうれしい。
●文字サイズ最大→最小に変更した時などに、リサイズ前のブロック高さが保持されたままなので、不要なスペースが生じる。リキッドによってメインの横幅を広げたときも同様。（リロードで適切な高さに読み込まれる）これがリアルタイムで高さ調整されるとうれしい。
よろしくお願いいたします。
＞非JS使いさん
リキッドレイアウトには未対応でしたので対応したバージョンをアップしました。
文字サイズの変更に関しては１秒毎にチェックをしている為、若干のラグは生じます。
他の現象などは再現できなかったので、サンプルのページなどを教えていただけると幸いです。
西畑様、
beta4の対応ありがとうございました。
リキッドによるリサイズ時の余白発生問題は、きれいに修正されておりました。どうもありがとうございます。
「リピート背景画像を使用したサイドの下に余白が生じると、フッターまできれいにつながらない」というのは、当方のCSSレンダリングの問題であることが濃厚そうです。
（↑ローカルで作成している実験サイトなので、URLがないので申し訳ありません。）
レイアウト自体は、ネガティブマージンを使用した「メイン（リキッド、最小値つき←JSで制御）＋サイド（固定幅）」という、ちょっとトリッキーな仕様です。たぶん、どこかのマージンかパディングの設定がうまくできていないのだと思います（汗）。
heightLine.jsは非常に貢献度の高いスクリプトなので、とても重宝します。
開発ありがとうございます。
>非JS使いさん
ご報告ありがとうございます。また何かありましたらご連絡お願いいたします。
お世話になっています。
あまり詳しくないので当方に間違いのある質問だったらすみません。
例えば2カラム（仮にA、Bとします）タイプのページを作った場合に双方の高さを揃えたいとします。
Bのカラム内に、クリックするとdisplay:block;になったりdisplay:none;になったりするブロック要素があり、Bカラムの長さが変化するのですが、長くなった場合にＡカラムが一緒に伸びません。よろしくお願いいたします。
>かけだしさん
その状況はheightLine.jsの想定しない動作ですのでうまく動きません。
heightLine.js内のchangeBoxSize()をdisplay変更時にも呼び出すように修正すれば動作すると思います。
がんばってみてください。
>かけだしさん
その状況はheightLine.jsの想定しない動作ですのでうまく動きません。
heightLine.js内のchangeBoxSize()をdisplay変更時にも呼び出すように修正すれば動作すると思います。
がんばってみてください。
ほんとでした！動作しました！
助かります。どうもありがとうございました。
divにheightLineで高さを揃えているのですが、div内にあるinput要素がIEの拡大・縮小で表示されなくなるのは何故ですか？指定の仕方が悪いのでしょうか。。
>なかにしゆうすけさん
こんばんわ。
ちょっとどのような場合に発生しているのかわからないのですが私の環境では再現できませんでした。(IE6,7)
http://blog.webcreativepark.net/sample/js/18/index5.html
ソースなどをお伝えいただけたら解答できるかもしれませんが。。。
ご丁寧に対応ありがとうございます。ソースが複雑だったんですかね？
すみませんが、他の方法（背景画像をimg）で対応しました。
できるならJavaScript使うなよってことなんですが。。
>なかにしゆうすけさん
できたんですね。おめでとうございます。
JavaScriptにしろCSSにしろ、手段にしか過ぎないので、出来ない所で悩むよりも出来る方法を試みるほうが建設的だと思いますので。
いつもこちらのjs重宝させていただいております。
今回、大きなdiv（ナビとコンテンツ）を左右にfloatして、そこにこのjsを使用しているのですが、
さらにコンテンツの中のdivにも、使ってみました。
すると、ズレが生じてしまいました。
IE6：大きなdivの下に無駄なスペースが空く
IE7、FireFox：大きなdivがその下の要素（フッター）にかぶって表示される
もし原因がわかりましたら教えていただきたいのですが。。
初めまして。
便利に使わせてもらってます。
実は
ttp://vausl.hp.infoseek.co.jp/test.html（注意ＩＥはフリーズします。）
こんな感じに
別の別のtableのＴＤの高さをそろえようとした所
ＩＥでフリーズしました。ＦＯＸ等では平気なのですが。
想定外のダメな使用方法でしたでしょうか。
＞まこともさん
ちょっと私の環境ではそのようなことは確認できないですね。
よろしかったらサンプルを乗せたurlなどお送りいただけないでしょうか？
>tanahashiさん
すみません。
TD要素での利用は想定外ですね。
いつも便利に使わせてもらっています！
質問なのですが・・・こちらをiframeで呼び出しているhtmlに対して使用するとfoxはうまくいきましたがieでききませんでした。。
iframeは対象外でしょうか？
いつも使わせていただいています。
こちらの現象で困っていたのですが、下記ソースをIE6で表示させると、高さの検出がうまくいかないようです。お暇があったらごらんになっていただけますか。
div.heightLineParent {}div.heightLineParent div { float:left; background:#cc9999; border:1px solid #ff0000; width:100px; padding:10px;}div.heightLineParent div div { width:80px; border:none; background:#cccc99;}
sssss
aa
aa
aaaaaaaa
>Anonymousさん
コメントではhtmlを許可してないので<←を＜（全角）などにしてもらえるとうれしいかもです。
はじめまして、WEB製作の仕事をしております。
いつも参考にさせてもらっております。
heightLine.jsについてお聞きします。
heightLine.jsは利用制限などはございますか？
商用（企業）サイトでも利用可能でしょうか？
よろしくお願いします。
はじめまして、「heightLine.js」すごいです、感激です。
私は、音楽関連の仕事がメインなのですが、web作成も少しだけしています。
ブロック要素の高さがうまく揃えられず、「やっぱ、テーブルの方がいいや～。」と思っていた所だったのでとても重宝しています。
ただ、ひとつだけ・・・。
Operaで見ると「heightLine.js」を使用している前後のブロックとのすきまがすごく少ないのです。
マージンが少ないとブロックが重なる場合もあります。
これは、仕方がないのでしょうか？
回避策などあれば、ご教授下さい。
すごいですね！！感動しました！！
これからの仕事一気に変わりそうです。
ところで、MacIE5で検証したのですが、動作しません。
まだまだMacIE5対応のサイトを作っていかなければいけないので、是非とも、是非とも、対応して欲しいです。
なにとぞよろしくお願いいたします；；；
>horaさん
MacIEは検証環境がないので対応は難しいです
すみません＞＜
heightLine.jsを利用させて頂いております。
一つどうしても分からない問題があるので質問させて下さい。
他のブラウザだと大丈夫なのですが、IE7のみheightLine.jsを使うと
ボックス内の画像が全て消えてしまいます。
こういった場合どう対応すればよいのでしょうか。
お手数をおかけ致しますがアドバイス頂けると幸いです。
よろしくお願い致します。
はじめまして、
heightLineを使っています。ＩＥでは揃うのですが、ＦＩＲＥＦＯＸでは揃いません。バージョンは最新版です。私だけでしょうか。変更箇所など教えていただければうれしいです。
>nngkさん
基本的にFirefox3でも動作しておりますので、本ライブラリが想定していないような使い方をされているんじゃないかなと思います。
お世話になっております、アビリティコンサルタントの永井です。
CSSNITE懇親会ぶりです（と言ってもだいぶ前でお忘れかもしれませんが）
本jsについての問合せをしようと、フォームから送信を試みましたがスパムチェックのため送信できませんでした。本コメントにての問合せをお許し下さい。
現在弊社で制作するHPに多くhightLine.jsを導入させて
いただいており、弊社HP（http://www.ab-net.co.jp/）も
例外ではありません。
下記制作実績のページなどで大いに活用させていただいて
おりますが、
【株式会社アビリティコンサルタント】制作実績ページ
http://www.ab-net.co.jp/works/index.htm
件数が多くなるにつれ表示に時間がかかり、
また、入れ子構造の場合に高さを合わせるタイミングがズレ、
要素がめり込んでしまう現象も確認されています。
【株式会社アビリティコンサルタント】ホームページ制作実績 > 宿泊業 > 民宿・ペンション
http://www.ab-net.co.jp/works/0014.htm
本件に関して、何か良い解決策などありましたら
ご教示頂ければ幸いです。
＞nagaiさん
お世話になっております。お久しぶりです。
jsの実行タイミングと解析処理の関係で、量が多い際にラグがどうしても発生してしまいます。
このような構成ですとCSSで対応したほうがスムーズに行くかもしれません。
http://blog.webcreativepark.net/2007/12/14-091334.html
参考まで
はじめまして。
heightLine.jsを使ってみました。大変有用なスクリプトですので、今後も活用させていただこうと思います！
使ってみて気になったのですが、要素の中にあるimgがIE7で表示されなくなりました。その要素にzoom:1;としてやると正常に戻りました。勘で直したので、何故そうなるのかわかりませんが、ご参考になればと思います。prototype.jsと併用しています。
初めまして。
いつも参考にさせていただいています。
先ほど、こちらのjsを検証させていただきました。
まだベータ版なのでなんともいえませんが、ie8で固まってしまうようです。
ご検証いただけませんでしょうか。
お問い合わせからも連絡させて頂きましたが、こちらにも記載させてい頂きます。
heightLine.jsを使用しているページに
Flashやmarqueeを設置するとie8のみ、うまく動作しません。(ie6,ie7,firefoxは問題なく動きます。)
Flashの動作が遅くなり、marqueeが途中で固まってしまいます。
ご検証いただけませんでしょうか。
よろしくお願いいたします。
初めまして。
heightLine.jsをいつも利用させていただいております。
私だけかもしれませんが、
動作しない環境があったため、
ご報告させていただきます。
font-sizeを13pxにしており、
padding-bottomを1.5emと指定したときに、
ボックスの高さが小数点を含む値になり、
一部のブラウザで動作しませんでした。
恐らく、小数点を含む値をブラウザが表現できていないのだと思われます。
動作確認した環境は以下の通りです。
【バージョン】
・beta4
【動作したブラウザ】
・Firefox 3（Mac）
・Safari 4（Mac）
【動作しなかったブラウザ】
・IE6
・IE7
・IE8
・Opera 10（Mac）
ご参考になれば幸いです。
そして勝手ながら、
小数点を含む値の場合は繰り上げする、
などの修正対応がされることを切に願っております。
それでは、どうぞよろしくお願いいたします。
はじめまして。
heightLine.jsを使ってみました。
大変重宝しているのですが、ファイルマネージャーにアップロードする際に大文字が自動的に小文字に変換され動かなくなる場合があります。
名前をheightline.jsと小文字に統一されてはいかがでしょうか？
> taiki21さん
ファイル名は利用する際に勝手に変更してください。
ありがとうございます
このスクリプトにバグがありましたので報告します。
Internet Explorerにおいて、padding-topやpadding-bottomなどがpx単位でない場合、途中計算でNaNになってしまい、結果としてスタイルをうまく適用できません。
これについてですが、以下のように84行を書き換えればIE9以降でうまく動くものと推測します。
var stylea = ((document.defaultView && document.defaultView.getComputedStyle)?document.defaultView.getComputedStyle(objCN[key][i], ''):objCN[key][i].currentStyle);
ただし、Internet Explorer 8以前ではどうしようもないので、条件付きコメント使うなりしてスタイルがpx単位になるようにする必要があります。
MH35さん
ご報告ありがとうございます。新バージョンを出しましたのでこちらで試してみてください。
http://blog.webcreativepark.net/2013/10/21-112000.html