jQuery で可変グリッドレイアウト

February 8, 2011
liquid_main.jpg

可変グリッドレイアウトとは、ブラウザのウインドウサイズを広げたり縮めたりすると、コンテンツが再配置されるグリッドレイアウトのこと。一昨年ぐらいから流行ってますよね。

トップページでも試してみようと思いながらも、ずっとほったらかしてたので、突然思い立ってやってみました。

Smart Columns w/ CSS & jQuery

リキッドレイアウト上に、配置されたコンテンツの幅や空きスペースをうまいことゴニョゴニョしてくれる優れものスクリプト(※jQuery.jsが必要)。

解説とスクリプトは下記サイトからどうぞ。

Smart Columns w/ CSS & jQuery

Smart Columns w/ CSS & jQuery | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka

トップページに導入

当ブログのトップページに導入してみました。サイドバーは固定で表示させたかったので、コンテンツエリアだけを CSS でリキッドレイアウトにしました(IE6 では少しくずれるのはご愛敬)。

トップページ

STAFF_01 [KYS-LAB]トップページ

お時間ございましたら、ウィンドウの幅を変更してみてください。こんなことが、簡単にできてしまうのが jQuery のスゴイところですねー。開発者に感謝。

こちらのプラグインもすごそうっす。いずれ試してみようと思います。

可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog

参考サイト

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

2カラムリキッドレイアウトのCSSサンプルソース|floatレイアウトサンプルソース

STAFF_01 [KYS-LAB]: ページが見つかりません。