Frontend Academy · レッスン

CSS カスタムプロパティ：宣言と更新

:root で -- を使って変数を宣言し、var() で参照し、JavaScript で動的に更新してテーマをリアルタイムに変更します。

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

まとめ: 宣言とスコープ

CSS カスタムプロパティは、どの要素でも--接頭辞を付けて宣言できます。:rootで宣言したプロパティはグローバルに使用できます。子要素は値を継承し、必要に応じてローカルで上書きできます。

:root {
  --spacing: 8px;
  --color-brand: #6366f1;
}
.card {
  --spacing: 12px; /* local override for .card and its children */
  padding: var(--spacing);
}

JavaScript によるライブ更新

カスタムプロパティは実行時に変更できます。element.style.setProperty('--name', value)を使うと要素単位で上書きできます。または、:root のグローバル変数を更新すると、すべての利用箇所に即座に反映されます。

// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');

// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');

JavaScript でカスタムプロパティの値を読み取る

getComputedStyle(element).getPropertyValue('--name').trim()でカスタムプロパティを読み取れます。これはインライン値だけでなく、計算後（カスケード後）の値を読み取ります。

const brandColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-brand')
  .trim();
console.log(brandColor); // '#6366f1'

カスタムプロパティのアニメーション

カスタムプロパティは、@property（Houdini）を使ってブラウザーに補間させたり、calc()と組み合わせてトランジションで使用したりできます。@property がない場合、ブラウザーは変数の値同士を直接トランジションできません。

@property — 登録済みカスタムプロパティ

CSS の@propertyルールは、型、初期値、継承ルールを指定してカスタムプロパティを登録します。登録済みのプロパティは、標準機能としてトランジションやアニメーションに対応できます。

@property --brand-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

.card {
  opacity: var(--brand-opacity);
  transition: --brand-opacity 0.3s;
}
.card:hover {
  --brand-opacity: 0.7;
}

カスタムプロパティによるトークンシステム

デザイントークンのモデルでは、すべてのデザイン上の決定をカスタムプロパティとして保存します。コンポーネントはハードコードされた値ではなく、トークンを使用します。トークンを変更すると、すべての箇所に反映されます。

:root {
  /* Colour tokens */
  --token-primary: #6366f1;
  --token-primary-hover: #4f46e5;
  --token-surface: #ffffff;
  --token-on-surface: #1f2937;

  /* Spacing tokens */
  --token-space-sm: 8px;
  --token-space-md: 16px;
  --token-space-lg: 24px;
}

レスポンシブなカスタムプロパティ

メディアクエリの中でカスタムプロパティの値を変更します。変数を使用するコンポーネントは自動的に適応するため、ブレークポイントごとにコンポーネントのルールを個別に記述するよりもすっきりします。

:root {
  --container-max: 640px;
  --font-size-base: 15px;
}
@media (min-width: 1024px) {
  :root {
    --container-max: 1280px;
    --font-size-base: 16px;
  }
}

calc() でカスタムプロパティを使う

派生する余白やサイズには、calc() の中で変数を使用します。これにより、数学的に一貫したまとまりのあるサイズシステムを作成できます。

:root { --base-space: 8px; }
.m-2 { margin: calc(var(--base-space) * 2); }  /* 16px */
.m-4 { margin: calc(var(--base-space) * 4); }  /* 32px */
.p-3 { padding: calc(var(--base-space) * 3); } /* 24px */

複数ブランドのテーマ設定

data 属性ごとに異なるテーマトークンを設定します。1つのページで、複数のテーマによるホワイトラベル化に対応できます。

[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }

SVG でカスタムプロパティを使う

fill や stroke などの SVG 属性では、カスタムプロパティを使用できます。これにより、SVG のマークアップを変更せずに CSS からアイコンのテーマを設定できます。

/* CSS */
:root { --icon-fill: #6366f1; }

/* SVG inline or referenced */
svg { fill: var(--icon-fill); }

カスタムプロパティのデバッグ

Chrome DevTools で要素を選択し、Computed タブでカスタムプロパティの値を確認します。Styles ペインには各変数がどこで宣言されているかが表示されます。Inherited セクションには親要素から継承された変数が表示されます。

クイックチェック

要素上の CSS カスタムプロパティを更新する JavaScript メソッドはどれですか？

まとめ: CSS カスタムプロパティの詳細

グローバルに使う場合は :root で宣言し、ローカルスコープでは子孫要素で上書きします。JavaScript からは style.setProperty で更新し、getComputedStyle で読み取ります。@property によって標準のトランジションが可能になります。単一の信頼できる情報源としてデザイントークンに使用します。レスポンシブなトークンにはメディアクエリで上書きします。

よくある質問

「CSS カスタムプロパティ：宣言と更新」レッスンは無料ですか？

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

「CSS カスタムプロパティ：宣言と更新」で何を学びますか？

:root で -- を使って変数を宣言し、var() で参照し、JavaScript で動的に更新してテーマをリアルタイムに変更します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「CSS カスタムプロパティ：宣言と更新」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Frontend Academyに戻る