HTML Living StandardとモダンCSSに完全対応、読みやすい分かりやすい使いやすいと三拍子揃ったリファレンス本 -HTML&CSS全事典

HTMLの標準仕様は2021年にHTML5が廃止され、HTML Living Standardになりました。そしてCSSの仕様はW3Cによって策定されており、CSS2.1をはじめ、CSS3やCSS4の策定も進み、モダンCSSが現在の主流となっています。

HTML Living StandardとモダンCSSに完全対応したWeb制作者必携、読みやすい分かりやすい使いやすいと三拍子揃ったリファレンス本を紹介します。

IEのサポートが終了した現在、手元にあるリファレンス本が古いぞ、と思った人には特にお勧めします!

HTML&CSS全事典 改訂3版

本書は2015年に刊行されて以来、ベストセラーを続けている「HTML&CSS全事典」の最新版、改訂3版です。2022年8月現在の仕様にあわせて全面改定されており、HTMLとCSSのリファレンスだけでなく、新機能の解説、今時の記述方法、@ルールのさまざまな使い方、CSSの関数など、Web制作者として必要不可欠な知識とテクニックも解説されています。

書籍はB6判でちょうどよいサイズ感。592ページとかなり分厚い(3cmくらい)ですが、見開きを手放しでキープできます。

HTML&CSS全事典 改訂3版

できるポケット Web制作必携
HTML&CSS全事典 改訂3版
ISBN 978-4-295-01495-9
[Amazonでみる]
[楽天でみる]

著者: 加藤 善規、できるシリーズ編集部
出版社: インプレス
発売日: 2022/8/22

Kindle版も同時発売されています。

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

紙面のキャプチャ

リファレンス本で大切なのは、対応ブラウザです。本書は執筆時点(2022年8月)の各ブラウザでの最新バージョンに対応しています。

紙面のキャプチャ

本書は3部構成で、第1部は「Web制作の基礎知識」第2部と第3部はHTMLとCSSのリファレンスです。

HTMLの仕様は2019年にW3CからWHATWGに策定が変わり、HTML5やHTML5.2がなくなり、HTML Living Standardに一本化されました。各ブラウザのベンダーもW3Cの仕様は無視し、WHATWGの仕様に合わせてブラウザの開発が進められています。

紙面のキャプチャ

HTMLの基礎知識では、仕様、記述ルールをはじめ、HTMLの7つのカテゴリ(かなり重要)とコンテンツモデル、暗黙的・明示的アウトライン、セクショニングルート、アクセシビリティについてコンパクトにまとめられています。

紙面のキャプチャ

CSSの基礎知識では、仕様、基本書式、ボックスモデル、詳細度と継承などがまとめられています。

紙面のキャプチャ

実装のテクニック的なことも解説されています。ヘッダの高さ分だけずらしてスクロール、要素内における中央揃え、セレクタの簡略化など、知っておくと便利ですね。

紙面のキャプチャ

モダンCSSでは、@ルールも便利なものが増えました。今までは、@charsetで文字エンコーディングの指定、@importで外部CSSの読み込み、@mediaでメディアクエリでしたが、機能に対応しているブラウザだけにスタイルを適用できる@supports、詳細度とスタイルの順序を明示できる@layer、メディアクエリとは異なり親コンテナのサイズに基づいてスタイルを適用できる@containerなどがあります。

紙面のキャプチャ

CSSの関数も最近は使えるものが増えてきました!
関数というと、数値を数式で記述できるcalc()関数でしたが、min(), max(), clamp()の数値・数式を比較できる関数はフォントサイズやレイアウトに便利です。

HTMLとCSSの基礎知識は120ページほど、全590ページの残りはHTMLとCSSのリファレンスです。

紙面のキャプチャ

まずは、HTMLのリファレンス。各要素の機能、対応ブラウザ、基本書式、機能の詳細、要素の詳細、使用できる属性一覧、記述例がまとめられています。

紙面のキャプチャ

私は駆け出しの頃、毎日のようにリファレンスを端から端まで繰り返し読んでいました。一つひとつを理解するだけでなく、そこからいろいろ広げて考えていくと、何回読んでも楽しめます。

紙面のキャプチャ

CSSのリファレンスも同様の形式で、各プロパティの機能、対応ブラウザ、基本書式、機能の詳細、プロパティの初期値、継承の有無、適用できる要素、値の指定方法、記述例がまとめらています。
:has()とか先日リリースされたChrome 105でサポートされたばかりですね。

紙面のキャプチャ

CSSはどのようにそのプロパティを使用するのかまで考えるとワクワクします。たとえば、backgroud-originは背景画像を表示する基準位置を指定するものですが、こんな使い方もあります。
参考: この発想はすごい! モダンCSSで実装する、ボーダーをアニメーションさせるテクニック

紙面のキャプチャ

本書はモダンCSSに完全対応です。flexboxやCSS Gridをはじめ、アニメーション、トランスフォーム、フォント周りの新しいプロパティ、さまざまなセレクタまで含まれています。

HTML&CSS全事典 改訂3版の目次

HTML&CSS全事典 改訂3版の目次

HTML&CSS全事典 改訂3版の目次

上記だと文字がまったく読めないので、大きめのサイズですこしだけ。

HTML&CSS全事典 改訂3版の目次

HTML&CSS全事典 改訂3版の目次(HTMLの一部)

HTML&CSS全事典 改訂3版の目次

HTML&CSS全事典 改訂3版の目次(CSSの一部)

Web制作者ならリファレンス本は机の横に備えておきたい一冊です。さらに、Web制作に役立つ知識やテクニックもコンパクトにまとめられており、かなり役立つ一冊です。
HTMLとCSSを仕事にしている人には、必携です。

HTML&CSS全事典 改訂3版

できるポケット Web制作必携
HTML&CSS全事典 改訂3版
ISBN 978-4-295-01495-9
[Amazonでみる]
[楽天でみる]

著者: 加藤 善規、できるシリーズ編集部
出版社: インプレス
発売日: 2022/8/22

献本の御礼

最後に、献本いただいたインプレスの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

sponsors

top of page

©2022 coliss