iPentec.com / Doc / CSS / CSS変数

CSS内での変数の宣言、値の代入、値の参照 - CSS

CSSで変数を宣言し値の代入、変数の参照をするコードを紹介します。

概要

CSSで枠の幅や線の太さ、色の設定などの値を変数で設定して複数の項目を1か所で設定できるようにしたい場合があります。この記事ではCSSで変数を利用する方法を紹介します。

書式

CSSの変数の書式は次の通りです。

変数の定義と値の代入

変数を定義し値を代入する書式です。

--変数名 : [値];

変数の値の参照

変数の値を参照するには次の書式を利用します。

var(--変数名)

実装例

コード

下記のHTMLとCSSファイルを作成します。

SimpleVariable.html

<!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>

SimpleVariable.css

.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ブラウザで表示します。下図のページが表示されます。変数に設定したサイズや線の色で枠が描画できていることが確認できます。

CSSの全体で参照する場合

先の記述のようにクラスの定義内に変数を記述した場合、その変数は他のクラスから参照できません。クラス間で参照できるようにするためには、そのクラスを子要素に含む親要素のクラスで変数を宣言するか、最上位のbodyタグまたは:root 疑似クラスで変数を宣言する必要があります。
CSSでの変数スコープの詳細についてはこちらの記事を参照してください。
今回は:root疑似クラスに変数宣言を記述するコードを紹介します。

コード

下記CSS、HTMLファイルを準備します。

RootVariable.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>

RootVariable.css

: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疑似クラスに記述した変数の値を参照できています。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

CSS内での変数の宣言、値の代入、値の参照 - CSS

概要

書式

変数の定義と値の代入

変数の値の参照

実装例

コード

解説

表示結果

CSSの全体で参照する場合

コード

解説

表示結果

関連するページ