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

Web制作・Webアプリ開発現場に欠かせない「HTML&CSSリファレンス」の決定版。仕様に基づいて「こう書けば、こういう処理を経て、こういう結果になる」 というロジックを詳解。アクセシビリティの視点も取り入れ、高機能化・多機能化している膨大なHTML&CSSの知識をギュッとまとめた一冊です。
表紙
2025年03月25日 マイナビ出版
B5変型 496ページ / 978-4839986933

はじめに

進化した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ロールの情報を掲載しています。

ページサンプル:「セクションとランドマーク」に分類した要素(header、footer、mainなど)

CSS

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

ページサンプル:「フローレイアウト」に関する解説と分類したプロパティ

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

Webアクセシビリティ対応で求められる、WCAGの達成基準を満たすことにつながる設定については注釈マークをつけて記しています要素やプロパティの使用例はコードを色分けして掲載しています。UAスタイルシートやパフォーマンス改善に関する注釈はマークをつけて記しています

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

もくじ

  • 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