【保存版】CSS var()の使い方徹底解説！カスタムプロパティで色・サイズ・レイアウトを一括管理するテクニック＆実践例

css
記事内に広告が含まれています。

「同じ色を何度も何度もコピペするのに疲れた…」 「大規模サイトのカラー変更が地獄すぎる…」 「ダークモード実装、どうすれば効率的なの？」

そんなCSSの悩みを抱えていませんか？

実はこれらの問題は、CSS変数（カスタムプロパティ）を使えば、あっという間に解決できるんです。でも「CSS変数って何？」「どう使えばいいの？」という疑問をお持ちの方も多いはず。

CSS変数とは、CSSの中で値を保存して再利用できる強力な機能です。色やサイズ、余白などを変数として一度定義しておけば、サイト全体で何度でも使い回せます。しかも、JavaScriptと連携すれば、ユーザーの操作に応じてリアルタイムにスタイルを変更することも可能です。

この記事では、CSS変数の基本から応用テクニックまで、初心者にも理解できるように徹底解説します。

この記事でわかること

  • CSS変数の基本的な定義方法と使い方
  • var()関数の構文とフォールバック値の指定テクニック
  • 現場で使える実践的な活用パターン（カラーテーマ管理、ダークモード実装など）
  • JavaScriptとの連携方法
  • 効率的な命名規則とベストプラクティス

この記事を読めば、モダンなCSS開発の強力なツールを手に入れることができます。サイト全体のデザイン変更が数秒で完了したり、レスポンシブ対応が格段に簡単になったり…。あなたのCSS開発が劇的に効率化されること間違いなしです！

さあ、CSSに「変数」という新しい武器を追加して、より柔軟で保守性の高いスタイリングを始めましょう！

CSS変数（カスタムプロパティ）とは？ 基本を徹底解説

CSS変数（正式名称：カスタムプロパティ）は、CSS内で再利用可能な値を定義できる機能です。2015年頃から主要ブラウザでサポートが始まり、現在では98%以上のブラウザで利用可能な、モダンCSS開発の標準的なテクニックとなっています。

従来のCSSでは同じ値を複数箇所で使用する場合、その都度値を書く必要がありましたが、CSS変数を使えば一度定義した値を何度でも参照できるようになります。まるでプログラミング言語の変数のような柔軟性がCSSにも加わったことになります。

var() - CSS: カスケーディングスタイルシート | MDN
CSS の var() 関数は、他のプロパティの値の一部に代わってカスタムプロパティ (「CSS 変数」と呼ばれることもあります) の値を挿入できます。
developer.mozilla.org

なぜCSS変数を使うべき？知っておきたい3つのメリット

1. コードの保守性が飛躍的に向上する

大規模なプロジェクトでは、同じカラーコードが数十、数百箇所に散らばっていることも珍しくありません。たとえば企業のブランドカラー「#3366FF」が100箇所に記述されているとしましょう。もしデザイン変更で「#3377FF」に変更する必要が生じたら…？一つ一つ手作業で変更するのは非効率的ですよね。

CSS変数を使えば、変数の定義部分を1箇所変更するだけで、その変数を参照しているすべての箇所に変更が適用されます。具体的には：

:root {
  --brand-color: #3366FF;
}

/* 複数箇所で利用 */
.header {
  background-color: var(--brand-color);
}

.button {
  border-color: var(--brand-color);
}

このコードでは、--brand-colorを一箇所変更するだけで、ヘッダーとボタンの色を同時に変更できます。これにより保守作業の時間を約80%削減できるケースもあります。

2. 動的なスタイル変更が容易になる

CSS変数の最も強力な特徴は、JavaScriptから値を変更できることです。この特性を活用することで、ユーザーの操作に応じてリアルタイムにスタイルを変更するインタラクティブなUIを簡単に実装できます。

// JavaScriptからCSS変数を変更する例
document.documentElement.style.setProperty('--brand-color', '#FF5500');

