このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
カスケード変数のための CSS カスタムプロパティ
カスケード変数のための CSS カスタムプロパティモジュールは、CSS プロパティにカスケード変数の対応を追加し、カスタム変数を定義するためのカスタムプロパティを作成し、カスタムプロパティを他にも CSS プロパティの値として使用することができます。
CSS で作業していると、レイアウトでうまく機能する幅や、カラースキームのための色の組み合わせなど、自分のプロジェクト固有の共通の値を再利用することが多くなります。スタイルシートで繰り返しを管理する方法の 1 つは、値を一度定義し、他の場所で何度も使用することです。カスタムプロパティを使えば、再利用可能なカスタム変数を作成・定義することができ、複雑なルールや繰り返しの多いルールを単純化し、読みやすく保守しやすくすることができます。例えば、--dark-grey-text や--dark-background は、#323831 のような 16 進数の色よりも理解しやすく、使用する文脈もより明白です。
カスタムプロパティの使用例
カスタムプロパティがどのように使用することができるかを確認するには、入力スライダーを左から右に移動してみてください。
<div> <div>--hue</div> <div>--hue + 10</div> <div>--hue + 20</div> <div>--hue + 30</div> <div>--hue + 40</div> <div>--hue + 50</div> <div>--hue + 60</div> <div>--hue + 70</div></div><input type="range" min="0" max="360" value="0" step="0.1" />const hue = document.querySelector("#hue");const updateHue = () => { document.documentElement.style.setProperty("--hue", hue.value);};hue.addEventListener("input", updateHue);.container { display: grid; font-family: sans-serif; color: white; gap: 0.5rem; grid-template-columns: repeat(4, 1fr); margin-bottom: 1rem;}.container div { border-radius: 0.5rem; padding: 1rem;}input { width: 100%; margin: 0;}:root { --hue: 0;}#color-1 { background-color: hsl(var(--hue) 50% 50%);}#color-2 { background-color: hsl(calc(var(--hue) + 10) 50% 50%);}#color-3 { background-color: hsl(calc(var(--hue) + 20) 50% 50%);}#color-4 { background-color: hsl(calc(var(--hue) + 30) 50% 50%);}#color-5 { background-color: hsl(calc(var(--hue) + 40) 50% 50%);}#color-6 { background-color: hsl(calc(var(--hue) + 50) 50% 50%);}#color-7 { background-color: hsl(calc(var(--hue) + 60) 50% 50%);}#color-8 { background-color: hsl(calc(var(--hue) + 70) 50% 50%);}これらの色見本では、background-color はhsl() の<color> 関数を使用して、hsl(var(--hue) 50% 50%) のように設定します。calc(var(--hue) + 10),calc(var(--hue) + 20) などのように、色相 (<hue>) の値を 10 度ずつ増加します。スライダーの値が 0 から 360 まで変化すると、--hueカスタムプロパティ の値がcalc() を使用して更新され、グリッド内の各ボックスの背景色も更新されます。
リファレンス
プロパティ
関数
ガイド
- CSS カスタムプロパティ（変数）の使用
CSS や JavaScript でカスタムプロパティを使用する方法を、未定義値や不正な値の処理、代替値、継承などのヒントを交えて解説します。
- 不正なカスタムプロパティ
カスタムプロパティの値がそのプロパティにとって不正なデータ型であった場合に、ブラウザーがプロパティ値を処理する方法について説明します。
関連概念
- CSS プロパティと値 API モジュール
@propertyアットルールCSS.registerProperty()メソッド
仕様書
| Specification |
|---|
| CSS Custom Properties for Cascading Variables Module Level 1 |
関連情報
- CSS カスケードと継承モジュール
- CSS
env()関数 - CSS
calc()関数 getPropertyValue()メソッド