デザインブック「CSSグリッドで実現できることは何なのか」をテーマに、その表現力と自由を活用し、レスポンシブで柔軟なWebデザインを実現していく一冊です。KindlePDF版(出版社のオフィシャルページで販売中)はじめに作成ステップ作成するレイアウトもくじはじめに本書は「CSSグリッドで実現できることは何なのか」をテーマにした一冊です。そのためのアプローチとして、従来のWeb制作では避けてきたり、妥協してきたようなデザインやレイアウトをCSSグリッドで実現することを試みています。それは印刷物や誌面レイアウトでは当たり前に行われていながら、Webデザインではがまんしてきた部分です。印刷物にない「レスポンシブ」という要件も含めて実現しなければなりません。CSSグリッドは、この部分を克服できるだけの表現力と自由を提供してくれます。「ボックスを並べるのが簡単になる」というだけのCSSグリッドのイメージからは一歩進んだ使い方です。このアプローチからはCSSグリッドで実現できることが表面的な表現力だけではなく、本質は「HTMLとCSSを完全に分離できる」ことであることが見えてきます。CSSの登場以来、Webの世界では「CSSによって視覚的なデザインの設定をHTMLから分離する」と言われ続けてきました。実際にはHTMLに縛られていた部分があまりに多く、さまざまな制約が発生していました。その結果、デザインを実現するためには「コンテンツをどういう順に記述するか」「どうマークアップするか」「どのCSSのレイアウトテクニックを利用するか」をパズルのように取捨選択し、形にしていくスキルが必要でした。したスキルは、CSSとHTMLが本当の意味で分離すると不要になります。そこで、本書では原点に立ち返り、「HTMLに求められているものを明確に再確認した上で、CSSグリッドでコーディングを進める」というスタンスにたって作業を進めています。「HTMLはコンテンツと文書構造を伝えるためのものであり、不要なものは一切加えない」というところを意識したアプローチで、CSSグリッドによってかなりの次元で達成できたと思います。作成ステップ本書では章ごとに完成見本(デザインカンプ)を用意し、次のようなステップでWebで形にしていきます。完成見本を分析する完成見本はDTP系のレイアウトソフトを利用し、出版物と同じ制作手法で作成したものです。レイアウトを整えるため、パーツの位置決めにはガイドラインを使用しています。ガイドラインとはDTP系ソフトや画像編集ソフトなどで活用されている補助線のことです。本書ではこうして作られた完成見本からパーツを抽出し、HTMLと文書構造を組み立てます。CSSグリッドを作成してパーツを配置&デザインを整えて仕上げる完成見本を元にCSSグリッドのライン構成を検討し、グリッドを作成します。グリッドには抽出したパーツを配置し、デザインを整えていきます。本書ではタブレットサイズの画面でのデザインを仕上げてからレスポンシブの設定を行い、大きい画面や、小さい画面でのデザインを完成させます。作成するレイアウト本書で作成するレイアウトとグリッドの構成は次のようになっています。4ではページの枠組みを作成し、組み合わせて利用できるようにします。