たった1行のコードで、サイト全体のブランドカラーを瞬時に変更できます！これにより、ダークモード切替やテーマカラー変更などの機能が格段に実装しやすくなります。

3. コードの可読性と理解しやすさが向上する

意味のある名前を持つ変数を使うことで、コードの意図が明確になります。例えば、#F5F5F5という16進数のカラーコードだけを見ても、それが何の色なのかすぐには分かりませんが、--light-background-colorという変数名なら一目で役割が理解できますね。

:root {
  --light-background-color: #F5F5F5;
  --primary-text-color: #333333;
  --secondary-text-color: #666666;
  --accent-color: #FF6B00;
}

このようにセマンティックな（意味のある）命名をすることで、チームでの共同作業効率が約25%向上したというデータもあります。

CSS変数の定義方法：–変数名: 値; の基本

CSS変数の定義は非常にシンプルです。変数名の前に「–」（ハイフン2つ）をつけるだけ。定義された変数は、var()関数を使って参照します。

/* 変数の定義 */
.container {
  --main-padding: 20px;
  --content-width: 1200px;
  --text-size: 16px;

  /* 変数の使用 */
  padding: var(--main-padding);
  max-width: var(--content-width);
  font-size: var(--text-size);
}

変数名には慣習的に複数の単語をハイフンでつなぐケバブケース（kebab-case）を使うことが多いですが、好みのルールで構いません。ただし、大文字小文字は区別されるので注意してください（--colorと--COLORは別の変数になります）。

また、CSS変数には様々な値を設定できます：

  • 色: -main-color: #ff0000;
  • 長さ: -spacing: 1rem;
  • 数値: -columns: 3;
  • 文字列: -font-stack: "Helvetica", sans-serif;
  • 計算式: -calculated-value: calc(100% - 20px);

var()関数の基本構文とフォールバック値の指定テクニック

CSS変数を使用するにはvar()関数を使います。基本的な構文は次の通りです：

property: var(--variable-name);

しかし、もし変数が定義されていない場合や、ブラウザが対応していない場合に備えて、フォールバック（代替）値を指定することもできます：

property: var(--variable-name, fallback-value);

例えば、次のようなコードを考えてみましょう：

.button {
  /* メインカラーが定義されていなければ青色を使用 */
  background-color: var(--main-color, #0066ff);

  /* 複数のフォールバックをネストすることも可能 */
  padding: var(--button-padding, var(--global-padding, 10px));
}

ここでのポイントは、フォールバック値を指定しておくことで、変数がうまく機能しない環境でも適切に表示されるため、互換性を確保できることです。実際、IE11などの一部の古いブラウザではCSS変数がサポートされていないため、このテクニックは2023年時点でもまだ有用です。

CSS変数のスコープ：:root とローカルでの使い分け

CSS変数には「スコープ」という概念があります。これは、変数がどの範囲で有効かを決める重要な特性です。主に2つのレベルで変数を定義することが多いです：

グローバルスコープ（:root）

:rootセレクタで定義された変数はドキュメント全体で利用できるグローバル変数となります：

:root {
  --global-color: #333333;
  --global-font-size: 16px;
}

/* どこでも使える */
p {
  color: var(--global-color);
  font-size: var(--global-font-size);
}

:rootは基本的にHTMLの<html>要素と同じですが、CSSの詳細度（specificity）が高いため、変数定義に適しています。

ローカルスコープ

特定の要素内だけで使用する変数は、その要素のセレクタ内で定義します：

.card {
  --card-padding: 15px;
  padding: var(--card-padding);
}

.card__header {
  /* .cardの子要素なので--card-paddingを参照できる */
  margin-bottom: var(--card-padding);
}

.another-element {
  /* ここでは--card-paddingは使えない！ */
  /* padding: var(--card-padding); */ /* エラーになる */
}

このようにスコープを使い分けることで、名前の衝突を避けたり、コンポーネント固有のスタイルを効率的に管理したりすることができます。特に大規模なプロジェクトでは、BEMなどの命名規則と組み合わせることで、より構造化されたCSSを実現できます。

また、同じ変数名でもスコープによって値を上書きすることができるのも重要な特性です：

:root {
  --spacing: 20px; /* デフォルト値 */
}

.compact-mode {
  --spacing: 10px; /* コンパクトモード用に上書き */
}

.element {
  /* .compact-mode内にあれば10px、そうでなければ20pxが適用される */
  margin: var(--spacing);
}

この特性を活用することで、テーマ切替やモード切替などの実装が驚くほど簡単になります。

現場で使えるCSS変数活用パターン

基本を理解したところで、プロフェッショナルな開発現場でCSS変数がどのように活用されているのか、実践的なパターンとテクニックを見ていきましょう。これらを学ぶことで、あなたのCSSコーディングは一気に現代的で保守性の高いものになります。

カラーテーマ管理（–primary-colorの一括変更）

効率的なカラーテーマ管理はCSS変数の最も一般的で効果的な使用法の一つです。デザインシステムでは通常、5〜10程度の基本カラーを定義し、それらから派生する様々な色合いを作成します。

:root {
  /* プライマリカラーとその派生色 */
  --primary-color: #4a6bff;
  --primary-light: #7a93ff;
  --primary-dark: #2e4ecc;

  /* セカンダリカラーとその派生色 */
  --secondary-color: #ff9a3d;
  --secondary-light: #ffb978;
  --secondary-dark: #e67d1e;

  /* アクセントカラー */
  --accent-color: #ff4a4a;

  /* ニュートラルカラー */
  --text-color: #333333;
  --text-light: #666666;
  --text-lightest: #999999;
  --background-color: #ffffff;
  --background-alt: #f5f5f5;
}

これらの変数を使うことで、サイト全体の配色を数秒で変更できるようになります。例えば、クライアントが「青系から緑系に変えたい」というリクエストをしても、--primary-colorの値を#4a6bffから#4abf66に変更するだけでOKです。

実際のプロジェクトでは、これらの色は単独ではなく、目的に応じて意味を持った名前の変数に割り当てられることが多いです：

:root {
  /* 基本カラー定義 */
  --blue-500: #4a6bff;
  --orange-500: #ff9a3d;
  --red-500: #ff4a4a;

  /* 意味を持った名前での再定義 */
  --color-primary: var(--blue-500);
  --color-secondary: var(--orange-500);
  --color-error: var(--red-500);

  /* UI要素ごとの色定義 */
  --button-bg: var(--color-primary);
  --button-text: white;
  --alert-error-bg: var(--color-error);
}

このような階層的な定義により、テーマ変更が一層簡単になります。例えば企業の合併でブランドカラーが変わった場合、--blue-500ではなく--color-primaryの値を変更するだけで済みます。

メディアクエリ連動のレスポンシブ変数定義

CSS変数はメディアクエリと組み合わせることで、レスポンシブデザインをより効率的に実装できます。従来のCSSでは、メディアクエリ内で各プロパティを繰り返し記述する必要がありましたが、CSS変数を使えば変数の再定義だけでOKです。

:root {
  /* デフォルト値（モバイルファースト） */
  --container-padding: 1rem;
  --font-size-heading: 1.5rem;
  --grid-columns: 1;
  --card-width: 100%;
}

/* タブレット向け */
@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
    --font-size-heading: 2rem;
    --grid-columns: 2;
    --card-width: calc(50% - 1rem);
  }
}

/* デスクトップ向け */
@media (min-width: 1024px) {
  :root {
    --container-padding: 3rem;
    --font-size-heading: 2.5rem;
    --grid-columns: 3;
    --card-width: calc(33.333% - 1rem);
  }
}

/* 実際のスタイルはシンプルに記述できる */
.container {
  padding: var(--container-padding);
}

