CSSグリッドレイアウト デザインブック
「CSSグリッドで実現できることは何なのか」をテーマに、その表現力と自由を活用し、レスポンシブで柔軟なWebデザインを実現していく一冊です。
はじめに
本書は「CSSグリッドで実現できることは何なのか」をテーマにした一冊です。
そのためのアプローチとして、従来のWeb制作では避けてきたり、妥協してきたようなデザインやレイアウトをCSSグリッドで実現することを試みています。それは印刷物や誌面レイアウトでは当たり前に行われていながら、Webデザインではがまんしてきた部分です。もちろん、印刷物にない「レスポンシブ」という要件も含めて実現しなければなりません。
CSSグリッドは、この部分を克服できるだけの表現力と自由を提供してくれます。「ボックスを並べるのが簡単になる」というだけのCSSグリッドのイメージからは一歩進んだ使い方です。
そして、このアプローチからはCSSグリッドで実現できることが表面的な表現力だけではなく、本質は
「HTMLとCSSを完全に分離できる」
ことであることが見えてきます。
CSSの登場以来、Webの世界では「CSSによって視覚的なデザインの設定をHTMLから分離する」と言われ続けてきました。しかし、実際にはHTMLに縛られていた部分があまりに多く、さまざまな制約が発生していました。その結果、デザインを実現するためには「コンテンツをどういう順に記述するか」「どうマークアップするか」「どのCSSのレイアウトテクニックを利用するか」をパズルのように取捨選択し、形にしていくスキルが必要でした。
こうしたスキルは、CSSとHTMLが本当の意味で分離すると不要になります。
そこで、本書では原点に立ち返り、「HTMLに求められているものを明確に再確認した上で、CSSグリッドでコーディングを進める」というスタンスにたって作業を進めています。
「HTMLはコンテンツと文書構造を伝えるためのものであり、不要なものは一切加えない」というところを意識したアプローチで、CSSグリッドによってかなりの次元で達成できたと思います。
作成ステップ
本書では章ごとに完成見本（デザインカンプ）を用意し、次のようなステップでWebで形にしていきます。
1 完成見本を分析する
完成見本はDTP系のレイアウトソフトを利用し、出版物と同じ制作手法で作成したものです。レイアウトを整えるため、パーツの位置決めにはガイドラインを使用しています。ガイドラインとはDTP系ソフトや画像編集ソフトなどで活用されている補助線のことです。本書ではこうして作られた完成見本からパーツを抽出し、HTMLと文書構造を組み立てます。
2 CSSグリッドを作成してパーツを配置＆デザインを整えて仕上げる
完成見本を元にCSSグリッドのライン構成を検討し、グリッドを作成します。グリッドには抽出したパーツを配置し、デザインを整えていきます。本書ではタブレットサイズの画面でのデザインを仕上げてからレスポンシブの設定を行い、大きい画面や、小さい画面でのデザインを完成させます。
作成するレイアウト
本書で作成するレイアウトとグリッドの構成は次のようになっています。Chapter 4ではページの枠組みを作成し、組み合わせて利用できるようにします。
CHAPTER 1 雑誌風レイアウト 縦横に均等に分割したグリッドで作成
CHAPTER 2 フライヤー風レイアウト 複数のグリッドを組み合わせて作成
CHAPTER 3 画像をメインにしたレイアウト
3A 画像にテキストを重ねたレイアウト 12分割の列のグリッドで作成
3B 画像にテキストの一部を重ねたレイアウト 固定＋可変な列を組み合わせたグリッドで作成
3C 左右対称なレイアウト 2分割のシンプルなグリッドで作成
3D 非対称なレイアウト ２：１のシンプルなグリッドで作成
CHAPTER 4 ナビゲーション グリッドでページの枠組みを作成
もくじ
[mokuji]
INTRODUCTION Webデザイン
0-1 Webデザインで考えないといけないこと
0-2 Webデザインの３要素の相互関係
CHAPTER 1 雑誌風レイアウト
1-1 完成見本のデザイン
1-2 完成見本の分析
1-3 完成見本をCSS グリッドなしで作成する場合の問題点
1-4 完成見本をCSSグリッドで作成するための準備
1-5 CSSグリッドの構成を検討する
1-6 CSSグリッドを作成する
1-7 パーツの配置先を指定する
1-8 パーツのデザインを整える （１） タイトル部分
1-9 パーツのデザインを整える （２） テキスト部分
1-10 パーツのデザインを整える（３） 画像部分
1-11 パーツのデザインを整える（４） SNSメニュー
1-12 パーツのデザインを整える（５） キャッチコピーの引用符
1-13 大きい画面でのデザインを整える
1-14 小さい画面でのデザインを整える
CHAPTER 2 フライヤー風レイアウト
2-1 完成見本のデザイン
2-2 完成見本の分析
2-3 完成見本をCSS グリッドなしで作成する場合の問題点
2-4 完成見本をCSSグリッドで作成するための準備
2-5 CSSグリッドを作成する
2-6 パーツの配置先を指定する
2-7 ヘッダーのパーツの配置を整える
2-8 ヘッダーのパーツのデザインを整える
2-9 ヘッダーにパーツを追加する
2-10 セクションのパーツの配置を整える
2-11 セクションの基本的なデザインを整える
2-12 セクションごとに小見出しのデザインを整える
2-13 ショップ情報のデザインを整える
2-14 タブレットサイズの画面でのデザインを仕上げる
2-15 大きい画面でのデザインを整える
2-16 小さい画面でのデザインを整える
CHAPTER 3 画像をメインにしたレイアウト
3-1 完成見本のデザイン
3-2 完成見本をCSSグリッドなしで作成する場合の問題点
3A 画像にテキストを重ねたレイアウト
3A-1 完成見本の分析
3A-2 パーツの設定を記述する
3A-3 CSSグリッドを作成してパーツを配置する
3A-4 パーツのデザインを整える
3A-5 大きい画面と小さい画面でのデザインを整える
3B 画像にテキストの一部を重ねたレイアウト
3B-1 完成見本の分析
3B-2 パーツの設定を記述する
3B-3 CSSグリッドを作成してパーツを配置する
3B-4 パーツのデザインを整える
3B-5 大きい画面でのデザインを整える
3B-6 小さい画面でのデザインを整える
3C 左右対称なレイアウト
3C-1 完成見本の分析
3C-2 パーツの設定を記述する
3C-3 CSSグリッドを作成してパーツを配置する
3C-4 パーツのデザインを整える
3C-5 大きい画面と小さい画面でのデザインを整える
3D 非対称なレイアウト
3D-1 完成見本の分析
3D-2 パーツの設定を記述する
3D-3 CSSグリッドを作成してパーツを配置する
3D-4 パーツのデザインを整える
3D-5 大きい画面と小さい画面でのデザインを整える
CHAPTER 4 ナビゲーション
4-1 完成見本のデザイン
4-2 完成見本の分析
4-3 パーツの設定を記述する
4-4 CSSグリッドを作成してパーツを配置する
4-5 パーツのデザインを整える
4-6 大きい画面でのデザインを整える
4-7 メインコンテンツを配置してみる
APPENDIX A HTML & CSSの基本設定
APPENDIX B ブラウザでの表示確認
APPENDIX C CSSグリッド・リファレンス
CSSグリッドの基本
グリッドの構成
グリッドアイテムの配置
ライン名を使ったグリッドアイテムの配置
エリア名を使ったグリッドアイテムの配置
自動生成・自動配置
トラックの位置揃え
グリッドアイテムの位置揃え
IE11に対応する
[/mokuji]
