CSS変数（カスタムプロパティ）の使い方｜基本構文・設定方法・実践例

「色を変えたいだけなのに、何ヶ所も修正しないといけない…」

そんなとき、CSS変数（カスタムプロパティ）を使えば、色や数値などの設定を一箇所にまとめて管理できます。

この記事では、CSS変数（カスタムプロパティ）の

• 基本構文
• 使い方
• 実践的な活用例

を初心者向けにわかりやすく解説します。

コード管理を楽にするためにも、ぜひ使い方を覚えておきましょう。

CSS変数（カスタムプロパティ）とは？

CSS変数（カスタムプロパティ）は、CSSで値を再利用できる仕組み。

--で始まる独自の名前で値を定義し、必要な場所でその値を参照して使います。

色やサイズなど、繰り返し使う値をまとめて管理できるのが特徴です。

例：

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

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

この例では、--main-color に定義した色が、ボタンの背景色として再利用されています。

CSS変数（カスタムプロパティ）の使い方【基本構文】

宣言方法

CSS変数（カスタムプロパティ）の宣言方法はシンプル。通常のCSSプロパティと同じようにセレクタの中で定義します。

カスタムプロパティ名（変数名）の前に、2つの半角ハイフン（–）を付けて定義します。

:（コロン）の後に、設定したい値を指定します。

CSSカスタムプロパティは、主に以下の場所で宣言します。

:root

:root で宣言したカスタムプロパティは、サイト全体で使用できます。

:root {
   --main-color: #3498db;
   --font-size: 16px;
}

特定のセレクタ内

特定のセレクタ内で宣言したカスタムプロパティは、そのセレクタ内でのみ使用できます。

.container {
   --padding-size: 20px;
}

この例では、.container クラス内でのみ --padding-size が適用されます。

→ CSSセレクタの調べ方はこちら

var()の使い方

カスタムプロパティを使用するにはvar() 関数を使います。

.container {
   background-color: var(--main-color); /* 背景色にメインカラーを適用 */
   padding: var(--padding-size);         /* パディングに変数を適用 */
}

この例では、.container クラスの背景色とパディングに設定したCSS変数が適用されています。

CSS変数を使うメリット

CSS変数（カスタムプロパティ）を使うと、CSSの管理やデザイン変更がとても楽になります。

主なメリットは次のとおりです。

• 値を一箇所で管理できる
• CSSの保守性が高くなる
• サイトのテーマカラーを簡単に変更できる
• 同じデザインを再利用しやすくなる

特にブログのようにCSSが増えてくるサイトでは、CSS変数を使うことでスタイル管理が大幅に効率化します。

CSSの基本的な書き方については、以下の記事でも詳しく解説しています。

次のセクションでは、実際の使い方を具体例で紹介します。

CSS変数（カスタムプロパティ）の使い方【実践例】

CSSカスタムプロパティ（CSS変数）は、単に値をまとめるだけでなく、サイト全体のデザイン管理を効率化するために使うことができます。

ここではブログカスタマイズでよく使われる実践例を紹介します。

カラーをサイト全体で統一する

ブログデザインでは、同じ色を複数の場所で使うことがよくあります。

例えば以下のようなCSS。

.button{
  background:#2b6cb0;
}
.heading{
  color:#2b6cb0;
}
.link{
  color:#2b6cb0;
}

この状態だと、色を変更するたびにすべての箇所を修正する必要があります。

CSS変数を使うと次のようにまとめられます。

:root{
  --main-color:#2b6cb0;
}
.button{
  background:var(--main-color);
}
.heading{
  color:var(--main-color);
}
.link{
  color:var(--main-color);
}

色を変更したい場合は、変数の値を1箇所変更するだけでサイト全体に反映されます。

--main-color:#e53e3e;

ボタンやボックスのデザインを統一する

CSS変数はサイズや余白の管理にも便利です。

