CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

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