本当に今更ですが・・・・改めてグリッドレイアウトシステムについて勉強しています。
基本的に私が製作させてもらうWebサイトはグリッドレイアウトにてレイアウトしています。
ただ、自分自身でグリッドを切って、その上でレイアウトしていて、正式な？グリッドレイアウトシステムは使った事がありません。
あるサイトをデザインするにあたり、レスポンシブデザインにしようかと思ったのがきっかけで、一般的なグリッドレイアウトシステムについて調べてみました。
その中で気になったものをご紹介してみます。
960 Grid System
「グリッドレイアウトシステム」を紹介しているサイトやブログで必ずといっていいほど取り上げられているのがこの「960 Grid System」です。
サイトからパッケージをダウンロードしてもらえば分かるかと思いますが、その内容の充実ぶりは確かに皆さんが勧めるだけの事はあります。
CSSファイルやサンプルソースはもちろんですが、Photoshop、Illustrator、FireworksだけではなくOmnigraffleやQuarkxpress、Indesign、gimp、Inkscapeなどで使用できるグリッドテンプレートや、印刷して使用すると思われるスケッチシート、PhotoshopとFireworks用のプラグインファイルがセットになっています。
しかもそれぞれグリッド数は12、16、24それぞれ用意されています。
978 Grid System
最近、グリッドレイアウトシステムを紹介するサイトなどでは必ずと言っていいくらい取り上げられる頻度が上がってきているのが「978 Grid System」。
こちらはパッケージがサイズ毎に分けられているようです。が、試しに978のものをダウンロードしてみると300/748/978/1218/1378と全てのテンプレートが入っていました。
ちなみに978のフォルダにはFireworks/Inkscape/OmniGraffle/Photoshopのテンプレートファイルが入っていますが、他のサイズはPhotoshopのテンプレートのみです。
The 1140px CSS Grid
1280pxモニタのために作られたという「The 1140px CSS Grid」。
こちらはアプリケーション用のテンプレートファイルは添付されていませんが、Media Query用のjsファイルが入っています。
このサイズ、これから主流になるかもしれませんね。
Variable Grid System
こちらは自分でグリッドの幅、個数、Gutter(グリッド間の空白)の幅を指定すると、合計幅を自動で計算し、適合したCSSを生成・ダウンロードさせてくれます。
これからいろいろなサイズでのグリッドレイアウトを検討される際に便利ですね。これは使えそうです。
他にもたくさんのグリッドレイアウトシステムがありますので、ご自身が使いやすいものを探して使ってみて下さい。
[tmkm-amazon]4844362224[/tmkm-amazon]
