# W3C デザインシステム ## W3C デザインシステム インターフェースプレビュー セッションは個別でもまとめてでも開けます。JavaScriptを無効にしても、コンテンツは読みやすいままです。 ## W3C デザインシステム デザインリファレンス 2026年10月3日にダウンロードしたW3C公式ドキュメントと公開CDNスナップショット。実際のCSSとネイティブスクリプトを検証済み。 ### 可変タイポグラフィ | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | Web font / fallback | Noto Sans / Trebuchet MS, Geneva, sans-serif | ネイティブのCSSはfonts-loadedの後にNoto Sansを適用します。デモではシステムフォントへのフォールバックを維持しています。 | | Fluid range | 320–1120px viewport | 範囲外ではclampの値が上限または下限に達するため、文字サイズが急に切り替わることはありません。 | | --w3c-text-0 | clamp(.9375rem, .9125rem + .125vw, 1rem) | 本文：ルートの標準サイズで15pxから16px。 | | --w3c-text-5 | clamp(1.6894rem, 1.6444rem + .2253vw, 1.802rem) | H1のサイズ：およそ27～28.8px。 | | --w3c-text-7 | clamp(2.1382rem, 2.0811rem + .2851vw, 2.2807rem) | 最大のtext-xlサイズ。標準のH1ではありません。 | | Body line height | 1.5 | 可変フォントサイズを基準とします。 | | Collapsible H3 | --w3c-text-1 / line-height 1.5 | コンポーネントによる上書き：約16.9～18px。 | ### セマンティックカラー | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | Text | #111111 | ほぼ黒。通常の本文テキスト。 | | Link | #005a9c | W3Cブルー。ホバー時や訪問済みの色とは異なります。 | | Hover / visited | #002a56 / #75336c | 状態の違いを保ちます。 | | Focus | #f9dc4a | 境界が明確な黄色のフォーカス表示。 | | Input border | #545454 | 装飾用の区切り線とは異なるコントラストの役割。 | | Success / error | #046704 / #a82615 | ランダムなアクセントではなく、状態を示す色。 | | Warning | #c28605 | 警告メモ用の境界線。 | ### レイアウトと間隔 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | l-center | max-inline-size:70rem; padding-inline:5vw | ネイティブの幅広コンテナ。プレビューではアプリケーションの幅を55remに制限しています。 | | Reading measure | 41.25rem | 折りたたみ可能な本文内の最大コンテンツ幅。 | | Stack default | 1em between direct siblings | 公式のSass mixinでは幅を明示的に指定できます。8px固定のスケールではありません。 | | Collapsible inset | 1.5625rem | ルートの標準サイズで25px。 | | Collapsible separation / radius | 1rem / .375rem | 16pxの間隔と6pxの角丸。 | | Collapsible shadow | -.0625rem .0625rem .25rem rgba(55,70,95,.12) | 控えめな背景の分離。ネイティブのCSS。 | ### プログレッシブエンハンスメントの要件 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | Outer hook | data-component="collapsibles" | スクリプトが各コンポーネントのルートを特定します。 | | Heading hook | data-heading="collapsibles" | スクリプトが各見出しに実際のボタンを挿入します。 | | Collapsed state | aria-expanded=false; next sibling aria-hidden=true | 高度なCSSでは、本文を非表示にするためにhtml.jsマーカーが必要です。 | | data-anchor="no" | Suppress automatic heading anchors for this subtree | 折りたたみ可能な見出しに別のリンクを挿入しないでください。 | | No JavaScript | All content remains visible | 拡張機能を適用していない初期マークアップでは、コンテンツを非表示にしないでください。 | ## W3C デザインシステム 完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## W3C デザインシステム プログレッシブエンハンスメント ### 操作コントロールより先にコンテンツを配置 > W3Cでは、基本スタイルと高度なコンポーネントを分けています。折りたたみ部分は、通常の見出しとその後に続くコンテンツとして表示されます。スクリプトがなくても、すべてのセッションの概要を読むことができます。main.jsは、ドキュメントに記載されたデータ属性を検出した後にのみボタンを挿入し、状態を変更します。コントロールが初期化されない可能性のある、最初から非表示のアコーディオンを配信する方式とは、実装モデルが異なります。 プレビューでは、公式CDNのcore.css、advanced.css、main.jsを使用し、日付入りのローカルスナップショットとして保存しています。html.jsマーカーによって高度なセレクターが有効になります。このマーカーを省略すると、本文は見た目上開いたままなのにARIA属性だけが変化します。プレビューでは、aria-expandedだけでなく、実際に表示されているかどうかも明示的にテストします。 関連する仕様を確認する ## W3C デザインシステム可変フォントサイズとフォント読み込み ### 控えめな文字サイズのスケール 本文サイズは、ビューポートの下限で15px、1120pxで16pxになるように拡大します。名前付きカスタムプロパティを9つ使ってスケールを定義しています。H1には最大サイズの--w3c-text-7ではなく、--w3c-text-5を使用します。36pxのディスプレイタイトルをすべてのドキュメントにそのまま適用しても、標準の見出し階層には合いません。 想定されているWebフォントはNoto Sansです。フォント読み込み処理によってルート要素にfonts-loadedが追加されるまでは、Trebuchet MSとGenevaを含むネイティブのフォールバックスタックが使われます。この独立した例ではフォールバックを有効にしたまま、その選択を明記しています。可変サイズと行の高さはネイティブのままであり、プレビューはNoto Sansの字形メトリクスを正確に再現するものではありません。 関連する仕様を確認する ## W3C デザインシステム読みやすい幅と間隔 ### レイアウトの基本パターンを組み合わせる l-centerパターンでは、インライン方向の最大幅を70rem、左右のパディングを5vwに設定します。このプレビューでは、3つの短い学習概要をコンパクトに保つため、アプリケーション固有の上限として55remを追加しています。この上限はW3Cの新しいトークンではありません。各折りたたみ本文のテキスト幅は、ネイティブの41.25remによって長い行を抑えます。 ドキュメントに記載されたStack mixinは、縦方向に並べ、先頭以外の直接の兄弟要素にmargin-topを適用します。デフォルトの幅は1emで、呼び出し側から別の単位を指定できます。これをグローバルな番号付きスペーシングスケールに置き換えるのではなく、ブロック間の関係として扱いましょう。折りたたみ部分には別途、25pxの内側余白、16pxの間隔、6pxの角丸があることを確認しています。 関連する仕様を確認する ## W3C デザインシステム意味に基づく色の役割 ### リンク履歴とフォーカスを見える状態に保つ このシステムでは、通常の青いリンク、濃い青のホバー状態、紫の訪問済み状態を区別しています。長いドキュメントに再訪したり、参考資料間を移動したりするサイトでは、これらの役割が重要です。リンク用のエイリアスを無関係な装飾に使い回すと、将来のテーマ変更が関係のない界面表面にも影響してしまいます。 フォーカスには、境界線で明確に示した黄色を使います。設定ページでは、通常の境界線と、より濃い入力欄用の境界線を分けています。また、情報、成功、警告、エラーの色もそれぞれ異なる意味で定義しています。役割を維持し、実際の背景との組み合わせを検証してください。色見本だけでは、コンポーネントの状態に十分なコントラストがあるとは確認できません。 関連する仕様を確認する ## W3C デザインシステム折りたたみのマークアップとスクリプト ### 見出し、ボタン、隣接する本文 各直接の子要素には、見出しと、それに続く本文が含まれます。スクリプトはnextElementSiblingを使って本文を特定するため、その間に無関係なメタデータを挿入すると関連付けが壊れます。カテゴリラベルは、ドキュメントに記載されたグループ一覧のパターンと同様に、見出し内のspanに配置してください。スクリプトは見出しの内容をボタンで囲みます。 標準のコードは、ボタンのaria-expandedと本文のaria-hiddenを切り替えます。高度なスタイルシートでは、折りたたまれた本文を非表示にします。data-anchor="no"を指定すると、別機能の見出しアンカーによってこのコンポーネントに不要なリンクが追加されるのを防げます。main.jsは1回だけ初期化してください。機能強化を繰り返すと、見出し内にボタンが重ねて追加されます。 ```

Inclusive forms Practical workshop

Connect each field to its label, hint and recovery message.

  • Preserve entered values
  • Test keyboard recovery
``` コードリファレンス 関連する仕様を確認する ## W3C デザインシステム一括操作とキーボード操作 ### 既存のボタンを使って拡張する 「すべて展開」と「すべて折りたたむ」は、この例のために用意したコントロールです。それぞれの標準ボタンの状態を確認し、変更が必要なときだけクリックします。これにより、標準の状態遷移と視覚的なルールを一貫させられます。一方のARIA属性だけを直接編集して、もう一方を古い状態のままにすることはありません。 標準ボタンはEnterキーとSpaceキーで操作できます。プレビューでは、ボタンを個別に操作し、すべて展開し、すべて折りたたんだ後、キーボードで再び1つを開く操作を確認します。一括操作の内容は、丁寧なステータスメッセージで伝えます。元のコンポーネントでは、複数の概要を同時に開いたままにできます。常に1つだけを開くアコーディオンではありません。 1. 「Inclusive forms」を開いて、実用的な一覧を確認してください。 2. すべて展開し、3つのセッションの説明を比べてください。 3. すべて折りたたんだ後、見出しの1つでEnterキーを押し、そのセクションだけを再び開いてください。 関連する仕様を確認する ## W3C デザインシステムアセットと組み込み ### 存在しないパッケージのインストール手順は追加しない 公式の導入ページでは、core、advanced、printの各スタイルに加え、main.jsと任意の機能スクリプトを安定したCDNエントリポイントとして公開しています。セットアップブロックでは、実際に提供されているパスを使用します。このHTML実装にReactプロバイダーやnpmパッケージは不要です。ローカルデモではダウンロードしたファイルを同梱しているため、外部接続がなくてもサンプルを利用できます。 本番環境で、同じ旧バージョンのブラウザー群にも対応する場合は、高度なスタイルに関するドキュメント記載のCSS機能判定を維持してください。簡潔なセットアップ例では、最新のブラウザー向けに高度なスタイルを直接読み込みます。サイト全体では印刷用スタイルシートも含めてください。単独のプレビューでは、画面上のインタラクティブなサンプルに重点を置いています。 - core.css：基本のタイポグラフィ、レイアウト、未拡張のコンポーネント。 - advanced.css：JavaScriptによって機能強化された状態のルール。 - main.js：データフックを検出し、対応するコンポーネントを1回だけ機能強化します。 関連する仕様を確認する ## W3C デザインシステム対象範囲と検証 ### デザインシステムであり、適合認証ではない W3Cのスタイルを取り入れたページが、自動的にWCAGに適合するわけではありません。実際のコンテンツ、フォーカス順序、ズーム時の動作、エラーからの回復状態をテストしてください。この例では、3種類のビューポート幅と、スクリプトを使わない場合の基本動作を確認しています。認証を受けたことや、支援技術を網羅的に監査したことを示すものではありません。 ラーニングサークルの名称と説明は、オリジナルの架空コンテンツです。公式のワーキンググループ、開催日程、登録機会を示すものではありません。この例では、W3Cのロゴや会員資格を示す表現を意図的に避けています。公開スタイルアセットを再利用する場合も、組織からの支持を受けているかのような印象を与えないようにしてください。 関連する仕様を確認する ## W3C デザインシステムのコンポーネント例 ### 段階的に機能強化されたセッション概要 見出しと、それに続く本文が必須の構造です。main.jsでトグルを追加します。 ```

