「５つのレイアウトパターン」と「レスポンシブデザイン」を実際に手を動かして作りながらサイト制作の基本が学べる！ライブ感のあるチュートリアル学習により、まるでＷｅｂデザイン会社でＯＪＴ（オン・ザ・ジョブ・トレーニング）を受けているような体験型の独習書です。

Chapter 1　知っておきたいサイトとデザインのきほん知識 1-1 ウェブサイトのしくみについて知ろう 1-2 サイト制作のフローとウェブデザイン 1-3 コーディングについて知っておくべきこと 1-4 ウェブページのパーツやレイアウトについて知ろう 1-5 ウェブデザインで知っておくべきこと Chapter 2　サイト制作の前に準備しておくこと 2-1 制作環境を整えよう 2-2 Google Chromeのインストールと使い方 2-3 Visual Studio Codeのインストールと使い方 2-4 入力したコードをブラウザで確認する方法 2-5 実習用サンプルサイトを見てみよう Chapter 3　知っておきたいHTMLのきほんと書き方 3-1 HTMLのきほん知識 3-2 サンプルサイト共通のHTMLを書いてみよう 3-3 見やすいコードとコメントの書き方 Chapter 4　知っておきたいCSSのきほんと書き方 4-1 CSSのきほん知識 4-2 CSSを書いてみよう＜ページの基本設定を記述する＞ 4-3 CSSを書いてみよう 4-4 ウェブフォントを指定してみよう Chapter 5　知っておきたいレスポンシブデザインのきほんと書き方 5-1 レスポンシブデザインのきほん知識 5-2 モバイルサイト用のCSSを書いてみよう 5-3 ハンバーガーメニューを作成しよう 5-4 モバイル用フッターのレイアウトを調整しよう Chapter 6　フルスクリーンレイアウトを制作する 6-1 フルスクリーンレイアウト制作で学ぶこと 6-2 フルスクリーンレイアウトのHTMLを書いてみよう 6-3 フルスクリーンレイアウトのCSSを書いてみよう 6-4 フルスクリーンレイアウトのモバイル用CSSを書いてみよう Chapter 7　フレックスボックスレイアウトを制作す 7-1 フレックスボックスレイアウト制作で学ぶこと 7-2 フレックスボックスレイアウトのHTMLを書いてみよう 7-3 フレックスボックスレイアウトのCSSを書いてみよう 7-4 フレックスボックスレイアウトのモバイル用CSSを書いてみよう Chapter 8　シングルカラムで動画コンテンツページを制作する 8-1 シングルカラムレイアウト制作で学で学ぶこと 8-2 シングルカラムレイアウトのHTMLを書いてみよう 8-3 シングルカラムレイアウトのCSSを書いてみよう 8-4 シングルカラムレイアウトのモバイル用CSSを書いてみよう Chapter 9　グリッドで格子状レイアウトを制作する 9-1 グリッドレイアウト制作で学ぶこと 9-2 グリッドレイアウトのHTMLを書いてみよう 9-3 グリッドレイアウトのCSSを書いてみよう 9-4 グリッドレイアウトのモバイル用CSSを書いてみよう Chapter 10　2カラムでショップページを制作する 10-1 2カラムレイアウト制作で学ぶこと 10-2 2カラムレイアウトのHTMLを書いてみよう 10-3 ECサイトへリンクするページのHTMLを書いてみよう 10-4 2カラムレイアウトのCSSを書いてみよう 10-5 2カラムレイアウトのモバイル用CSSを書いてみよう Chapter 11 Googleマップ付きの問い合わせページを制作する 11-1 問い合わせページ制作で学ぶこと 11-2 問い合わせページのHTMLを書いてみよう 11-3 問い合わせページのCSSを書いてみよう 11-4 問い合わせページのモバイル用CSSを書いてみよう Appendix オリジナルのポートフォリオサイトに改変してみよう デザインのバリエーションが学べる！「レスポンシブデザインのネタ帖」 インターン、就転職に役立つ！「ポートフォリオ用アレンジのネタ帖」