material-design-3-components

Material Design 3 コンポーネント

概要

このスキルでは、Material Design 3（M3）のすべてのコンポーネントを網羅した包括的なリファレンスを提供します。Material You の基礎から M3 Expressive の機能強化まで、仕様全体を取り上げます。各コンポーネントは、カラー、シェイプ、タイポグラフィ、モーション、レイアウトを扱う M3 のトークンベースのデザインシステムに準拠しています。

キーワード: Material Design 3、M3、コンポーネント、ボタン、カード、ダイアログ、ナビゲーション、FAB、チップ、テキストフィールド、タブ、メニュー、スナックバー、ボトムシート、Material You、M3 Expressive

コンポーネントのカテゴリ

M3 のコンポーネントは、次の 6 つのカテゴリに分類されます。

1. アクション — ボタン、FAB、アイコンボタン、セグメントボタン、分割ボタン、ボタングループ
2. コンテインメント — カード、カルーセル、区切り線、リスト、ボトムシート、サイドシート
3. コミュニケーション — バッジ、ダイアログ、進捗インジケーター、スナックバー、ツールチップ
4. ナビゲーション — アプリバー、ナビゲーションバー、ナビゲーションドロワー、ナビゲーションレール、タブ、検索
5. 選択 — チェックボックス、チップ、日付／時刻ピッカー、メニュー、ラジオボタン、スライダー、スイッチ
6. テキスト入力 — テキストフィールド（塗りつぶし、アウトライン）

---

アクションコンポーネント

ボタン

M3 では、強調度が段階的に高まる 5 種類のボタンを定義しています。

種類	強調度	用途
テキストボタン	最低	任意のアクション、重要度の低いアクション
アウトラインボタン	低	重要だが、主要ではないアクション
トーナルボタン	中	アウトラインボタンよりも強調が必要なアクション
塗りつぶしボタン	高	主要なアクション、メインの CTA
エレベーテッドボタン	中	視覚的に複雑な背景上でのアクション

ボタンの共通仕様:

• 高さ: 40dp
• 最小幅: 48dp
• パディング: 水平方向 24dp、垂直方向 10dp
• シェイプ: 全周角丸（ピル型）
• タイポグラフィ: Label Large
• アイコンとの間隔: 8dp

/* Filled Button */
.md3-button-filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  border: none;
  cursor: pointer;
}

/* Outlined Button */
.md3-button-outlined {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
}

/* Tonal Button */
.md3-button-tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
  border: none;
}

/* Text Button */
.md3-button-text {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 12px;
  min-height: 40px;
}

/* Elevated Button */
.md3-button-elevated {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
  box-shadow: var(--md-sys-elevation-1);
}

アイコンボタン

標準、塗りつぶし、トーナル、アウトラインの 4 種類があります。

• サイズ: タッチ領域は 48dp、表示サイズは 40dp
• アイコンサイズ: 24dp

.md3-icon-button {
  width: 48px;
  height: 48px;
  border-radius: var(--md-sys-shape-corner-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
}

.md3-icon-button-filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

フローティングアクションボタン（FAB）

コンテンツの上に浮かぶ、主要なアクションボタンです。

サイズ	寸法	角の半径	アイコンサイズ
中（小を置き換え）	40×40dp	12dp	24dp
標準	56×56dp	20dp	24dp
大	96×96dp	32dp	36dp
拡張	高さ 56dp、幅は可変	20dp	24dp + テキスト

/* Standard FAB */
.md3-fab {
  width: 56px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-large);
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: none;
  box-shadow: var(--md-sys-elevation-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Large FAB */
.md3-fab-large {
  width: 96px;
  height: 96px;
  border-radius: var(--md-sys-shape-corner-extra-large);
}

/* Extended FAB */
.md3-fab-extended {
  height: 56px;
  width: auto;
  border-radius: var(--md-sys-shape-corner-large);
  padding: 0 20px;
  gap: 12px;
}

FAB メニュー（M3 Expressive）

FAB をタップすると、状況に応じた追加のアクションが表示されます。

.md3-fab-menu {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-2);
  align-items: flex-end;
}

.md3-fab-menu-item {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-2);
}

分割ボタン（M3 Expressive）

主要なアクションと、二次的なドロップダウンを組み合わせます。

.md3-split-button {
  display: inline-flex;
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
}

.md3-split-button-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: 10px 16px;
  border: none;
}

.md3-split-button-secondary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: 10px 12px;
  border: none;
  border-left: 1px solid var(--md-sys-color-on-primary);
  opacity: 0.3;
}

ボタングループ（M3 Expressive）

関連するボタンを、連結または標準のグループにまとめます。

標準ボタングループ: 単一選択または複数選択用のコンテナ内にボタンを配置します。

連結ボタングループ: 非推奨となったセグメントボタンに代わる、視覚的に統合されたボタンです。

.md3-button-group {
  display: inline-flex;
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline);
}

.md3-button-group-item {
  padding: 10px 24px;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  border: none;
  border-right: 1px solid var(--md-sys-color-outline);
}

.md3-button-group-item:last-child {
  border-right: none;
}

.md3-button-group-item[aria-pressed="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

セグメントボタン（レガシー — M3 Expressive ではボタングループに置き換え）

代わりにボタングループを使用してください。セグメントボタンは M3 Expressive では非推奨です。

---

コンテインメントコンポーネント

カード

コンテンツをまとめるための 3 種類のカードです。

種類	背景	枠線	エレベーション
塗りつぶし	surface-container-highest	なし	レベル 0
エレベーテッド	surface-container-low	なし	レベル 1
アウトライン	surface	1px outline-variant	レベル 0

/* Elevated Card */
.md3-card-elevated {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-1);
  padding: var(--md-sys-spacing-4);
}

/* Filled Card */
.md3-card-filled {
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-spacing-4);
}

/* Outlined Card */
.md3-card-outlined {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-spacing-4);
}

カルーセル

コンテンツを閲覧するための、横方向にスクロールできるコンテナです。

.md3-carousel {
  display: flex;
  gap: var(--md-sys-spacing-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--md-sys-spacing-4);
}

.md3-carousel-item {
  scroll-snap-align: start;
  flex-shrink: 0;
  border-radius: var(--md-sys-shape-corner-extra-large);
  overflow: hidden;
}

ボトムシート

画面下部から表示する補足コンテンツです。

.md3-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-extra-extra-large)
                 var(--md-sys-shape-corner-extra-extra-large) 0 0;
  padding: var(--md-sys-spacing-6);
  box-shadow: var(--md-sys-elevation-4);
}

.md3-bottom-sheet-handle {
  width: 32px;
  height: 4px;
  background: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-full);
  margin: 0 auto var(--md-sys-spacing-4);
  opacity: 0.4;
}

サイドシート

補足コンテンツを表示するために、画面の側面からスライドして表示します。

.md3-side-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-extra-large) 0 0 var(--md-sys-shape-corner-extra-large);
  padding: var(--md-sys-spacing-6);
  box-shadow: var(--md-sys-elevation-4);
}

区切り線

セクション内のコンテンツを区切ります。

.md3-divider {
  height: 1px;
  background: var(--md-sys-color-outline-variant);
  border: none;
}

/* Inset divider */
.md3-divider-inset {
  margin-left: var(--md-sys-spacing-4);
}

リスト

テキストまたは画像を連続して縦に並べた項目です。

.md3-list-item {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-4);
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  min-height: 56px;
}

.md3-list-item-headline {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
}

.md3-list-item-supporting {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}

---

コミュニケーションコンポーネント

バッジ

アイコンやアバターに表示する、小さなステータスインジケーターです。

/* Small badge (dot) */
.md3-badge-small {
  width: 6px;
  height: 6px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-error);
}

/* Large badge (with count) */
.md3-badge-large {
  min-width: 16px;
  height: 16px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-small-weight);
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

ダイアログ

ユーザーに判断や情報の入力を求めます。

.md3-dialog {
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-extra-large);
  padding: var(--md-sys-spacing-6);
  min-width: 280px;
  max-width: 560px;
  box-shadow: var(--md-sys-elevation-3);
}

.md3-dialog-title {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  color: var(--md-sys-color-on-surface);
  margin-bottom: var(--md-sys-spacing-4);
}

.md3-dialog-content {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--md-sys-spacing-6);
}

.md3-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--md-sys-spacing-2);
}

/* Scrim behind dialog */
.md3-dialog-scrim {
  position: fixed;
  inset: 0;
  background: var(--md-sys-color-scrim);
  opacity: 0.32;
}