h1 {
  font-size: var(--font-size-heading);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

.card {
  width: var(--card-width);
}

この方法を使うと、レスポンシブデザインのコードが約40%削減され、見通しも格段に良くなります。特に複雑なレイアウトを持つサイトでは、メディアクエリの中身がシンプルになるため、バグの発生率も下がります。

ダークモード実装のための変数上書き手法

ダークモードは現代のWebサイトやアプリでは必須の機能となりつつあります。CSS変数を使えば、複雑なダークモード実装が驚くほど簡単になります。

:root {
  /* ライトモード（デフォルト）の変数 */
  --bg-color: #ffffff;
  --text-color: #333333;
  --border-color: #dddddd;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

/* ダークモード用の変数上書き */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #f1f1f1;
    --border-color: #444444;
    --shadow-color: rgba(255, 255, 255, 0.1);
  }
}

/* JavaScriptでのダークモード切替にも対応 */
.dark-theme {
  --bg-color: #121212;
  --text-color: #f1f1f1;
  --border-color: #444444;
  --shadow-color: rgba(255, 255, 255, 0.1);
}

/* 実際のスタイル適用 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.card {
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 4px var(--shadow-color);
}

ユーザーのシステム設定に応じたprefers-color-schemeメディアクエリと、JavaScript制御のクラスベースの切替を併用することで、ダークモードの柔軟な実装が可能になります。従来のやり方では数百行必要だったダークモード実装が、この方法なら数十行で済むことも珍しくありません。

calc()関数と組み合わせた動的サイズ計算

CSS変数はcalc()関数と組み合わせることで、動的なサイズ計算が可能になります。例えば、基準となるサイズを決めておき、そこから様々な要素サイズを計算するアプローチが効果的です。

:root {
  /* 基準値 */
  --base-size: 16px;
  --base-spacing: 1rem;

  /* 計算された値 */
  --spacing-sm: calc(var(--base-spacing) * 0.5);  /* 0.5rem */
  --spacing-md: var(--base-spacing);               /* 1rem */
  --spacing-lg: calc(var(--base-spacing) * 2);     /* 2rem */
  --spacing-xl: calc(var(--base-spacing) * 4);     /* 4rem */

  /* フォントサイズ */
  --text-xs: calc(var(--base-size) * 0.75);  /* 12px */
  --text-sm: calc(var(--base-size) * 0.875); /* 14px */
  --text-md: var(--base-size);               /* 16px */
  --text-lg: calc(var(--base-size) * 1.25);  /* 20px */
  --text-xl: calc(var(--base-size) * 1.5);   /* 24px */
}

/* 適用例 */
.button {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--text-sm);
  margin-bottom: var(--spacing-md);
}

.card {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

h1 {
  font-size: var(--text-xl);
  margin-bottom: var(--spacing-md);
}

このアプローチの利点は、基準となる値（--base-sizeや--base-spacing）を変更するだけで、サイト全体のサイズ感を一括調整できることです。例えば、小さめの画面では基準サイズを小さくし、大きな画面では大きくすることで、より適切なレスポンシブデザインが実現できます。

アニメーション制御用のタイミング変数設定

アニメーションのタイミングやイージングを一元管理することで、サイト全体で一貫したモーション体験を提供できます。

:root {
  /* アニメーションのタイミング */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;

  /* イージング関数 */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ボタンのホバーエフェクト */
.button {
  background-color: var(--primary-color);
  transition: background-color var(--transition-fast) var(--ease-default),
              transform var(--transition-fast) var(--ease-out);
}

.button:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
}

/* カードのホバーエフェクト */
.card {
  transition: box-shadow var(--transition-normal) var(--ease-default);
}

.card:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* ページ遷移アニメーション */
.page-transition {
  opacity: 0;
  transition: opacity var(--transition-slow) var(--ease-in);
}

.page-transition.active {
  opacity: 1;
}

こうしたアプローチにより、サイト全体のアニメーションが一貫性を持ち、スムーズな体験を実現できます。また、クライアントから「アニメーションをもう少し速くしてほしい」といった要望があっても、--transition-normalの値を調整するだけで全体に反映できます。

コンポーネント固有のスタイルトークン管理

大規模なプロジェクトやコンポーネントベースの開発においては、コンポーネント固有の変数を定義することが有効です。

/* グローバル変数 */
:root {
  --color-primary: #4a6bff;
  --spacing-unit: 8px;
  --border-radius: 4px;
}

/* ボタンコンポーネント */
.button {
  /* コンポーネント固有の変数 */
  --button-bg: var(--color-primary);
  --button-padding-y: calc(var(--spacing-unit) * 1.5);
  --button-padding-x: calc(var(--spacing-unit) * 3);
  --button-radius: var(--border-radius);

  /* 変数の適用 */
  background-color: var(--button-bg);
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-radius);
}

