CSS変数（カスタムプロパティ）入門：再利用可能なスタイルの作成方法

2024年10月8日

ウェブ開発の際に、複数の場所で同じ色やフォントサイズを何度も指定することがありますが、変更が必要なときにすべての箇所を修正するのは大変です。そこで登場するのが❞CSS変数（カスタムプロパティ）❞です。CSS変数を使うと、スタイルを再利用可能にし、デザインのメンテナンスが簡単になります。

この記事では、CSS変数の基本的な使い方と、再利用可能なスタイルの作成方法について解説します。

CSS変数とは？

❞CSS変数（カスタムプロパティ）❞は、CSS内で値を再利用できる仕組みです。これにより、色、フォントサイズ、余白などのスタイルを一箇所で定義し、他の部分で繰り返し使用することが可能になります。

CSS変数は、一般的に「–」で始まる名前を使って定義されます。定義した変数は、var()関数を使って呼び出すことができます。

CSS変数の基本的な使い方

変数の定義

CSS変数は、通常:root疑似クラスで定義することで、ページ全体で使用できるグローバル変数として機能します。

CSS

:root {
  --main-bg-color: #f0f0f0;
  --main-text-color: #333333;
  --primary-font-size: 16px;
}

ここで、--main-bg-color、--main-text-color、--primary-font-sizeという3つのカスタムプロパティを定義しています。

変数の使用

定義した変数を使用するには、var()関数を使います。以下のように呼び出すことができます。

CSS

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-size: var(--primary-font-size);
}

この例では、var()を使って、背景色、テキストの色、フォントサイズに変数を適用しています。

カスタムプロパティの利点

CSS変数を使うと、特に次のような利点があります。

一貫性のあるデザイン:
サイト全体で共通の色やスタイルを一箇所で管理できるため、一貫性のあるデザインを保てます。
メンテナンスが容易:
変数を修正するだけで、関連するすべてのスタイルに一括で変更を反映できます。
柔軟性:
メディアクエリやテーマ設定など、さまざまなコンテキストで変数を動的に変更できます。

変数のスコープ

CSS変数は、定義する場所によって使用できる範囲（スコープ）が変わります。例えば、:rootで定義した変数は、ドキュメント全体で使用可能ですが、特定の要素内で変数を定義することも可能です。

ローカルスコープの例

CSS

.card {
  --card-bg-color: #ffffff;
}

.card {
  background-color: var(--card-bg-color);
}

この例では、.cardクラスに対してのみ--card-bg-colorが適用されます。他の要素には影響しません。

デフォルト値の設定

var()関数では、変数が定義されていない場合に備えて、デフォルト値を設定することができます。デフォルト値を使うことで、変数が存在しない場合でもスタイルが崩れないようにすることが可能です。

デフォルト値の使用例

CSS

p {
  color: var(--text-color, #000000); /* --text-colorが定義されていない場合は黒色 */
}

この場合、--text-colorが定義されていなければ、黒色（#000000）が適用されます。

テーマの切り替えに活用

CSS変数を使うことで、ダークモードやカラーテーマの切り替えが簡単に実現できます。例えば、ボタンをクリックしたときにテーマを変更するJavaScriptと組み合わせて使用することができます。

テーマ切り替えの例

CSS

<code>:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

.dark-theme {
  --bg-color: #333333;
  --text-color: #ffffff;
}

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