RSSウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
Cat: » WEBデザイン, その他のソフトウェア, インスピレーション
Day:10月 21, 2009
ウィンドウサイズを変えると
コンテンツ（記事等）が再配置される
可変グリッドレイアウトに関する
サンプルサイトやWPテーマ、
ライブラリなどの情報のまとめです。
詳しい方には参考にならないっぽいです。
いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。
可変グリッドレイアウトサイト
可変グリッドレイアウトを使用したサイトの例。
D&DEPARTMENT PROJECT
ECサイト。綺麗にまとまってます。MT使用。
daily vitamins
暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。
小林聡美.jp
小林聡美さんのサイト。凄く見やすいです。MT使用。
Marunouchi.com
丸の内の情報サイト。ハイクオリティです。写真をダイナミックに使ってインパクトもありますね。
Fluid Grid Layout: 10+ Outstanding Examples & 1 Tutorial
海外のギャラリー記事。可変グリッドレイアウトを採用したサイトがいくつか。
JavaScript
上記のサンプルサイトのような滑らかな動きを実現するjs
jquery.vgrid.js
国産のjQueryプラグイン。Todoも参考に。デモが6種類用意されているのでぜひご覧下さい。特に6個目のサンプルはコンテンツを消す事も。
Smart Columns w/ CSS & jQuery
CSS & jQueryで滑らかな動きの可変グリッドを実現。海外。
Smart Columns w/ CSS & jQuery を MooTools で
上のSmart Columns w/ CSS & jQueryをMooToolsで実際にテスト、コードも書いてくれている国内サイト。英語が苦手な方はコチラがお勧め。デモもあります。
WordPressテーマ
可変グリッドレイアウトを実装済み（語弊あるかもです）のWordPressテーマ。
GRID wordpress theme
国産のフリーテーマ。GPLはありがたいですね。使ってみたい。
GRID—A—LICIOUS
GRID wordpress theme同様ですが、海外テーマ&規約が厳しい。。。個人は無料利用が可能。商用サイト（ビジネス、ECサイト以外にもバナーで収益をあげている等も含む）での利用は1000ユーロ＝約13万※2009・10現在
おまけ：IxEdit
素人の僕には今のところ必要としませんが、詳しい方には嬉しいツールかなと思ったのでおまけとして。国産です。コーディング無しで DOM スクリプティングを実践、Webコンテンツに動きを手軽に与える事が出来るそうです。可変グリッドに必要なファイルも作成可能では？興味のある方はチェックしてみてはいかがでしょうか。
以上、可変グリッドレイアウト情報でした。なんだかんだで僕が使うのはWPになりそうです。ブラウザ別の処理の差はしっかり確認しておきたいですね。。。
Comments & Trackbacks (6)
-
TRB URL:
jquery.vgrid.jsの関連情報を探している際に、辿り着きました。
すごいです、まさに探していた情報です！
MTやWPの導入例や商用での使用料など、非常に参考になりました。
すばらしい記事をありがとうございました。 えだまめ