進捗インジケーター

線形または円形のインジケーターで、処理の状況を示します。

/* Linear Progress */
.md3-progress-linear {
  width: 100%;
  height: 4px;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
}

.md3-progress-linear-indicator {
  height: 100%;
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  transition: width 200ms var(--md-sys-motion-easing-standard);
}

/* Circular Progress */
.md3-progress-circular {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--md-sys-color-surface-container-highest);
  border-top-color: var(--md-sys-color-primary);
  animation: md3-spin 1.4s linear infinite;
}

@keyframes md3-spin {
  to { transform: rotate(360deg); }
}

スナックバー

アプリの処理に関する短いメッセージを表示します。

.md3-snackbar {
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: var(--md-sys-spacing-4);
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
  box-shadow: var(--md-sys-elevation-3);
  max-width: 560px;
}

.md3-snackbar-action {
  color: var(--md-sys-color-inverse-primary);
  font-weight: var(--md-sys-typescale-label-large-weight);
}

ツールチップ

ホバーまたは長押し時に表示する説明テキスト：

/* Plain tooltip */
.md3-tooltip {
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 4px 8px;
  font-size: var(--md-sys-typescale-body-small-size);
  max-width: 200px;
}

/* Rich tooltip */
.md3-tooltip-rich {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-spacing-4);
  box-shadow: var(--md-sys-elevation-2);
  max-width: 320px;
}

---

ナビゲーションコンポーネント

トップアプリバー

画面上部にナビゲーションとアクションを表示します：

種類	高さ	説明
中央揃え	64dp	タイトルを中央に配置
小	64dp	タイトルを左揃え
中	112dp	ナビゲーションアイコンの下にタイトルを配置
大	152dp	タイトルを目立つように表示

.md3-top-app-bar {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 var(--md-sys-spacing-4);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  gap: var(--md-sys-spacing-2);
}

.md3-top-app-bar-title {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  flex: 1;
}

/* Scrolled state */
.md3-top-app-bar-scrolled {
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-2);
}

ボトムアプリバー（レガシー — M3 Expressive のドック付きツールバーに置き換え）

ツールバーに移行していないアプリ向け：

.md3-bottom-app-bar {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 var(--md-sys-spacing-4);
  background: var(--md-sys-color-surface-container);
  gap: var(--md-sys-spacing-2);
}

ツールバー（M3 Expressive）

ボトムアプリバーを、より柔軟なオプションに置き換えます：

ドック付きツールバー：グローバルアクション用の全幅ツールバーです。 フローティングツールバー：コンテキストに応じたアクション用に、コンテンツの上に表示されます（横向きまたは縦向き）。

/* Docked Toolbar */
.md3-toolbar-docked {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 var(--md-sys-spacing-4);
  background: var(--md-sys-color-surface-container);
  gap: var(--md-sys-spacing-2);
}

/* Floating Toolbar (horizontal) */
.md3-toolbar-floating {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 var(--md-sys-spacing-3);
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-2);
  gap: var(--md-sys-spacing-1);
  backdrop-filter: blur(12px);
}

/* Floating Toolbar (vertical) */
.md3-toolbar-floating-vertical {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  padding: var(--md-sys-spacing-3) 0;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-2);
  gap: var(--md-sys-spacing-1);
}

/* Vibrant Toolbar (high emphasis) */
.md3-toolbar-vibrant {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

ナビゲーションバー（ボトムナビゲーション）

モバイル向けの主要なナビゲーションで、画面下部に表示されます：

.md3-navigation-bar {
  display: flex;
  height: 80px;
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-2);
}

.md3-navigation-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--md-sys-color-on-surface-variant);
  min-width: 48px;
}

.md3-navigation-bar-item[aria-selected="true"] {
  color: var(--md-sys-color-on-surface);
}

/* Active indicator */
.md3-navigation-bar-indicator {
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 4px 20px;
}

ナビゲーションレール

中サイズの画面向けの縦型ナビゲーションです：

.md3-navigation-rail {
  display: flex;
  flex-direction: column;
  width: 80px;
  background: var(--md-sys-color-surface);
  padding: var(--md-sys-spacing-3) 0;
  align-items: center;
  gap: var(--md-sys-spacing-3);
}

ナビゲーションドロワー

大画面向けのサイドパネル型ナビゲーションです：

