モダンHTML&CSS　現場の新標準ガイド

はじめに
本書について
もくじ

はじめに

進化したHTML&CSSをアクセシビリティとロジックから理解する

今のWeb制作・Webアプリ開発の現場では、必要とされる技能が増えています。従来からのレスポンシブデザインやパフォーマンス改善はもちろん、UI・UXの向上、より高度な動的表現、アクセシビリティ対応など、その範囲は多岐にわたります。

それに合わせてHTML＆CSSの仕様も大幅に進化しています。主要ブラウザが足並みを揃え、仕様に沿って実装する土壌ができたことも大きく、その進化は留まるところを知りません。個別にバラバラだった機能は整理され、組み合わせて使用したときの挙動や、相互関係なども細かく定義・実装されるようになりました。アクセシビリティ面の拡充でHTMLの役割はより明確になり、各種機能はJavaScriptなしでも実現できるようになってきています。

ただし、機能が増えて自由度が高くなった分だけHTML&CSSは複雑化しており、『こう書けば、こうなる』という現象を場合分けで覚えていくのは、もはや現実的ではありません。

進化したHTML＆CSSを習得し、使いこなしていくための一番の近道は「アクセシビリティ」と「ロジック」の理解です。

そのため、本書ではアクセシビリティの視点も取り入れ、最新のHTML&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
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
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
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

モダンHTML&CSS　現場の新標準ガイド

はじめに

本書について

HTML

CSS

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

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

もくじ