CSS

CSS Variables （CSS カスタムプロパティ） の使い方

CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様 「CSS Variables」 について、最新仕様に基づいた解説します。

公開日
更新日

CSS Variables とは、CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様です。定義した変数は他のスタイル宣言内で参照することができることで、より効率的な CSS の記述が可能になります。

以前、この Blog でも書きましたが、CSS Variables は Firefox 29 が実装し、機能としては使用できるようになっていましたが、正式リリース版ではデフォルトでは無効だったのと、カスタムプロパティの接頭辞が var- という古い仕様での実装でした。

近日正式版がリリースされる予定の Firefox 31 で最新の仕様 （接頭辞が -- に変更） を基に実装、デフォルト有効になる予定とのことですので、ちょうどいい機会と言うことで CSS Variables の使い方について最新の仕様に基づく解説を書いてみようと思います。

CSS calc() 関数が入れ子にできるようになると、カスタムプロパティと組み合わせてもっと便利になるよという記事を書いています。詳しくは 「Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に」 をご覧ください。

本解説の基となる仕様書は下記です。

カスタムプロパティの基本的な使い方

まず最初に最も基本的な使い方についてですが、

  • -- から始まるカスタムプロパティを定義する
  • 変数を使いたい場所で var(--hoge) という形で呼び出す

という形になります。具体的なソースコードを示すと、まず下記のようにカスタムプロパティを定義し、

  1. :root {
  2.   --bg-color: red;
  3.   --border-radius: 4px;
  4.   --box-padding: 10px 20px;
  5.   --txt-color: white;
  6. }

下記のように、任意の場所で呼び出します。

  1. .btn {
  2.   display: inline-block;
  3.   background-color: var(--bg-color);
  4.   border-radius: var(--border-radius);
  5.   color: var(--txt-color);
  6.   padding: var(--box-padding);
  7. }

実際のスタイルとしては下記のように解釈されます。

  1. .btn {
  2.   display: inline-block;
  3.   background-color: red;
  4.   border-radius: 4px;
  5.   color: white;
  6.   padding: 10px 20px;
  7. }

上の例だと普通に書いた方が早くね？ 的な感じになってしまっていますが、うまく利用すれば効率的なスタイルシートの記述が可能になります。この辺は、Sass など、CSS プリプロセッサをすでに利用している人ならイメージしやすいかと思いますが。

ちなみに、カスタムプロパティの大文字小文字は区別されます。つまり、--foo と --FOO はそれぞれ個別に認識されます。

カスタムプロパティ記述の特徴

Sass などで使用する変数とカスタムプロパティが少し異なるのが、その解釈のされ方です。

例えば下記のような HTML があったとして、

  1. <div class="one">
  2.   <p>one</p>
  3.   <div class="two">
  4.     <p>two</p>
  5.     <div class="three">
  6.       <p>three</p>
  7.     </div>
  8.     <div class="four">
  9.       <p>four</p>
  10.     </div>
  11.   </div>
  12. </div>

これに対して下記のカスタムプロパティとスタイルを指定したとします。

  1. /* カスタムプロパティの定義 */
  2. :root {
  3.   --text-color: red;
  4. }
  5. .two {
  6.   --text-color: green;
  7. }
  8. .three {
  9.   --text-color: blue;
  10. }
  11. /* 変数を呼び出し */
  12. div {
  13.   color: var(--text-color);
  14. }

CSS Variables の適用例

これが実際に反映されると画像のようになります。

ちなみに、.two {--text-color: green;} などと書いているので、.two に対してスタイルが宣言されているように思われますが、この記述の段階では .two に対してカスタムプロパティの定義がされている状態となります。

実際にはそのあとの div {color: var(--text-color);} の指定によって変数が呼び出されてはじめてスタイルとして宣言されますが、この指定の仕方の場合、もし同一の HTML 文書内に、ul.two があったとしても、color: green; は適用されません。

わかりやすいように CSS に直してみると下記のような感じに解釈されるということですね。

  1. div {
  2.   color: red;
  3. }
  4. div.two {
  5.   color: green;
  6. }
  7. div.three {
  8.   color: blue;
  9. }