.md3-navigation-drawer {
  width: 360px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0;
  padding: var(--md-sys-spacing-3);
}

.md3-navigation-drawer-item {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-full);
  gap: var(--md-sys-spacing-3);
}

.md3-navigation-drawer-item[aria-selected="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

タブ

グループ化されたコンテンツセクションを切り替えます：

.md3-tabs {
  display: flex;
  border-bottom: 1px solid var(--md-sys-color-surface-variant);
}

.md3-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-family: var(--md-sys-typescale-title-small-font);
  font-size: var(--md-sys-typescale-title-small-size);
  color: var(--md-sys-color-on-surface-variant);
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.md3-tab[aria-selected="true"] {
  color: var(--md-sys-color-primary);
}

/* Active indicator */
.md3-tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--md-sys-color-primary);
  border-radius: 3px 3px 0 0;
}

検索

コンテンツの検索やフィルタリングに使用する入力欄です：

.md3-search-bar {
  display: flex;
  align-items: center;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  padding: 0 var(--md-sys-spacing-4);
  gap: var(--md-sys-spacing-4);
}

.md3-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
  outline: none;
}

.md3-search-bar input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

---

選択コンポーネント

チェックボックス

複数選択の切り替えに使用します：

• サイズ：表示サイズは18dp、タッチターゲットは48dp
• 枠線：2dp、未選択時はアウトラインカラー
• 塗りつぶし：選択時はプライマリカラー
• チェックマーク：on-primary

ラジオボタン

選択肢から1つを選択します：

• サイズ：表示サイズは20dp、タッチターゲットは48dp
• 枠線：2dp、未選択時はアウトライン
• 塗りつぶし：選択時はプライマリカラー
• 内側の円：10dp

スイッチ

設定のオン／オフを切り替えます：

• トラック：52×32dp
• つまみ：未選択時は16dp、選択時は24dp
• 選択時：プライマリカラーのトラック、on-primary のつまみアイコン
• 未選択時：surface-container-highest のトラック、アウトラインのつまみ

.md3-switch {
  width: 52px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  border: 2px solid var(--md-sys-color-outline);
  position: relative;
  cursor: pointer;
  transition: background 200ms var(--md-sys-motion-easing-standard);
}

.md3-switch[aria-checked="true"] {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.md3-switch-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--md-sys-color-outline);
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  transition: all 200ms var(--md-sys-motion-easing-standard);
}

.md3-switch[aria-checked="true"] .md3-switch-thumb {
  width: 24px;
  height: 24px;
  background: var(--md-sys-color-on-primary);
  left: calc(100% - 28px);
}

チップ

フィルタリング、入力、アクション用のコンパクトな要素です：

種類	用途	選択可能
アシスト	アクションを提案	いいえ
フィルター	コンテンツをフィルタリング	はい
入力	ユーザーが入力したデータ	削除可能
サジェスチョン	動的な候補	いいえ

.md3-chip {
  height: 32px;
  border-radius: var(--md-sys-shape-corner-small);
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  border: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
}

.md3-chip[aria-selected="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

スライダー

範囲または値を選択します：

• トラックの高さ：4dp
• つまみ：20dp
• アクティブトラック：プライマリカラー
• 非アクティブトラック：surface-container-highest

日付ピッカーと時刻ピッカー

日付や時刻を選択するためのダイアログまたは入力欄です。適切なシェイプとカラートークンを使用した M3 のダイアログパターンに従います。

メニュー

ドロップダウンメニューまたはコンテキストメニューです：

.md3-menu {
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-extra-small);
  box-shadow: var(--md-sys-elevation-2);
  padding: var(--md-sys-spacing-2) 0;
  min-width: 112px;
  max-width: 280px;
}

.md3-menu-item {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--md-sys-spacing-3);
  gap: var(--md-sys-spacing-3);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  cursor: pointer;
}

---

テキスト入力コンポーネント

テキストフィールド

塗りつぶしとアウトラインの2種類があります。

塗りつぶしテキストフィールド：

.md3-text-field-filled {
  display: flex;
  flex-direction: column;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
  padding: 8px 16px 8px;
  position: relative;
}

.md3-text-field-filled input {
  border: none;
  background: transparent;
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
  outline: none;
  padding: 4px 0;
}

.md3-text-field-filled::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--md-sys-color-on-surface-variant);
}