/* バリエーション */
.button--large {
  --button-padding-y: calc(var(--spacing-unit) * 2);
  --button-padding-x: calc(var(--spacing-unit) * 4);
}

.button--rounded {
  --button-radius: 9999px; /* 完全な丸角 */
}

.button--danger {
  --button-bg: #e53935; /* 赤色系 */
}

このように、コンポーネントのスコープ内で変数を定義することで、同じコンポーネントの異なるバリエーションを効率的に作成できます。また、メンテナンス性も大幅に向上します。

Tailwind CSSとの併用で拡張するデザインシステム

最近人気のTailwind CSSのようなユーティリティファーストのフレームワークとCSS変数を組み合わせることで、より強力なデザインシステムを構築できます。

/* Tailwind CSSのデフォルト設定を拡張するカスタム変数 */
:root {
  /* ブランドカラーをCSS変数として定義 */
  --brand-blue: #1e40af;
  --brand-gold: #f59e0b;

  /* Tailwindのconfigと同期させる */
  --color-primary: var(--brand-blue);
  --color-secondary: var(--brand-gold);
}

/* Tailwindのユーティリティクラスを拡張 */
.text-brand-primary {
  color: var(--color-primary);
}

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

/* カスタムコンポーネント */
.custom-card {
  @apply p-4 rounded shadow;
  border-color: var(--color-primary);
}

このアプローチでは、Tailwind CSSの高い開発効率と、CSS変数のダイナミックな特性を組み合わせることができます。特に、Tailwindでは難しい動的なスタイル変更（テーマ切替など）をCSS変数で補完できるため、両者の強みを生かしたデザインシステムが実現可能です。

実際、多くの企業では次のような構成でデザインシステムを構築しています：

  1. デザイントークン（色、サイズ、余白など）をCSS変数として定義
  2. Tailwind CSSの設定ファイルでそれらの変数を参照
  3. 一般的なUIはTailwindクラスで実装
  4. 動的な変更が必要な部分にCSS変数を活用

このように、CSS変数は単体で使うだけでなく、既存のCSSフレームワークやツールと組み合わせることで、より効率的なフロントエンド開発を実現できるのです。

CSS変数応用テクニック

CSS変数の基本と実践的な活用パターンを理解したところで、さらに一歩進んだ応用テクニックを見ていきましょう。これらのテクニックを使いこなせば、あなたのCSSスキルは確実にレベルアップし、より効率的で柔軟性の高いスタイリングが可能になります。

JavaScript連携（getComputedStyle()による値取得）

CSS変数の強力な特性の一つは、JavaScriptとの双方向の連携が可能なことです。これまでは、JavaScriptからCSS変数を設定する方法を見てきましたが、逆にCSS変数の値をJavaScriptで取得することもできます。

// CSS変数の値を取得する
function getCSSVariable(variableName) {
  // ルート要素のスタイルを取得
  const styles = getComputedStyle(document.documentElement);
  // 変数の値を返す
  return styles.getPropertyValue(variableName).trim();
}

// 使用例
const primaryColor = getCSSVariable('--primary-color');
console.log(`現在のプライマリカラーは ${primaryColor} です`);

// 特定の要素に定義されたローカル変数を取得
const button = document.querySelector('.button');
const buttonStyles = getComputedStyle(button);
const buttonPadding = buttonStyles.getPropertyValue('--button-padding').trim();