同じスタイル宣言を Sass で書く場合は下記のような感じになりますので （普通はこんな面倒な書き方しないと思いますが）、同じ変数を使うと言っても、記述の仕方はかなり異なることがわかると思います。

  1. $color: red;
  2. div {
  3.   color: $color;
  4.   $color: green;
  5.   &.two {
  6.     color: $color;
  7.   }
  8.   $color: blue;
  9.   &.three {
  10.     color: blue;
  11.   }
  12. }

Sass の場合はネストすることで変数の参照範囲 （スコープ） が変化しますし、同じ変数に異なる値が定義された場合にどの値が優先されるかが決まりますが、カスタムプロパティの場合は、カスタムプロパティの定義や変数呼び出し時に指定したセレクタと、継承によって値がセットされることになります。

ユニバーサルセレクタによる変数の呼び出し

仕様書内のサンプルソースにもありますが、下記のように、ユニバーサルセレクタで変数を呼び出す指定もできます。

  1. /* カスタムプロパティの定義 */
  2. :root {
  3.   --color: blue;
  4. }
  5. div {
  6.   --color: green;
  7. }
  8. #alert {
  9.   --color: red;
  10. }
  11. /* 変数を呼び出し */
  12. * {
  13.   color: var(--color);
  14. }

下記のような HTML に上記が適用されると、それぞれ内容に書いてあるとおりのテキストカラーになります。

  1. <p>blue</p>
  2. <div>green</div>
  3. <div id="alert">
  4.   <p>red</p>
  5. </div>

CSS 的には下記のように解釈されているということになります。

  1. * {
  2.   color: blue;
  3. }
  4. div {
  5.   color: green;
  6. }
  7. #alert {
  8.   color: red;
  9. }

カスタムプロパティ内で変数の使用

下記のように、カスタムプロパティ内で、別のカスタムプロパティで定義された変数を呼び出すということも可能です。

  1. :root {
  2.   --main-color: #c06;
  3.   --accent-background: linear-gradient(to top, var(--main-color), white);
  4. }

もちろん、変数は別々に使用することができます。

  1. .sample {
  2.   color: var(--main-color);
  3. }
  4. .box {
  5.   background: var(--accent-background);
  6. }

変数が定義されていない場合のフォールバック

例えば、下記のような HTML と CSS があったとします。

  1. <div>
  2.   <h1>header</h1>
  3.   <p>text</p>
  4. </div>
  1. :root {
  2.   --text-color: red;
  3. }
  4. div {
  5.   color: var(--text-color);
  6. }
  7. h1 {
  8.   color: var(--header-color);
  9. }

この場合、--header-color というカスタムプロパティは定義されていませんので、h1 要素に対する color プロパティの指定はされていないことになりますから、div 要素からの継承でテキストカラーは color: red; が適用されてしまいますね。

そこで、下記のようにカスタムプロパティが定義されていなかった場合に適用される指定を追加しておきます。これによって、h1 要素には color: blue; が適用されることになります。

  1. :root {
  2.   --text-color: red;
  3. }
  4. div {
  5.   color: var(--text-color);
  6. }
  7. h1 {
  8.   color: var(--header-color, blue);
  9. }

カスタムプロパティが使用できる場所

カスタムプロパティは通常のプロパティと同じ扱いになりますので、プロパティが書ける場所であれば同様に使用できます。例えば、CSS Animations における、@keyframes 内で参照したり、@media 内で使ったりもできます。

  1. :root {
  2.   --animation-duration: 3s;
  3.   --animation-name: slidein;
  4.   --animation-from: 100%;
  5.   --animation-to: 0%;
  6. }
  7. h1 {
  8.   animation-duration: var(--animation-duration);
  9.   animation-name: var(--animation-name);
  10. }
  11. @keyframes slidein {
  12.   from {
  13.     margin-left: var(--animation-from);
  14.     width: 300%
  15.   }
  16.   to {
  17.     margin-left: var(--animation-to);
  18.     width: 100%;
  19.   }
  20. }

正しくないカスタムプロパティの記述例

下記のような記述は不正な記述になり、正常に動作しませんので注意しましょう。

プロパティ名を変数にしてしまう

下記のサンプルでは、margin-top が変数として定義されていますが、変数として定義できるのは値だけですので、このような記述は不正です。

  1. /* 間違った記述例 */
  2. .sample {
  3.   --side: margin-top;
  4.   var(--side): 20px;
  5. }

