--変数名 : [値];
CSSで変数を宣言し値の代入、変数の参照をするコードを紹介します。
CSSで枠の幅や線の太さ、色の設定などの値を変数で設定して複数の項目を1か所で設定できるようにしたい場合があります。
この記事ではCSSで変数を利用する方法を紹介します。
CSSの変数の書式は次の通りです。
変数を定義し値を代入する書式です。
--変数名 : [値];
変数の値を参照するには次の書式を利用します。
var(--変数名)
下記のHTMLとCSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleVariable.css" />
</head>
<body>
<div class="Frame1">Frame1</div>
</body>
</html>
.Frame1 {
--size: 120px;
--border-color: #005898;
--border-width: 2px;
width: var(--size);
height: var(--size);
background-color:#E0E0E0;
border: solid var(--border-width) var(--border-color);
}
CSSの下記のコードが変数です。--size --border-color --border-width の3つの変数を宣言しています。
--size: 120px;
--border-color: #005898;
--border-width: 2px;
CSSのプロパティに変数の値を設定しています。width heightプロパティに--size変数の値を設定しています。
border プロパティの線幅を--border-width 線の色を --border-color 変数の値を設定しています。
width: var(--size);
height: var(--size);
background-color:#E0E0E0;
border: solid var(--border-width) var(--border-color);
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。変数に設定したサイズや線の色で枠が描画できていることが確認できます。
先の記述のようにクラスの定義内に変数を記述した場合、その変数は他のクラスから参照できません。
クラス間で参照できるようにするためには、そのクラスを子要素に含む親要素のクラスで変数を宣言するか、
最上位のbodyタグまたは:root 疑似クラスで変数を宣言する必要があります。
CSSでの変数スコープの詳細についてはこちらの記事を参照してください。
今回は:root疑似クラスに変数宣言を記述するコードを紹介します。
下記CSS、HTMLファイルを準備します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="RootVariable.css" />
</head>
<body>
<div class="Container">
<div class="Frame1">Frame1</div>
<div class="Frame2">Frame2</div>
<div class="Frame3">Frame3</div>
<div class="Frame4">Frame4</div>
<div class="Frame5">Frame5</div>
<div class="Frame6">Frame6</div>
</div>
</body>
</html>
:root {
--size: 120px;
--border-color: #005898;
--border-width: 2px;
}
.Container {
display: flex;
justify-content: space-around;
}
.Frame1 {
width: var(--size);
height: var(--size);
border: solid var(--border-width) var(--border-color);
background-color:#A0A0A0;
}
.Frame2 {
width: var(--size);
height: var(--size);
border: solid var(--border-width) var(--border-color);
background-color: #B0B0B0;
}
.Frame3 {
width: var(--size);
height: var(--size);
border: solid var(--border-width) var(--border-color);
background-color: #C0C0C0;
}
.Frame4 {
width: var(--size);
height: var(--size);
border: solid var(--border-width) var(--border-color);
background-color: #D0D0D0;
}
.Frame5 {
width: var(--size);
height: var(--size);
border: solid var(--border-width) var(--border-color);
background-color: #E0E0E0;
}
.Frame6 {
width: var(--size);
height: var(--size);
border: solid var(--border-width) var(--border-color);
background-color: #F0F0F0;
}
:root 疑似クラスで変数の宣言と値の代入をしています。:root疑似クラスはすべての要素の親にあたるクラスのため、CSS内のすべての要素から
変数を参照できる状態になります。
:root {
--size: 120px;
--border-color: #005898;
--border-width: 2px;
}
枠のクラスの設定です。width, height プロパティ border プロパティの線幅と線の色を変数の値で設定しています。
.Frame1 {
width: var(--size);
height: var(--size);
border: solid var(--border-width) var(--border-color);
background-color:#A0A0A0;
}
外側の枠は justify-content: space-around; を指定して中の枠を等間隔に配置する設定にしています。justify-content の設定はこちらの記事を参照して下さい。
.Container {
display: flex;
justify-content: space-around;
}
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
変数に設定したサイズや線の色で枠が描画できていることが確認できます。
6つの枠すべて変数の内容が反映されていることから、どの要素も:root疑似クラスに記述した変数の値を参照できています。
