ホーム >  WEB全般 >  グリッド・システムとは?


Posted:2014/12/16 9:00:51 AM|Category : WEB全般

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

 グリッドシステムとは、グリッド・レイアウトに汎用性を持たせ、複雑なレイアウトパターンにも使えるようシステム化したものです。
グリッドシステムは、レスポンシブWEBデザインの必須条件ではありません。
しかし、中規模から大規模のサイトをレスポンシブWEBデザインにするとき、非常に効率的です。

グリッド・レイアウトとは

 グリッド・レイアウトとは、見えない格子(段組)で区画をつくってレイアウトする方法です。
less0023
グリッド・レイアウトを利用すれば、人間が視覚的に理解しやすくするなります。
たとえば、雑誌や本はグリッド・レイアウトが利用されています。
※グリッド・レイアウトを利用したデザインは、何百年も前から存在しました。

グリッド・システムの条件

 以下の条件を満たしていれば、グリッド・システムと呼びます。

  • 1.パーセントなどの相対値で幅を指定
  • 2.入れ子
  • 3.レスポンシブWEBデザインに対応している
  • 4.グリッド間の空きのガッターサイズが簡単に調整可能
  • 5.カラムの表示順が調整できる
  • 6.小さいスクリーン用のグリッド表示オプションがある
  • 7.IE8以上で対応。IE7以下は特別対応

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

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

2.入れ子

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

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

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

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

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

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

 ①デスクトップで表示した際、左にテキスト・右画像のグリッドシステムがあったとします。
less0024
②画面が小さいとき、右カラムが落ちるグリッドシステムでは
テキスト:上に表示
画像:下に表示
になってしまいます。
less0025
③画像をあいキャッチなどにしたいときは、テキストより上にする必要があります。
カラムの表示順を調整しやすいように作りましょう。
less0026

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

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

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

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


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告