デザインをすらすら再現できる HTML/CSSブロックコーディング
翔泳社
著者：笠井枝理依
はじめに
本書で学べること
本書の読み方
対応するブラウザ
学習を始める前に
CHAPTER 01 モックアップをブロック分解
1-1 モックアップとは
1-2 モックアップはこうして渡される
1-3 初心者がコーディングでつまずきがちなこと
1-4 サイトを構成する基本要素
1-5 モバイル版のブロック分解
1-6 タブレット版のブロック分解
1-7 ラップトップ版のブロック分解
CHAPTER 02 ファイルの準備
2-1 ファイル構成
2-2 画像の確認
2-3 normalize.cssとreset.css
CHAPTER 03 HTMLのコーディング準備
3-1 分解したモックアップの確認（HTML）
3-2 レスポンシブ対応する上で確認すること
3-3 ボトムアップのアプローチ方法
3-4 トップダウンのアプローチ方法
3-5 今回のアプローチ方法を考える
CHAPTER 04 HTMLのコーディング
4-1 骨組みのコーディング
4-2 ベースのコーディング
4-3 Headerのコーディング
4-4 Mainのコーディング
4-5 Footerのコーディング
4-6 ナビゲーションの設定
CHAPTER 05 CSSのコーディング準備
5-1 分解したモックアップの確認（CSS）
5-2 デザイナーに確認しておきたいこと
5-3 ファイルの準備
5-4 スタイリングする際に気にかけること
CHAPTER 06 CSSのコーディング
6-1 ベースのコーディング
6-2 共通クラスのコーディング
6-3 Headerのコーディング
6-4 Mainのコーディング
6-5 Footerのコーディング
CHAPTER 07 CSSでのレスポンシブ対応
7-1 モバイル版のコーディング
7-2 タブレット版のコーディング
7-3 ラップトップ版のコーディング
7-4 リファクタリング
CHAPTER 08 自分のプロフィールページへ
8-1 コンテンツの差し替え
8-2 カラーパレット作成
8-3 （もう一歩）下層ページを作成
APPENDIX 一歩進んだテクニック
A1 クロスブラウザ対応とは
A2 ブラウザで対応を変える例
A3 Figmaの基本的な使い方
検索キーワード