CSS 変数ジェネレーター
デザイントークンから CSS カスタムプロパティを生成。カラー・タイポグラフィ・スペーシング・角丸をビジュアルエディタで管理し、:root ブロックをリアルタイム生成。無料・ブラウザ完結。
使い方
- 変数プレフィックスを設定します（デフォルト
—、—brand-などに変更可）。 - 各グループの事前入力済みトークンを編集するか、+ トークン追加で新規追加します。
- カラートークンはカラーピッカーか16進数値の直接入力が使えます。
- 生成された CSS ブロックはリアルタイムで更新されます。
- コピーをクリックして
:root { … }ブロックをクリップボードにコピーします。
デザイントークンとは？
デザイントークンはデザイン上の意思決定（カラーパレット・タイプスケール・スペーシングリズム・角丸）の
唯一の信頼できる情報源です。:root ブロック内の CSS カスタムプロパティとして管理することで、
スタイルシート全体からアクセスが可能になります。一箇所の変更がそのトークンを使用するすべてのコンポーネントに
自動的に反映されます。
トークングループの説明
- カラー — ブランドパレット・背景色・テキスト色・状態色、カラーピッカー付き。
- タイポグラフィ — フォントファミリースタックとベース/スケールフォントサイズ。
- スペーシング — 一貫したスペーシングスケール（4px、8px、16px など）。
- 角丸 — 控えめなものからピル形状まで、角丸半径の値。
FAQ
CSS カスタムプロパティ（CSS 変数）とは何ですか？
CSS カスタムプロパティは二重ハイフン接頭辞を持つ変数です（例: --primary-color: #3b82f6）。:root ブロック内で定義し、スタイルシート全体で var(--primary-color) として再利用できます。グローバルなデザイン変更を一箇所で行えるため、一貫性を保ちやすくなります。
変数プレフィックスとは何ですか？変更できますか？
プレフィックスはすべての変数名の先頭に付加される文字列です。デフォルトは '--' で標準的な CSS カスタムプロパティ構文を生成します。'--brand-' や '--theme-' などに変更することでネームスペースを分離し、名前の衝突を防げます。
新しいデザイントークンを追加するにはどうすればよいですか？
各グループ（カラー・タイポグラフィ・スペーシング・角丸）内の「+ トークン追加」ボタンをクリックし、変数名と値を入力します。カラートークンにはカラーピッカーも提供されます。CSS 出力はリアルタイムで更新されます。
不要なトークンを削除するにはどうすればよいですか？
各トークン行の末尾にある × ボタンをクリックすると削除できます。CSS 出力は即座に更新されます。
生成した CSS をプロジェクトで使用するには？
「コピー」ボタンをクリックして :root ブロックをコピーし、グローバルスタイルファイル（例: styles/global.css）に貼り付けます。コンポーネント CSS 内で var(--token-name) として参照できます。