HTMLとCSSで勉強すべきことがしっかりまとめられている、アクセシビリティやパフォーマンスを考慮した実装を学べる良書 -モダンHTML&CSS 現場の新標準ガイド
Post on:2025年4月4日
sponsors
※本ページは、アフィリエイト広告を利用しています。
最新のHTMLとCSSをしっかり学びたい人にお勧めの解説書を紹介します。
HTMLとCSSの最新の仕様に基づき、必要な知識を身につけ、アクセシビリティやパフォーマンスに考慮した実践的なテクニックをしっかり学べます。Web制作者が持っておいて間違いのない一冊です。
HTMLとCSSは機能が増えて自由度が高くなった分、複雑化しています。またアクセシビリティについての需要もかなり高まっています。

著者はHTMLやCSSをはじめ、JavaScriptの解説書などWeb制作系の解説書で、はずれ無しのエビスコム様。ていねいで詳しい解説は分かりやすく、実践的なサンプルもたくさんあるので、かなり役立つと思います。
本書は最新のHTMLとCSSの仕様に基づいて、アクセシビリティやパフォーマンスにも注目したセマンティックな実装をていねいに詳しく解説した解説書です。
本書は先週発売されたばかり、Kindle版も同時発売されています。
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書の特徴は、HTMLとCSSの解説がかなり詳しいこと。HTMLはWHATWG HTML Living Standardに対応、CSSもW3Cの標準仕様に基づいています。さらに、WCAGのアクセシビリティについてもかなり詳しく解説されています。

本書は7章構成で、第1章は「HTMLとアクセシビリティとCSS」HTMLはセマンティックなマークアップの需要が高まっており、CSSでは視覚的なレイアウトやデザインを制御します。そして、最近ではさまざまなデバイスがリリースされ、障がいのある人も含めて、あらゆる人がさまざまな環境で情報やサービスを利用できるためにアクセシビリティへの対応が重要視されています。

第2章は、HTMLについて。解説はテキストだけでなく、コードと画像も数多く掲載されており、非常に分かりやすいと思います。

最近の実装テクニックについても詳しく解説されています。たとえば、ファビコンはブラウザが通常のUIでWebmanifestアイコンの使用をやめたため、実装方法が変わりました。「あれは、どうすればいいの?」という時に、本書が必ず役立ちます。

第3章から最後の第7章までは、CSSです。第3章ではまずは、CSSの基本となる知識とテクニックを学びます。

基本とは言っても最近のCSSは進化が早く、新機能もブラウザへのサポートが進んでいます。CSSのセレクタを入れ子にできるネスト、スタイルのルールを分割できるカスケードレイヤー@layer
、スタイルをスコープ内にだけ適用する@scope
、高機能なカスタムプロパティ@property
など、これから必須になってくる知識とテクニックを学べます。
- CSSのネストがついにブラウザで使用できるようになった! 基礎知識、便利な使い方を詳しく解説
- CSSの新機能カスケードレイヤー「@layer」CSSをレイヤー化して扱え、今までの実装方法が大きく変わる!
- CSS @scopeの基礎知識と使い方を解説、セレクタの適用範囲を設定できる
- CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました

また、CSSの単位もかなり増えました。vw
, vh
, vmin
, vmax
と言ったビューポートに基づく単位をはじめ、cqw
, cqh
, cqmin
, cqmax
と言ったコンテナクエリに基づく単位も登場しました。
- ビューポートに基づく相対単位(vw, vh, lvh, svh, dvh, vb, viなど)の便利な使い方を解説
- コンテナクエリに基づく相対単位(cqw, cqh, cqi, cqb, cqmin, cqmaxなど)の便利な使い方を解説

第4章はCSSによるレイアウト、実務で役立つ実装がかなり充実しています。

たとえば、CSS GridとFlexboxでどう実装するのかなど、具体的な事例も元にていねいに解説されています。

第5章はCSSによるタイポグラフィ、第6章は画像や色などコンテンツと視覚効果。テキスト周りのスタイルもかなり進化していますね、最近ではテキストの垂直方向の余白を調整するプロパティも導入されました。

最後の第7章は、CSSによるインタラクションとアニメーション。一昔前はJavaScriptがないと実装できなかったことが、現在ではCSSのみで実装できるようになっています。

Scroll-driven Animationsは、スクロールをトリガーにしたさまざまなアニメーションを実装できます。スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーターなど、数行のCSSで実装できます。
モダンHTML&CSS 現場の新標準ガイドの目次

モダンHTML&CSS 現場の新標準ガイドの目次

モダンHTML&CSS 現場の新標準ガイドの目次

モダンHTML&CSS 現場の新標準ガイドの目次

モダンHTML&CSS 現場の新標準ガイドの目次
HTMLもCSSも最近は特に進化が早くなりました。Webサイトやスマホアプリの制作で役立つ最新の仕様と使い方だけでなく、アクセシビリティやパフォーマンスを考慮した実装をしっかり学べる一冊です。
献本の御礼
最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors