コニファ・ロゴ

ツール集:CSSの変数を試してみる(1)(:root 擬似クラスで変数を宣言)

webサイトを構築する際に、数多くの背景色や文字色を使用する場合、一覧表を作ってまとめておかないと、後々どれがどの色なのか混乱したり、RGBや16進表記では直感的に分かなかったりして、作業の手が止まってしまうことが多々あります。そんなとき、分かりやすい名称で変数として宣言しておけば、かなり効率良く使い回すことができます。

使い方:個々のエレメントで変数の宣言も可能ですが、多くのエレメントで使い回す場合は「:root 擬似クラス」による変数宣言が便利です。ただし、CSSの変数はまだ実験段階ですので、ブラウザごとの実装や仕様は定まっていません。このサンプルはFirefoxで動作を確認しています。

CSSソース(1)は、「:root 擬似クラス」により、2種類の背景色と2種類の文字色を宣言しています。CSSソース(2)で各エレメントに背景色や文字色を変数で指定しています。

サンプルのCSSソース(1) :root 擬似クラスによる変数宣言

  :root {
	--main-bg: #cfc;
	--main-bg2: #ccf;
	--main-color: #f00;
	--main-color2: #37d;
	}

サンプルのCSSソース(2) 各エレメント

 /* エレメント1 */
.ele {
	background-color: var(--main-bg);  /* 背景 薄い緑 */
	color: var(--main-color);  /* 文字 赤 */
	}
  /* エレメント2 */
.ele2 {
	background-color: var(--main-bg2);  /* 背景 薄い紫 */
	color: var(--main-color2);  /* 文字 青 */
	}
  /* エレメント3 */
.ele3 {
	background-color: var(--main-bg2);  /* 背景 薄い紫 */
	color: var(--main-color);  /* 文字 赤 */
	}
  /* エレメント4 */
.ele4 {
	background-color: var(--main-bg);  /* 背景 薄い緑 */
	color: var(--main-color2);  /* 文字 青 */
	}

サンプル(エレメント1)

background-color: var(--main-bg)
color: var(--main-color)

サンプル(エレメント2)

background-color: var(--main-bg2)
color: var(--main-color2)

サンプル(エレメント3)

background-color: var(--main-bg2)
color: var(--main-color)

サンプル(エレメント4)

background-color: var(--main-bg)
color: var(--main-color2)

 

 

 

 

戻るボタン