目次

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

<綴じ込み特典>

• デザインのバリエーションが学べる！「レスポンシブデザインのネタ帖」
• インターン，就転職に役立つ！「ポートフォリオ用アレンジのネタ帖」