概要

＜コンセプト＞PC＆モバイルサイトデザインの基礎力とHTML・CSSコーディングの知識が1冊で同時に身につく！

ウェブ制作を仕事にするならHTMLとCSSを学ぶことから始めますが，本書は体系立てた文法学習よりも，まずは「コーディングとはどのような作業なのか」を理解できる初学者向け入門書です。架空のカフェのショップ紹介＆ネットショップサイトをチュートリアル形式で作成しながら，基本的なHTML要素／CSSの基本構造（セレクタ，プロパティ，値）を学ぶことができ，レイアウトのテクニックやデザイン（Webデザイン＆レスポンシブデザイン）の基本も身につきます。

＜本書のポイント＞

• チュートリアル学習では，PC版だけでなくウェブ制作の現場でニーズの高いモバイルサイトのデザインがしっかり学べます
• 定番となったflexbox，displayを使ったレイアウト手法の基礎から実践まで丁寧に解説します
• 「フルスクリーン」「フレックスボックス」「シングルカラム」「2カラム」「グリッド」の5種類のレイアウトパターンを学習できます
• 横スクロールするレイアウト，アニメーションで拡大するボタンなど動きのあるサイトづくりも体験できます
• 「動画コンテンツページ」「ネットショップページ」も制作します

＜綴じ込み特典つき＞

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

こんな方におすすめ

• はじめてHTMLやCSSを学び，これからサイト制作をはじめる方
• 超初心者ではないが未経験からウェブデザイナーを目指している方
• モバイル用サイトの制作やデザインについても学びたい方

サンプル

• サンプルPDFファイル1（11,616KB）

目次

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

<綴じ込み特典>

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

サポート

ダウンロード

サンプルファイルダウンロード

本書のサンプルファイルをダウンロードできます。

サンプルファイルのご利用方法は本書P.7「サンプルファイルのダウンロード」およびP.46「作業フォルダを作成する」をご覧ください。

ダウンロード

ダウンロードサンプルファイル（HTML_CSS_WebDesign2.zip）

【電子版購入者対象】綴じ込み特典ダウンロード

本書（紙版）付属の綴じ込み特典「レスポンシブデザインのネタ帖」「ポートフォリオ用アレンジのネタ帖」は、電子版本体には付属されてません。

電子版ご購入の方は以下から入手できます。ダウンロードには電子版本紙に掲載されているIDとパスワードが必要です。

補足情報

初版第1刷および第2刷を購入いただいた読者の皆さまへ

Google Chromeのバージョンアップに伴い，デベロッパーツールの［Responsive］モードの端末もアップデートされました。
本書の該当箇所を，以下に読み替えて学習を進めてください。

• P.60　STEP.3
  プレビュー表示で選ぶ端末を
  ［iPhone 6/7/8］→［iPhone SE］
• P.259　STEP.3
  プレビュー表示で選ぶ端末を
  ［iPad］→［iPad Mini］

※端末を変更しても，紙面に掲載した画面表示との差異はありません。

正誤表

初版　第2刷までの正誤
P.75　表「▼sample.htmlへリンクを張る場合の記述方法のパターン」内＞「下の階層のディレクトリ」の「記述方法」