CSS変数を使うときのルールは？

CSS変数（カスタムプロパティ）は、再利用可能な値を格納し、サイト全体で一貫したスタイルを維持するために非常に便利な機能です。しかし、変数の命名規則や使い方を間違えると、予期せぬ動作を引き起こしたり、コードの可読性を下げたりする可能性があります。この記事では、CSS変数を正しく効果的に使用するためのルールとベストプラクティスを紹介します。

1. 変数の定義

CSSでは、変数名の冒頭に接頭辞としてハイフン2つ（--）が必須です。これは、CSSの標準プロパティと区別するためです。


  :root {
    --main-color: #f06;
    --font-size-large: 24px;
  }

CSSの変数名は、ハイフン2つから始めるのがルールと覚えておきましょう。

変数名に使用できる文字

変数名には、以下の文字を使用できます。

半角の英数字（a-z, A-Z, 0-9）
アンダースコア（_）
ハイフン（-）

アルファベットは大文字も小文字も使えますが、別のものとして認識されます。例えば、--main-color と --Main-Color は別の変数として扱われます。

変数のスコープ

CSS変数は、定義された場所によってスコープ（有効範囲）が異なります。`:root`セレクタ内で定義された変数はグローバル変数となり、ドキュメント全体で参照できます。特定の要素内で定義された変数は、その要素とその子孫要素内でのみ参照できます。

2. 変数の使用

定義した変数は、`var()`関数を使って参照します。`var()`関数の構文は以下の通りです。

  var(変数名, デフォルト値)

変数名：参照したい変数の名前を指定します。
デフォルト値（オプション）：変数が定義されていない場合に使用する値を指定します。

例：


  h1 {
    color: var(--main-color);
    font-size: var(--font-size-large);
  }

  p {
    color: var(--text-color, #333); /* --text-color が定義されていなければ #333 を使用する */
  }

3. 変数の使いどころ

CSS変数は、以下のような場面で特に役立ちます。

用途	説明
テーマカラーの定義	サイトのメインカラー、サブカラーなどを変数として定義することで、テーマカラーを簡単に変更できます。
フォントサイズや行間の設定	フォントサイズや行間を変数として定義することで、サイト全体のテキストスタイルを統一できます。
メディアクエリでの値の変更	画面サイズに応じて色やフォントサイズを変更する場合、メディアクエリ内で変数の値を変更できます。

参考資料

よくある質問

Q1: CSS変数とSass変数の違いは何ですか？

A1: CSS変数はブラウザでネイティブにサポートされていますが、Sass変数はプリプロセッサによってCSSに変換される必要があります。CSS変数は実行時に値を変更できますが、Sass変数はコンパイル時に値が決定されます。

Q2: CSS変数はJavaScriptから操作できますか？

A2: はい、`setProperty()`メソッドを使ってCSS変数の値を取得・設定できます。

  // 要素のスタイルを取得
  const element = document.querySelector('body');
  const style = getComputedStyle(element);

  // 変数の値を取得
  const mainColor = style.getPropertyValue('--main-color');

  // 変数の値を設定
  element.style.setProperty('--main-color', '#007bff');

Q3: CSS変数はすべてのブラウザでサポートされていますか？

A3: 主要なブラウザでは広くサポートされていますが、古いブラウザではサポートされていない場合があります。Can I Useなどのウェブサイトで、最新のブラウザサポート状況を確認してください。

その他の参考記事:jquery css 複数