.md3-text-field-filled:focus-within::after {
  height: 2px;
  background: var(--md-sys-color-primary);
}

アウトラインテキストフィールド：

.md3-text-field-outlined {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 8px 16px;
}

.md3-text-field-outlined:focus-within {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
}

.md3-text-field-outlined input {
  border: none;
  background: transparent;
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
  outline: none;
}

ラベルと補足テキスト：

.md3-text-field-label {
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}

.md3-text-field-supporting {
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  padding: 4px 16px 0;
}

.md3-text-field-error .md3-text-field-supporting {
  color: var(--md-sys-color-error);
}

---

コンポーネントのインタラクション状態

すべての M3 コンポーネントは、一貫したインタラクション状態のパターンに従います：

状態	視覚効果
有効	デフォルトの外観
ホバー	8% のステートレイヤーオーバーレイ
フォーカス	12% のステートレイヤーオーバーレイ + フォーカスインジケーター
押下	12% のステートレイヤーオーバーレイ
ドラッグ	16% のステートレイヤーオーバーレイ
無効	コンテンツの不透明度38%、背景の不透明度12%

フレームワーク固有のコンポーネントの使用方法

セットアップ、テーマ設定、使用方法など、フレームワーク固有のコンポーネント例については、専用のライブラリスキルを参照してください：

• React / MUI / Next.js：m3-web-react
• Angular Material：m3-web-angular
• Vue / Vuetify 3：m3-web-vue
• Svelte / SMUI：m3-web-svelte
• Web Components (@material/web)：m3-web-webcomponents
• Tailwind CSS：m3-web-tailwind
• Ink (React CLI)：m3-web-ink
• Vanilla CSS：m3-web-vanilla
• Flutter：m3-web-flutter
• Android / Jetpack Compose：m3-web-android

コンポーネントのアクセシビリティガイドライン

1. タッチターゲット：すべてのインタラクティブなコンポーネントで、最小サイズを48×48dpにします
2. フォーカスインジケーター：視認できるアウトライン（2px solid primary、オフセット2px）
3. 色のコントラスト：テキストは4.5:1、インタラクティブな要素は3:1にします
4. ARIA属性：適切なロール、ラベル、状態を使用します
5. キーボードナビゲーション：すべてのコンポーネントをキーボードで完全に操作できるようにします
6. スクリーンリーダーのサポート：セマンティックHTMLとARIAアナウンスを使用します

コンポーネント実装チェックリスト

M3コンポーネントを実装する際は、次の点を確認してください：

• コンポーネントで適切なM3カラー トークンを使用している（ハードコードされた色は使用しない）
• シェイプが、そのコンポーネントの種類に対応するM3シェイプスケールに沿っている
• タイポグラフィで正しいタイプスケールのロールを使用している
• すべてのインタラクション状態（ホバー、フォーカス、押下、無効）が実装されている
• タッチターゲットが最小サイズの48×48dpを満たしている
• フォーカスインジケーターが視認でき、十分なコントラストがある
• ライトテーマとダークテーマの両方でコンポーネントが動作する
• 無効状態で正しい不透明度の値を使用している（コンテンツは38%、背景は12%）
• モーションのトランジションにスプリングベースのイージングを使用している
• ARIA属性が正しく適用されている
• コンポーネントをキーボードで完全に操作できる
• 適切な場面でM3 Expressiveの追加機能（FABメニュー、分割ボタン、ボタングループ、ツールバー）を使用している
• ライブラリ固有のベストプラクティスに従っている（ライブラリ固有のスキル：m3-web-react、m3-web-angularなどを参照）

リソース

• component-tokens.md — このスキルのディレクトリに含まれる、@material/webコンポーネントのCSSカスタムプロパティプレフィックス一覧を素早く確認できるリファレンス。
• examples/component-anatomy.svg — M3コンポーネントの構造を示すビジュアルリファレンスSVG。ボタンのバリエーション、カードのバリエーション、FABのサイズ、トークンとの対応を示したインタラクティブな状態レイヤーを示します。
• M3コンポーネントの仕様：https://m3.material.io/components
• Web向けM3：https://m3.material.io/develop/web
• @material/web：https://github.com/material-components/material-web
• Angular Material：https://github.com/angular/components
• Material Design Tokens：https://github.com/material-foundation/material-tokens