ウェブサイトを制作するに当たって、画面のレイアウトを決める工程は、簡単なようで意外と頭を悩ませます。

サイトの全幅を何ピクセルにするのか？というところから始まり、1カラムにするのか2カラムにするのか。それぞれのカラムの横幅の割合はどうする？カラム間は何ピクセル空ける？…などなど。

特にECサイトの場合、掲載する情報が多いので、特に気を遣います。

これは完璧！と思って作ったレイアウトであっても、別案件に当てはめてみるとイマイチしっくり来ないこともありますし。

そんな時に役立つのが「The Square Grid」というグリッドレイアウト用のCSSのフレームワークです。

The Square Grid：http://thesquaregrid.com/

上記サイトを見て頂くと一目瞭然ですが、簡単にその内容を説明したいと思います。

サイトの全幅は994ピクセルとし、両端に7ピクセルの余白を設ける。
余白を除いた980ピクセルを35分割したもの（28ピクセル）を1つのベースとする。
ベースをいくつかつなげて1つのカラムとし、カラム同士はベース1つ分空ける。
基本的な構造はこれだけです。

例えば、均等割の3カラムを作る場合は、ベース11個分を1カラムとして3つ並べ、カラム間をベース1つ分ずつ空けることで完成です。

【3カラム均等割の例】

上記サイトでは、2、3、4、6、9、12、18の均等分割の場合、2カラムで左右カラム幅を変えた場合、そして黄金比を使ったカラムの例が示されています。

【2、3、4、6、9、12、18の均等分割の例】

【2カラムの例】

【黄金比を使ったカラムの例】

このフレームワークは、カラムを作る際に利用するだけでなく、グローバルメニューや各種ボタン、バナーなどを作成する際にも使うことで、サイト全体の統一感も出すことができます。その際は、28ピクセル単位だと大きすぎるので、半分の14ピクセル、または、1/4の7ピクセルを最小単位として使っても良いかもしれません。

さらに、このサイトでは、HTML、CSS ファイル一式やデザイン用のテンプレートファイル（Photoshop、 Illustrator、InDesign）、スケッチ用のPDFファイルも用意されていますので便利です。

次回は、Photoshop 等でこのフレームワークを使う際に便利なグリッドの設定方法を紹介します。