CSS変数ジェネレーター
カラー・タイポグラフィ・スペーシング・角丸・影をデザイントークンとして生成します。
<!-- カラー -->
<div class="cv-section">
<div class="cv-section-title">
<span class="cv-section-icon" style="background:#ede9fe;">🎨</span>
カラー
</div>
<div class="cv-row">
<span class="cv-row-label">プライマリ</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-primary" value="#2563eb"></div>
<input type="text" class="cv-hex-input" id="h-primary" value="#2563eb" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">セカンダリ</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-secondary" value="#7c3aed"></div>
<input type="text" class="cv-hex-input" id="h-secondary" value="#7c3aed" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">アクセント</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-accent" value="#f59e0b"></div>
<input type="text" class="cv-hex-input" id="h-accent" value="#f59e0b" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">背景</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-bg" value="#ffffff"></div>
<input type="text" class="cv-hex-input" id="h-bg" value="#ffffff" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">サーフェス</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-surface" value="#f8fafc"></div>
<input type="text" class="cv-hex-input" id="h-surface" value="#f8fafc" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">テキスト</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-text" value="#1e293b"></div>
<input type="text" class="cv-hex-input" id="h-text" value="#1e293b" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">テキスト（薄）</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-text-muted" value="#64748b"></div>
<input type="text" class="cv-hex-input" id="h-text-muted" value="#64748b" maxlength="7">
</div>
</div>
<div class="cv-row">
<span class="cv-row-label">ボーダー</span>
<div class="cv-color-wrap">
<div class="cv-color-swatch"><input type="color" id="c-border" value="#e2e8f0"></div>
<input type="text" class="cv-hex-input" id="h-border" value="#e2e8f0" maxlength="7">
</div>
</div>
</div>
<!-- タイポグラフィ -->
<div class="cv-section">
<div class="cv-section-title">
<span class="cv-section-icon" style="background:#fef9c3;">T</span>
タイポグラフィ
</div>
<div class="cv-row">
<span class="cv-row-label">フォントファミリー</span>
<select class="cv-select-input" id="t-font-family">
<option value="-apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif">システムUI（日本語対応）</option>
<option value="'Inter', sans-serif">Inter</option>
<option value="'Roboto', sans-serif">Roboto</option>
<option value="'Poppins', sans-serif">Poppins</option>
<option value="'Noto Serif JP', Georgia, serif">Noto Serif JP</option>
<option value="'Fira Code', 'Consolas', monospace">Fira Code（等幅）</option>
</select>
</div>
<div class="cv-row">
<span class="cv-row-label">基本サイズ</span>
<input type="text" class="cv-text-input" id="t-base" value="1rem">
</div>
<div class="cv-row">
<span class="cv-row-label">サイズ SM</span>
<input type="text" class="cv-text-input" id="t-sm" value="0.875rem">
</div>
<div class="cv-row">
<span class="cv-row-label">サイズ LG</span>
<input type="text" class="cv-text-input" id="t-lg" value="1.125rem">
</div>
<div class="cv-row">
<span class="cv-row-label">サイズ XL</span>
<input type="text" class="cv-text-input" id="t-xl" value="1.25rem">
</div>
<div class="cv-row">
<span class="cv-row-label">サイズ 2XL</span>
<input type="text" class="cv-text-input" id="t-2xl" value="1.5rem">
</div>
<div class="cv-row">
<span class="cv-row-label">通常ウェイト</span>
<select class="cv-select-input" id="t-weight-normal">
<option value="300">300 ライト</option>
<option value="400" selected>400 レギュラー</option>
<option value="500">500 ミディアム</option>
</select>
</div>
<div class="cv-row">
<span class="cv-row-label">太字ウェイト</span>
<select class="cv-select-input" id="t-weight-bold">
<option value="600">600 セミボールド</option>
<option value="700" selected>700 ボールド</option>
<option value="800">800 エクストラボールド</option>
<option value="900">900 ブラック</option>
</select>
</div>
<div class="cv-row">
<span class="cv-row-label">行の高さ</span>
<input type="text" class="cv-text-input" id="t-leading" value="1.6">
</div>
<div class="cv-row">
<span class="cv-row-label">行の高さ（狭）</span>
<input type="text" class="cv-text-input" id="t-leading-tight" value="1.25">
</div>
</div>
<!-- スペーシング -->
<div class="cv-section">
<div class="cv-section-title">
<span class="cv-section-icon" style="background:#dcfce7;">↔</span>
スペーシング
</div>
<div class="cv-row">
<span class="cv-row-label">XS（極小）</span>
<input type="text" class="cv-text-input" id="sp-xs" value="4px">
</div>
<div class="cv-row">
<span class="cv-row-label">SM（小）</span>
<input type="text" class="cv-text-input" id="sp-sm" value="8px">
</div>
<div class="cv-row">
<span class="cv-row-label">MD（中）</span>
<input type="text" class="cv-text-input" id="sp-md" value="16px">
</div>
<div class="cv-row">
<span class="cv-row-label">LG（大）</span>
<input type="text" class="cv-text-input" id="sp-lg" value="24px">
</div>
<div class="cv-row">
<span class="cv-row-label">XL（特大）</span>
<input type="text" class="cv-text-input" id="sp-xl" value="32px">
</div>
<div class="cv-row">
<span class="cv-row-label">2XL</span>
<input type="text" class="cv-text-input" id="sp-2xl" value="48px">
</div>
<div class="cv-row">
<span class="cv-row-label">3XL</span>
<input type="text" class="cv-text-input" id="sp-3xl" value="64px">
</div>
</div>
<!-- 角丸 -->
<div class="cv-section">
<div class="cv-section-title">
<span class="cv-section-icon" style="background:#fce7f3;">⭘</span>
角丸（Border Radius）
</div>
<div class="cv-row">
<span class="cv-row-label">SM（小）</span>
<input type="text" class="cv-text-input" id="r-sm" value="4px">
</div>
<div class="cv-row">
<span class="cv-row-label">MD（中）</span>
<input type="text" class="cv-text-input" id="r-md" value="8px">
</div>
<div class="cv-row">
<span class="cv-row-label">LG（大）</span>
<input type="text" class="cv-text-input" id="r-lg" value="12px">
</div>
<div class="cv-row">
<span class="cv-row-label">XL（特大）</span>
<input type="text" class="cv-text-input" id="r-xl" value="16px">
</div>
<div class="cv-row">
<span class="cv-row-label">Full（丸型）</span>
<input type="text" class="cv-text-input" id="r-full" value="9999px">
</div>
</div>
<!-- 影 -->
<div class="cv-section">
<div class="cv-section-title">
<span class="cv-section-icon" style="background:#e0f2fe;">☉</span>
影（Shadow）
</div>
<div class="cv-row">
<span class="cv-row-label">SM（小）</span>
<input type="text" class="cv-text-input" id="sh-sm" value="0 1px 3px rgba(0,0,0,0.1)">
</div>
<div class="cv-row">
<span class="cv-row-label">MD（中）</span>
<input type="text" class="cv-text-input" id="sh-md" value="0 4px 12px rgba(0,0,0,0.12)">
</div>
<div class="cv-row">
<span class="cv-row-label">LG（大）</span>
<input type="text" class="cv-text-input" id="sh-lg" value="0 8px 24px rgba(0,0,0,0.15)">
</div>
<div class="cv-row">
<span class="cv-row-label">XL（特大）</span>
<input type="text" class="cv-text-input" id="sh-xl" value="0 16px 48px rgba(0,0,0,0.2)">
</div>
</div>
<div class="cv-preview-title">ライブプレビュー</div>
<div class="cv-preview-area">
<div class="cv-preview-inner" id="cv-preview-inner">
<!-- JSで描画 -->
</div>
</div>
<div class="cv-output-section">
<div class="cv-output-header">
<span class="cv-output-label">生成されたCSS</span>
<button class="cv-copy-btn" id="cv-copy-btn">CSSをコピー</button>
</div>
<div class="cv-code-box" id="cv-code-box"></div>
</div>
フリーランス・個人事業主の方へ
デザイン案件の請求書作成・経費管理をシンプルに。freeeなら確定申告まで自動化できます。
関連ツール
Box Shadow Generator → Box Shadow Generatorツール Css Animation Generator → Css Animation Generatorツール Css Button Generator → Css Button Generatorツール