CSSフレームワークに合わせてプロトタイピング
CSSフレームワークとは
Webサイト制作では、よく利用されるレイアウトやUIを使いやすい形でフォーマット化して配布されているものが多くあり、一般的にCSSフレームワークと呼ばれています。RWDに対応しているものも多く、グリッドシステムが採用されています。
CSSフレームワークの一例
- Twitter Bootstrap
- The 1140px CSS Grid System · Fluid down to mobile
- Foundation: The Most Advanced Responsive Front-end Framework from ZURB
CSSフレームワークにグリッドを合わせる
本稿では、Edge ReflowのグリッドをThe 1140px CSS Grid System（以下cssgrid）のグリッドに合わせて設定を行っていきます。
cssgridのブレークポイントは、シンプルに768px以下で切り分けているのみです。まずはEdge Reflowで768pxのブレークポイントを設定します。
ブレークポイントは右上の+ボタンで追加可能です。
cssgridのグリッドシステムでは12カラム構成、各カラムのmargin-rightが3.8%になっています。Edge Reflowのグリッドシステムではカラムごとに左右個別の余白を設定することはできないため、3.8%を割って左右に1.9%ずつ余白を持たせることにします。
Edge Reflowでグリッドを選択するとLayoutパネルでGrid Optionsが表示され、ColumnsとGuttersの項目でそれぞれ設定が可能になります。下図はColumnsを12、Guttersを1.9%に設定した例です。
Gutterはカラム間の余白のことです。外側にもGutterを設定したい場合は、Show Outer Gutterをオンにします。
オブジェクトを配置
簡単なレイアウトを作ってみましょう。配置できるオブジェクトは下記の3つです。
- ボックス
- テキスト
- イメージ
ボックスはdivブロックです。headerやmoduleブロックなど、要素のまとまりはこのボックスの中に入れ子にして管理します。下図はヘッダー、グローバルナビ、メインビジュアル、3ブロックのコンテンツ、フッターのボックスを配置したものです。メインビジュアルはイメージオブジェクトで配置しています。画像はレスポンシブな状態で配置されます。
