グリッド・システムとは？

パーセントなどの相対値で幅を指定

どんなサイズの端末でWEBサイトが開かれるかわからない場合、固定サイズは避けましょう。パーセントなどの相対値で指定するのが理想的です。

入れ子

カラムの中に、カラムを入れるようなシステムにしましょう。

レスポンシブWEBデザインに対応している

画面サイズによってレイアウトを切り替えられる仕組みにしましょう。

グリッド間の空きのガッターサイズが簡単に調整可能

ガッターサイズとカラムサイズをそれぞれ別々にしましょう。

カラムの表示順が調整できる

①デスクトップで表示した際、左にテキスト・右画像のグリッドシステムがあったとします。

②画面が小さいとき、右カラムが落ちるグリッドシステムでは

• テキスト：上に表示
• 画像：下に表示

になってしまいます。

③画像をあいキャッチなどにしたいときは、テキストより上にする必要があります。カラムの表示順を調整しやすいように作りましょう。

小さいスクリーン用のグリッド表示オプションがある

　タブレットやスマホで表示すると、カラム・レイアウトが切り替わるように設定しましょう。

IE8以上で対応。IE7以下は特別対応

IE6・IE7のシェアは、1％を下回りました。特別な場合を除き、サポートの必要性はありません。どうしても対応が必要な場合に、独立した形で対応しましょう。