タイトルテキスト
JSで動的に挿入して読み上げさせる場合のみrole="alert"/"status"を渡す見出しHeading display
見出しHeading1
見出しHeading2
見出しHeading3
見出しHeading4
見出しHeading5
見出しHeading6
Leadテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストリンクテキストテキスト
テキストテキストテキストリンク （新しいタブで開く） テキストテキスト
テキストテキストテキストリンク （PDF形式・新しいタブで開く） テキストテキスト
※ Annotationテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
※Annotation center
※Annotation end
テキストテキストテキストテキストテキストテキスト
タイトルテキスト
size="sm"
実行中状態。loading prop で aria-busy="true" と disabled
が付き、アイコンがスピナーに変わる。配置は loadingPosition prop で選べ、未指定なら左アイコンがあれば左・なければ右へ自動配置。JS
で切り替える場合は aria-busy と
disabled をセットで付け外しする。
テキストサイズsm に埋め込んだ例
テキストサイズ標準 に埋め込んだ例
テキストサイズlg に埋め込んだ例
Chip
Chip 削除あり
Chip リンク
Chip リンクで削除ありの場合divになる
Chip buttonで削除ありの場合divになる
Chip 任意のアイコン
Chip 削除あり 任意のアイコン
Chip outline
Chip sm
Chip sm outline
- リストdisc
- リストdisc
- リストcircle
- リストcircle
- リストdecimal
- リストdecimal
- リストparen
- リストparen
-
リスト入れ子
- 入れ子.disc
-
リスト入れ子
- 入れ子.decimal
-
リスト入れ子
- 入れ子.paren
- dt
- dd
- dt
- dd（改行あり）
dd - dt
-
- ddにリスト
- ddにリスト
- 常にrow
- dd
- 常にcolumn
- dd
| th | th | th |
|---|---|---|
| th | td | td |
| th | td | td |
| th | th | th |
|---|---|---|
| th | テキストテキストテキストテキストテキストテキストテキストテキスト | td |
| th | td | td |
TableScrollで包むと、収まらない幅で横スクロール領域になる（label必須。収まっている間はJSがrole/tabindexを外す）。breakoutを付けるとスクロール時に領域が画面端まで拡張される。
| 見出しテキスト | 見出しテキスト | 見出しテキスト | 見出しテキスト | 見出しテキスト | 見出しテキスト |
|---|---|---|---|---|---|
| th | テキストテキスト | テキストテキスト | テキストテキスト | テキストテキスト | テキストテキスト |
| th | テキストテキスト | テキストテキスト | テキストテキスト | テキストテキスト | テキストテキスト |
アコーディオン
アコーディオン コンテンツ
アコーディオン（デフォルトオープン）
アコーディオン コンテンツ
アコーディオン（排他的）
アコーディオン コンテンツ
アコーディオン（排他的）
アコーディオン コンテンツ
タブ1 コンテンツ
タブ2 コンテンツ
タブ3 コンテンツ
タブ4 コンテンツ
タブ5 コンテンツ
タブ6 コンテンツ
Popover API + CSS Anchor Positioning によるツールチップ テキストに埋め込んで使う例です。
上に表示されるツールチップの本文です。 下に表示されるツールチップの本文です。 左に表示されるツールチップの本文です。 右に表示されるツールチップの本文です。 timeoutで自動的に閉じるまでの秒数を指定できます（ホバー中は延長）。
Pagination: paginate()のPageオブジェクトをpageにそのまま渡す（lastPageが1なら何も描画しない）。siblingsで現在ページ前後の表示数、URL規則が標準（/path/ と /path/N/）以外ならurlで上書き。
Stack
Grid
Box
Box
border
bg="none" border
bg="attention" border
padding="2xl"
bg="body"
bg="none"
余白
--spacing-3xs
--spacing-2xs
--spacing-xs
--spacing-sm
--spacing-md
--spacing-lg
--spacing-xl
--spacing-2xl
--spacing-3xl
--spacing-4xl
--spacing-5xl
contents width
contents width full
contents width wide
contents width
contents width narrow
シャドウ
--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
--shadow-2xl
tailwind
テキストtext-5xl
テキストtext-4xl
テキストtext-3xl
テキストtext-2xl
テキストtext-xl
テキストtext-lg
テキストtext-base
テキストtext-sm
テキストtext-xs
primaryテキストテキストテキストテキストテキストテキスト
attentionテキストテキストテキストテキストテキストテキスト
mutedテキストテキストテキストテキストテキストテキスト
disabledテキストテキストテキストテキストテキストテキスト
省略テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
画像
固定幅 + Retina対応
通常の本文内画像などで使用。1.5x / 2x のRetine用画像も生成。
固定幅
通常の本文内画像などで使用。SVGなどRetina対応が不要な場合。
レスポンシブ画像（widths + sizes）
主にヒーローイメージ用途
ビューポート幅と解像度に応じて最適なサイズをブラウザが選択。
srcset="800.avif 800w, 1280.avif 1280w, 1920.avif 1920w, 2560.avif 2560w"
800w:小型〜標準スマホ DPR 2(iPhone SE、小型 Android など)
1280w:現行スマホ標準モデル DPR 2〜3(iPhone 12〜14、Galaxy 標準など)
1920w:iPad、iPhone Pro Max、フル HD デスクトップ(DPR 1)
2560w:Retina ノートPC(MacBook 13"〜16")、QHD モニタ
アートディレクション（独自 PictureImage）
PCとSPで別画像を使い分け（src / spSrc）。SPは767px以下で適用。
固定幅 600px + densities 1.5x / 2x で Retina 対応。
複数フォーマット切替（Picture + formats）
AVIF → WebP → 元フォーマット の順でブラウザが対応形式を自動選択。
