はじめに
進化したHTML&CSSをアクセシビリティとロジックから理解する
今のWeb制作・Webアプリ開発の現場では、必要とされる技能が増えています。 従来からのレスポンシブデザインやパフォーマンス改善はもちろん、UI・UXの向上、 より高度な動的表現、アクセシビリティ対応など、その範囲は多岐にわたります。
それに合わせてHTML&CSSの仕様も大幅に進化しています。主要ブラウザが足並みを揃え、仕様に沿って実装する土壌ができたことも大きく、その進化は留まるところを知りません。 個別にバラバラだった機能は整理され、組み合わせて使用したときの挙動や、相互関係なども細かく定義・実装されるようになりました。 アクセシビリティ面の拡充でHTMLの役割はより明確になり、各種機能はJavaScriptなしでも実現できるようになってきています。
ただし、機能が増えて自由度が高くなった分だけHTML&CSSは複雑化しており、 『こう書けば、こうなる』という現象を場合分けで覚えていくのは、もはや現実的ではありません。
進化したHTML&CSSを習得し、使いこなしていくための一番の近道は 「アクセシビリティ」と「ロジック」の理解です。
そのため、本書ではアクセシビリティの視点も取り入れ、最新のHTML&CSSの仕様に基づき、 『こう書けば、こういう処理を経て、こういう結果になる』ということを可能な限り凝縮してまとめました。
機能の発見・習得・再確認に加え、開発の効率化、ユーザー体験の向上などに、 理解の解像度を変える一冊として役立てていただければ幸いです。
本書について
HTML
HTML要素は、標準仕様であるWHATWG HTML Living Standardのコンテンツカテゴリーと、WAI-ARIAのARIAロールの分類に従って構成。 要素ごとにコンテンツカテゴリー(分類)、コンテンツモデル(内包できるもの)、暗黙のARIAロールの情報を掲載しています。

CSS
CSSのプロパティや各種機能は、標準仕様のモジュールの分類に従って構成。 プロパティごとに初期値、適用対象、継承の有無の情報を掲載しています。

アクセシビリティとコード


対応ブラウザとダウンロードデータ


