category
サイト構築 -JavaScript

[JS]リキッドレイアウト上のカラムの幅や数を自動調整するスクリプト -Smart Columns

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

表示されたブラウザの幅に合わせて、ぴったりになるようにカラムの幅や数を自動調整するスクリプトをSoh Tanakaから紹介します。

デモのキャプチャ

Smart Columns w/ CSS & jQuery
demo

リキッドレイアウト上に、幅を固定にしたカラムを配置すると、下記のように微妙なスペースが生まれることが多いです。

幅を固定にしたカラムのイメージ図

また、同様にリキッドレイアウト上に、幅を可変にしたカラムを配置すると、スペースは生じませんが、一列の数を固定にする必要があります。

幅を可変にしたカラムのイメージ図

Smart Columnsは、上記二つの問題点を解消し、微妙なスペースがある際にはカラムの幅を変更し、ある程度のスペースがある際にはカラムの数を変更して表示します。

Smart ColumnsはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Post on:2009年6月2日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

ページの先頭へ




© coliss

RSS