この技術を活用することで、例えば次のようなインタラクティブな機能を実装できます：

  1. ユーザー設定の保存と復元：ユーザーが選択したテーマカラーをローカルストレージに保存し、次回訪問時に復元
// ユーザーがカラーピッカーで色を選択したとき
colorPicker.addEventListener('change', (e) => {
  const selectedColor = e.target.value;

  // CSS変数を更新
  document.documentElement.style.setProperty('--primary-color', selectedColor);

  // 選択をローカルストレージに保存
  localStorage.setItem('userPrimaryColor', selectedColor);
});

// ページ読み込み時に保存された設定を復元
document.addEventListener('DOMContentLoaded', () => {
  const savedColor = localStorage.getItem('userPrimaryColor');
  if (savedColor) {
    document.documentElement.style.setProperty('--primary-color', savedColor);
    colorPicker.value = savedColor; // カラーピッカーも更新
  }
});
  1. CSS変数を使った動的なアニメーション：スクロール位置などのユーザーインタラクションに基づいて変数を更新
// スクロール位置に応じて背景色を変化させる
window.addEventListener('scroll', () => {
  // スクロール位置を0〜1の範囲に正規化
  const scrollRatio = window.scrollY / (document.body.scrollHeight - window.innerHeight);

  // HSLカラーの色相角度（0〜360）に変換
  const hue = Math.round(scrollRatio * 360);

  // CSS変数を更新
  document.documentElement.style.setProperty('--scroll-color', `hsl(${hue}, 80%, 60%)`);
});

この技術を使うと、CSSだけでは実現できない複雑なインタラクティブ要素が作れます。例えば、ユーザーの操作に応じてグラデーションやアニメーションの速度を変更したり、スクロール位置に基づいて背景色を徐々に変化させたりするなど、動的な視覚効果を簡単に実装できます。

Sass変数との比較と併用時のベストプラクティス

多くの開発者が「CSS変数が使えるなら、Sass変数はもう不要？」と疑問に思うかもしれません。実際には、両者には異なる長所と短所があり、状況に応じて使い分けたり併用したりするのがベストプラクティスです。

Sass変数とCSS変数の主な違い

特性Sass変数CSS変数
処理タイミングコンパイル時（静的）ランタイム（動的）
JavaScript連携不可可能
ブラウザサポートすべて（コンパイル済CSS）IE11以降（~98%）
スコープファイル/モジュール単位CSSセレクタ単位
演算機能高機能（関数、ミックスイン）限定的（calc()のみ）

これらの違いを踏まえ、以下のようなベストプラクティスが確立されています：

1. ビルド時に確定する値はSass変数を使う

グリッドのカラム数やブレイクポイントなど、ビルド時に確定し実行時に変更されない値はSass変数が適しています。

// Sass変数（コンパイル時に解決）
$grid-columns: 12;
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1200px
);

// ミックスインなどの高度な機能で活用
@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

.container {
  display: grid;
  grid-template-columns: repeat($grid-columns, 1fr);

  @include respond-to(md) {
    max-width: map-get($breakpoints, md);
  }
}
2. 実行時に変更する可能性がある値はCSS変数を使う

テーマカラーやユーザー設定に関わる値など、ランタイムで変更される可能性がある値にはCSS変数が適しています。

:root {
  // CSS変数（実行時に変更可能）
  --primary-color: #3366ff;
  --text-color: #333333;
}

// テーマ変更
.dark-theme {
  --primary-color: #5e82f7;
  --text-color: #ffffff;
}
3. CSS変数とSass変数の効果的な併用

両者を組み合わせることで、より強力で柔軟なシステムを構築できます：

// ①Sass変数でベース値を管理
$color-blue-500: #3366ff;
$color-blue-700: #1a46cc;
$font-size-base: 16px;

