概要

最新HTML&CSS仕様をアクセシビリティ視点で実務に適用する

想定読者

Web制作・Webアプリ開発に従事する実務者で、CSSグリッド・コンテナクエリ・スクロール駆動アニメーションなど近年の仕様変更を体系的に整理したい人

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

• HTMLとCSSをまだ一度も触ったことのない完全な初学者(プログラミング入門書を先に読むことを推奨)
• すでにWHATWG/W3C仕様を日常的に直読みしており、リファレンスより原典を参照できる上級者
• JavaScriptフレームワーク中心の開発でHTML&CSS部分は最低限でよいと考えている人

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

• CSSグリッド・フレックスボックス・フローレイアウトの仕組みを使い分けられる
• コンテナクエリを使ったコンポーネント単位のレスポンシブ設計ができる
• ポップオーバー・ダイアログ・ビュー遷移など新しいUI機能をJavaScript最小限で実装できる
• WCAG準拠を意識したセマンティックマークアップを書けるようになる
• AIフレンドリー・SEO対策の観点からHTML要素を選択する判断軸を持てる
• CSSネスティング・カスケードレイヤー・@scopeを使った保守性の高いスタイル設計ができる

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

• 第 1 章 HTMLとアクセシビリティとCSS — 本書全体の設計思想を提示する章。セマンティクスとアクセシビリティを実装判断の前提として位置付けており、先に読むことで以降の章の選択理由が腑に落ちる
• 第 2 章 HTML要素 — WHATWG HTML Living Standard準拠の要素リファレンス。AIフレンドリーマークアップ・法的要件対応など従来版にない視点が追加されている
• 第 3 章 CSS — CSSネスティング・カスケードレイヤー・@scope・@propertyなど2022年以降に主要ブラウザ対応が揃った機能を網羅
• 第 4 章 レイアウト — グリッド・フレックスボックス・フローレイアウトの三択判断を体系化した章。コンテナクエリによるコンポーネント単位レスポンシブも収録
• 第 5 章 タイポグラフィ — viewport相対単位(vw/vh)・コンテナ相対単位(cqw/cqh)など可変フォントサイズの最新手法を扱う
• 第 6 章 コンテンツと視覚効果 — 画像・動画の最適化とCSSで実現する視覚効果。パフォーマンスと表現力を両立するアプローチ
• 第 7 章 インタラクションとアニメーション — スクロール駆動アニメーション・ビュー遷移・ポップオーバー・ダイアログなどJavaScript依存を減らす最新CSS機能を集約。実務での落とし所を確認したい章

ハイライト

• 膨大な内容を使える知識として効率よく手に入れるべく、アクセシビリティの視点も取り入れながら、最新のHTML&CSSの仕様に基いた、『こう書けば、こういう処理を経て、こういう結果になる』ということを可能な限り凝縮して1冊にまとめました。(仕様の理解を『結果から逆算』する構成方針が端的に表れており、リファレンスとしての本書の使い方を示している)
• 詳細な解説と豊富なコードサンプル・図版で構成されており、Web制作者が手元に置いておきたい信頼できるリファレンスとして紹介されている。ファビコン実装方法の変化など最新の仕様変更も丁寧に解説している。(発売直後のWeb専門メディアColissが実務リファレンスとして評価した箇所)

外部からの言及

• Web専門メディアColissは発売直後に『Web制作者が手元に置いておきたい信頼できるリファレンス』と評価。WCAG準拠のアクセシビリティ・WHATWG/W3C最新仕様への対応・実装直結の豊富なコードサンプルが支持の根拠として挙げられている(blog)
• 著者エビスコム自身が公式ノートでCSSカスケードレイヤー(@layer)をはじめとする本書収録の新機能を個別に解説しており、書籍の内容を補完する一次情報として参照できる(blog)

編集メモ

Qiita・Zennでの直接引用は確認できず(書籍発売2025-03で蓄積期間が短い)。はてなブックマーク54件(Colissレビュー)はHTML/CSS系技術書として標準以上の反応。前身書『HTML5&CSS3デザイン 現場の新標準ガイド第2版』が実務現場で定番として扱われてきた実績をベースに、モダン仕様への大幅改訂版として位置付けられる

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

• HTMLタグの基本的な書き方とCSSセレクタの仕組みを一度学んだ経験(入門書1冊程度の知識)
• テキストエディタとブラウザの開発者ツールで実際にHTML/CSSを編集・確認した経験
• Flexboxを使ったレイアウト実装の経験があると、Chapter 4の比較説明がより活きる

学習のコツ

• Chapter 1を先に読んで設計思想を把握してから、Chapter 3(CSS)→Chapter 4(レイアウト)の順で進むと、各機能の採用理由が理解しやすい
• Chapter 7(インタラクションとアニメーション)はプロジェクトで実装課題が生じたタイミングで参照する使い方が実務に合っている。スクロール駆動アニメーションやビュー遷移はブラウザ対応が揃った機能から試す
• 本書はリファレンス性が高いため、通読より『現在の現場で使っている要素・プロパティのページを確認する』という使い方が長期的に有効
• 旧版(HTML5&CSS3デザイン 現場の新標準ガイド第2版)を使っていた場合、Chapter 3のカスケードレイヤー・CSSネスティング・@scopeと、Chapter 4のコンテナクエリが増補の主要部分にあたる