CSSカスタムプロパティ（CSS変数）でコードをもっと柔軟に

 

CSSカスタムプロパティ(CSS変数)をご存知でしょうか。
「聞いたことはあるけど、使ったことはない」という人もいるかもしれません。
簡単に、使い方とメリットを紹介します。

CSS変数の基本

:root {
  --main-color: #3498db;
}

button {
  background-color: var(--main-color);
  color: white;
}

CSS変数は、:rootで定義してvar()で呼び出します。

変数名は自由に設定でき、色だけでなくフォントサイズや間隔にも使えます。

メリット

一括変更が簡単

色やフォントサイズを1箇所変えるだけで全体に反映されます。

可読性と保守性が向上します。

JavaScriptで動的に変更可能

実行時に値を変更できます。

document.documentElement.style.setProperty('--main-color', '#e74c3c');

活用例

body { 
  --bg: #fff; 
  --text: #333; 
  background-color: var(--bg); 
  color: var(--text); 
}

 

JavaScriptでdocument.documentElement.style.setProperty('--bg', '#111') のように変更すれば、
背景色や文字色を簡単に切り替えられます。
ライトモード/ダークモードの切り替えが簡単に実現できます。

まとめ

CSSカスタムプロパティは 簡単・便利・JavaScriptによる動的対応が可能。
小さなコードでも、色やサイズの管理がとても楽になります。

ぜひ使ってみてください。

（IT 事業部門 T.H）