もくじ
- Chapter 1 HTMLとアクセシビリティとCSS
- 1-1 HTMLの歴史
- 1-2 現在のHTMLの役割 ――セマンティックマークアップ
- 1-3 HTMLとWebアクセシビリティ対応
- 法的な面から見たWebアクセシビリティ対応の必要性
- Webアクセシビリティ対応の達成基準
- 達成基準を満たす(適合する)ために必要なこと
- 1-4 HTMLとARIA
- HTMLの要素にデフォルトで設定される 暗黙のARIAセマンティクス
- 悪いARIAがあるぐらいならARIAなしの方がよい
- 必要性がある場合はARIAセマンティクスを明示する
- 1-5 HTMLとCSS
- 要素にデフォルトで適用されるCSSの設定(UAスタイルシート)
- Webの制作者・開発者が適用するCSS(作成者スタイルシート)
- CSSとアクセシビリティ
- 1-6 ブラウザによる表示の流れ ―レンダリングとパフォーマンス
- DOM(Document Object Model)
- CSSOM(CSS Object Model)
- レンダーツリー
- レイアウトとボックスツリー
- ペイント(描画)
- AOMとアクセシビリティツリー
- JavaScript
- パフォーマンスの最適化につながるHTML/CSSの機能
- 1-7 HTMLのシンタックス(構文)
- 1-8 HTML要素の分類
- コンテンツモデルとコンテンツカテゴリー
- コンテンツカテゴリーによる分類
- ARIAロールによる分類
- CSSのディスプレイタイプによる分類
- Chapter 2 HTML要素
- 2-1 HTML要素のセマンティクス
- 2-2 セクションとランドマーク
- ヘッダー <header>
- フッター <footer>
- メインコンテンツ <main>
- フォーム <form>
- 検索 <search>
- ナビゲーション <nav>
- 補足・関連情報 <aside>
- 汎用的なセクション <section>
- 自己完結したコンテンツ <article>
- 見出し <h1>/<h2>/<h3>/<h4>/<h5>/<h6>
- 見出しとそれに関連するコンテンツ <hgroup>
- 2-3 ブロックレベルのセマンティクス
- 連絡先情報 <address>
- 引用文 <blockquote>
- 図表とキャプション <figure>/<figcaption>
- パラグラフレベルの区切り <hr>
- パラグラフ(段落) <p>
- 整形済みテキスト <pre>
- 特別なセマンティクスを持たないブロックレベルの要素 <div>
- 基本のテーブル <table>/<tr>/<th>/<td>
- 行列のグループを明示したキャプション付きのテーブル <caption>/<thead>/<tbody>/<tfoot>/<colgroup>/<col>
- 番号なしリスト(順序が重要でないリスト) <ul>/<li>
- 番号付きリスト(順序が重要なリスト) <ol>/<li>
- 番号なしリストの代替(コマンドリスト) <menu>/<li>
- 説明リスト <dl>/<dt>/<dd>
- モーダルダイアログ <dialog>
- 2-4 テキストレベルのセマンティクス
- コンピュータ・コード <code>
- 強調・強勢 <em>
- 重要 <strong>
- 下付き <sub>
- 上付き <sup>
- 定義した語句 <dfn>
- 日時 <time>
- 取り消した語句 <s>
- 削除したコンテンツ <del>
- 追加したコンテンツ <ins>
- 特別なセマンティクスを持たないインラインレベルの要素 <span>
- 注目してほしい語句 <b>
- 学名や慣用句などの語句 <i>
- 不明瞭な語句 <u>
- 引用 <q>
- 双方向アルゴリズムの分離 <bdi>
- 双方向アルゴリズムのオーバーライド <bdo>
- マシンリーダブルな情報 <data>
- コンピュータからの出力内容 <samp>
- 但し書き・注意 <small>
- 略語 <abbr>
- 作品のタイトル <cite>
- コンピュータへの入力内容 <kbd>
- ハイライト <mark>
- 変数 <var>
- ルビ <ruby>/<rt>
- ルビに未対応なブラウザ用の設定 <rp>
- 改行 <br>
- 自動改行(折り返し)を許可する箇所 <wbr>
- イメージマップ <map>
- イメージマップのエリアの構成 <area>
- フォームコントロールの値の候補リスト <datalist>
- 2-5 エンベディッド(埋め込みコンテンツ)
- 画像 <img>
- <img>用の複数の画像リソース <picture>/<source>
- 音声 <audio>
- 動画 <video>
- 音声・動画のテキストトラック <track>
- インラインフレーム <iframe>
- 外部リソースの埋め込み <embed>
- 外部リソースの埋め込み <object>
- Canvas <canvas>
- SVG <svg>
- MathML(数式) <math>
- 2-6 インタラクティブに関する要素
- 開閉式ウィジェット <details>/<summary>
- フォームコントロールのラベル <label>
- リンク <a>
- 2-7 フォームコントロール
- 入力フィールド/ボタン <input>
- ボタン <button>
- セレクトボックス(選択式メニュー)
- <select>/<option>/<optgroup>
- テキストエリア <textarea>
- プログレスバー <progress>
- 出力 <output>
- メーター <meter>
- フィールドセット <fieldset>/<legend>
- 2-8 フォームコントロールの属性
- 2-9 スクリプト
- スクリプト <script>
- スクリプトなしのコンテンツ <noscript>
- カスタム要素
- スロット <slot>
- テンプレート <template>
- 2-10 HTMLの基本構造とメタデータ
- HTMLの基本構造 <html>/<head>/<body>
- ページのタイトル <title>
- 内部スタイルシート <style>
- ベースURL <base>
- リソースへのリンク <link>
- メタデータ <meta>
- 2-11 グローバル属性
- Chapter 3 CSS
- 3-1 CSSの歴史と分類
- 3-2 CSSのシンタックス(構文)
- 3-3 セレクタの種類とシンタックス(構文)
- シンプルセレクタ(simple selector)
- 複合セレクタ(compound selector)
- 擬似要素セレクタ(pseudo-element selector)
- 複雑セレクタ(complex selector)
- 3-4 セレクタの詳細度(specificity)
- 詳細度の算出
- 詳細度の比較と勝利するセレクタの決定
- !important
- 3-5 ネスト記法(CSS Nesting)
- 3-6 セレクタリスト(selector list)
- 論理コンビネーション擬似クラス
- :is()/:not()/:where()/:has()
- 寛容・不寛容なセレクタリスト
- 3-7 カスケードレイヤー @layer
- カスケードレイヤーと!important
- カスケードレイヤー@layerのネスト
- 3-8 スコープ @scope
- スコープと詳細度と近接性
- スコープリミット
- :scope擬似クラスと&セレクタ
- スコープ@scopeのネスト
- <style>とスコープルートの省略
- 3-9 シャドウDOMによるスコープ (カプセル化)
- 異なるコンテキスト由来のCSSが当たるときのルール
- 外側からシャドウDOM内へCSSを適用する擬似要素
- シャドウDOMから外側へCSSを適用する擬似クラス・擬似要素
- 3-10 カスケード
- カスケードの処理の順番
- 3-11 プロパティの値を決定するプロセス
- 3-12 プロパティの値の継承
- 3-13 プロパティの値の種類と単位
- すべてのプロパティで使用できる値
- テキストデータ型(Textual Data Types)
- 数値データ型(Numeric Data Types)
- 色のデータ型(Color Data Type)
- 画像のデータ型(Image Data Type)
- 3-14 カスタムプロパティ(CSS変数) —*/@property
- 3-15 メディアクエリ @media
- メディア特性
- 3-16 コンテナクエリ @container
- クエリコンテナの種類 container-type
- クエリコンテナ名の指定 container-name
- クエリコンテナの名前と種類の指定 container
- サイズクエリ @container ()
- スタイルクエリ @container style()
- スクロールステートクエリ @container scroll-state()
- 3-17 アットルール
- 機能クエリ @supports
- CSSファイルの読み込み @import
- 印刷ページの設定 @page
- 3-18 擬似クラス
- 3-19 擬似要素
- 3-20 値のリセット
- すべてのプロパティ値のリセット all
- Chapter 4 レイアウト
- 4-1 CSSによるレイアウト ― レイアウトモデル
- ディスプレイタイプ(レイアウトモデルの指定) display
- 4-2 ボックスの基本構造 ― ボックスモデルと包含ブロック
- ボックスの横幅と高さ width/height
- 最小サイズ min-width/min-height
- 最大サイズ max-width/max-height
- サイズが示す対象 box-sizing
- 縦横比 aspect-ratio
- ズーム zoom
- マージン margin
- マージンの切り取り margin-trim
- パディング padding
- ボーダー border
- 角丸 border-radius
- 4-3 フローレイアウト
- ブロックコンテナの中身に合わせた高さ
- 行の高さ line-height
- インラインボックスの垂直方向の配置 vertical-align
- インラインボックスの上下スペースの切り取り text-box-trim
- 上下スペースを切り取るライン text-box-edge
- フロート float
- フロートの解除 clear
- 頭文字(ドロップキャップ) initial-letter
- 4-4 フローの方向
- 横書き・縦書き(ブロックフローの方向) writing-mode
- 縦書きの中の文字の向き text-orientation
- 縦中横 text-combine-upright
- 4-5 ルビレイアウト
- ルビの配置 ruby-position
- ルビの位置揃え ruby-align
- ルビのオーバーハング ruby-overhang
- 4-6 テーブルレイアウト
- テーブルの列の横幅の処理 table-layout
- ボーダーの間隔 border-spacing
- ボーダーの処理 border-collapse
- 空セルの表示 empty-cells
- キャプションの配置 caption-side
- 4-7 フレックスボックスレイアウト
- フレックスアイテムの横幅のコントロール flex
- フレックスアイテムが並ぶ方向 flex-direction
- フレックスアイテムの折り返し flex-wrap
- フレックスアイテムが並ぶ方向と折り返し flex-flow
- 4-8 CSSグリッドレイアウト
- グリッドの構成 ― トラックサイズ
- grid-template-columns/grid-template-rows
- グリッドの構成 ― エリア名 grid-template-areas
- グリッドの構成 ― トラックサイズとエリア名 grid-template
- グリッドアイテムの配置先 grid-column/grid-row/grid-area
- 暗黙的なグリッドのトラックサイズ grid-auto-columns/grid-auto-rows
- 自動配置の処理 grid-auto-flow
- 暗黙的・明示的なグリッドの構成 grid
- 4-9 ポジションレイアウト
- 位置指定の処理 position
- 基準からの位置(距離) top/right/bottom/left/inset
- 相対位置指定 relative
- 粘着位置指定 sticky
- 絶対位置指定 absolute
- 固定位置指定 fixed
- 重なり順 z-index
- 4-10 トップレイヤー
- オーバーレイ overlay
- 4-11 アンカーポジション
- アンカーの宣言 anchor-name
- ターゲットアンカー position-anchor
- アンカーまわりのエリアを使った位置指定 position-area
- anchor()関数を使った位置指定
- anchor-size()関数を使ったアンカーサイズの取得
- 条件に応じた表示・非表示の切り替え position-visibility
- フォールバックの配置オプション position-try-fallbacks
- 配置オプションの処理順 position-try-order
- フォールバックの設定 position-try
- 4-12 マルチカラムレイアウト
- 段の設定 column-width/column-count/columns
- 段の区切り線 column-rule
- 段をまたいだ表示 column-span
- コンテンツの配分 column-fill
- 4-13 ボックスの分割
- ボックスの分割 break-inside
- ボックスの前後での分割 break-before/break-after
- 行の孤立の防止 orphans/widows
- 分割されたボックスの装飾の描画 box-decoration-break
- 4-14 ボックスの配置(位置揃え)
- コンテンツボックス内の
- インライン方向(横方向)の配置 justify-content
- ブロック方向(縦方向)の配置 align-content
- 両方向の配置 place-content
- 包含ブロックにおける
- インライン方向(横方向)の配置 justify-self
- ブロック方向(縦方向)の配置 align-self
- 両方向の配置 place-self
- justify-selfのデフォルト設定 justify-items
- align-selfのデフォルト設定 align-items
- place-selfのデフォルト設定 place-items
- 4-15 ボックスの間隔/並び順/表示の有無
- ボックスの間隔(ガター) column-gap/row-gap/gap
- 並び順 order
- 表示の有無 visibility
- 4-16 レンダリングの最適化
- 封じ込め(containment) contain
- コンテンツの表示の有無 content-visibility
- size封じ込め時の中身に合わせた横幅と高さ contain-intrinsic-width/contain-intrinsic-height/contain-intrinsic-size
- 予想される変更の通知 will-change
- 4-1 CSSによるレイアウト ― レイアウトモデル
- Chapter 5 タイポグラフィ
- 5-1 フォントの基本設定
- フォントファミリー font-family
- フォントの太さ font-weight
- フォントの斜体のスタイル font-style
- フォントの幅 font-stretch
- フォントサイズ font-size
- フォントの基本的な設定をまとめて指定 font
- スタイルの合成の可否 font-synthesis
- フォントの見た目の大きさを揃える font-size-adjust
- 5-2 フォントの高度な制御
- オプティカルサイズのデータを使った表示
- font-optical-sizing
- バリエーション軸の設定 font-variation-settings
- OpenType機能の設定 font-feature-settings
- カーニング font-kerning
- 字形 font-variant
- 言語固有の字形 font-language-override
- 絵文字の表示スタイル font-variant-emoji
- カラーフォントのパレット font-palette
- フォントカラーパレットの定義 @font-palette-values
- 5-3 フォントの定義
- フォントファミリーの作成 @font-face
- 5-4 テキストの基本処理
- ホワイトスペースの変換・統合と自動改行の可否 white-space
- ホワイトスペースの変換・統合の可否 white-space-collapse
- 自動改行(折り返し)の可否 text-wrap-mode
- 自動改行(折り返し)のスタイル text-wrap-style
- 自動改行(折り返し)の可否とスタイル text-wrap
- タブのサイズ tab-size
- 5-5 自動改行(折り返し)の制御
- 自動改行を許可する箇所 word-break
- オーバーフローする文字列の自動改行 overflow-wrap
- 禁則処理 line-break
- ハイフネーションの可否 hyphens
- ハイフネーションを示す文字 hyphenate-character
- ハイフネーションの文字数制限 hyphenate-limit-chars
- 5-6 テキストの配置と間隔
- 行揃え text-align
- 最終行の行揃え text-align-last
- 両端揃えの調整方法 text-justify
- インデント(字下げ) text-indent
- 単語の間隔 word-spacing
- 文字の間隔 letter-spacing
- 句読点や括弧のスペース(アキ)調整 text-spacing-trim
- ぶら下がり hanging-punctuation
- 5-7 テキストの変換と省略表示
- テキストの形状変換 text-transform
- 横方向のオーバーフローの省略表示 text-overflow
- 表示行数の制限による省略表示 line-clamp
- モバイルデバイスでの自動拡大 text-size-adjust
- 5-8 テキストの装飾
- 下線・上線・取り消し線 text-decoration
- 線のスキップ text-decoration-skip-ink
- 下線を引く位置 text-underline-position
- 下線を引く位置の調整 text-underline-offset
- 圏点 text-emphasis
- 圏点の位置 text-emphasis-position
- テキストの影 text-shadow
- 文字の輪郭線 -webkit-text-stroke
- 輪郭と塗りの描画順 paint-order
- 5-1 フォントの基本設定
- Chapter 6 コンテンツと視覚効果
- 6-1 置換要素(画像など)の表示
- 外部リソースのフィット object-fit
- 外部リソースの配置 object-position
- 画像の向き image-orientation
- 画像の拡大縮小の処理 image-rendering
- 6-2 コンテンツの生成
- ボックスの生成 ::before/::after
- コンテンツの生成と置換 content
- 引用符 quotes
- カウンターの作成 counter-reset
- カウンター値の加算と出力 counter-increment/counter()
- ネストしたカウンターのカウンター値の使用 counters()
- カウンター値の変更 counter-set
- 6-3 リストアイテム
- テキストベースのマーカー list-style-type
- マーカー画像 list-style-image
- マーカーボックスの位置 list-style-position
- マーカー関連の設定をまとめて指定 list-style
- マーカーボックス ::marker
- 6-4 カウンタースタイル
- カウンタースタイルの作成 @counter-style
- 6-5 色
- 文字の色(前景色) color
- 不透明度 opacity
- 出力デバイスに合わせた色調整 print-color-adjust
- カラースキーム(ライトモード/ダークモード) color-scheme
- color-schemeに従う色指定 light-dark()
- 強制カラーモードの適用 forced-color-adjust
- 6-6 背景画像と背景色
- 背景画像 background-image
- 背景の描画範囲 background-clip
- 背景画像の配置の基準 background-origin
- 背景画像のサイズ background-size
- 背景画像の配置 background-position
- 背景画像の繰り返し background-repeat
- 背景画像の固定対象 background-attachment
- 背景色 background-color
- 背景の設定をまとめて指定 background
- 6-7 ボーダー画像
- ボーダー画像 border-image-source
- ボーダー画像の分割 border-image-slice
- ボーダー画像の繰り返し border-image-repeat
- ボーダー画像の太さ border-image-width
- ボーダー画像の描画エリアの拡張 border-image-outset
- ボーダー画像の設定をまとめて指定 border-image
- 6-8 マスクとシェイプ
- クリッピングパス clip-path
- マスク mask
- シェイプ shape-outside
- 6-9 合成とエフェクト
- ブレンド mix-blend-mode
- スタッキングコンテキスト(重ね合わせコンテキスト)の形成 isolation
- 背景画像のブレンド background-blend-mode
- フィルター filter
- バックドロップフィルター backdrop-filter
- ボックスの影 box-shadow
- 6-1 置換要素(画像など)の表示
- Chapter 7 インタラクションとアニメーション
- 7-1 UI(ユーザーインターフェース)
- アウトライン outline
- カーソルの形状 cursor
- ポインターイベントの対象 pointer-events
- タッチ画面の操作 touch-action
- UI要素の外観 appearance
- キャレットの色 caret-color
- UI要素のアクセントカラー accent-color
- 入力・選択内容に合わせた大きさ field-sizing
- ユーザーによるリサイズの可否 resize
- ユーザーによる選択の可否 user-select
- 7-2 オーバーフローとスクロール
- オーバーフローの表示 overflow
- オーバーフローをクリップする範囲の調整 overflow-clip-margin
- スクロールコンテナの最適な表示領域 scroll-padding
- 最適な表示領域にスナップする要素のスナップエリア scroll-margin
- スクロールスナップの動作設定 scroll-snap-type
- スナップ位置 scroll-snap-align
- スナップ位置の通過防止 scroll-snap-stop
- スムーススクロール scroll-behavior
- スクロールアンカリング overflow-anchor
- オーバースクロール時の動作 overscroll-behavior
- スクロールバーのスタイル scrollbar-color/scrollbar-width
- スクロールバーガター scrollbar-gutter
- 7-3 アニメーション
- トランジション transition
- トランジションの開始スタイル @starting-style
- サイズキーワードのアニメーションの可否 interpolate-size
- アニメーション animation
- キーフレーム @keyframes
- アニメーションの合成処理 animation-composition
- イージング関数 linear()/cubic-bezier()/steps()
- 7-4 スクロール駆動アニメーション
- 使用するタイムライン animation-timeline
- 名前付きのスクロール進行タイムライン scroll-timeline
- 無名のスクロール進行タイムライン scroll()
- 名前付きのビュー進行タイムライン view-timeline
- 無名のビュー進行タイムライン view()
- アニメーションを適用するタイムラインの範囲 animation-range
- 名前付きタイムラインのスコープ timeline-scope
- 7-5 ビュー遷移(View Transition)
- 同一ドキュメント内のビュー遷移 startViewTransition
- ドキュメント間でのビュー遷移 @view-transition
- View Transition APIを使ったビュー遷移のライフサイクル
- ビュー遷移名 view-transition-name
- ビュー遷移擬似要素 ::view-transition/::view-transition-group()/ ::view-transition-image-pair()/::view-transition-old()/::view-transition-new()
- ビュー遷移レイヤーの描画と ビュー遷移擬似要素のレイアウト+アニメーション
- 遷移名の自動指定
- 遷移タイプとアクティブビュー遷移擬似クラス :active-view-transition/ :active-view-transition-type()
- 遷移クラス view-transition-class
- 7-6 トランスフォーム
- トランスフォーム transform
- ローカル座標系の原点の位置 transform-origin
- トランスフォームの参照ボックス transform-box
- 裏面の表示 backface-visibility
- 子要素の透視投影 perspective
- 投影中心の位置 perspective-origin
- トランスフォームによる子要素の扱い transform-style
- 7-7 オフセットトランスフォーム (モーションパス)
- オフセットパス offset-path
- オフセットパスの始点 offset-position
- オフセットパス上の要素の位置 offset-distance
- オフセットパス上の要素のアンカーポイント offset-anchor
- オフセットパス上の要素の回転 offset-rotate
- オフセットトランスフォームの設定をまとめて指定 offset
- 7-1 UI(ユーザーインターフェース)