今までCSS内で変数を使うにはSassとかの専用のツールが必要でした。
でもこれはツールを使っているので元のCSSで直接変数を使っている訳じゃありません。
ですが新しいCSSではなんと特別なツールを使わなくても変数使用が可能になっています。
これはカスタムプロパティという仕様で完璧ではないもののブラウザでも対応してきています。
という訳でそのカスタムプロパティの使い方と対応状況について解説
カスタムプロパティとは
カスタムプロパティはCSS内で特定の値を表すことができるプロパティのことです。
あくまで純粋な変数ではなく、プロパティの一種だという点に注意
そしてこの宣言方法ですが、次のようにプロパティ名の前にハイフン２つ -- をつけて宣言可能
|
1 2 3 4 |
body{ /** カスタムプロパティの宣言例 */ --my-base-color: lightblue; } |
上の例だと --my-base-color というのがカスタムプロパティになります。
そしてカスタムプロパティを宣言するときは必ずセレクタ {} の中に書くようにしてください。
そのセレクタに当てはまる要素とその下にある全ての要素で変数が参照できます。
間違ってもCSSの一番外つまり {} で囲まれていない部分に変数宣言するのはNGです。
そしてこのカスタムプロパティを参照するにはvar関数を使います。
例えば次のようにカスタムプロパティ名を渡せばOK
|
1 2 3 4 5 6 7 |
body{ --my-base-color: lightblue; } h2{ background: var(--my-base-color); } |
このコードのように var(--my-base-color) のようにすれば変数の内容が展開されます。
この場合だとh2要素のbackgroundプロパティには lightblue が設定されることになりますね。
ちなみに上で書いたようにh2要素はbody要素の下にあるので変数の範囲内です。
ということで以上がカスタムプロパティの一番基本的な使い方
次は細かなルールとか制限について少し説明していきます。
カスタムプロパティの範囲（スコープ ）について
どんなプログラミング言語でも変数にはスコープというものがあります。
これはプログラミング内で変数が使える範囲のこと
それと同じようにカスタムプロパティにもそれが使える範囲が存在しています。
例えば body というセレクタ内(つまりbody要素)で宣言された変数のスコープは次の通り
- body要素そのもの
- body要素の下にある全ての要素
CSSでの変数はどこでも使えるわけではなく、それが宣言されたセレクタ要素の中のみで使用可能です。
具体例を出すなら次のようにカスタムプロパティを使ったCSSを書いたとしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.me{ /** カスタムプロパティ宣言 */ --my-bg-color: skyblue: background: var(--my-bg-color); } .parent{ background: var(--my-bg-color); } .child{ background: var(--my-bg-color); } |
--my-bg-color というカスタムプロパティに skyblue という値を設定しています。
そしてこのCSSを次のようなHTMLに適用したとしましょう。
|
1 2 3 4 5 |
<div class="parent"> <div class="me"> <div class="child">CHILD</div> </div> </div> |
この時、背景色が変わるのは me と child というクラス名を持つ要素です。
me の下に含まれていない parent の背景色は変わりません。
このようにカスタムプロパティにはスコープがあることを意識しましょう。
CSSのみしか使ったことがない人は感覚が分かりずらいかもしれませんが、使っていく内に慣れます。
var関数で代替値を指定するには
カスタムプロパティの値を参照するvar関数
これの使い方は基本的に１つ引数(関数が取る値や変数のこと)を渡すだけです。
|
1 |
background: var(--my-bg-color); |
しかしもしカスタムプロパティが見つからなかった場合、代わりの値を指定することもできます。
その指定の仕方は１つめの引数の後に代替値をコンマ区切りで書けばOK
例えば次は --my-bg-color がないときの代替値として skyblue を指定している例
|
1 2 3 |
div.me{ background: var(--my-bg-color, skyblue); } |
上のコードで --my-bg-color が定義されていなければ div.me の背景色が skyblue になります。
カスタムプロパティがないときの保険としてこういう書き方は役に立ちますね、
ちなみにvar関数は入れ子にすることも可能です。
例えば次は代替値にさらにカスタムプロパティを指定しているコード例
|
1 2 3 |
div.me{ background: var(--hoge), var(--piyo), skyblue); } |
上のコードの場合もし --hoge が宣言されていなければ --piyo の値が、
もし --piyo も宣言されてなければ skyblue という値が背景に設定されます。
あまり使うことはなさそうですが、覚えておくとどこかで役立ちそうです。
カスタムプロパティのブラウザ対応状況
便利なカスタムプロパティですが注意しないといけないことが１つ・・・
それはブラウザごとのカスタムプロパティの対応状況です。
今使っているブラウザだと動くけど実はそれ以外は未対応だった・・・
なんてことになると最悪なので新しいものを使う前は必ず調べておきましょう。
でもだからと言ってブラウザごとに対応状況を個別に調べていくのは大変すぎます。
そこで便利なのが Can I use.. というHTML5やCSS3のブラウザの対応状況を一覧表示してくれるサイト
カスタムプロパティについては次のページから対応状況が見れます。
これを見る限りは Chrome とか FireFoxとかの主要ブラウザはほとんど対応してますね。
ただ Internet Explorer(IE) と Opera Mini では残念ながら未対応な模様
でも今さらIE対応する必要性もないのでカスタムプロパティを使っても問題なさそうです。
ここまでのまとめ
カスタムプロパティについてもう一度まとめ
- 宣言するにはプロパティ前にハイフン２つを付ける
1--my-base-color: lightblue;
上の例だと --my-base-color というプロパティに lightblue という値がセットされる - 変数の値を参照するにはvar関数を使う
1background: var(--my-base-color);
上の例だと --my-base-color の値が展開されて背景色に設定される - カスタムプロパティにはスコープがある
使用できるのは宣言したセレクタに該当する要素とその下にある要素だけなことに注意！
- ブラウザの対応状況はほとんど問題なし
IE と Opera Mini には対応していないが、それ以外でも問題なく使用可能
細かなルールとかは使っていけば自然と分かってくるのでそこは慣れですね。
ということでCSSで変数が使えるカスタムプロパティについてでした。
一切ツールも必要ないのでWeb開発のサクサク進めるのに役立ちそうです。
ではでは($・・)/~~~
