ヨコハマハンドメイドマルシェ2013

【jsライブラリ】複数のブロック高さを簡単に揃える!

すごい便利なjsライブラリを見つけたので思わず紹介。
Webデザイナーをしてたら、コーディング時に一度はぶち当たる(気がする)この問題。
いやはや、今までコレを知ってたらどれだけ苦労せずにコーディングできただろうか…もっと早く知ってれば良かった。
floatで横並びにしているブロックの高さを、最大値に揃えるライブラリ。しかも超簡単に・・・

CSSでは縦幅100%が基本的にきかないし、複数ブロック要素の高さが揃えれないという。
でもこれがあれば、cssのブロックでheightを無理やり指定してブラウザによって文字サイズが違うから変な余白が空いたりとかもなくなるし、文字がはみ出たりもしなくなるし。これは夢のようだ!!!

まず、「ブロックレベル要素の高さを揃えるheightLine.js」を配布している「to-R」さんのサイトからheightLine.jsをダウンロード。

<script type="text/javascript" src="./heightLine.js"></script>
をヘッダーに記述して指定する。

あとは、こんなかんじで、親ブロックにheightLineParentクラスを指定。
すると・・親ブロックに入っているの子ブロックの中で、最大になっている縦幅にあわせて自動的に伸びてくれるんです!

なんて簡単なんでしょう…!

このライブラリは、同じクラス名を付けたブロックの最大値に揃えてくれたり、グルーピングもしてくれるのですが、一番使いやすそうな方法をご紹介しました。
詳細はこちら「ブロックレベル要素の高さを揃えるheightLine.js

コメント
>genkiさん
何気なくあついですよね!!!かなり使えそうです!
  • ゆうき
  • 2009/11/24 9:40 AM
これはあついですね!
早速使いますw
  • genki
  • 2009/11/20 4:55 PM
コメントする








   
この記事のトラックバックURL
トラックバック

Profile

Yuki Noda
1982年横浜で生まれる。多摩美術大学卒。
プロフィールポートフォリオ
mixitwitterFacebook

calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
<< September 2017 >>

selected entries

categories

archives

recent comment

  • 【Illustrator CS3】 [不明なエラーが発生しました]で.ai拡張子の保存ができない
    MAMORUさん (12/08)
  • 【Illustrator CS3】 [不明なエラーが発生しました]で.ai拡張子の保存ができない
    MAMORU (09/20)
  • 【Flash】IEでjavascriptのプルダウンがFlashの後ろに隠れてしまう事件
    ゆうき (09/04)
  • 【Flash】IEでjavascriptのプルダウンがFlashの後ろに隠れてしまう事件
    rr (08/31)
  • スーパーカップのチョコミントアイスについて
    ゆうき (06/13)
  • スーパーカップのチョコミントアイスについて
    aaammm (06/13)
  • スーパーカップのチョコミントアイスについて
    ゆあ (04/11)
  • 【CSS】IE6 リストで隙間が出るバグ
    D (11/14)
  • 夢のような結婚式を終えて・・
    ゆうき (10/04)
  • 夢のような結婚式を終えて・・
    ちゃっきー (10/03)

recent trackback

links

profile

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM