カスタムプロパティの宣言
カスタムプロパティを利用するには、まずカスタムプロパティの名称を宣言しておく必要があります。
宣言する場所（要素）はどこでも良いのですが、一般的にはルート要素（:root = HTML要素）で宣言し、Webページ全体で使えるカスタムプロパティとして管理したい場合が多いかと思います。
カスタムプロパティを宣言するには、–を二つ並べて、その後に任意のカスタムプロパティ名を記載します。
下はルート要素でカスタムプロパティ（accent-color)を宣言している例です。
CSS
:root {
--accent_color: red;
}
なお、カスタムプロパティの名称は、下の例のように数字から始めることも可能（有効）です。
CSS
:root {
--1st_accent_color: red; /* 有効な変数名です */
}
一方、要素のid属性やclass属性の値（名称）の場合、数字から始まるものは無効となるので、idやclass指定の法則とごっちゃにならないように注意が必要かもしれません。
また、大文字と小文字は区別される＝違うものとして扱われる点も合わせて確認しておきましょう。
CSS
:root {
--accent_color: red;
--Accent_color: green;
/* ↑別のものとして扱われます */
}
カスタムプロパティの名称については、基本的にclassの命名規則とルールを合わせておくと良いかと思います。
POINT!
- ・カスタムプロパティを利用するには、まずカスタムプロパティを宣言しておく必要がある！
- ・カスタムプロパティはルート要素で宣言し、広い範囲で利用できるようにしておくと便利！
- ・数字から始まるカスタムプロパティ名も有効だが、基本的にclassの命名規則に従うと良い！
カスタムプロパティの適用
カスタムプロパティを宣言したら、次は宣言したカスタムプロパティを要素に適用させてみましょう。
ここでは例として、前章で紹介した次のカスタムプロパティを使用します。
CSS
:root {
--accent_color: red;
}
そして、このカスタムプロパティをh2要素の文字色として適用させたい場合、次のように記載します。
CSS
h2 {
color: var(--accent_color);
}
このように、カスタムプロパティ名をvar( )で囲むことで、宣言しておいたカスタムプロパティの値を利用できます。
ちなみに、varは variable（変数）の略で、CSSのカスタムプロパティだけでなくプログラミング言語で変数を宣言する際にもよく使われています。
カスタムプロパティはCSS変数と呼ばれることもあり、CSSで変数を扱えるようにしたものであることを考えると、var( )という書き方になっているのも納得ですし、覚えやすいかと思います。
このようにCSSで変数を利用できるのはとても便利なのですが、一つデメリットもあります。
それは、変数名の入力ミスなどにより、var( )で参照した変数を参照できない（＝カスタムプロパティを利用できない）可能性が残る…というものです。
プログラミング言語(JavaScript等）であれば、存在しない変数やアクセスできない変数を参照しようとしたらエラーになるので、変数名を間違って入力してしまっているミスに気づきやすい仕組みになっているのですが、CSSでは変数名を間違っても特にエラーが起こるわけではありません。
そのため、カスタムプロパティ（CSS変数名）のミスがあっても開発者はそれに気づきにくく、何らかのカバー（保険）が必要となるケースも多いと言えます。
そこで、カスタムプロパティとは別に、カスタムプロパティが利用できない場合（保険）のための値を設定できるようになっています。
保険のための値（代替値）を指定するには、以下のようにvar( )の第二引数で値を指定します。
CSS
h2 {
color: var(--accent_colo, pink);
/* accent_colo は入力ミス。この場合は pink が適用される */
}
第二引数（代替値）には、別のカスタムプロパティを指定しておくことも可能です。
その場合は、第二引数をさらにvar( )で囲んでカスタムプロパティを記述する必要があります。
CSS
:root {
--accent_color: red;
--sub_color: green;
}
h2 {
color: var(--accent_colo, var(--sub_color));
/* accent_colo は入力ミス。この場合は sub_color が適用される */
}
さらに、二つ目のカスタムプロパティ（sub_color）を参照するためのvar( )の第二引数に代替値を指定しておくことで、sub_colorさえも適用できなかった場合の代替値を指定しておくことも可能です。
CSS
:root {
--accent_color: red;
--sub_color: green;
}
h2 {
color: var(--accent_colo, var(--sub_colo, blue));
/* accent_colo と sub_colo は入力ミス。この場合は blue が適用される */
}
ですが、ここまでやってしまうとコードの見通しが非常に悪くなり、適用されるスタイルを把握するだけでも時間がかかってしまいます。
基本的には、代替値は一つにして、シンプルにまとめておいた方が良いかと思います。
POINT!
- ・var( )でカスタムプロパティを参照することで、カスタムプロパティの値を利用可能！
- ・カスタムプロパティ（CSS変数）の入力ミスがあっても特にエラーは起こらないので注意！
- ・カスタムプロパティが適用されない場合に備えて、代替値を指定しておくこともできる！
カスタムプロパティを利用した応用
カスタムプロパティはフォントサイズやテーマのカラーなど、Webページ全体で統一したい値を指定しておく使い方がメジャーですが、ここではちょっと変わった活用方法をご紹介したいと思います。
下のように、枠線がついた四角形を２つ重ねて、枠線を二重にしたデザインって割とよく見かけますよね。
そして、この二重の枠線の角を丸めたい場合、外側と内側の角を同じだけ丸めてしまうとバランスが崩れてしまいます（内側が丸まりすぎてしまう）
↓下は外側・内側ともに角丸（border-radius）を10pxにしたものですが、内側の角が丸まりすぎているように見えますね。
というわけで、こういう場合は外側のborder-radiusと内側のborder-radiusを別々に指定する必要があるのですが、今回はカスタムプロパティを使って外側のborder-raduisの値に合わせて内側のborder-radiusも自動的に調整されるようにしてみたいと思います。
その前に、現時点でのHTML/CSSを確認してみましょう。
現在はこのようなコードになっています。
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
width: 250px;
height: 150px;
display: grid;
grid-template: 1fr / 1fr;
place-items: center;
border: solid 2px black;
border-radius: 10px;
}
.child {
width: calc(100% - 15px);
height: calc(100% - 15px);
border: solid 2px black;
border-radius: 10px;
}
現時点では、外側（親要素）に border-radius: 10px; と指定していますが、border-radiusの値にカスタムプロパティを指定するために、カスタムプロパティを宣言します。
そして、border-radiusの値にvar( )を用いて、カスタムプロパティの値が代入されるように書き換えます。
すると、コードは以下のようになります。
CSS
.parent {
--radius_size: 10px;
width: 250px;
height: 150px;
display: grid;
grid-template: 1fr / 1fr;
place-items: center;
border: solid 2px black;
border-radius: var(--radius_size);
}
.child {
省略
}
これまで、カスタムプロパティはroot（html）要素で宣言していましたが、上のように他の要素でも宣言することができます。
次は内側（子要素）のborder-radiusの値にもカスタムプロパティを利用していきますが、その際、calc( )関数を使って、カスタムプロパティの値が変わっても自動的に値が調整されるように指定します。
CSS
.parent {
--radius_size: 10px;
width: 250px;
height: 150px;
display: grid;
grid-template: 1fr / 1fr;
place-items: center;
border: solid 2px black;
border-radius: var(--radius_size);
}
.child {
width: calc(100% - 15px);
height: calc(100% - 15px);
border: solid 2px black;
border-radius: calc(var(--radius_size) / 2);
}
上の例では、内側の角丸のサイズが、外側の角丸のサイズの1/2（半分）になるようにしてみました。角の丸まり具合がちょうど良く感じられますね。
このように、カスタムプロパティ + calc( )関数で調整しておくと、外側の角丸のサイズに合わせて内側の角丸のサイズが自動調整されるので、変更・修正を加えやすくなります。
下は、角丸のサイズ（–radius_size）を10pxから15pxに変更した場合の表示結果です。外側・内側の角丸のバランスが崩れないことが確認できます。
デザインがまだ固まっていないページをコーディングする場合や、メンテナンス性を考えて柔軟に変更を加えられるようにしておきたい場合などに、使えるテクニックかと思います。
POINT!
- ・カスタムプロパティの宣言は、root（html）要素以外でもできる！
- ・calc( )関数と合わせると、カスタムプロパティの値を計算値に利用できる！
- ・calc( )関数とカスタムプロパティを組み合わせて、修正に強いWebページを作ってみよう！
覚えておきたい注意点
便利なカスタムプロパティですが、仕様がやや特殊なところもあり、注意が必要なポイントもあるので確認していきましょう！
無効な値を指定した場合の挙動
たとえば文字色を指定するcolorプロパティに、16pxといった大きさを表す指定は無効になりますよね。
例として、下のような指定を行った場合、文字色は有効な値（red）の方が適用されるので、文字色は赤くなります
CSS
p {
color: red; /* こっちが適用される */
}
p {
color: 16px;
}
一方、カスタムプロパティで無効な値を指定すると、先に指定された有効な値ではなく、デフォルト値になってしまいます。
CSS
p {
color: red; /* 適用されない */
}
p {
--miss_color: 16px; /* 無効な値 */
color: var(--miss_color);
}
表示結果
文字色は黒くなります（デフォルト値がblackのため）
このように、ややイメージしづらい（予想に反する）表示結果となってしまいます。
あまりこのような状況になることはないと思いますが、一応頭の片隅に入れておくと良いかもしれません。
カスタムプロパティを利用できる範囲
宣言したカスタムプロパティを利用できるのは、宣言された要素とその子孫要素になります。
カスタムプロパティを宣言した要素の親要素では利用不可なので、うっかりミスをしないように気をつけておきましょう！
下は、カスタムプロパティが宣言されている要素の親要素ではカスタムプロパティを利用できないことを示す例です。
HTML
<div class="parent">
<p>親要素</p>
<div class="custom">
<p>カスタムプロパティが宣言された要素</p>
<div class="child">
<p>子要素</p>
</div>
</div>
</div>
CSS
.custom {
--main_color: red;
color: var(--main_color);
}
.parent {
color: var(--main_color); /* 適用されない */
}
.child {
color: var(--main_color);
}
なので、カスタムプロパティを広い範囲で利用したい場合は、やはりroot(html)要素でカスタムプロパティを宣言しておくのがおすすめです。
POINT!
- ・カスタムプロパティの値が無効だった場合はデフォルト値が適用される！
- ・カスタムプロパティを利用できるのは、宣言された要素とその子孫要素！
- ・幅広くカスタムプロパティを利用したい場合は、ルート要素などで宣言しよう！
