目次

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 オリジナルのポートフォリオサイトに改変してみよう

<綴じ込み特典>
デザインのバリエーションが学べる！「レスポンシブデザインのネタ帖」
インターン、就転職に役立つ！「ポートフォリオ用アレンジのネタ帖」