CSS 変数生成ツール

CSS 変数生成ツールについて

この CSS 変数生成ツールは、すべてブラウザ内で完結します。名前と値を持つ変数行を追加すると、CSS カスタムプロパティを含むクリーンな :root ブロックが生成されます。カラー値は自動検出され、テキスト入力の横にカラーピッカーが表示されます。プリセットボタンを使用して一般的なカラーやスペーシングトークンをすばやく読み込めます。アップロードは一切なく、JavaScript によってデバイス上で処理されます。

使い方

1. 「+ 変数を追加」をクリックして新しい行を作成、またはプリセットボタンで初期セットを読み込みます。
2. 変数名（-- 接頭辞なし——自動追加されます）と値を入力します。
3. 値がカラー（hex、rgb、hsl）の場合、選択しやすいようにカラーピッカーが自動的に表示されます。
4. 「CSS を生成」をクリックして :root ブロックを生成し、「CSS をコピー」でコピーします。
5. 各行のゴミ箱アイコンで個別の変数を削除できます。

CSS カスタムプロパティとは

CSS カスタムプロパティ（CSS 変数とも呼ばれる）を使用すると、スタイルシートで再利用可能な値を定義できます。:root セレクターで宣言し、var() 関数で参照します。これにより、プロジェクト全体で一貫したデザイントークン（カラー、スペーシング、フォント）を維持しやすくなり、最小限のコード変更でテーマ切り替えなどの機能を実装できます。

よくある質問

名前に -- 接頭辞を含める必要がありますか？ いいえ、ツールが自動的に追加します。変数名のみ入力してください（例：primary-color）。

対応する値の形式は？ 任意の有効な CSS 値：カラー（#hex、rgb()、hsl()）、長さ（16px、1rem）、文字列、数値など。カラー値には利便性のためカラーピッカーが表示されます。

データはアップロードされますか？ いいえ。すべての操作はブラウザのローカルで行われます。