CSS Gridの実用的なテクニックが基礎からていねいに解説されたフロントエンドの制作者にオススメの本

CSS Gridをそろそろ始めてみよう、と考えている人にぴったりの解説書を紹介します。

本書は実践的な解説書で、CSS Gridを使用してデスクトップ・スマホ向けのさまざまなレイアウトをはじめ、ヘッダやセクションやフッタやナビゲーションなどのコンポーネントの実装方法が詳しく解説されています。
初心者の人にも中級者の人にもCSS Gridの実装を一からしっかり学べる一冊です。

本日、6/15発売です！

HTMLやCSSの基本的な解説はありません。CSS Gridについての基礎知識から実装方法までが解説されており、日常的にHTMLとCSSに触れられている人にお勧めします。

また、本書でのレイアウトは「ノンデザイナーズ・デザインブック」の基本原則に従ったもので、デザインについても学べると思います。
パラパラ見るだけでもCSS Gridのアイデアが膨らみます。

書籍版でもKindle版でも解説されているデータはすべて、サポートサイトからダウンロードできます。

Kindle版も同時発売です。

• CSSグリッドレイアウト デザインブック Kindle版

そんな紙面をキャプチャで少しだけ紹介します。

まずは、本書で取り上げられているレイアウトをいくつか見てましょう。グリッドをベースにした雑誌風レイアウト・フライヤー風レイアウトは、最近のWebサイトやスマホアプリでも増えてきました。

画像をメインにしたさまざまなレイアウトやナビゲーションなど、よく使用するコンポーネントもCSS Gridを使用すると、シンプルなHTMLで実装できます。

本書は4章構成で、各チャプターごとにレイアウトを完成させるステップ形式で解説されています。そのフローも実務レベルです。

1. 完成見本（デザインカンプ）を用意。
2. デザインカンプを元に、HTMLで文書構造を組み立て。
3. CSS Gridでレイアウトを作成し、コンポーネントの作り込み。
4. 各デバイスごとの調整を行い、ページを仕上げる。

レイアウトはすべて、デスクトップ・タブレット・スマホ対応のレスポンシブで、汎用性が高いデザインになっています。

何をするにもすぐに始めるのではなく、まずは考え方や目的を理解することが大切です。デスクトップとスマホ、そしてタブレットでどのようにレイアウトされるのがベストなのか、躓きやすい問題点はどういうものがあり、解決の手段はどうなるのか、それらを踏まえて実装を始めます。

実装の解説も非常に詳しく、htmlの各要素の構造やどのようにスタイルを定義するかが解説されています。例えば、marginをつける際にも拡張性やメンテナンス性を考慮して与えます。

CSS Gridに慣れていない人でも、グリッドベースの実装がよく分かると思います。

タイトルや見出し・コピー・本文などのテキスト要素、画像周り、ボタンなどのパーツ調整も丁寧に詳しく解説されています。

第2章は、フライヤー風のレイアウト。

ヘッダとフッタ、各セクションを異なるデザインにしたカード型コンポーネントで構成されており、デスクトップでもスマホでも見栄えのするレイアウトです。

第3章は、画像をメインにしたさまざまなレイアウト。画像にテキストを重ねたり、一部だけを重ねたり、中央分割したり、アイキャッチ用のコンポーネントとして利用できます。

第4章は、ナビーゲション。メインのコンテンツが無い状態でのレイアウトで、実装時のひな形としても利用できます。

各章ともに第1章で紹介したように、コードや図入りで非常に丁寧に詳しく実装方法が解説されています。

付録も充実しています。
リファレンスではCSS Gridの基礎知識がコンパクトにまとめられており、便利です。

グリッドアイテムの配置、ライン名やアイテム名による配置、位置揃えなど、一目で理解できると思います。

CSSグリッドレイアウト デザインブックの目次

0. Webデザイン

   Webデザインで考えないといけないこと

   Webデザインの３要素の相互関係

1. 雑誌風レイアウト

   完成見本のデザイン

   完成見本の分析

   完成見本をCSSグリッドなしで作成する場合の問題点

   完成見本をCSSグリッドで作成するための準備

   CSSグリッドの構成を検討する

   CSSグリッドを作成する

   パーツの配置先を指定する

   パーツのデザインを整える 1 タイトル部分

   パーツのデザインを整える 2 テキスト部分

   パーツのデザインを整える 3 画像部分

   パーツのデザインを整える 4 SNS メニュー

   パーツのデザインを整える 5 キャッチコピーの引用符

   大きい画面でのデザインを整える

   小さい画面でのデザインを整える

2. フライヤー風レイアウト

   完成見本のデザイン

   完成見本の分析

   完成見本をCSSグリッドなしで作成する場合の問題点

   完成見本をCSSグリッドで作成するための準備

   CSSグリッドを作成する

   パーツの配置先を指定する

   ヘッダーのパーツの配置を整える

   ヘッダーのパーツのデザインを整える

   ヘッダーにパーツを追加する

   セクションのパーツの配置を整える

   セクションの基本的なデザインを整える

   セクションごとに小見出しのデザインを整える

   ショップ情報のデザインを整える

   タブレットサイズの画面でのデザインを仕上げる

   大きい画面でのデザインを整える

   小さい画面でのデザインを整える

3. 画像をメインにしたレイアウト

   完成見本のデザイン

   完成見本をCSS グリッドなしで作成する場合の問題点

   画像にテキストを重ねたレイアウト

   画像にテキストの一部を重ねたレイアウト

   左右対称なレイアウト

   非対称なレイアウト

4. ナビゲーション

   完成見本のデザイン

   完成見本の分析

   パーツの設定を記述する

   CSSグリッドを作成してパーツを配置する

   パーツのデザインを整える

   大きい画面でのデザインを整える

   メインコンテンツを配置してみる

CSS Gridを使用して実装する際に、手元に置いておくと非常に便利な一冊です。
CSS Gridを使用する時のアイデア帳として、そしてそれを実装する方法も分かるオススメの本です。

献本の御礼

最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス