# CMS デザインシステム
## CMS デザインシステム インターフェースプレビュー
設定を1つ編集し、下書きを保存または破棄して、データを送信せずにローカルで確認を完了できます。
## CMS デザインシステム デザインリファレンス
CMS Core 18.1.0で公開されたcore-theme.cssとコンポーネントCSSを使用します。一般的なドキュメントの説明と異なる場合は、バージョンが固定された成果物を優先してください。プレビューではArialをフォールバックとして使用し、アプリケーション固有の48rem幅のシェルを使用します。
### 色の役割
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --color-base | #262626 | バージョンが固定されたCoreのテキスト値です。概要の古い説明では#333とされています。 |
| --color-primary / primary-darker | #0071bc / #004f84 | 操作と、より暗い状態のインタラクションに関するリファレンス。 |
| --color-error / success | #e31c3d / #12890e | 状態を示す色には、必ずテキストによる説明を添えてください。 |
| --color-border | #d9d9d9 | --review__border-colorにも使用されています。 |
| --color-focus-dark / focus-light | #bd13b8 / #ffffff | テーマのフォーカスに関するリファレンス。 |
| --color-background / gray-lightest | #ffffff / #f2f2f2 | ページおよび明るい補助的な背景レイヤー。 |
### タイポグラフィ
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --font-family-body / heading | Open Sans, Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif | 18.1.0での正確なフォントファミリーの順序です。プレビューではArialに置き換えています。 |
| --font-size-sm / md / lg / xl / 2xl | .875 / 1 / 1.125 / 1.3125 / 1.5rem | ルートサイズが16pxの場合、14 / 16 / 18 / 21 / 24px。 |
| --font-size-3xl--mobile / 3xl | 1.875 / 2.25rem | 30 / 36px。 |
| --font-size-4xl--mobile / 4xl | 2.25 / 3rem | 36 / 48px。 |
| --font-size-5xl--mobile / --tablet / 5xl | 2.25 / 3 / 3.75rem | 36 / 48 / 60px。 |
| --font-line-height-base / heading | 1.5 / approximately 1.3 | テーマでは見出しの値を1.2999999523162842として保持しています。 |
### スペース、グリッド、形状
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --spacer-half / 1 / 2 / 3 | 4 / 8 / 16 / 24px | ユーティリティの数値修飾子は、8pxを単位として乗算されます。 |
| --spacer-4 / 5 / 6 / 7 | 32 / 40 / 48 / 56px | 大きめのレイアウトリズム。 |
| --grid-columns | 12 | グリッドの構成。 |
| --grid-gutter-width / grid-form-gutter-width | 32 / 16px | 現在のテーマでは、汎用のガターとフォームのガターを分けています。 |
| --site-max-width | 1104px | テーマのコンテナに関するリファレンス。 |
| --site-margins / site-margins-mobile | 3rem / 1.5rem | 標準のルートサイズで48 / 24px。 |
| --radius-default / medium / large | 3 / 4 / 8px | すべてに共通する単一の角丸値ではありません。 |
### レスポンシブの境界値
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| sm | 544px | モバイルファーストの小さい画面向け接頭辞。 |
| md | 768px | 中画面向け接頭辞。 |
| lg | 1024px | 大画面向け接頭辞。 |
| xl | 1280px | 特大画面向け接頭辞。 |
## CMS デザインシステム 完全ガイド
実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
## CMS デザインシステム Coreまたは子テーマを選択
### このパッケージは単一のブランドスキンではなく、複数のテーマで構成されています
> CMS Coreは共通のインターフェース基盤を提供し、Healthcare.gov、Medicare.gov、CMS.govにはそれぞれ個別の子テーマがあります。このリファレンスでは、@cmsgov/design-system 18.1.0とそのcore-theme.cssを使用します。子テーマで使用できる色、ロゴ、コンポーネントが、Coreのルールにも自動的に適用されるわけではありません。この例では、意図的に中立的な通知設定のワークフローを使用し、政府公式のバナーや識別マークは含めていません。
React、Preact、Web Component、手動のHTML/CSS統合などの方法があります。組み込みの動作が役立つ場合、ドキュメントではJavaScriptコンポーネントの使用を推奨しています。Web Componentのコレクションはその一部です。この単独の実装例では、実際のCoreのCSSと、編集・保存・キャンセル用にアプリケーション側で実装したJavaScriptを使用しています。CSSが検証、ルーティング、永続化を実装すると主張するものではありません。
関連する仕様を確認する
## CMS デザインシステム バージョンが固定されたテーマを確認
### 両方のスタイルシートを読み込む
index.cssでコンポーネントのルールを定義し、core-theme.cssでそれらの変数を提供します。テーマを読み込まないと、有効なクラス名でも値が未定義になることがあります。一方、Coreのタイポグラフィについて説明しながらMedicareのテーマを読み込むと、ページが表示されても誤解を招く結果になります。このセットアップでは、同じ18.1.0リリースの両方のアセットを読み込みます。
このガイドの数値には、バージョンが固定されたテーマを参照してください。たとえば、--color-baseは#262626ですが、概要の一般的なタイポグラフィの説明では依然として#333に言及しています。テーマの--grid-gutter-widthは--spacer-4（32px）、一方の--grid-form-gutter-widthは--spacer-2（16px）です。ガターを16pxとする一般的な説明を、すべてのグリッドバリエーションに当てはめないでください。実際のレイアウトを再現する際には、こうした違いが重要です。
関連する仕様を確認する
## CMS デザインシステム Coreのタイポグラフィと階層
### 1つのファミリーに、明確な役割別サイズ
Coreでは、見出しと本文にOpen Sansを使用します。18.1.0テーマのフォールバックチェーンには、Inter、Roboto、Helvetica Neue、Arial Nova、Nimbus Sans、Arial、sans-serifが続きます。この実装例では外部フォントファイルをリクエストしないよう、Arialを明示的に使用しています。そのため、公式のタイポグラフィを完全に使用した場合とは字幅などが異なります。
本文の基本サイズは1rem、行の高さは1.5です。サイズ変数には、ルートサイズが16pxの場合の14、16、18、21、24pxが含まれ、その後は大きなレスポンシブ向けの役割別サイズが続きます。3xlはモバイルで30px、それ以外では36px、4xlはモバイルで36px、それ以外では48px、5xlはモバイルで36px、タブレットで48px、最大サイズの役割では60pxです。これらはテーマで定められた値であり、すべてのページタイトルに最大サイズを使用してよいという意味ではありません。セマンティックな見出しと、適切なユーティリティまたはds-contentのマッピングを使用してください。
関連する仕様を確認する
## CMS デザインシステム スペーシングとレスポンシブレイアウト
### 8px刻みを基本に、半分の単位も用意
--spacer-1から--spacer-7は、8px刻みで8〜56pxに対応します。--spacer-halfは4px、--spacer-noneは0です。そのため、ds-u-margin--2のようなクラスは16pxを意味し、2remではありません。レビュー行では、標準のCSSにより、上下のパディングが16px、下罫線が2pxに設定されます。回答ごとに、外側のフォームでさらにパディング付きカードを追加する必要はありません。
Coreのサイト最大幅は1104pxで、サイトのマージンは3rem、バージョン管理されたテーマでのモバイルのマージンは1.5remです。このサンプルでは、短いレビュー項目を2行表示するため、より小さい48remの閲覧用コンテナを採用しています。これはアプリケーションの幅であり、新しいCMSトークンではありません。
関連する仕様を確認する
### CMSのブレークポイント接頭辞を使用する
ドキュメントに記載された境界値は、smが544px、mdが768px、lgが1024px、xlが1280pxです。レイアウトと一部のユーティリティファミリーでは、たとえばds-u-lg-display--noneのように、これらの接頭辞を使用できます。すべてのコンポーネントクラスにレスポンシブバリアントがあるとは限りません。モバイルでは、長いレビュー値が折り返され、編集コントロールが画面外に押し出されないようにします。必要に応じて、プレビューのアプリケーションアクション行も縦に並べます。
関連する仕様を確認する
## CMS デザインシステム レビュー行の構造とAPI
### ラベル、値、状況に応じた編集先
Reviewは、レビュー可能な項目を1つずつラップします。見出しの既定値はh3で、headingLevelで変更できます。見出しの後には、現在の値を表すchildrenが続きます。editHrefを指定すると編集先が設定され、指定しない場合は編集リンクが表示されません。editAriaLabelを使うと、繰り返し表示される「編集」リンクに、明確でアクセシブルな名前を付けられます。18.1.0の型宣言にはeditText、onEditClick、editContentも用意されており、カスタムのeditContentを指定すると既定のリンクが置き換わります。
Reactの例では、公開済みの型宣言で確認した実際のpropsを使用しています。パスは例示用のアプリケーションルートであり、利用するアプリ側で実装する必要があります。ネイティブのCSSを使った代替例では、ds-c-review、ds-c-review__content、ds-c-review__headingの構造を示しています。この場合も、ナビゲーションと更新はアプリケーション側で管理する必要があります。
```
import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';
export default function ContactReview() {
return ;
}
```
コードリファレンス
関連する仕様を確認する
## CMS デザインシステム 1項目の編集とセクション単位の編集
### 修正先へのわかりやすい導線を保つ
CMSのフォームレビューのパターンでは、回答1つを編集する場合と、セクション全体を編集する場合を区別します。通知形式や言語の設定など、互いに独立した回答には、項目単位の編集が適しています。世帯人数と各人の続柄のように相互に関連する回答は、アプリケーションが整合性をまとめて再計算できるよう、セクション単位での編集が必要になることがあります。公式ガイダンスでは、セクション単位の「編集」を見出しの横に配置する機能は、Reviewコンポーネント自体には実装されていないと明記されています。
プレビューでは、選択した行に対応するフィールドセットが開きます。「保存」するとその値だけが更新され、フォーカスは編集を開始した「編集」コントロールに戻ります。「キャンセル」すると下書きは破棄されます。編集画面を開いている間も、表示中の回答は変更されません。また、編集画面が開いたことを成功と誤って通知せず、実際に変更があった場合にその内容をステータスで伝えます。
- 入力時とレビュー時で、質問のラベルと順序を統一します。
- 表示上のリンクが「編集」の場合も、各行に状況に応じた編集名を付けます。
- 関連する回答をまとめて変更する必要がある場合は、1行用のコンポーネントの外側でセクション単位の編集を実装します。
関連する仕様を確認する
## CMS デザインシステム レビュー、完了、そして正確な表示
### レビューは送信完了通知ではありません
Reviewは、編集可能なフォーム回答の確認に適しており、検索結果の代わりにはなりません。実際の送信フローでは、レビュー後に最終送信アクションを設ける必要があります。完了通知を表示する前に、そのアクションが実際のバックエンド処理結果を反映していなければなりません。このサンプルでは「ローカルレビューを完了」を表示し、送信も保存も行われないことを明示しています。
Coreでは、プライマリブルー#0071bc、エラーレッド#e31c3d、成功グリーン#12890e、ボーダーグレー#d9d9d9を定義しています。保存済みの設定は、色だけでなくテキストでも示します。フォーカスにはテーマの明るい色と暗い色のフォーカス指定を使用します。「編集」を最小限のコントロールとしてスタイリングする場合も、フォーカスインジケーターを削除しないでください。最終ステータスにはキーボードで移動でき、レビュー行はそのまま残ります。
関連する仕様を確認する
## CMS デザインシステム 安全にインストールして拡張する
### 完全なCSSの導入手順と実際のコンポーネントの使用方法
バージョンを固定したパッケージをインストールし、パッケージのexportsを通じてcss/index.cssとcss/core-theme.cssを読み込みます。Reactを使う場合は、パッケージのルートからReviewをインポートします。Preact向けには/preactエントリーポイントがあります。この例ではSassのコンパイルは不要です。静的なCSSをコピーする場合は、フォントと画像の相対アセットパスを維持するか、このサンプルのようにサポート対象の代替手段を明示的に選択してください。
CMSの名前空間では、レイアウトにds-l-、コンポーネントにds-c-、ユーティリティにds-u-を使用します。アプリケーション独自のクラスを、ドキュメントに記載されていない公式コンポーネントのように扱わないでください。プレビューでは、閲覧用コンテナとインラインエディターは独自の構成で、レビュー行とボタンには配布されているスタイルを使用しています。
1. 対応するCoreコンポーネントとテーマのCSSを読み込み、2つのレビュー行をレンダリングします。
2. 各編集アクションを制御されたエディターに接続し、保存またはキャンセル後にフォーカスを戻します。
3. デスクトップとモバイルの幅で、値の変更、下書きの破棄、ローカルでの最終完了をテストします。
関連する仕様を確認する
## CMS デザインシステムのコンポーネント例
### 独立したレビュー行が2つある画面
実際の18.1.0 React propsを使用。リンク先の編集ルートは利用するアプリケーション側で実装します。
```
import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';
export default function ContactReview() {
return ;
}
```
コードリファレンス
- Reviewの見出しの既定値はh3です。
- editContentを指定すると既定の編集リンクが置き換わります。リンクを表示するにはeditHrefが必要です。
### ネイティブなCSSレビューの構造
アプリケーション側でインタラクションを管理する場合に便利な、手動でのHTML統合方法です。
```
Notice format
Large print
Edit
```
コードリファレンス
### 単体で動作するサンプル一式
レイアウト、操作要素、初期化処理を含むドキュメント全体です。リンク先のサンプルアーカイブを展開すると、このプレビューで使用する正確な相対パスのベンダーアセットが得られます。その後、HTTP経由で配信してください。
```
Notice preferences — CMS Core specimenCMS Core component example
Review your notice preferences
Check these fictional preferences before completing the local review. This example does not collect health information or contact details.
Notice preferences
Notice format
Standard print
Preferred language
English