BOOK Studio947
狩野祐東・狩野さやか著書

CSSで変数を使う var()

  • 2019-12-17

いまでもSassなどを使えばCSSの値を変数として保存しておくことができるが、ネイティブのCSSでもできるよ、という話。ちなみにIE11では動かないけど、そろそろいいよね。それ以外のほとんどのブラウザでは機能する。

CSSではいわゆる「変数」──プロパティの値を保存しておくもの──を、カスタムプロパティと呼んでいる。だが、カスタムプロパティでは長いのと、感覚的に理解しづらいような気がするので、ここでは「変数」という用語をそのまま使うことにしている。

変数を使うには、変数を定義する方法と、定義した変数を使用する方法の2つを知っておく必要がある。

変数(カスタムプロパティ)を定義する

変数は次のようにして定義する。次の例では--main-color変数をルート要素に定義している(つまり、どの要素からも使える変数を定義している)。ここで使用している:root は、ルート要素を指すセレクタ(HTMLの場合は事実上htmlとしても同じ)。


:root {
    --main-color: #403d3d;
}

変数名にはどんなものをつけてもよいが、かならず--で始める。また、大文字小文字が区別されることに注意。--variableと、--VARIABLEは別の変数として扱われる。

変数を使用する

定義した変数を使うときは、var()プロパティファンクションを使用する。例を見たほうが簡単。この場合は、background-colorに、変数--main-colorの値をセットしていることになる。


div.container {
    background-color: var(--main-color);
}

うぉー簡単。でしょ?

ちなみにvar()の正式な書式では、カンマ(,)で区切って変数のデフォルト値(変数が参照できなかったときに使用される値)を定義することができるようになっているのだが、使うのかなあ……


var( 変数名, デフォルト値)

参考:

狩野 祐東

Web/アプリケーションUIデザイナー、エンジニア。執筆家。 アメリカ・サンフランシスコに留学、UIデザイン理論を学ぶ。Webサイトやアプリケーションのデザイン・開発、関連技術書籍の執筆を数多く手がける。株式会社Studio947代表。