《モダンHTML＆CSS 現場の新標準ガイド#2》HTMLの視覚的なレンダリングを制御するCSSとアクセシビリティの関係性

制作現場で欠かせない一冊として支持されている書籍『HTML5＆CSS3デザイン 現場の新標準ガイド【第2版】』（発行：マイナビ出版）が、HTMLとCSSの最新仕様に対応し、アクセシビリティなどの新たなトピックを盛り込んだ大幅改訂版として、2025年3月25日に発売されました。ページ数も100ページ以上増加し、さらに充実した内容となっています。今回は同書より、Webの制作者・開発者が適用するCSS （作成者スタイルシート）などについて、一部を抜粋・再編集してお届けします。

HTMLとCSS

CSS（Cascading Style Sheets）はHTMLの要素ごとにスタイルを設定し、視覚的なレイアウトやデザインを制御します。ARIAがHTMLの非視覚的なレンダリングを制御するものと言えるのに対し、CSSはHTMLの視覚的なレンダリングを制御するものと言えます。

CSSに関する仕様も、WCAGやARIAと同じようにW3Cがリリースしています。

・CSS current work & how to participate
https://www.w3.org/Style/CSS/current-work.en.html

要素にデフォルトで適用されるCSSの設定（UAスタイルシート）

CSSの設定がないと、HTMLでマークアップしたコンテンツは以下のように一連のテキストとして表示されてしまいます。

このような表示になるのを防ぎ、HTMLのセマンティクスに合わせて基本的な見た目を整えるため、各要素にはブラウザがデフォルトでCSSの設定を適用します。このCSSが「UAスタイルシート（ユーザーエージェントスタイルシート/User-agent stylesheets）」です。

たとえば、見出しを示す＜h1＞は大きい太字で表示され、見出し＜h1＞と段落＜p＞の間にはマージンで適度なスペースが確保されます。

▽主要ブラウザのUAスタイルシート
・Chromium（Chrome / Edge）
https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
・Firefox
https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
・WebKit（Safari）
https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Webの制作者・開発者が適用するCSS（作成者スタイルシート）

UAスタイルシートの設定は直接編集できませんが、Webの制作者・開発者が用意するCSS で上書きできます。このCSSが作成者スタイルシート（Author stylesheets）です。

たとえば、作成者スタイルシートで見出し＜h1＞のフォントサイズを変更し、背景を黄緑色にすると下のようになります。

作成者スタイルシートでUAスタイルシートの設定を上書きできる仕組みが「カスケード」です。複数のCSSの設定が同一のHTML要素に適用された場合に、どの設定が優先されるかを決定する仕組みです。CSS（カスケーディングスタイルシート）の名前の由来でもあります。

なお、UAスタイルシートが各要素にどのようなスタイルを適用しているのかを把握しておかないと、上書きできず、予期せぬ見た目になることがあります。そのため、本書では要素ごとに関連するUAスタイルシートの設定も確認していきます。

CSSとアクセシビリティ

WCAGの達成基準には、右のようにWebの視覚的表示に関するものもあります。CSSでデザインやレイアウトを設定する際には、こうした基準も考慮しておくことが求められます。

本書ではCSSの機能ごとに、関連する達成基準についても確認していきます。

ブラウザによる表示の流れ – レンダリングとパフォーマンス

ブラウザはHTML、CSS、JavaScriptを取得して解析し、次のように一連のレンダリングの処理を行ってコンテンツを表示します。これらの処理はコンテンツが表示されるまでの時間に大きく影響することから「クリティカルレンダリングパス」とも呼ばれます。Webの表示速度を向上させ、パフォーマンスを高くするためには各処理を最適化することが求められます。

また、ブラウザはアクセシビリティツリーも構築し、スクリーンリーダーなどの支援ツールが必要とする情報も提供します。

DOM（Document Object Model）

ブラウザはHTMLを解析し、HTMLの構成要素をオブジェクトとして扱うDOM（ドキュメントオブジェクトモデル）を構築します。JavaScriptはこれを通じてHTMLの構造や内容を動的に操作できるようになります。

DOMはツリー構造の「DOMツリー」として表現されます。個々のオブジェクトを要素ノードやテキストノードと呼び、ドキュメントノードを頂点としたツリーになります。

CSSOM（CSS Object Model）

HTMLと並行してブラウザはすべてのCSSを解析し、CSSOM（CSSオブジェクト・モデル）を構築します。このとき、適用されたCSSのセレクタに基づいてツリーが生成され、カスケードの処理で得られたスタイルの設定が保持されます。

レンダーツリー

DOMツリーとCSSOMツリーができあがったら、ブラウザはこれらを合成してレンダーツリーを構築します。画面に表示する可視ノードのみを扱うツリーで、＜head＞のようにdisplay: noneで非表示に設定されたノードとその子孫ノードは含まれません。

CSSに関してはツリー構造に合わせて処理が行われ、要素ノードごとにすべてのプロパティの計算値が算出されます。

レイアウトとボックスツリー

レンダーツリーができあがったら、要素ノードとテキストノードの位置とサイズを決定する「レイアウト」の処理が行われます。

各ノードはボックスに変換され、入れ子になったボックスツリーを構成します。その上で、ボックスツリーの最上位（この場合はhtml）から順に処理されていきます。個々のボックスがどのように振る舞い、位置とサイズが決まっていくかは、displayプロパティで指定したレイアウトモデルによって変わります。

ペイント（描画）

レンダリングの最後にはペイントの処理が行われ、個々のノードが画面に描画されます。ブラウザがGPU上のレイヤーに分けて描画したものがある場合、合成して表示されます。たとえば、＜video＞や＜canvas＞、3Dトランスフォーム、透明度を変えるアニメーションなどはレイヤーを分けて処理されます。

AOMとアクセシビリティツリー

アクセシビリティツリーはDOMを元に構築されます。ここに含まれるのはARIAのrole（ロール/役割）やname（アクセシブル名）などの支援ツールが必要とする情報です。aria-*属性で明示していなくても、要素ごとにデフォルトで設定された暗黙のARIAセマンティクスの情報が使用されます。

alt属性を空にした装飾画像＜img＞や、display: noneで非表示にした要素などは反映されません。

AOM（アクセシビリティ・オブジェクトモデル）はアクセシビリティツリーの構成要素をオブジェクトとして扱い、プログラムから操作できるようにしたものです。

JavaScript

JavaScriptはブラウザ上で動作するプログラミング言語です。ユーザーのインタラクションに応じてDOM、CSSOM、AOMを変更するなど、さまざまな操作を行うことができます。ただし、同期的なJavaScriptはDOMを構築するHTMLの解析を停止させ、レンダリング処理を遅らせる一因となります。また、DOMの変更はレイアウトの再計算（リフロー）や再描画の処理を発生させ、パフォーマンスに影響を与えます。

パフォーマンスの最適化につながるHTML/CSSの機能

HTMLとCSSにはパフォーマンスの最適化につながる、右のような機能が用意されています。ただし、使い方によっては逆にパフォーマンスを低下させることもあるため注意が必要です。これら以外にも、画像のレイアウトシフトを防止する、レスポンシブイメージを利用するといった対応も大切です。