:root{
  --box-radius:8px;
  --box-padding:20px;
}
.box{
  border-radius:var(--box-radius);
  padding:var(--box-padding);
}
.button{
  border-radius:var(--box-radius);
}

このようにしておくと、

• 角丸を変えたい
• ボックスの余白を調整したい

といったときも、変数を1箇所変更するだけで統一して変更できます。

テーマカラーを簡単に変更できるようにする

ブログ運営では、

• 季節デザイン
• キャンペーンカラー
• リニューアル

などで色を変更したくなることがあります。

CSS変数でテーマカラーを定義しておくと、次のような管理ができます。

:root{
  --main-color:#2b6cb0;
  --accent-color:#f59e0b;
}

.button{
  background:var(--main-color);
}
.notice{
  border-left:4px solid var(--accent-color);
}

テーマカラーを変更する場合は、

--main-color:#16a34a;

のように変数だけ変更すればサイト全体が更新されます。

サイト全体の横幅や余白をCSS変数で管理する

例えば、サイト全体の横幅や余白をCSS変数で管理すると、レイアウト調整がとても簡単になります。

:root{
  --content-width: 1200px;
}

.container{
  max-width: var(--content-width);
  margin: 0 auto;
}

margin: 0 auto; を使うと、要素を中央に配置できます。

中央寄せの詳しい方法はこちらの記事でまとめています。

CSS変数は「デザイン設計」に役立つ

CSS変数を使う最大のメリットは、サイト全体のデザインを整理できることです。

例えば以下のようにまとめておくと、CSSの管理がとても楽になります。

:root{
  /* color */
  --color-main:#2b6cb0;
  --color-accent:#f59e0b;

  /* layout */
  --content-width:1200px;

  /* spacing */
  --space-s:8px;
  --space-m:16px;
  --space-l:32px;

  /* radius */
  --radius:8px;
}

このように「色・余白・サイズ」などを整理しておくと、サイト全体のデザイン管理がとても楽になります。

ブログのCSSが増えてきたときほど、CSS変数の効果は大きくなります。

CSS変数で使える値（カラー・サイズ・calcなど）

CSSカスタムプロパティには、ほぼすべてのCSS値を変数として設定できます。以下、よく使われる変数の種類を紹介します。

1. 色（カラーコード）

色に関する値は、カスタムプロパティに頻繁に使用されます。これはサイト全体で統一したカラーテーマを適用する際に非常に便利です。

:root {
   --primary-color: #3498db;
   --secondary-color: rgb(52 152 219 / .8);
}

これらの変数は、色指定に使用できます。

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

2. 数値（ピクセル、割合）

数値（ピクセルやパーセンテージなど）は、サイズや間隔の設定に使用されます。

:root {
   --padding-size: 16px;
   --border-radius: 8px;
}

.container {
   padding: var(--padding-size);
   border-radius: var(--border-radius);
}

3. フォント設定（font-size・font-family）

フォントファミリーやフォントサイズも、カスタムプロパティで定義して一貫性を持たせられます。

:root {
   --font-family: 'Arial, sans-serif';
   --font-size: 16px;
}

.body-text {
   font-family: var(--font-family);
   font-size: var(--font-size);
}

4. 寸法（width・height・marginなど）

寸法（幅、高さ、マージン、パディングなど）も変数として使用できます。これにより、レイアウトの調整が簡単になります。

:root {
   --max-width: 1200px;
   --margin-size: 20px;
}

.wrapper {
   max-width: var(--max-width);
   margin: var(--margin-size) auto;
}

5. タイミング（animation・transition）

アニメーションやトランジションの持続時間もカスタムプロパティで管理できます。

:root {
   --transition-duration: 0.3s;
   --animation-delay: 0.5s;
}

.element {
   transition: all var(--transition-duration) ease;
   animation-delay: var(--animation-delay);
}

6. 複雑なCSS関数や計算（calc, clamp, min, max など）

calc() 関数やグラデーションなどの複雑な値もカスタムプロパティに設定できます。