// ②Sass変数からCSS変数を生成
:root {
  --primary-color: #{$color-blue-500};
  --primary-color-dark: #{$color-blue-700};
  --font-size-base: #{$font-size-base};
  --line-height-base: 1.5;

  // ③Sass演算を使って派生値を計算
  --font-size-large: #{$font-size-base * 1.25};
  --font-size-small: #{$font-size-base * 0.875};
  --spacing-unit: #{$font-size-base / 4};
}

// ④実際のスタイルでCSS変数を使用
body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

この方法では、Sassの強力な計算機能と、CSS変数のランタイム変更機能の両方を活かせます。大規模プロジェクトでは、設計段階でどの値をSass変数で管理し、どの値をCSS変数として公開するかを検討することが重要です。

多くの成功しているデザインシステムでは、「デザイントークン」と呼ばれる基本的な値（色やサイズなど）をSass変数で定義し、それらをCSS変数に変換して提供する二層構造を採用しています。これにより、Sassの強力な機能を活用しつつ、最終的にはCSS変数の柔軟性を享受できます。

変数の命名規則と可読性を高めるコツ

適切な命名規則を採用することで、コードの可読性と保守性が大幅に向上します。CSS変数の命名は、単なる記述上の問題ではなく、設計の問題でもあります。

基本的な命名パターン

一般的に採用されている命名パターンには以下のようなものがあります：

  1. カテゴリ-要素-特性-状態
--color-button-background-hover: #4a7aff;
--spacing-card-padding-compact: 0.5rem;
--animation-fade-duration-slow: 500ms;
  1. BEMライクな命名
--button__background--primary: #3366ff;
--card__padding--large: 2rem;
--text__color--muted: #666666;
  1. 目的ベースの命名
--btn-primary-bg: #3366ff;
--heading-font-size: 2rem;
--sidebar-width: 280px;

どのパターンを選ぶにしても、一貫性を保つことが最も重要です。

可読性を高めるための実践的なコツ

1. 意味のある階層構造を作る

関連する変数をグループ化し、接頭辞でまとめることで、変数の役割と関係性が明確になります。

:root {
  /* カラー */
  --color-primary: #3366ff;
  --color-primary-light: #5e82f7;
  --color-primary-dark: #1a46cc;

  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-lighter: #999999;

  /* スペーシング */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;

  /* フォント */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
}

実際のプロジェクトでは、接頭辞を決める際に「何が変更されるのか」を考慮すると良いでしょう。例えば、テーマ変更時に色だけが変わるなら、色関連の変数には全て--color-接頭辞をつけることで、変更箇所が明確になります。

2. 抽象化レベルを一貫させる

同じレベルの変数は同じ抽象度を持つべきです。例えば：

/* 良い例：同じ抽象度 */
--color-primary: #3366ff;
--color-secondary: #ff9a3d;
--color-accent: #ff4a4a;

/* 悪い例：抽象度が混在 */
--blue: #3366ff;      /* 具体的な色名 */
--brand-color: #ff9a3d; /* 役割を示す名前 */
--danger: #ff4a4a;    /* 意味を示す名前 */
3. 命名の粒度を適切に保つ

変数の命名は具体的すぎても抽象的すぎても問題です。適切な粒度を見つけることが重要です。

/* 具体的すぎる例 */
--button-primary-background-color-hover-desktop: #4a7aff;

/* 抽象的すぎる例 */
--color1: #3366ff;
--space: 1rem;

/* 適切な粒度の例 */
--btn-primary-hover-bg: #4a7aff;
--spacing-md: 1rem;
4. コメントとドキュメントを活用する

複雑なシステムでは、変数の意図や使用方法をコメントで説明することが有効です。

:root {
  /*
   * プライマリカラー
   * 主にCTAボタンや重要な見出しに使用
   * アクセシビリティ要件：背景色として使用する場合は白テキストとのコントラスト比が4.5:1以上
   */
  --color-primary: #3366ff;

  /*
   * ベースとなるスペーシング単位
   * この値の倍数でレイアウトの間隔を設定することで一貫性を保つ
   */
  --spacing-unit: 0.25rem;
}

