HTML5 & CSS3 デザイン 現場の新標準ガイド【第 2 版】

フロントエンドエンジニアはじめ、Web 制作に関わっている人のための HTML5 / CSS3 ガイドブックです。
HTML と CSS の最新仕様を整理するとともに、現時点でどのポイントに留意して制作を進めていけばよいか、制作の現場で必要不可欠な情報をまとめました。
簡潔にして詳細な、制作現場に必携の 1 冊となっています。
Chapter 1 HTML
Chapter 2 Web の作成とメタデータ
Chapter 3 コンテンツのマークアップ
Chapter 4 CSS の適用
Chapter 5 ボックスのレイアウト
Chapter 6 フレキシブルボックスレイアウト
Chapter 7 グリッドレイアウト
Chapter 8 テーブル
Chapter 9 テキスト
Chapter 10 エンベディッド・コンテンツ
Chapter 11 フォーム
Chapter 12 特殊効果

『HTML5 & CSS3 デザイン 現場の新標準ガイド【第 2 版】』 (エビスコム 著、マイナビ出版、2020 年 10 月刊) は、フロントエンドエンジニアをはじめ Web 制作に関わる人に向けて、HTML と CSS の仕様を整理し、制作を進めるうえで留意する点をまとめたガイドブックです。国立国会図書館の書誌では、版表記は第 2 版、副題は「体系的に学ぶ HTML と CSS の仕様と実践」、シリーズは「Compass Web Development」です。刊行時の著者紹介によれば、エビスコムはさまざまなメディアの企画制作を手がけ、コンピューターとインターネットの分野では書籍、デジタル映像、CG、ソフトウェアの企画制作や WWW システムの構築を行っています。

全 12 章の構成、HTML から CSS の特殊効果まで

目次は Chapter 1「HTML」、Chapter 2「Web の作成とメタデータ」、Chapter 3「コンテンツのマークアップ」、Chapter 4「CSS の適用」、Chapter 5「ボックスのレイアウト」、Chapter 6「フレキシブルボックスレイアウト」、Chapter 7「グリッドレイアウト」、Chapter 8「テーブル」、Chapter 9「テキスト」、Chapter 10「エンベディッド・コンテンツ」、Chapter 11「フォーム」、Chapter 12「特殊効果」の全 12 章です。

要素の意味づけと、HTML5 という呼び名の背景

HTML は、文書のどの部分が見出しで、どこがナビゲーションや本文の記事に当たるのかを、要素で表すための言語です。見た目を整える役目は CSS に任せ、HTML では内容の意味を表す要素を選ぶという考え方は セマンティック HTML と呼ばれ、この書き方をすると支援技術や検索エンジンが文書の構造を読み取りやすくなります。書名の HTML5 は、header、nav、article、section といった構造の要素や、動画と音声を埋め込む video と audio の要素を含む世代の HTML を指す呼び名です。W3C の 2019 年 5 月 28 日の告知によれば、W3C と WHATWG は HTML と DOM の仕様を 1 つの版として共同で開発することで合意し、HTML の Living Standard は WHATWG が維持することになりました。本書の刊行はこの合意の翌年に当たります。

フレキシブルボックスとグリッド、2 つのレイアウト方式

CSS で段組みを組む方法は、かつては回り込みの float と位置指定を組み合わせる書き方が中心で、高さの揃わない列や回り込みの解除に手間がかかりました。Flexbox は、要素を横か縦の 1 方向に並べ、余白の配分と揃え方をまとめて指定するレイアウトの方式です。これに対して CSS Grid は、行と列の 2 方向の格子を先に定義し、その上に要素を配置する方式で、ページ全体の骨組みのように縦横の位置を同時に決めたい場面に向きます。本書は Chapter 6 と Chapter 7 をそれぞれの方式に充てています。

本書は、HTML の要素とメタデータ、コンテンツのマークアップから、CSS の適用、ボックスのレイアウト、フレキシブルボックスとグリッド、テーブル、テキスト、エンベディッド・コンテンツ、フォーム、特殊効果までを全 12 章に収めています。本書は 2020 年 10 月の刊行です。HTML と CSS の本の選び方は Web デザイン本ガイド にまとめています。