CSSの変数を使えばテーマカラーの変更も簡単、ではあるけれど

2017年11月1日2017年12月4日WordPress,HTML/CSS,ウェブサイト作成

CSSでは一部に変数（カスタムプロパティ）が使えるようになっています。

CSSに記述するプロパティに具体的な値ではなく変数名を設定しておくことで、変数名と値を宣言した一箇所を変更するだけで一括で色を変えることができます。

:rootや*で変数を宣言したCSSを最初に読み込んでいれば、複数のCSSにまたがっての置換も不要になっちゃいます。

CSSの変数にはほとんどのブラウザが対応していてEdgeも対応済みですが、残念なことにIE11では使えません。

CSS Variables (Custom Properties) | Can I use…

IE11のシェアは高いので、実質的にはまだ使えないです。

このサイトの閲覧者も1割以上がIEユーザーなので、全体に使うのは無理だったりします。CSSの計算calcは使えるのにね。

使い方は簡単なので、問題のないところで試してみるといいかもしれません。

CSSの変数の使い方

変数の定義は「つけたい変数名の前」に"–“をつけて値を設定します。「–変数名:値」の形になります。

--theme-color-1:purple;

これで"theme-color-1″という変数にpurpleが設定されました。

この変数を参照する時は「var(–変数名)」とするだけ。

background:var(--theme-color-1);

<style>.post{--theme-color-1:purple;--theme-color-2:white;}.post .cssvariable{background:var(--theme-color-1);color:var(--theme-color-2);}</style>
<span class="cssvariable">背景が紫、文字が白になれば成功だよ。</span>

これをHTMLにはりつけると。

背景が紫、文字が白になれば成功だよ。

うまくみえるかな？