0Pricing
Frontend Academy · レッスン

テーマ設定のための CSS 変数

-- でカスタムプロパティを宣言し、var() で参照し、ネストしたスコープで上書きして、ライト／ダークテーマの切り替えを実装します。

「テーマ設定のための CSS 変数」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

CSSカスタムプロパティとは

CSSカスタムプロパティ（CSS変数）は、スタイルシート全体で再利用できる値を保存します。--name: valueで宣言し、var(--name)で参照します。Sassなどのプリプロセッサー変数とは異なり動的で、JavaScriptから更新できます。

カスタムプロパティの宣言

:rootにプロパティを宣言すると、グローバルに利用できるようになります。任意の要素に宣言して、その要素のサブツリー内だけに適用することもできます。

:root {
  --color-primary: #3182ce;
  --color-bg: #f7fafc;
  --color-text: #1a202c;
  --spacing-md: 16px;
  --border-radius: 8px;
  --font-sans: 'Inter', system-ui, sans-serif;
}

カスタムプロパティの使用

var(--name)で変数を参照します。2番目の引数としてフォールバック値を指定できます：var(--color-primary, #3182ce)。変数が定義されていない場合は、フォールバック値が使用されます。

.card {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
}

.btn {
  background: var(--color-primary, blue); /* fallback */
}

カスケード：スコープ付き変数

カスタムプロパティはカスケードされ、継承されます。子要素で変数を再定義すると、その要素とすべての子孫要素では、親の値が上書きされます。

:root { --accent: blue; }

.card { color: var(--accent); } /* blue */

.special-section {
  --accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */

CSS変数によるダークモード

最もすっきりしたダークモードのパターンは、明るい配色と暗い配色をCSS変数として定義する方法です。クラスを切り替えるか、prefers-color-schemeメディアクエリを使って切り替えます。個々の色プロパティを上書きする必要はありません。

:root {
  --bg: #ffffff;
  --text: #1a202c;
  --card-bg: #f7fafc;
}

[data-theme='dark'], @media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a202c;
    --text: #f7fafc;
    --card-bg: #2d3748;
  }
}

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

JavaScriptによるダークモードの切り替え

ルート要素のdata属性またはクラスを切り替えるボタンを追加します。残りの処理はCSS変数が担うため、JavaScriptは1行で済み、個々のスタイルを上書きする必要もありません。

const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme');
  document.documentElement.setAttribute(
    'data-theme',
    current === 'dark' ? 'light' : 'dark'
  );
});

JavaScriptによる変数の更新

element.style.setProperty('--name', value)は、インラインでカスタムプロパティを更新します。removePropertyで削除すると、カスケードされた値に戻ります。これにより、動的なテーマやアニメーションする値を実現できます。

// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');

// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
  document.documentElement.style.setProperty('--primary-hue', hue.value);
});

デザイントークンをCSS変数として定義

色のパレット、スペーシングスケール、タイプスケールなど、すべてのデザイン上の決定をCSS変数として定義します。これにより、コンポーネントが参照する単一の信頼できる情報源を作成できます。トークンを変更すると、その変更がすぐにすべての場所へ反映されます。

:root {
  /* Colour scale */
  --blue-50: #ebf8ff;
  --blue-100: #bee3f8;
  --blue-500: #3182ce;
  --blue-900: #1a365d;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
}

calc()での変数の使用

CSS変数はcalc()内でも使用できるため、トークンの値に基づいたレスポンシブな計算が可能になります。

:root { --header-height: 64px; }

.content {
  /* Leave room for fixed header */
  padding-top: calc(var(--header-height) + 24px);
  min-height: calc(100vh - var(--header-height));
}

ブラウザーの対応状況

CSSカスタムプロパティは、すべてのモダンブラウザーでサポートされています（主要ブラウザーでは2016年以降）。この機能のためにプリプロセッサーを使う必要はありません。非常に古いブラウザーへのフォールバックとして、var()の前に静的な値を指定してください。

.btn {
  background: blue;                    /* IE fallback */
  background: var(--color-primary);    /* modern browsers */
}

CSSカスタムプロパティとSass変数の比較

Sass変数は静的な値にコンパイルされます。CSSカスタムプロパティは実行時に存在し、動的に変更でき、DOMを通じてカスケードします。テーマ設定にはCSS変数を、ビルド時の定数にはSass変数を使用してください。

確認問題

JavaScriptからCSSカスタムプロパティを読み取り、更新するにはどうすればよいでしょうか。

まとめ：CSSカスタムプロパティ

グローバルスコープには、:rootで--を付けて宣言します。var()で使用します。スコープを限定した変数は子孫要素へカスケードします。ダークモードでは、メディアクエリまたはdata属性で色のトークンを再定義します。JavaScriptからはstyle.setProperty()で更新します。デザイントークンを変数にすることで、単一の信頼できる情報源になります。

よくある質問

「テーマ設定のための CSS 変数」レッスンは無料ですか？

はい。「テーマ設定のための CSS 変数」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「テーマ設定のための CSS 変数」で何を学びますか？

-- でカスタムプロパティを宣言し、var() で参照し、ネストしたスコープで上書きして、ライト／ダークテーマの切り替えを実装します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「テーマ設定のための CSS 変数」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Flexbox徹底入門: 配置、折り返し、順序
  2. CSS Grid：template-areas・auto-fit・minmax
  3. Flexbox と Grid の組み合わせ
  4. テーマ設定のための CSS 変数
← Frontend Academyに戻る