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

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

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

本日、6/15発売です!

本のキャプチャ

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

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

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

本のキャプチャ

CSSグリッドレイアウト デザインブック
[Amazonでみる]
[楽天でみる]

著:
エビスコム
出版社:
マイナビ出版
発売日:
2018/6/15

Kindle版も同時発売です。

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

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

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

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

  1. Webデザイン
    Webデザインで考えないといけないこと
    Webデザインの3要素の相互関係
  2. 雑誌風レイアウト
    完成見本のデザイン
    完成見本の分析
    完成見本をCSSグリッドなしで作成する場合の問題点
    完成見本をCSSグリッドで作成するための準備
    CSSグリッドの構成を検討する
    CSSグリッドを作成する
    パーツの配置先を指定する
    パーツのデザインを整える 1 タイトル部分
    パーツのデザインを整える 2 テキスト部分
    パーツのデザインを整える 3 画像部分
    パーツのデザインを整える 4 SNS メニュー
    パーツのデザインを整える 5 キャッチコピーの引用符
    大きい画面でのデザインを整える
    小さい画面でのデザインを整える
  3. フライヤー風レイアウト
    完成見本のデザイン
    完成見本の分析
    完成見本をCSSグリッドなしで作成する場合の問題点
    完成見本をCSSグリッドで作成するための準備
    CSSグリッドを作成する
    パーツの配置先を指定する
    ヘッダーのパーツの配置を整える
    ヘッダーのパーツのデザインを整える
    ヘッダーにパーツを追加する
    セクションのパーツの配置を整える
    セクションの基本的なデザインを整える
    セクションごとに小見出しのデザインを整える
    ショップ情報のデザインを整える
    タブレットサイズの画面でのデザインを仕上げる
    大きい画面でのデザインを整える
    小さい画面でのデザインを整える
  4. 画像をメインにしたレイアウト
    完成見本のデザイン
    完成見本をCSS グリッドなしで作成する場合の問題点
    画像にテキストを重ねたレイアウト
    画像にテキストの一部を重ねたレイアウト
    左右対称なレイアウト
    非対称なレイアウト
  5. ナビゲーション
    完成見本のデザイン
    完成見本の分析
    パーツの設定を記述する
    CSSグリッドを作成してパーツを配置する
    パーツのデザインを整える
    大きい画面でのデザインを整える
    メインコンテンツを配置してみる

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

本のキャプチャ

CSSグリッドレイアウト デザインブック
[Amazonでみる]
[楽天でみる]

著:
エビスコム
出版社:
マイナビ出版
発売日:
2018/6/15

献本の御礼

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

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

sponsors

top of page

©2024 coliss