ヘッダー

見出しHeading1

見出しHeading2

見出しHeading3

見出しHeading4

見出しHeading5
見出しHeading6

テキストテキストテキストリンクテキストテキスト

テキストテキストテキストリンク （新しいタブで開く） テキストテキスト

テキストテキストテキストリンク （PDF形式・新しいタブで開く） テキストテキスト

※ Annotationテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

※Annotation center

※Annotation end

ボタンsm ボタンsm blank （新しいタブで開く） ボタンsm アイコンなし ボタンsm（定義済みのアイコンを指定） （PDF形式・新しいタブで開く） ボタンsm（任意のアイコンをslotで左に表示） ボタンsm（任意のアイコンをslotで右に表示） ボタンsm secondary ボタンsm outline ボタンsm text
ボタンmd ボタンmd blank （新しいタブで開く） ボタンmd アイコンなし ボタンmd（定義済みのアイコンを指定） （PDF形式・新しいタブで開く） ボタンmd（任意のアイコンをslotで左に表示） ボタンmd（任意のアイコンをslotで右に表示） ボタンmd secondary ボタンmd outline ボタンmd text
ボタンsm ボタンlg blank （新しいタブで開く） ボタンlg アイコンなし ボタンlg（定義済みのアイコンを指定） （PDF形式・新しいタブで開く） ボタンlg（任意のアイコンをslotで左に表示） ボタンlg（任意のアイコンをslotで右に表示） ボタンlg secondary ボタンlg outline ボタンlg text
a要素でdisabled
Chip
Chip 削除あり
Chip リンク
Chip リンクで削除ありの場合divになる
Chip buttonで削除ありの場合divになる
Chip 任意のアイコン
Chip 削除あり 任意のアイコン
Chip outline
Chip sm
Chip sm outline
  • リストdisc
  • リストdisc
  • リストcircle
  • リストcircle
  1. リストdecimal
  2. リストdecimal
  1. リストparen
  2. リストparen
  • リスト入れ子
    • 入れ子.disc
  • リスト入れ子
    1. 入れ子.decimal
  • リスト入れ子
    1. 入れ子.paren
アコーディオン
アコーディオン コンテンツ
アコーディオン（デフォルトオープン）
アコーディオン コンテンツ
アコーディオン（排他的）
アコーディオン コンテンツ
アコーディオン（排他的）
アコーディオン コンテンツ
タブ1 コンテンツ
タブ4 コンテンツ

モーダル中身

モーダル中身

モーダル中身

ラベル補足テキスト

ディスクリプションテキスト 入力例など（例：〇〇〇〇）
任意 チェックボックス
任意 ラジオボタンラベル

ラベル補足テキスト

ラベル補足テキスト

ディスクリプションテキスト 入力例など（例：〇〇〇〇）

Stack

 
 
 
 
 
 
 
 

Grid

 
 
 
 
 
 

余白

--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

tailwind

テキストtext-4xl

テキストtext-3xl

テキストtext-2xl

テキストtext-xl

テキストtext-lg

テキストtext-base

テキストtext-sm

テキストtext-xs

テキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

画像

固定幅 + 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 → 元フォーマット の順でブラウザが対応形式を自動選択。