ブロックレベル要素の高さを揃えるjsライブラリー

| コメント(2) | トラックバック(1)

Web標準の日々「J3 jsライブラリで実装する効率的なWeb制作」のグループディスカッションで、私が所属していたグループで発表させていただいた「横に並んだDIVの下がそろわないので、きちんとそろうライブラリ」について、な、なんと西畑さんがさっそく作成してくださいました!

ブロックレベル要素の高さを揃えるheightLine.js / [to-R]とあるWEBクリエイターのblog

使い方はカンタン。heightLine.jsへのパスをhead要素内に記述し、高さをそろえたいブロックレベル要素に『heightLine』というclass名つけるだけです。
さらに『heightLine-○○』と、ハイフンをつけて任意のグループ名をつけると、そのグループの中で高さがそろえられたり、高さをそろえたいブロックレベル要素の親要素に『heightLineParent』と記述するだけで高さが揃ってしまう・・・など、かゆいところに手が届く仕様になっています。

詳しい設置方法やサンプルHTMLは西畑さんのブログのheightLine.jsに関するエントリーに記載されています。またheightLine.jsはMIT Licenseにて配布されています。

セッション内で紹介されたjsライブラリーもさっそく仕事で使ってみたり、セッション内ではピンとこなかった「onLoadがバッティングした際の対処法」もjsライブラリー使っていない案件で早速大活躍の場面が登場したりと、ホントjsライブラリーのセッション受けてよかったと思っております。

そして何より自分たちのグループで提案した案を、heightLine.jsというjsライブラリーとしてカタチにしてくださったことに大変感謝しています。西畑さん、ありがとうございました!

トラックバック(1)

Webサイトを作る時に「ブロックレベル要素の高さを揃えたい!」って時にはブロックレベル要素の高さを揃えるheightLine.js[to-R]さんが紹介し... 続きを読む

コメント(2)

はじめまして。
heightLine.jsを使っています。IEではきちんと揃っていますが、Firefoxでは揃いません。どうしたものかと、
悩んでいます。何か変更する必要があるとこがあるのでしょうか。ご教授していただければうれしいです。

Firefoxでも問題ありませんよ。サンプルサイトでも正しく挙動していると思いますので。
http://blog.webcreativepark.net/sample/js/18/

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働きながら、個人でもWebサイト制作業務を請け負う。趣味ではシャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー