そういえばHTML / CSSに関して最近インプットがなかったな。というわけで良さげな本を教えてもらったので買ってみました！
「モダンHTML&CSS 現場の新標準ガイド」
Amazon.co.jp
amzn.to
本の内容と特徴
- HTMLとCSSの基本構造の解説はもちろん、「なぜこの書き方をするのか？」という背景や理由まで丁寧に解説。
- BEMやFLOCSSといったCSS設計の概念、可読性・保守性を意識した命名ルールに触れている。
- flexbox、gridといったレイアウトの新定番が中心。
- 旧来のテクニック（floatやclearfixなど）は「こういうことに使っていたが、今はこうする」という比較視点で紹介。
- 実際のUIパーツのコード例が豊富で、実務で即使える。
今までのHTML&CSSとどう違うのか？
| 観点 | 従来のHTML&CSS | モダンHTML&CSS（本の内容） |
|---|---|---|
| レイアウト | float, positionが主流 | flexbox, gridが基本ツール |
| クラス設計 | 直感的・場当たり的な命名 | BEM/FLOCSSなどのルールに基づいた命名 |
| HTMLの記述 | セマンティクス軽視、div多用 | 意味のあるタグ（<header>, <main>, <section>など）の活用 |
| CSSの管理 | 1ファイルにベタ書き | コンポーネント単位の分割やSCSSの活用も前提 |
| ブラウザ対応 | IE対応のための古い記法多め | IE非対応、モダンブラウザ前提でシンプル |
章ごとのざっくり内容
第1章：HTML&CSSの基礎
- HTML・CSSの役割や基本構造をおさらい。
- セマンティックなタグ（
<header>や<article>など）の意味と使いどころを解説。 - モダンなマークアップとは何か、を意識した丁寧な導入。
📝 従来との違い：単なる<div>の乱用ではなく、意味のある構造を意識。
第2章：CSSの基本と設計
- カスケード、セレクタの仕組み、継承などの基本。
- CSS設計の重要性、BEMやFLOCSSの考え方を軽く紹介。
- クラス命名と構造設計に対する現場目線の解説あり。
📝 従来との違い：とりあえず書くCSSではなく、「どう設計するか」に重点がある。
第3章：ページの基本構造とレイアウト
- ページの土台となる構成（ヘッダー・メイン・フッターなど）。
- FlexboxとGridの基礎と使い分け。
- レスポンシブ対応を考慮した設計。
📝 従来との違い：floatやpositionではなく、今の主流レイアウト方法を軸にしている。
第4章：UIパーツのスタイリング
- ボタン、フォーム、カードなどのUIパーツの実装例。
- コンポーネント的な設計の考え方を取り入れて紹介。
- 可読性・再利用性を重視したCSSの書き方が中心。
📝 従来との違い：1ページ完結型ではなく、「再利用可能なパーツ」という視点。
第5章：モダンなレイアウトテクニック
- GridやFlexを使った実践的なレイアウト事例。
- メディアクエリを使ったレスポンシブデザイン。
- モバイルファースト設計の考え方も登場。
📝 従来との違い：PC→スマホではなく、スマホ→PCの順で考えるモバイルファーストが前提。
第6章：CSS設計の実践
- FLOCSSの分類に沿ったファイル分割・設計例。
- CSSの肥大化を防ぐためのルール化・運用方法。
- チーム開発や保守性を考えたCSSの組み立て方。
📝 従来との違い：CSSは「書くもの」から「設計・運用するもの」へ進化。
第7章：制作の現場で役立つテクニック
- VS Codeなどのエディタ活用術。
- リセットCSSの使い方、ベンダープレフィックスの扱い。
- 実務で役立つ小技やtips集。
📝 従来との違い：現場のリアルな知見が詰まっていて、作業効率の向上にも直結。
こんな人におすすめ
- これからWeb制作を始める初心者
- 昔HTML/CSSを触っていたけど、最近の流れがわからない人
- 実務で効率よくCSS設計したいフロントエンド志望者
感想
- 実務で使えるモダンな記述スタイルに慣れたい人には最適。
- 初心者にも読みやすく、でも中級者が読んでも学びがある。
- 「昔覚えたCSSで止まってるけど、最近の書き方にアップデートしたい」という人に特に刺さる内容。
この本は単なる「HTMLとCSSの教科書」ではなく、「現場の実務でどう書かれているか」を重視している点が最大の魅力です。昔学んだ書き方から脱却し、「今の標準」にアップデートしたい人にはおすすめです。
