【シーエスエスカスタムプロパティ】
CSSカスタムプロパティ とは？
最終更新:
💡 CSSに「変数」の力を与えた、スタイル管理の革命児
CSS内で変数のように値を定義・再利用できる仕組み。--で始まる名前で宣言し、var()関数で参照する。テーマカラーの一括変更やコンポーネント単位のスタイル管理に活躍する。
📌 このページのポイント
- --primary-colorのように宣言し、var(--primary-color)で値を参照する
- :rootの値は広く継承され、要素ごとの宣言で上書きできる
- JavaScriptやクラスの切り替えで、参照する部品の色などを変更できる
- Sassの変数と違いCSSに残り、ブラウザでカスケードや継承に従う
ひよこ CSSに変数なんてあるの？
ペンギン先生 --main-color: #4A90D9;と宣言し、color: var(--main-color);で参照するよ。同じ値を使う箇所をまとめて変更できる。ただし、その要素に適用される値を参照するので、別の場所で上書きされた値まで必ず同じになるわけではないんだ。
ひよこ Sassの変数と何が違うの？
ペンギン先生 ひよこ ダークモードの切り替えに使える？
ペンギン先生 使えるよ。たとえば:rootで--bg-color: #fff;を定義し、body.dark-themeで--bg-color: #222;と上書きする。背景にはbackground-color: var(--bg-color);を使い、bodyのクラスを切り替えるんだ。固定色や別の上書きがある箇所は自動で同じテーマにはならないよ。
ひよこ var()にフォールバックを書けるって本当？
ペンギン先生 var(--accent, orange)なら、--accentが未定義などで使えない場合にorangeを使えるよ。ただし--accent: 16px;をcolorに使うような、参照後に用途に合わない値までorangeへ直してくれるわけではない。カスタムプロパティ自体が使えるかと、参照先に合う値かは別なんだ。
ひよこ @propertyを使うと速くなるの？
ペンギン先生 @propertyは型や初期値、継承するかどうかを登録する仕組みだよ。型に沿ったアニメーションにも使えるけれど、付ければ必ず速くなるわけではない。値を変える範囲や頻度、影響するスタイルによって処理量は変わるので、必要なら実際の画面で測るんだ。
📖 おまけ：英語の意味
「CSS Custom Properties」 ＝ CSSの独自定義プロパティ
💬 CSS変数とも呼ばれるよ。--で宣言する値にもCSSのカスケードと継承が働くので、要素ごとに値を変えながら再利用できるんだ