CSS
CSS 変数（カスタムプロパティ）
CSS変数（カスタムプロパティ）の定義・命名・テーマ切り替えパターン
概要
CSS 変数（カスタムプロパティ）は、再利用性・保守性・テーマ切り替え（ダークモードなど）の柔軟性向上のため積極的に活用します。
※プロジェクトの規模や要件に応じて、変数の粒度や管理方法は調整してください。
定義例
色・余白・フォントサイズ・z-index など、プロジェクト全体で共通化したい値を中心に利用します。
:root {
--color-bg: #fff;
--color-text: #222;
--spacing-sm: 0.5rem;
--font-size-lg: 1.25rem;
--z-index-header: 100;
}
.header {
background: var(--color-bg);
color: var(--color-text);
z-index: var(--z-index-header);
padding: var(--spacing-sm) 0;
font-size: var(--font-size-lg);
}
命名例
変数名は用途・意味が明確な英語名（ケバブケース）で命名します。
/* ✅ 良い例 */
:root {
--color-primary: #0070f3;
--color-secondary: #555;
--color-bg: #fff;
--text-base: 1rem;
--spacing-md: 1.5rem;
--border-radius: 4px;
}
/* ❌ 悪い例 */
:root {
--a: #0070f3;
--b1: 2rem;
--maincolor: #0070f3;
--secondaryColor: #00f365;
}
使用例
グローバル変数は:rootで定義し、コンポーネント固有はスコープ内で定義します。
:root {
--color-primary: #0070f3;
--button-bg: #fff;
--spacing-md: 1.5rem;
--border-radius: 4px;
}
.button {
color: var(--color-primary);
padding: var(--spacing-md);
}
/* 特定の要素だけ値を上書きするためにスコープ内で定義する場合 */
.header-light {
--color-primary: #fff;
}
.header-light .button {
background: var(--color-primary); /* この場合は白色になる */
}
テーマ切り替え例
:root {
--color-bg: #fff;
--color-primary: #66bee7;
}
:root[data-theme="dark"] {
--color-bg: #222;
--color-primary: #15739f;
}
Tailwind CSS との統合
Tailwind CSS を使用する場合は、CSS 変数を Tailwind の設定ファイルと統合することで、ユーティリティクラスからも変数を参照できます。
詳細は Tailwind CSS ガイドライン を参照してください。