※ 画像は公式サイトデモより

Webサイトを作っていて、複雑なページ構成をCSSだけで組もうとするとすぐに無理がくる。floatやclear、left/rightなどを組み合わせるのだが思い通りにいかない。やっとできたと思ってIEでみたらぶっ飛んでいた、なんてことはざらにある。それだけでもうやる気がなくなってしまうことだろう。

ピクチャ 91.png

サンプル1

　

そのような悲惨な目に遭わないためのテクニックがCSSフレームワークの活用だ。あまり重厚なものでなく簡易的なものをと思っているならGolden Gridを使ってみよう。

今回紹介するオープンソース・ソフトウェアはGolden Grid、970pxを横幅にしたCSSフレームワークだ。

最近のWebサイトでは970pxあたりがよく使われる。既に800×600の時代は終わり、1024pxの画面でも十分見られるサイズと言う訳だ。Golden Gridもそれに対応し、970pxでも耐えられるデザインにしてくれる。

ピクチャ 92.png

サンプル2

　

最大12カラムで表示することも可能で、3カラムと4カラムが同じページ内に組み合わさっても良い。デモが多数あるので、それを見ればどのような表現が可能か分かるはずだ。圧縮版では1KB以下となっており、とても軽量だ。

対応ブラウザはIE6または7、Firefox 3、Opera 9.62、Safari 3.2.1（Windows）、Google Chrome 1.0となっている。これはテストしたブラウザとのことなので、実際にはさらに幅広く対応しているだろう。

CSSテンプレートを用いれば複雑なデザインをしたWebサイトを、多数のブラウザに対して同じように提供できる。ブラウザ間の表現誤差を乗り越えるためにも使いたいライブラリだ。

ピクチャ 93.png

サンプル3

　

**the-golden-grid -Google Code

　**
http://code.google.com/p/the-golden-grid/