Inclusive forms Practical workshop

Connect each field to its label, hint and recovery message.

  • Preserve entered values
  • Test keyboard recovery
``` コードリファレンス ### ネイティブ機能を備えた学習リスト全体 ルートの機能強化マーカー、公式アセット、ネイティブの折りたたみ機能、一括操作コントロールを含みます。 ``` Web learning circles

INDEPENDENT LEARNING PROGRAMME

Web learning circles

Explore three small-group sessions for people building a more usable web.

Choose a session to read its outline.

Inclusive forms Practical workshop

Trace a form from its label to its hint, error message and recovery action. Compare the experience with a keyboard and with enlarged text.

  • Associate labels and help text
  • Keep entered values after an error
  • Move focus only when it helps recovery

Resilient reading Discussion circle

Examine document structure before adding interaction. The content in this example remains visible when JavaScript is unavailable.

Bring a short article and identify its heading hierarchy, reading measure and meaningful links.

International text Peer review

Review language declarations, long translated labels and mixed-direction text. A font choice alone cannot guarantee a usable multilingual interface.

All sessions are fictional examples, with no membership or registration service.

``` コードリファレンス ## W3C デザインシステム エージェントのセットアップ ### 実装の出発点 実際の公式CDNパスを使用しています。ローカルプレビューにはこれらのアセットが含まれており、システムフォントへのフォールバックも保持されます。Sourcesにある動作サンプル一式のZIPには、プレビューに必要な依存関係とドキュメント全体も含まれています。展開して、そのディレクトリで python3 -m http.server 8080 を実行し、http://localhost:8080/w3c.html を開いてください。モジュールを使用するサンプルを file:// 経由で開かないでください。 ``` ``` ### あなたのプロジェクト向けプロンプト ``` W3Cのcoreおよびadvancedスタイルを、main.jsとhtml.jsの機能強化マーカーとともに使用してください。実際のdataフックを使い、意味的に適切な見出しと、その直後に置く折りたたみ可能なコンテンツを構成してください。JavaScriptがなくても読みやすい基本状態、ネイティブの流動的な文字サイズ、意味に即したリンク色とフォーカス色を維持してください。初期化を二重に行わず、スタイルだけを根拠にWCAGへの適合を推測しないでください。 ``` ## W3C デザインシステム 出典と適用範囲 公式の公開アセットを使用した独立したOpenDesignのサンプルです。W3Cとの提携やアクセシビリティ認証を示唆するものではありません。 - はじめに 公式CDNアセットと読み込み手順。 - 折りたたみ可能なコンテナ ネイティブの構造、フック、段階的な機能。 - タイポグラフィ Noto Sansと流動的なスケール。 - 設定 色の役割とフォントの読み込み動作。 - 垂直方向の間隔 stackミックスインと明示的な寸法。 - 動作サンプル一式をダウンロード 完全なHTML、ローカルのCSS／JavaScript依存関係、付属ライセンス、正確な起動手順を含むZIPです。ビルド手順は不要です。 ## W3C デザインシステム 関連リソース ### Codex Codexの実際のSearchInputの構造、操作の優先順位、読書に適したトークンを使用してください。ローカルの記事インデックスを検索し、検索結果を確認してから、同じ読書位置に戻ります。 ### Agriculture デザインシステム AgDSの具体的なスペーシング、レスポンシブプロパティ、TaskListのステータスモデルを活用して、複数のステップからなる手続きを構築しましょう。前提条件がすべて完了するとレビューのステップが利用可能になる、準備フローを試せます。 ### Alberta デザインシステム AlbertaのネイティブWebコンポーネントと公開されているデザイントークンを使用して、アクセシブルな選択肢、算出される進捗、誠実なレビュー結果を備えた準備チェックリストを作成します。 - [実装リファレンス](https://design-system.w3.org/components/collapsible-containers.html) - [ソース](https://design-system.w3.org/styles/typography.html) - [ソース](https://design-system.w3.org/settings/) - [ソース](https://www.w3.org/assets/website-2021/styles/core.css) - [ソース](https://design-system.w3.org/components/collapsible-containers.html) - [関連する仕様を確認する](https://design-system.w3.org/) - [関連する仕様を確認する](https://design-system.w3.org/styles/typography.html) - [関連する仕様を確認する](https://design-system.w3.org/styles/vertical-spacing.html) - [関連する仕様を確認する](https://design-system.w3.org/settings/) - [コードリファレンス](https://design-system.w3.org/components/collapsible-containers.html) - [関連する仕様を確認する](https://design-system.w3.org/components/collapsible-containers.html) - [関連する仕様を確認する](https://design-system.w3.org/getting-started.html) - [はじめに 公式CDNアセットと読み込み手順。](https://design-system.w3.org/getting-started.html) - [折りたたみ可能なコンテナ ネイティブの構造、フック、段階的な機能。](https://design-system.w3.org/components/collapsible-containers.html) - [タイポグラフィ Noto Sansと流動的なスケール。](https://design-system.w3.org/styles/typography.html) - [設定 色の役割とフォントの読み込み動作。](https://design-system.w3.org/settings/) - [垂直方向の間隔 stackミックスインと明示的な寸法。](https://design-system.w3.org/styles/vertical-spacing.html)