CSS変数の設定方法と活用法

まず、CSS変数を設定する方法ですが、次のように定義します。

:root {
  --primary-color: #ff0000;
  --secondary-color: #00ff00;
}

上記のコードでは、:rootセレクタを使用してCSS変数を定義しています。--primary-colorと--secondary-colorは変数名であり、#ff0000と#00ff00はそれぞれの変数に割り当てられる値です。

CSS変数を利用することで、同じ値を複数の場所で使い回すことができます。例えば、以下のように使用できます。

h1 {
  color: var(--primary-color);
}
.button {
  background-color: var(--secondary-color);
}

上記の例では、h1要素の文字色には--primary-color変数が使用され、.buttonクラスの背景色には--secondary-color変数が使用されています。もし変数の値を変更したい場合は、:rootセレクタ内で変数の値を変えるだけで、全ての使用箇所に反映されます。

さらに、CSS変数はJavaScriptからも制御することができます。例えば、以下のようにして変数の値を変更できます。

document.documentElement.style.setProperty('--primary-color', '#0000ff');

上記のコードでは、document.documentElement.style.setPropertyメソッドを使用して--primary-color変数の値を#0000ffに変更しています。

CSS変数を活用することで、スタイルの一貫性を維持したり、テーマの切り替えが簡単になったりといったメリットがあります。さらに、メディアクエリや擬似クラスと組み合わせることで、動的なスタイリングが可能になります。

この記事では、CSS変数の基本的な設定方法と活用法を紹介しました。CSS変数を使用することで、より効率的なスタイル管理が可能になりますので、ぜひ活用してみてください。