CSS基礎 練習問題 46：CSSの機能：変数の定義と利用
CSSで独自に名前を付けたカスタムプロパティ（CSS変数）を定義し、それを別の場所で呼び出して使用したい場合、正しいCSSの書き方はどれか。
- $main-color: red;で定義し、$main-colorの形式で呼び出してそのまま使用する。
- var main-color = red;で定義し、main-colorの形式で呼び出してそのまま使用する。
- @main-color: red;で定義し、@main-colorの形式で呼び出してそのまま使用する。
- --main-color: red;で定義し、var(--main-color)の関数形式で呼び出して使用する。
- *main-color: red;で定義し、val(*main-color)の関数形式で呼び出して使用する。
正解と解説を見る
正解：--main-color: red;で定義し、var(--main-color)の関数形式で呼び出して使用する。
CSS変数（カスタムプロパティ）を定義する際は、プロパティ名の先頭にハイフンを2つ（`--`）付け、呼び出す際は`var()`関数を使用する書き方が正解です。
【正解の理由】
CSSの標準仕様では、カスタムプロパティは`--main-color: red;`のように定義し、値として使う場所で`var(--main-color)`として参照することが定められています。これにより同じ色やサイズを複数箇所で使い回すことができます。
【不正解の理由】
• 「`$main-color: red;`で定義し、`$main-color`の形式で呼び出してそのまま使用する。」という説明は、SassなどのCSSプリプロセッサでの書き方であり、標準のCSSとしては誤り
• 「`var main-color = red;`で定義し、`main-color`の形式で呼び出してそのまま使用する。」という説明は、JavaScript等のプログラミング言語の構文であり、CSSの書き方ではない
• 「`@main-color: red;`で定義し、`@main-color`の形式で呼び出してそのまま使用する。」という説明は、LessなどのCSSプリプロセッサでの書き方であり、標準のCSSとしては誤り
• 「`*main-color: red;`で定義し、`val(*main-color)`の関数形式で呼び出して使用する。」という説明は、実在しない構文であり誤り