CSS変数を使ってみよう
CSS変数を使うことで、修正・変更対応がしやすくなり、その際のミスも劇的に減らすことができます。
管理もしやすくなるので、CSS変数の使い方を学んでいきましょう。
CSS変数ってどう便利なの？
まずは、CSS変数が使えるとなぜ便利なのかを理解しておきましょう。 たとえば、次のようなケースを考えてみます。h2 {
color: skyblue;
border-left: 3px solid skyblue;
border-bottom: 3px solid skyblue;
}
.btn {
background-color: skyblue;
color: white;
}h2 {
color: red;
border-left: 3px solid red;
border-bottom: 3px solid red;
}
.btn {
background-color: red;
color: white;
}- すべてを変更する手間がかかる
- 変更し忘れが発生する可能性が高くなる
CSS変数の使い方
まずは、スタイルシート内にCSS変数を使うと宣言することで使えるようになります。- 先頭に「–」をつける
- 変数名をつける
h2 {
--main-color: skyblue;
color: var(--main-color);
border-left: 3px solid var(--main-color);
border-bottom: 3px solid var(--main-color);
}
.btn {
background-color: var(--main-color);
color: white;
}CSS変数を継承してみよう
CSS変数は、継承されるプロパティです。 上の例では、要素内で宣言をしています。 CSS変数は要素内で宣言したら、その要素内でしか使えません。 他の要素にも適用したい場合、CSS変数を共通の親要素で指定します。 そうすることで、CSS変数を継承することができるようになります。 そのためCSS変数の宣言は、body要素や、html要素を示すroot擬似クラス「:root」で行うといいでしょう。:root {
--my-color: blue;
}デフォルト値を設定する
CSS変数に値が設定されていない場合のデフォルト値を設定することができます。var(--my-color, skyblue);CSS変数の注意点
CSS変数の利用には、いつくか注意点があるので、把握しておきましょう。大文字と小文字を区別する
CSS変数は、大文字と小文字を区別するので、宣言した通りに書くようにしましょう。対応ブラウザを確認する必要がある
CSS変数は、比較的新しい技術のため、canIuse.comというWebサイトでブラウザの対応状況を確認することが必要です。 サイト内で「CSS Variables」で検索するといいでしょう。プロパティ自体には使えない
CSS変数は、プロパティの値に使えるもので、プロパティ自体には使えません。 つまり、下のようなプロパティ自体をCSS変数に指定することはできないということです。:root {
--main-color: green;
--font-color: blue;
}
h2 {
/*このvar(--font-color)のようにプロパティ自体には使えない。*/
var(--font-color): var(--main-color);
}後から単位を追加できない
CSS変数では、後から単位を追加することができません。 つまり、下のようなことはできません。:root {
--main-color: green;
--main-margin-bottom: 40;
}
h2 {
background-color: var(--main-color);
/*このvar(--main-margin-bottom)pxのように後から単位はつけられない。*/
margin-bottom: var(--main-margin-bottom)px;
}:root {
--main-color: green;
--main-margin-bottom: 40px;
}
h2 {
background-color: var(--main-color);
margin-bottom: var(--main-margin-bottom);
}:root {
--main-color: green;
--main-margin-bottom: 40;
}
h2 {
background-color: var(--main-color);
margin-bottom: calc(var(--main-margin-bottom)) * 1px;
}