概要

HTML Living Standard 準拠の文法知識と実装力をゼロから身につける

想定読者

HTML&CSS を基礎からやり直したいWeb制作者、および仕様準拠の書き方を習得したい初〜中級フロントエンドエンジニア

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

• Flexbox・Grid を実務で使いこなしている中級以上の開発者には、既知の内容が大半を占める
• JavaScriptや動的インタラクションを優先的に学びたい人には、本書の対象外となる
• 一冊でHTML・CSS・JSを網羅したい人には、本書はHTML&CSSに特化しているため別途JS書籍が必要

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

• HTML Living Standard の最新仕様に基づいた要素・属性の正しい使い方を説明できる
• Flexbox とグリッドレイアウトの使い分けを理解し、実装できる
• CSSセレクタの適用先指定を体系的に整理し、意図した箇所にスタイルを当てられる
• フォームとテーブルの適切なマークアップを、仕様を根拠に選択できる
• なぜその要素・プロパティを使うのかを根拠付きで説明できる記述力が身につく
• 付録の全要素一覧・要素分類・配置ルールを参照辞書として実務で活用できる

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

• 第 1 章 はじめる準備
• 第 2 章 オリエンテーション
• 第 3 章 文法的なカタい話 — 仕様準拠の基礎となる章。読み飛ばすと後半の理解が浅くなるため、丁寧に読む価値がある
• 第 4 章 ページ全体の枠組み
• 第 5 章 テキスト
• 第 6 章 CSSの適用先の指定方法 — セレクタ体系の整理。実務でスタイルの当たり方に悩む人が立ち返る章
• 第 7 章 ページ内の構造
• 第 8 章 フレキシブルボックスとグリッド — Flexbox とGrid の使い分けを扱う。現場直結度が高い
• 第 9 章 ナビゲーション
• 第 10 章 フォームとテーブル
• 第 11 章 その他の機能とテクニック
• 第 12 章 ページをまるごと作ってみよう — 総合演習章。1〜11章の内容を統合して一つのWebページを完成させる

ハイライト

• 本書の解説は、表面的に『Webページが作れればそれでいい』というものではありません。仕様にしっかりと準拠した使い方で、正しく、読みやすいページを作れるように、サンプルを組み立てています。(他のHTML入門書との差別化点が最も明確に表れている箇所)
• 『なぜそこに、そのHTML、CSSを使うのか』をきちんと説明できるような知識も、手に入れることができます。(本書が単なる写経教材ではなく、判断力の育成を目的としていることを示す)

編集メモ

Qiita 上でISBN・書名による直接言及記事は確認できず(検索で0件)、外部シグナルは書籍説明文のみ。楽天ランキング情報も入力なし。HTML Living Standard 準拠という希少な切り口は評価できるが、現時点の外部シグナルは低水準のため supplementary と判定

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

• テキストエディタの基本操作とファイル保存・ブラウザでの確認ができる環境を用意できること
• HTMLとCSSの存在を知っている程度でよく、事前のプログラミング経験は不要

学習のコツ

• 第3章『文法的なカタい話』は地味に見えるが、後の章で登場する仕様準拠の判断基準がここに集約されている。読み飛ばさずに一読しておくと、第7章以降の理解速度が上がる
• 第8章(Flexbox・Grid)は他書で挫折した経験がある場合、先に読んでから前章に戻る逆順アプローチが有効
• 巻末付録『HTML全要素一覧』は読了後の辞書として活用する。業務中に要素の意味を迷ったときに参照すると仕様根拠で判断できるようになる
• サンプルコードを写経したら、本文に記載された『サンプルに登場していない属性やプロパティ』を意図的に書き換えて試す。このサイクルで知識が定着しやすい