目次

Introduction　Webデザイン
　　　0-1　Web デザインで考えないといけないこと
　　　0-2　Web デザインの３要素の相互関係

Chapter1　雑誌風レイアウト
　　　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　小さい画面でのデザインを整える

Chapter2　フライヤー風レイアウト
　　　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　小さい画面でのデザインを整える

Chapter3　画像をメインにしたレイアウト
　　　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　大きい画面と小さい画面でのデザインを整える

Chapter4　ナビゲーション
　　　4-1　完成見本のデザイン
　　　4-2　完成見本の分析
　　　4-3　パーツの設定を記述する
　　　4-4　CSS グリッドを作成してパーツを配置する
　　　4-5　パーツのデザインを整える
　　　4-6　大きい画面でのデザインを整える
　　　4-7　メインコンテンツを配置してみる

Appendix
HTML & CSS の基本設定
ブラウザでの表示確認
CSS グリッド・リファレンス

著者プロフィール

• エビスコム（著者）

  さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、CD-ROM、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。
  主な編著書： 『HTML5&CSS3デザイン 現場の新標準ガイド』マイナビ出版刊
  『6ステップでマスターする 「最新標準」HTML+CSSデザイン』同上
  『これからの「標準」を学ぶ マルチデバイス対応サイト構築』同上
  『これからの「標準」を身につける HTML+CSSデザインレシピ』同上
  『HTML5 スタンダード・デザインガイド』同上
  『CSS3 スタンダード・デザインガイド【改訂第2版】』同上
  『XHTML/HTML+CSS スーパーレシピブック』同上
  『WordPress3 サイト構築スタイルブック』同上
  『WordPress3 デザイン&カスタマイズ スタイルブック』同上
  『Movable Type サイトデザイン&レシピ事典』同上
  『Dreamweaverデザインブック CC2015対応』ソシム刊
  『WordPress デザインブック HTML5&CSS3準拠』同上
  『HTML5&CSS3 デザインブック』ソシム刊
  『WordPress レッスンブック HTML5&CSS3準拠』同上
  『WordPress ステップアップブック』同上
  『HTML5&CSS3 レッスンブック』同上