CSS変数のスコープの範囲を紹介します。
クラス内で宣言した変数のスコープ
下記のHTMLファイルとCSSファイルを準備します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ScopeVariable.css" />
</head>
<body>
<div class="Frame1">1</div>
<hr />
<div class="Frame2">2</div>
</body>
</html>
.Frame1 {
--frame-width: 120px;
--frame-height: 40px;
width: var(--frame-width);
height: var(--frame-height);
border: 1px solid #ff6a00;
}
.Frame2 {
width: var(--frame-width);
height: var(--frame-height);
border: 1px solid #0094ff;
}
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
青枠のFrame2クラスの枠の幅と高さはFrame1の変数の値を設定していますが、大きさが反映できていません。
Frame1クラスで宣言した変数をFrame2で参照しても値が参照できていないことがわかります。
クラス内で宣言した変数は他のクラスからはアクセスできません。
bodyタグクラス内で宣言した変数のスコープ
先ほどのCSSを下記に変更します。変数の宣言部分を body タグのクラス設定に移動しています。
body {
--frame-width: 120px;
--frame-height: 40px;
}
.Frame1 {
width: var(--frame-width);
height: var(--frame-height);
border: 1px solid #ff6a00;
}
.Frame2 {
width: var(--frame-width);
height: var(--frame-height);
border: 1px solid #0094ff;
}
表示結果
変更したコードをWebブラウザで表示します。下図の画面が表示されます。
Frame1とFrame2の枠の幅と高さが同じサイズになっています。変数の値を参照できていることが確認できました。
一般的な共通変数の記述
共通の変数は
:root 疑似クラスに記述するスタイルが一般的な記述方法として紹介されています。
:root {
--frame-width: 120px;
--frame-height: 40px;
}
.Frame1 {
width: var(--frame-width);
height: var(--frame-height);
border: 1px solid #ff6a00;
}
.Frame2 {
width: var(--frame-width);
height: var(--frame-height);
border: 1px solid #0094ff;
}
表示結果
上記のCSSに変更したページを表示すると下図の画面が表示されます。
:troot疑似クラスに定義した変数はCSS内で参照できます。
親要素で変数が宣言されている場合のスコープ
親の要素のクラスで変数が宣言されている場合にどのような動作になるか確認します。
下記のコードを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ScopeVariableChild.css" />
</head>
<body>
<div class="ContentsFrame">
<div class="Frame1">1</div>
<hr />
<div class="Frame2">2</div>
</div>
<hr />
<div class="Frame3">3</div>
</body>
</html>
.ContentsFrame {
--frame-width: 120px;
--frame-height: 40px;
}
.Frame1 {
width: var(--frame-width);
height: var(--frame-height);
border: 1px solid #ff6a00;
}
.Frame2 {
width: var(--frame-width);
height: var(--frame-height);
border: 1px solid #0094ff;
}
.Frame3 {
width: var(--frame-width);
height: var(--frame-height);
border: 1px solid #288700;
}
解説
ContentsFrame クラスに変数を宣言しています。Frame1 と Frame2 クラスのdiv枠は ContentFrameクラスの子要素として記述していますが、
Frame3 クラスの div枠は ContentsFrameクラスの子要素にはなっていない状態です。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ContentFrameクラスの子要素になっている、Frame1, Frame2 クラスでは変数の値が参照できています。
一方 ContentFrameクラスの子要素ではない Frame3クラスでは変数の値が参照できない動作が確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2021-06-03
作成日: 2021-01-19
