【初心者OK】カスタムプロパティ（CSS変数）でテーマカラーを一括管理する方法

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、CSSの「カスタムプロパティ（CSS変数）」を使って、テーマカラーを効率よく一括管理する方法についてご紹介します。

日々のWEB制作で、「全体の色を変えたいけど、いろんな場所で書き直さないといけない……」と悩んだ経験はありませんか？
そんなときに活躍するのが、CSS変数です。

初心者でも簡単に使えて、上級者であればさらに柔軟なデザイン対応ができるようになります。
この機会に、あなたのCSSをもっとスマートにしてみませんか？

カスタムプロパティとは？CSS変数の基本

カスタムプロパティとは、CSSで使える「変数」のようなものです。
色やサイズなどのスタイル値を一箇所にまとめて定義し、それを複数箇所で再利用できます。
まずは基本の書き方を見てみましょう。

 :root { --main-color: #3498db; } 
.button { background-color: var(--main-color); } 

このように、:root に --main-color を定義しておけば、あとは var(--main-color) を使うだけでどこでも同じ色を使いまわせます。

【初級編】色を変えたいときに大活躍！

CSSを書いていてよくあるのが「同じ色を何度も書いている問題」。
例えば以下のように、複数の場所に同じ色をベタ書きしていると、後で修正するのが大変です。

この色を「赤」に変えたい場合、3ヶ所すべて書き換える必要があります。

そこでカスタムプロパティを使えば、以下のようにスマートになります。

 :root { --main-color: #3498db; } 
.header { background: var(--main-color); } 
.button { background: var(--main-color); } 
.link { color: var(--main-color); } 

色を変えたい時は --main-color の中身を変更するだけ。
たった一行でサイト全体の印象を変えられるのは大きなメリットです！

【中級編】ダークモードの切り替えもラクラク

最近では、ユーザーの環境に応じてライトモード・ダークモードを自動で切り替えるのが主流になっています。
そんなときにもCSS変数は大活躍します。

:root {
 --bg-color: #ffffff; 
 --text-color: #000000; 
} 
@media (prefers-color-scheme: dark) {
 :root { 
  --bg-color: #111111; 
  --text-color: #f0f0f0; } 
} 
body { 
background: var(--bg-color); 
color: var(--text-color); 
} 

【上級編】テーマ別でクラスごとに変数を切り替える

CMSやJavaScriptと組み合わせることで、テーマカラーをクラスごとに切り替えることも可能です。

 .theme-blue { 
--main-color: #3498db; 
} 
.theme-red {
 --main-color: #e74c3c; 
} 
.button { 
background: var(--main-color); 
} 

たとえばWordPressやECサイトなどで「ユーザーがテーマカラーを選べる」といった機能を実装する場合、非常に便利です。

注意点・よくあるミス

便利なCSS変数ですが、注意点もあります。

まとめ：変数化でCSSはもっとスマートになる

CSSが苦手だった方も、これを機に「変数」を取り入れて、スマートで管理しやすいスタイル設計を目指してみてくださいね！