:root {
   --spacing-unit: 10px;
   --calculated-margin: calc(var(--spacing-unit) * 2);
   --gradient-background: linear-gradient(45deg, #3498db, #e74c3c);
}

.box {
   margin: var(--calculated-margin);
   background: var(--gradient-background);
}

CSS変数が未設定だった場合のフォールバック方法

もし設定したカスタムプロパティがない場合でも、フォールバック値（代わりの値）を設定できます。

p {
  color: var(--text-color, #333);
}

この例では、-–text-colorが未定義の場合デフォルト値#333が適用されます。

CSS変数のスコープと使い分け

CSS変数は「宣言した場所のスコープ」に従って適用されます。

:root {
   --main-color: #3498db; /* 全体のメイン色 */
}

.container {
   --main-color: #e74c3c; /* コンテナ内で使う別の色 */
}

.button {
   background-color: var(--main-color); /* ボタンの背景色 */
}

このコードでは、button が container の中にあると赤色（#e74c3c）が使われ、外にあると青色（#3498db）が使われます。

CSS変数（カスタムプロパティ）の注意点

1.変数名は「–」から始めるルール

CSSカスタムプロパティは必ず２つのハイフン（--）から始める必要があります。この規則に従わない場合、CSS変数として認識されません。

/* 有効な宣言 */
:root {
   --main-color: #3498db;
}

/* 無効な宣言 */
:root {
   main-color: #3498db; /* ハイフンがないため無効 */
}

2. 名前に使える文字のルール

カスタムプロパティの名前には、英数字（a-z、0-9）、ハイフン（-）、およびアンダースコア（_）を使用できます。スペースや他の特殊文字（例： !, @, # など）は使えません。

/* 有効な宣言 */
:root {
   --primary-color: #3498db;
   --font_size: 16px;
}

/* 無効な宣言 */
:root {
   --primary color: #3498db; /* スペースは無効 */
   --@font-size: 16px;   /* 特殊文字も無効 */
}

3.通常のプロパティ名をCSS変数として使えない

プロパティ名をカスタムプロパティにすることはできません。使えるのは値のみです。

/* プロパティ名はNG */
:root {
   --bg: background-color;
   var(--bg): blue;
}

:root {
   --bg: background-color: blue; /* 無効な宣言 */
}

4. 大文字・小文字の区別に注意

カスタムプロパティの名前は、大文字と小文字が区別されます（ケースセンシティブ）。--Main-Color と --main-color は異なる変数として扱われますが、一般的にはすべて小文字で記述するのが推奨されます。

:root {
   --Main-Color: #3498db;
   --main-color: #e74c3c;
}

/* 使用例 */
.element {
   background-color: var(--main-color); /* #e74c3c が適用される */
}

5. CSS予約語の注意

CSSの予約語（inherit、initial、unset など）は、カスタムプロパティ名として使用することはできますが、誤解を招く可能性があるため避けるのが賢明です。

/* 予約語を避けたほうが良い */
:root {
   --initial: 10px; /* 予約語 "initial" を使用 */
}

.element {
   margin: var(--initial); /* 動作はするが混乱を招く可能性あり */
}

6. 長すぎる名前は避ける

技術的には制限はありませんが、名前が長すぎると管理や理解が難しくなるため、適度な長さで分かりやすい名前を付けることが推奨されます。

まとめ｜CSS変数（カスタムプロパティ）で効率的なスタイル管理を

ブログやサイトのデザインをカスタマイズする場合は、早い段階からCSS変数を使う設計にしておくと、後からのデザイン変更がとても楽になります。

CSSカスタマイズを進めるなら、以下の記事もあわせて読むと理解が深まります。

• CSSの書き方とカスタマイズ方法【基本】
• WordPress「追加CSSクラス」の使い方【特定ブロックだけ変更】
• CSSが効かない・反映されない原因と対処法【トラブル対策】