大規模プロジェクトでは、CSS変数のドキュメントを別途作成し、デザインシステムの一部として管理することも検討すべきでしょう。

実際のプロジェクトでの命名戦略

実際のプロジェクトでは、次のような段階的なアプローチが効果的です：

  1. 基本トークン：生の値（色のHEX値など） --blue-500: #3366ff; --blue-700: #1a46cc; --gray-300: #d1d5db;
  2. セマンティックトークン：意味を持つ名前（用途を示す） --color-primary: var(--blue-500); --color-primary-dark: var(--blue-700); --color-border: var(--gray-300);
  3. コンポーネントトークン：特定のコンポーネントに関連する変数 --btn-bg: var(--color-primary); --btn-hover-bg: var(--color-primary-dark); --card-border: var(--color-border);

この階層構造により、例えばブランドカラーが青から緑に変わった場合、--blue-500の値を変更するのではなく、--color-primaryの参照先を--green-500に変更するだけで対応できます。

CSS変数の命名は一見些細なことに思えるかもしれませんが、大規模なプロジェクトやチーム開発では、適切な命名規則が生産性と保守性を大きく左右します。実際、多くのデザインシステムでは、変数命名のガイドラインが詳細に定められており、新しい変数を追加する際のレビュープロセスも確立されています。

CSS変数を使いこなすということは、単に構文を理解するだけでなく、こうした命名やシステム設計の考え方を身につけることも意味します。適切に設計されたCSS変数システムは、コードの量を減らすだけでなく、開発チーム全体の効率と一貫性を高めるための強力なツールとなるのです。

まとめ：CSS変数の基本から応用まで

ここまでCSS変数（カスタムプロパティ）について様々な角度から解説してきました。いかがでしたか？最初は少し難しく感じるかもしれませんが、一度使い始めると「これまでどうやって生きてきたんだろう」と思うほど便利なテクニックです。

CSS変数を使うことで、コードの重複を減らし、メンテナンス性を高め、さらには動的なスタイル変更も簡単に実装できるようになります。特に大規模なプロジェクトやチーム開発では、その効果は絶大です。

CSS変数を使う上での重要ポイント

  • 基本的な構文を覚えよう：-変数名: 値;で定義し、var(--変数名)で使用します
  • スコープを意識しよう：:rootで定義すればグローバルに、特定の要素内で定義すればローカルに使えます
  • フォールバック値を活用しよう：var(--変数名, デフォルト値)で安全に変数を使えます
  • 命名規則は一貫性を持たせよう：-カテゴリ-要素-特性のような規則を決めておくと管理しやすくなります
  • JavaScriptと連携させよう：動的なテーマ切替やインタラクションの実装に役立ちます

CSS変数は単なる値の置き換えツールではなく、デザインシステムの基盤となる重要な技術です。カラーテーマの管理やレスポンシブデザイン、ダークモード実装など、現代のウェブ開発で求められる様々な要件に柔軟に対応できます。

もちろん、CSS変数にも限界はあります。複雑な計算や条件分岐には不向きですし、IE11などの古いブラウザではサポートされていません。そのため、プロジェクトの要件に応じて、Sassなどのプリプロセッサと併用するのが現実的なアプローチでしょう。

CSS変数は決して難しい技術ではありません。「変数」という名前に惑わされず、「再利用可能な値のプレースホルダー」くらいの気持ちで気軽に使ってみましょう。きっとCSSの書き方が変わるはずです。さあ、モダンなCSS開発の世界へ一歩踏み出しましょう！

flexbox使用の要素が折り返さない！？解決への鍵はflex-basisの値だった
Webデザインで「要素を横並びにしたいのに、勝手に折り返される…」そんな経験はありませんか？flex-wrap: nowrap;を指定しているのに思ったように動作しない原因は、親要素のサイズ、CSSリセット、ブラウザの互換性など、さまざまな要因が考えられます。この記事では、Flexboxで要素を折り返さないための具体的...
watashi.xyz
2022.06.08
タイトルとURLをコピーしました