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)
|
値 |
説明 |
|---|---|
| name | 変数名 (--で始まる必要があります ) |
| value | オプション。フォールバック値 (変数が見つからない場合に使用) |
注：変数名は 2 つのダッシュ (--) で始まる必要があり、大文字と小文字が区別されます。
var() の仕組み
まず第一に、CSS 変数はグローバルまたはローカルのスコープを持つことができます。
グローバル変数はドキュメント全体でアクセス/使用できますが、ローカル変数はそれが宣言されているセレクター内でのみ使用できます。
グローバル スコープの変数を作成するには、:rootセレクタ。の:root selector はドキュメントのルート要素に一致します。
ローカルスコープで変数を作成するには、それを使用するセレクター内で宣言します。
次の例は上記の例と同じですが、ここでは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()関数。
|
関数 |
|||||
|---|---|---|---|---|---|
| var（） | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 関数
|
プロパティ |
説明 |
|---|---|
| var() | CSS 変数の値を挿入します |