CSS変数ガイド

design/css-variables-guide

CSS カスタムプロパティの基本、フォールバック、ダークモード、JS 操作、デザインシステム例をコピーできます。

最終更新日 2026-07-03 ・ by yuzlrin

このツールでできること

CSS変数ガイドでは、CSS カスタムプロパティの基本、フォールバック、ダークモード、JS 操作、デザインシステム例をコピーできます。
関連する観点として CSS変数、custom properties、css variables を確認し、結果をコピーして別の作業に使えます。

結果

--- 基本の書き方 ---
:root {
  --primary: #3b82f6;
  --radius: 8px;
  --font-size: 16px;
}

.button {
  background: var(--primary);
  border-radius: var(--radius);
}

--- フォールバック ---
color: var(--color, #000);  /* 未定義時は#000 */

--- ダークモード ---
:root {
  --bg: #fff;
  --text: #000;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #fff;
  }
}

--- JavaScript から操作 ---
// 取得
getComputedStyle(el).getPropertyValue("--primary")

// 設定
document.documentElement.style.setProperty("--primary", "#ff0000")

--- デザインシステム例 ---
:root {
  --color-primary: #3b82f6;
  --color-secondary: #6366f1;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
}

使い方

結果欄に表示される CSS カスタムプロパティのコード例を上から確認します。
基本の書き方で :root 定義と var() の参照方法を読みます。
フォールバック、ダークモード、JavaScript から操作のブロックを用途に合わせて抜き出します。
コピーボタンで必要なスニペットを移し、プロジェクトの変数名や色へ置き換えます。

入力例・出力例

INPUT

フォールバック

OUTPUT

color: var(--color, #000); /* 未定義時は#000 */

結果欄に含まれる固定スニペットです。

INPUT

JavaScript から設定

OUTPUT

document.documentElement.style.setProperty("--primary", "#ff0000")

ページ全体の CSS 変数を書き換える例として表示されます。

よくある利用シーン

CSS 変数の最小構文を、新しいコンポーネントへ貼り付けて始めるとき。
未定義時のフォールバック付き var() をチーム資料に示すとき。
prefers-color-scheme ベースのダークモード例を素早く参照するとき。
JavaScript でテーマ色を変更する setProperty の書き方を確認するとき。

結果確認のポイント

生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
CSS変数、custom properties、css variablesの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

CSS変数ガイドの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

FAQ

よくある質問

使い方を教えてください。

ページを開くと CSS カスタムプロパティ (--変数名 / var() / フォールバック / :root スコープ等) の解説とコード例が一覧表示されます。コピーボタンでスニペットをそのままクリップボードに送れます。

料金はかかりますか？

CSS変数ガイドは完全無料です。登録やログイン、課金、アプリのインストールは不要で、ブラウザがあればすぐに利用できます。

生成されたCSSコードはそのまま使えますか？

はい。CSS変数ガイドが出力するCSSは標準仕様に準拠しており、CSSファイルやstyle属性にそのままコピー＆ペーストして使用できます。

CSS変数ガイド

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

データの扱い / プライバシー

よくある質問

関連ツール

CSS変数ガイド

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

データの扱い / プライバシー

よくある質問

関連ツール