グリッドレイアウト ( グリッドデザイン、グリッドシステム ) はweb制作でのデザイン手法の一つです。
画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせてブロック内の要素の大きさや配置を決定していく方法です。グリッドはさまざまなレイアウト間の一貫性を維持しデザイン上の意思決定を迅速化するのに役立ち。グリッドを使用すると様々なスクリーンサイズでの配置やレイアウトをより正確にコントロールすることができます。
元を辿るとグリッドシステムはヨゼフ・ミューラーブロックマン(Josef Müller-Brockmann, 1914年5月9日 - 1996年8月30日 スイスのGraphic designer )が考案したデザインの手法だそうです。
960 Grid Systemはページ幅 960px(コンテナ)を基準に12のカラムに当分し1カラム 幅60px 左右に10pxの余白(溝)で合計80px 12カラム＝ページ幅 960pxのGrid Systemです。
当時(2010年前後)のPCモニタシェアで最も多かった解像度1024x768が960px表示には十分な事,960という数字が2,3,4,5,6,8,10,12,15,16,20,24,30,32,40,48,60,64,80,96,120,160,192,240,320,480と多くの数字で区切ることが出来フレキシブルに設計が行える事から採用されました。
ルールとして親コンテナはカラムの端で開始および終了する。溝やサイドマージンの端で開始または終了することは出来ない(しない)。
グリッドを構成するために使用するカラムの数(カラム構造)レイアウトに最も一般的なカラム構造は8,12,16,20で中でも12は分解し"4-4-4","3-3-3-3"にでき親コンテナにコンテンツを整列させることができます。
columns(カラム)・gutters(溝)・margins(マージン)の3つの主要なコンポーネントで構成されています。
columns(カラム)は仮想的な垂直方向のブロックでコンテンツを整列させるために使用されカラム幅はパーセント()または固定値のいずれかで定義します。
gutters(溝)はカラムとカラムの間のスペース(余白)のことでgutters(溝)はコンテンツを分離するのに役立ち溝幅は固定値として定義します。
コンテンツとスクリーンの端の間のスペースのことでSide Margin(サイドマージン)幅を固定値として定義し全スクリーンサイズで最小スペースを確保しFlexible Margin(フレキシブルマージン)はカラム・溝・サイドマージンでグリッドを構成した後に残ったスペースを占め異なるスクリーンサイズに応じ変化します。
1440×900,1600×900,1920×1080のような大きな解像度でデザインすることは意図的でない限り絶対に避けます。1280×800で設計されたレイアウトも固定幅レイアウトも大きなスクリーンに簡単に適応できますが、その逆は非常に複雑な為です。
可変レイアウトのグリッドはメインコンテンツ幅にスクリーン全体のサイズを使用し両端に16pxのサイドマージンを設定し溝に固定値。カラムに自動算出値()を使用します。
カラム構造、カラム幅、溝幅、マージンは、ブレークポイントに依存します。 親コンテナはさまざまなブレークポイントに応じてスケールし可能な限り最良の表示になるように再調整します。
幅74pxのカラムと幅32pxの溝にするとコンテンツの幅は1240px。これに幅16pxのサイドマージンを加え1272px。これをPhotoshopガイドレイアウトで作成しデザインカンプを作ります。
スマホの場合は溝とサイドマージンの数値が固定されている可変グリッドを使用し溝幅16px、サイドマージン幅16px、スマホのスクリーン解像度は小さく12分割されたカラム・溝・サイドマージンを表示すると大規模に設計するのが非常に面倒になりますので3つのグループのカラムをマージし4つのカラムを作成します。
メモ：520px/960pxが2021年版のbreak pointとし「520px」は「510px」でも「530px」も良いが他が8の倍数で作られているので8の倍数の「520px」とし最小値を320pxとして制作。
520px未満 @media (max-width: 519px) {...} 960px未満 @media (max-width: 959px) {...}
※「以下」ではなく「未満」にするためにメディアクエリの数字を一つ減らす。
ガイドレイアウト機能はグリッドレイアウト用のガイドをスピーディに作成できます。
- ［表示］メニューの［新規ガイドレイアウト］をクリック
- ［新規ガイドレイアウトを作成］ダイアログボックスを表示
- プリセット「Webファイル(1920, 1080)」を選択し960 Grid Systemのガイドを作成する値
- ［列］オプションにチェック(行はオフ)
- 「数：12、幅、60px、間隔：20px」
- ［列を中央に揃える］オプションをオン
- ［マージン］にチェックを付け、［左］と［右］に「480px」に設定
- 完成見本
calc()関数はCSSで数学演算((加算) (減算) (乗算) (除算))を行うことが出来ます。
calc()関数を使うにはCSS宣言でcalc()関数を呼び出すダケです。唯一のルールは常に演算子( )を半角スペースで区切ることです。
calc()関数以前のCSSではプロパティの値に正確な値しか指定できませんでしたが、これはレスポンシブ対応では非常に困りました。
calc()関数の計算式では相対値の単位(em,,vw)や絶対値の単位(px)を組み合わせて計算することができます。