「フロントエンド」というものに携わって15年以上になる。歴だけ見れば立派なベテランだ。しかし、実務をする上での作法はそれなりに知っていても、HTML/CSSの歴史・成り立ちといった基本的な部分や理論は案外知らなかった。それゆえ、なかなか中級以上にステップアップできないでいる。
HTML、とりわけCSSの進化というのは目覚ましい。数年前より良い作法や新しい技術が出てきたりと、情報を追うだけでも大変である。Webで断片的な情報を得るのもよいが、まとまった知識として学ぶのは書籍がよいだろう。
そこで、HTMLとCSSを体系的に学べ、リファレンスとしても活用している書籍を取り上げてみた。
HTML解体新書
HTMLもCSSも、理解するためには仕様書（英語）を読むのが一番だ。しかし、言葉の壁があったり膨大な文書を読む労力が必要だったりで並みの人間にとってはかなりの労力である。そこを補助してくれるのが本書である。副題にもある通り、HTMLの「仕様から紐解く本格入門」となっている。
初版は2022年4月（執筆時は2021年10月）。比較的新しい要素である<detail>や<summary>、<dialog>の説明も入っている。
ただ、出版以降に追加されたり変更になった要素もある。例えば、<hgroup>の使用に関しては、アウトラインアルゴリズムに対応していないという理由で<div>に書き換え可能という解説がされている。このような場合は仕様書の補足が必要だろう。
モダンHTML&CSS 現場の新標準ガイド
こちらはHTMLとCSSに両方について解説している。その割合は（ページ数で）およそ2:5である。視覚的な面を担うCSSの方がどうしても分量が多くなるのだろう。
初版は2025年3月と新しい。HTMLの新要素・新属性に関しては「HTML解体新書」の補完にもなる。
CSSは、現段階では一部ブラウザのみのサポートに留まっている仕様についても解説されている。現段階で将来的にどの程度普及するかは未知数だが、カスケードレイヤー@layerやコンテナクエリ@containerなど徐々に標準になりつつある仕様については、ユーザー環境を見極めながら取り入れていきたい。
「モダンHTML&CSS」ではあるが、HTML・CSSの歴史にも触れられている。従来の要素やプロパティも収録されているので、基礎的内容の復習としても活用できる。
作って学ぶ HTML+CSSグリッドレイアウト
「モダンHTML&CSS 現場の新標準ガイド」と同じエビスコムによる著書。初版は2024年2月。
「作って学ぶ」とある通り、サンプルファイルによるグリッドレイアウト実践では実際のサイトを作成しながら具体的なグリッドの使い方を学ぶことができる。しかし、「実践」によって学ぶだけでなく「概念」を学ぶこともできる。
本書では、グリッド以前のフローレイアウトやフレックスボックスレイアウトについても説明されており、グリッドレイアウト誕生に至るCSSの歴史・背景について知ることができる。
Chapter4.3から4.5の「CSSにおけるサイズの基本」では、ブロック要素やインライン要素のサイズの決まり方について説明されている。グリッドレイアウトをマスターするには遠回りとも思える知識である。しかし、実際の業務でコンテンツの高さ・幅が上手く確保できないことはよくある。そういう時に本章が活きてくるだろう。グリッドレイアウトに焦点を当てつつも、CSSの知見を深めることができる。
おまけ
技術書・参考書のような厚めの本を開くのに便利なクリップ。
クリップの重量は約100g、最大開口4.5cm。ページが少ない側に挟んで重しにする。透明なので、ページ隅の文字もちゃんと見える。
平置きにした本の栞代わりにもなる（但し、縦置きや長時間の放置はやめた方がよいと思う）。
