Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。Reflowを活用するメリットCSSフレームワークに合わせてプロトタイピングCSSフレームワークとはWebサイト制作では、よく利用されるレイアウトやUIを使いやすい形でフォーマット化して配布されているものが多くあり、一般的にCSSフレームワークと呼ばれています。RWDに対応しているものも多く、グリッドシステムが採用されています。System(以下cssgrid)のグリッドに合わせて設定を行っていきます。cssgridのブレークポイントは、シンプルに768px以下で切り分けているのみです。Reflowで768pxのブレークポイントを設定します。ブレークポイントは右上の+ボタンで追加可能です。cssgridのグリッドシステムでは12カラム構成、各カラムのmargin-rightが3.8%になっています。Reflowのグリッドシステムではカラムごとに左右個別の余白を設定することはできないため、3.8%を割って左右に1.9%ずつ余白を持たせることにします。Optionsが表示され、ColumnsとGuttersの項目でそれぞれ設定が可能になります。下図はColumnsを12、Guttersを1.9%に設定した例です。Gutterはカラム間の余白のことです。Gutterをオンにします。簡単なレイアウトを作ってみましょう。配置できるオブジェクトは下記の3つです。ボックステキストイメージボックスはdivブロックです。headerやmoduleブロックなど、要素のまとまりはこのボックスの中に入れ子にして管理します。下図はヘッダー、グローバルナビ、メインビジュアル、3ブロックのコンテンツ、フッターのボックスを配置したものです。メインビジュアルはイメージオブジェクトで配置しています。画像はレスポンシブな状態で配置されます。ヒロフミ)株式会社イノーヴWEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。