料金はかかりますか？

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

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

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

デザイン・CSS無料登録不要

CSS変数ガイド

CSSカスタムプロパティ(CSS変数)の書き方と活用法を解説する無料オンラインツール。

Input

Result

--- 基本の書き方 ---
: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);
}

FAQ

よくある質問

画面の入力欄に処理したい値を入れるだけで、CSS変数ガイドが即座に結果を表示します。コピーボタンで結果をワンクリックでクリップボードに送れます。

こちらもおすすめ

CSS display一覧

CSSのdisplayプロパティの値と挙動を比較解説する無料オンラインツール。

Flexboxガイド

CSS Flexboxの主要プロパティと値の早見表。レイアウト設計の参考に便利な無料オンラインツール。

CSS Gridガイド

CSS Gridの主要プロパティと値の早見表。2次元レイアウト設計に便利な無料オンラインツール。

CSS position解説

CSSのpositionプロパティ(static/relative/absolute/fixed/sticky)の違いと使い方を解説する無料オンラインツール。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...