Webデザインは横幅、縦幅ともに表示されるブラウザのウィンドウサイズによって変わります。
ラップトップPCでは画面が狭いのでそれに伴って、ウィンドウサイズが小さくなり、デスクトップPCのモニターサイズは一般的なサイズで２０インチほどです。
Webデザインを考える時、ウィンドウサイズばかりを気にしていても先には進みません。
Webサイトを見ている側の環境はそれぞれなのですが、まずはWebサイト内のデザインを考える上でのサイズの基準を設ける必要があります。
Contents
Webデザインのサイズの基準「文字サイズ」
そこで、何を基準にするかですが、『グリッド・デザイン』の中で紹介されているのは「文字サイズ」を基準とすることです。
文字サイズを「12px」とした例
今回は例として、基準の文字サイズを「12px」とします。
次は文章の行間を決めますが、ここでは考えやすいように行間も12pxに設定します。
CSSでは行間というよりは“行高”を設定するプロパティ「line-height」を使用して、行高を文字サイズと行間を合わせた値「24px」とします。
余白の設定
CSSプロパティの「margin」「padding」などの余白の設定も、先ほど文字サイズに設定した「12px」を基準として、12の倍数で余白を段階的に作成します。
具体的に言うと、12px、24px、36px、48px、60px・・・といくつかの余白のバリエーションをあらかじめ用意すると言うことです。
そして、要素間の余白を情報の関連性によって設定していきます。
要素自体のサイズについて
コンテンツを中に入れるボックスをウィンドウ内の中央に配置する場合、ボックスの幅を指定しますが、この時も基準の12pxの倍数で設定します。
では、ウィンドウの幅いっぱいにボックスを広げる場合はどのようにすればよいでしょうか？
こういった時はボックスの幅は100%などの相対値で設定しますが、要素の横にはさむ余白を12pxの倍数で設定します。
こうしておくことで、ウィンドウサイズは見ている人の環境によって変わりますが、余白は12pxを基準としているので規則性をもった要素の配置ができるのです。
余白やサイズが、12px刻みでは大きいと感じる場合
12px刻みでの余白やサイズの指定で刻みが大きいと感じる場合や、もう少し余白を詰めたい場合は、12pxの半分の「6px」を加えたり、差し引いたりすると、12px基準のレイアウト時にも馴染みやすいです。
Sassの変数を使うと、コーディングの効率が上がる
CSSをそのまま書いても、上記のような文字サイズを基準としたレイアウトの指定はできますが、Sassを使うことで効率がグンと上がります。
その理由は、Sassでは変数を取り扱うことができ、値の計算もできるからです。
仮に文字サイズを「12px」から「14px」に変更した場合にも、基準の文字サイズを代入した変数の値を変更するだけで、CSS全体に変更が反映されます。
文字サイズ：12pxベースのレイアウトサンプル
文字サイズ：12pxで作ったWebページのレイアウトサンプルを載せます。
12pxの倍数を基準に要素を配置した箇所に、赤の矢印に数字を併せて記載しています。
