CSS変数-var()関数
CSS変数
このvar()
関数は、CSS変数の値を挿入するために使用されます。
CSS変数はDOMにアクセスできます。つまり、ローカルまたはグローバルスコープで変数を作成し、JavaScriptで変数を変更し、メディアクエリに基づいて変数を変更できます。
CSS変数を使用する良い方法は、デザインの色に関してです。同じ色を何度もコピーして貼り付ける代わりに、変数に配置することができます。
伝統的な方法
次の例は、スタイルシートでいくつかの色を定義する従来の方法を示しています(特定の要素ごとに使用する色を定義することにより)。
例
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color:
#1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px
solid #1e90ff;
padding: 5px;
}
var()関数の構文
このvar()
関数は、CSS変数の値を挿入するために使用されます。
関数の構文は次のvar()
とおりです。
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) |
注:変数名は2つのダッシュ(-)で始まる必要があり、大文字と小文字が区別されます。
var()のしくみ
まず第一に、CSS変数はグローバルスコープまたはローカルスコープを持つことができます。
グローバル変数はドキュメント全体からアクセス/使用できますが、ローカル変数は宣言されているセレクター内でのみ使用できます。
グローバルスコープで変数を作成するには、:root
セレクター内で宣言します。セレクターはドキュメントの:root
ルート要素と一致します。
ローカルスコープで変数を作成するには、それを使用するセレクター内で変数を宣言します。
次の例は上記の例と同じですが、ここではvar()
関数を使用します。
まず、2つのグローバル変数(--blueと--white)を宣言します。次に、この
var()
関数を使用して、変数の値をスタイルシートの後半に挿入します。
例
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
var()を使用する利点は次のとおりです。
- コードを読みやすくします(より理解しやすくなります)
- 色の値を変更するのがはるかに簡単になります
青と白の色をより柔らかい青と白に変更するには、2つの変数値を変更する必要があります。
例
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
ブラウザのサポート
表の数字は、この
var()
機能を完全にサポートする最初のブラウザバージョンを示しています。
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var()関数
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |