CSS Variables プレイグラウンド
6つのカスタムプロパティをリアルタイム編集。var() の便利さをすぐ体感できます。
プリセット
スコープ
変数を編集
プレビュー
サンプルカード
CSS Variables を変更して、スタイルがリアルタイムで反映されることを確認しよう！
CSS 出力
:root {
--primary-color: #0d9488;
--padding-base: 16px;
--font-size: 16px;
--border-radius: 8px;
--button-text: 送信;
--shadow-blur: 4px;
}
.card {
padding: var(--padding-base);
border-radius: var(--border-radius);
box-shadow: 0 0 var(--shadow-blur) rgba(0, 0, 0, 0.1);
}
.button {
background: var(--primary-color);
font-size: var(--font-size);
padding: var(--padding-base);
border-radius: var(--border-radius);
}
/* --button-text はコンテンツとして直接指定 */
/* （content: var() は ::before にのみ使用可） */使い方
- プリセットボタンでテーマを選ぶと、全変数がまとめて切り替わります
- 左パネルの各スロットで色・サイズ・テキストを変更すると右のカードに即反映されます
- チェックボックスで変数を無効化すると、フォールバック値が適用されます
- 「要素単位モード」に切り替えると、CSS カスケードの上書きの仕組みを体感できます
- 「CSS をコピー」でコード出力をクリップボードに取得できます