概要

HTML5とCSS3の文法からレスポンシブ対応までステップアップで身につける

想定読者

Web制作をまったくの初心者で、講義パートと実習パートを並行して『正しいマークアップの作法』を段階的に習得したい人

こんな人には向いていない

• HTML/CSSの基本文法を既に知っている人には内容の大半が繰り返しになる
• JavaScriptやサーバーサイドの学習に移行したい人には範囲外であり扱われていない
• 2015年発行の初版でfloatレイアウト主体の構成のため、FlexboxやGridを中心に学びたい人には第2版を先に確認することを薦める

読了後にできるようになること

• HTML5のセクション関連新要素（article、section、header等）を使った正しいマークアップができる
• CSSのボックスモデルを理解し、float・positionを使った層状レイアウトが構築できる
• CSS3アニメーション、変形、メディアクエリを使ったマルチデバイス対応ページを実装できる
• CSSスプライトや効率的なCSSコーディング設計など本格的なサイト制作における実践技術が身につく
• Retinaディスプレイ対策を含むレスポンシブ・ウェブデザインの画面設計とコーディング手順を一通り踏める

本書のキー概念(章解説)

• 第 1 章 HTMLで文書を作成する — HTMLの概要から表・フォームまでをカバーする入口章。HTML初体験者はここから入る
• 第 2 章 CSSで文書を装飾する — 基本プロパティ・セレクタ・背景画像・ボックスモデルを手を動かしながら定着させる章
• 第 3 章 CSSレイアウトの基本 — float・positionコンセプトの理解。コーディングでつまずく原因の多くはこの章で解決できる
• 第 4 章 本格的なHTML5によるマークアップを行うための基礎知識 — HTML5セクション要素とコンテンツモデルを整理。HTML5固有の考え方を体系化するのに役立つ
• 第 5 章 本格的なWeb制作のための設計と準備 — Webサイトのコーディング設計とCSS下準備。実践プロジェクトに入る前の概念を整理する章
• 第 6 章 実践的なWebサイトのコーディング — displayプロパティ・CSSスプライト・メインコンテンツ領域の作成を通じて実践する本書の山場章
• 第 7 章 CSS3入門 — CSS3セレクタ・プロパティ・変形・アニメーションを手を動かしながら学ぶ章。視覚的フィードバックが得やすい
• 第 8 章 マルチデバイス対応の基礎知識 — デバイス特性とモバイル対応の基本。レスポンシブ実装の前提知識を整理する
• 第 9 章 レスポンシブ・ウェブデザインのコーディング — メディアクエリ・画面設計・Retina対策を擁した本書の到達点。最後にまとめ読みして全体像を確認できる

ハイライト

• ゼロから学べるWeb制作学習書がHTML5とCSS3に完全対応！HTML5とCSS3の初歩的な文法学習から始めて、本格的なサイト制作までの流れを通して学ぶことで、初心者でも正しいマークアップの作法が身に付きます(本書の構成方針が最も簡潔に述べられている公式説明文)

編集メモ

Qiita記事の言及は確認できず（0件・累計likes 0）、Rakutenランキング情報もなし。同シリーズの第2版が存在するため、最新情報を求める読者には第2版が優先候補となる

読む前に押さえておきたいこと

• プログラミング言語経験は不要だが、テキストエディタ（VS Code等）の基本操作（ファイル保存・文字入力）ができること
• WebブラウザでページURLを開く程度の基本操作（URL・ドメイン・ファイルパスの概念）

学習のコツ

• 講義パートと実習パートがセットになっているため、実習パートは必ずPCでコードを打ちながら学ぶこと。目で追うだけでは定着しにくい
• Chapter03（CSSレイアウトの基本）はつまずきやすいポイントなので、行き詰まったらこの章に立ち返り、ブラウザの開発者ツールでボックスモデルを目視しながら確認すると理解が定着する
• 第2版（HTML5＆CSS3標準デザイン講座30LESSONS　第2版）も存在するため、購入前に内容の新旧を確認することを推奨する。特にFlexbox・Gridレイアウトを重視する場合は第2版を先に検討したい