CSS var()関数
例
まず、「-main-bg-color」という名前のグローバル変数を宣言してから、var()関数を使用して、後でスタイルシートに変数の値を挿入します。
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
var()関数は、CSS変数の値を挿入するために使用されます。
バージョン: | CSS3 |
---|
ブラウザのサポート
表の数字は、この機能を完全にサポートする最初のブラウザバージョンを示しています。
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS構文
var(--name, value)
Value | Description |
---|---|
name | Required. The variable name (must start with two dashes) |
value | Optional. The fallback value (used if the variable is not found) |
その他の例
例
var()関数を使用していくつかのCSS変数値を挿入する別の例:
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
関連ページ
CSSチュートリアル:CSS変数