単位なしの値を変数にしてしまう

下記のサンプルではカスタムプロパティで単位なしの数値のみ変数として定義し、呼び出す際に単位を指定しています。一見便利そうですが、このような記述は正しく動作しませんので注意が必要です。

  1. /* 間違った記述例 */
  2. .sample {
  3.   --gap: 20;
  4.   margin-top: var(--gap)px;
  5. }

ただし、calc() を使用することで、単位なしの値を変数として定義して使用することは可能です。下記のような記述なら、正しく動作します。

  1. /* この記述は正しい記述例 */
  2. :root {
  3.   --size: 20;
  4. }
  5. .sample {
  6.   font-size: calc(var(--gap) * 2px);
  7. }

CSS としては下記のように解釈されます。

  1. .sample {
  2.   font-size: 40px;
  3. }

calc() を使用した記述例を次にもう少し詳しく説明していきましょう。

もう少し高度なカスタムプロパティの使用方法

さらに高度な使い方を見てみましょう。上で少し触れた、calc() を使用する方法です。

calc() との組み合わせ

CSS 内で計算式の記述を可能にする calc() を使用して、より高度な変数の定義をすることも可能です。ちなみに、calc() については相当昔 （4年も前だった･･･） ですが、下記の記事で書いていますので詳しくはそちらをご覧ください。

例えば、下記のように変数を定義できます。

  1. :root {
  2.   --wrap-box-width: 500px;
  3.   --box-margin: 10px;
  4.   --box-padding: 5px;
  5.   --box-column: 4;
  6.   --box-width: calc(var(--wrap-box-width) / var(--box-column) - var(--box-margin) * 2 - var(--box-padding) * 2);
  7. }
  8. .sample {
  9.   width: var(--wrap-box-width);
  10. }
  11. .sample div {
  12.   float: left;
  13.   margin: var(--box-margin);
  14.   padding: var(--box-padding);
  15.   width: var(--box-width);
  16. }

これを下記の HTML に適用すれば、4カラム横並びの div 要素が作れます。変数に定義する数値を変えることで、カラム数を簡単に変更することができますね。

  1. <div class="sample">
  2.   <div>1</div>
  3.   <div>2</div>
  4.   <div>3</div>
  5.   <div>4</div>
  6.   <div>5</div>
  7.   <div>6</div>
  8.   <div>7</div>
  9. </div>

不正な値が変数として呼び出されたときの挙動

最後に、変数で呼び出された値が、そのプロパティでは使用できない値など、不正な値が呼び出されたときの挙動について見てみます。例えば下記のような CSS があったとしますね。

  1. :root {
  2.   --not-a-color: 20px;
  3. }
  4. p {
  5.   background-color: red;
  6. }
  7. p {
  8.   background-color: var(--not-a-color);
  9. }

この指定だと、background-color プロパティの値として 20px がセットされてしまいますので、スタイルの指定としては不正な指定となります。

では、この間違った指定は無視されて、background-color: red; の方が適用されるのかというと、そうはなりません。

あるプロパティに本来指定できない、不正な値がセットされた場合はそのプロパティの初期値が適用されます。つまり、background-color プロパティの場合は transparent が指定されたことになるということですね。

もちろん、下記のような順番で記述されていれば、カスケード処理に則って、p 要素には background-color: red; が適用されます。これは var(--not-a-color) が正しい値だったとしてもです。この辺は CSS の基本なのでわざわざ書く必要もないかもしれませんが。

  1. :root {
  2.   --not-a-color: 20px;
  3. }
  4. p {
  5.   background-color: var(--not-a-color);
  6. }
  7. p {
  8.   background-color: red;
  9. }

さて、いかがだったでしょうか。まだ Firefox しか実装例がないので広く使える状態にはなっていない CSS Variables （CSS カスタムプロパティ） ですが、使い方によってはかなり便利な機能だということがおわかりいただけたんではないかと。

ちなみに、最新仕様に則った CSS Variables がデフォルトで有効になる予定の Firefox 31 は、7月22日に正式リリースされる予定です。

関連エントリー

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか？

Ofuse でおやつをおごる

関連記事