Zenn
🎨

CSSで変数を定義して、楽にスタイリングしよう！

2024/06/17に公開
CSS
HTML
Sass
Web
tech

繰り返し使うプロパティは一箇所に

背景や文字の色など、繰り返し使うプロパティは、全て書いていると不都合があります。
もしそれを変更するとなった場合、対応する箇所全てを変更しなくてはなりません。
それを解決するために、:root擬似クラス(ルート要素=HTML要素)に対して変数を定義することができます。これを一度定義しておくと、背景や文字の色を変更する際、この変数自体を変えればいいというわけです！

style.css
:root {
    --bg-color: white;
    --font-color: black;
}

一部のスコープで変数を定義する

大規模なWeb開発では、:root要素に全てのカスタムプロパティを定義してしまっては煩雑になります。そこで、限定された要素でのみ使うカスタムプロパティを定義することが可能です。

まず、.boxというクラスの要素でカスタムプロパティを定義します。

style.css
.box {
    --background-color: beige;
    --font-color: gray;
}

子孫要素に継承されるため、子孫要素ではそのまま呼び出すことができます。

style.css
.box > .box__item {
    background-color: var(--background-color);
    color: var(--font-color);
}

変数名の注意事項

  • 大文字と小文字は区別されます。
  • --で始めます。
  • カスタムプロパティは継承されます。

呼び出し方

var()というCSS関数を用いて呼び出すことができます。

style.css
.box {
    background-color: var(--background-color);
    color: var(--font-color);
}

設定言語によって変える

style.css
:root:lang(ja) {
    --click-here: 'ここをクリック';
}

:root:lang(en) {
    --click-here: 'click here';

:root:lang(es) {
    --click-here: 'haz clic aquí';
}

ダーク/ライトテーマで切り替える

CSS変数呼び出しの注意事項

  • 不正な変数がプロパティ値として呼び出された場合は、その値は無効となり、親要素から継承された値か初期値かどちらかに置き換えられます。

カスタムプロパティを突き詰めるとCSSライブラリを作ることができる

以下のようなCSSライブラリ(CSSフレームワーク)は、裏でCSSファイルが動いています。それらは大抵、カスタムプロパティの集合です。
皆さんも、ぜひ自分のお気に入りのデザインをカスタムプロパティの集合ファイルにして、使いまわしてみてはいかがでしょうか？
https://bulma.io/

Discussion