フレキシブル・グリッド

「レスポンシブWebデザイン – No.２ – レスポンシブWebデザインとは」で紹介したレスポンシブＷｅｂデザインを支える3つの技術・手法のベースとなるのが「フレキシブル・グリッド」です。印刷媒体で長年使われてきた段組レイアウトをウェブサイトに応用したのが「グリッド・レイアウト」です。そして、そのグリッド・レイアウトの幅をパーセントなどの相対値で指定して、柔軟に可変させるレイアウトが「フレキシブル・グリッド」です。この「フレキシブル・グリッド」をシステム化した可変グリッド・システムがレスポンシブウェブデザインには必要不可欠です。 １．グリッド・レイアウトとは

印刷媒体では、「段組み」と呼ばれるレイアウトのことです。見えない格子でデザイン要素の区画を作ってレイアウトをする方法で、ウェブサイトから本、雑誌などの印刷物まで、情報をわかりやすく正確に伝えることを目的としたレイアウト・デザインはグリッドを使って作られることがほとんどです。レイアウトに規則性を持たせることで、人間の脳が視覚的に理解しやすい構造にできるため伝達に最適だといわれています。

２．フレキシブル・グリッドとは

グリッド・レイアウトの幅をパーセントなどの相対値で指定して、ブラウザのウィンドウ幅に合わせてグリッド幅も可変するレイアウトがフレキシブル・グリッド・レイアウトです。この可変するグリッド・レイアウトをEthan Marcotte氏は「レスポンシブＷｅｂデザイン」を構成する要素の1つとしています。

３．グリッド・システムとは

グリッド・レイアウトに汎用性を持たせ、より複雑なレイアウト・パターンにも使えるようにシステム化したのがグリッド・システムです。グリッド・レイアウトを利用したデザイン自体は何百年も前から存在していましたが、ウェブでシステムとしてのグリッドが広まり始めたのは2007年頃からで「Blueprint」や「960 Grid System」などの登場によりウェブ制作者に浸透していったようです。グリッド・システムの目的は、グリッドを使った複雑なレイアウトを簡単に素早く制作できるようにすることです。複数のスクリーンサイズ向けにレイアウトをデザインするレスポンシブWebデザインでは、制作を効率的に行うためにもグリッド・システムの使用は必須です。グリッド・システムの詳細は後で述べさせていただきます。

■960 Grid SystemとBlueprint

固定幅のグリッド・システムで有名なのが、前述した「960 Grid system」や「 Blueprint」です。グリッド・システムを語る上で外すことのできない存在です。「960 Grid System」をベースにしたフレキシブル・グリッド・システムも作られています。

４．可変グリッド・システム

固定グリッド・システムの幅をパーセントなどの相対値で指定して可変するようにしたのが、可変グリッド・システムです。可変でレスポンシブＷｅｂデザインにも対応した素晴らしいグリッド・システムがすでに多く存在します。オープンソースで商用利用も問題ないものが多いので、仕組みを理解したら既存のグリッド・システムを利用するのが効率的かもしれません。私が携わったレスポンシブＷｅｂデザイン・プロジェクトでは、1140 CSS Gridをベースにコードをカスタマイズしました。

以下に可変グリッド・システムのいくつかを紹介します。

■可変グリッド・システムの例

・Foundation3

ZURBというアメリカの制作会社が作ったレスポンシブWebデザインのフレームワークで、可変グリッド・システムも含まれています。プロトタイプの作成からプロダクションサイトでの利用までを想定しているフレームワークなので、細かいところまでよく作り込まれています。バージョン3.0が2012年7月に発表されています。

・1140 CSS Grid

デスクトップでの最大幅を1140pxにした12カラムのシンプルなグリッド・システムです。モバイルまで想定したレスポンシブWebデザインにも対応しています。

■グリッド・レイアウトを可視化するツール「griddle.it」

URLに以下の３つのパラメータを指定することで、グリッドの画像を生成できる便利なツールです。CSSでこのURLを背景画像として指定することで、制作中のサイトなどでグリッドを簡単に可視化できます。

• レイアウト幅
• グリッド数
• ガッターサイズ（グリッド間の空き）

構文

http://griddle.it/[レイアウト幅][グリッド数][ガッターサイズ]

幅960px、12カラム、ガッターサイズ30pxで指定した例

http://griddle.it/960-12-30

CSS (CSS-2.2.4c griddle.itを使って背景にグリッドを表示させる)

01   body { 02   background: url(http://griddle.it/960-12-30) repeat-y         center top; 03   }

※カラムの色や背景色（ガッターの色）、カラムサイズを表示するフォントの色を変えたり、横線を表示させるオプションもあります。

http://griddle.it

引用元　渡辺竜　著　レスポンシブWebデザイン

    ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※ 青森、八戸、十和田、三沢市のスマホ、スマートフォンサイト制作は北の国ウェブ工房にお任せ下さい。 北の国ウェブ工房では、スマホ、スマートフォンウェブサイト制作をレスポンシブWebデザインで制作しております。いろいろな画面サイズに対応 したレスポンシブWebデザインはスマートフォンに限らず、今後も増加が予想される様々なデバイス（機器）の画面サイズに対応し、見やすく、使 いやすいウェブサイトを作成いたします。 どうぞお気軽にご相談ください。 ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※