【Fluid Grid Layout】可変グリッドレイアウト

公開日

ウィンドウサイズに合わせてコンテンツが再配置され可変するレイアウトが、流行ってきているようですね。今時期は「Fluid Grid Layout」と呼ぶようです。

当社の非公開実績ページを制作しており、こちらで使ってみました。
非公開の実績はご紹介できないので、サンプルを下記にアップしました。
(見ないと感じが掴めないと思うので…)
http://labs.adesignare.com/ajax_js/fluid_grid/

最初から全部作るのは大変なので、xluneさんサイトを参考にさせていただきました。
http://blog.xlune.com/2009/09/jqueryvgrid.html

以下、覚え書きです。

Fluid Grid Layout

下記をダウンロードします。
jquery.vgrid.0.1.6.min.js (compressed: 20100713)
jquery.vgrid.0.1.6.js (normal: 20100713) をダウンロードします。
(どちらか使う方でいいのだと思います。)
また利用には、jQuery本体jquery.easingプラグインが必要になります。

デモサイトに7パターン用意されています。こちらのHTMLソースを参考に制作していきます。
ちなみに私はDEMO004を参考にしました。

基本的なXHTMLやCSSを理解されている方なら問題無く作業を進められるかと思われます。
なんだか面白いですね。少しずつ色々試してみたいなぁと思います。

Fluid Grid 関連サイトのご紹介
Xluneさん:可変グリッドレイアウトのjQueryプラグイン
かちびと.netさん:可変グリッドレイアウトに関する情報まとめ



Warning: Invalid argument supplied for foreach() in /home/ads2021/adesignare.com/public_html/wp/wp-content/themes/cure-child/single-blog.php on line 273

最近の記事

  1. GoogleカレンダーがiPhoneで表示されない。私はロボットではありませんと表示される時の対処方法

  2. Chromebookの壁紙をデフォルト標準に戻す方法【ASUS】

  3. WordPress記事にソースコードを超簡単に埋め込むプラグイン「Highlighting Code Block」

  4. WordPressでナビゲーションメニューに現在地のカレント current class をつける方法

  5. Twitterが英語表記になっている時に日本語表記に言語設定を変更する方法

  6. オリンピック記念チケット PDFダウンロードのやり方(無料)

  7. 「HEIC」を「JPG」にMac プレビューで変換。WordPressで画像をアップできない場合の対処方法

  8. コピーライトの正しい書き方を紹介!実はCopyright部分はいらない。©だけでOK

カテゴリー