ywork2020.com

Title

CSSで変数を使用する

目次 (INDEX)

varとは

ここで説明するvar とは次の語句からなるCSSの関数です。
variable
読み: バリアブル
意味: 変数、不定の、変わりやすい

目次に戻る

var関数の概要

この関数はCSSのプロパティの値に変数の値を挿入することができます。

CSSでは変数のことをカスタムプロパティと言います。 このカスタムプロパティの値を他のプロパティの値として代入することができます。 また、このカスタムプロパティはCSSだけでなく、javascriptからも操作することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この関数の記述は以下のような書き方になります。

CSSでカスタムプロパティを宣言するには「-」ハイフンを二つ続けて記述し、その続きに任意の変数名を記述します。 下記の構文では「--変数名」が変数の名前となり、「設定値」の部分が変数に代入される値となります。

変数の宣言に関しては:root疑似要素をセレクターにして記述しています。 必ずしも:root疑似要素を使う必要はありませんが、:root疑似要素使うと、その文書全体がスコープの対象となるので 文書全体でその変数を操作することができることから一般的な記述だと考えていただいて構いません。

:root{
	--変数名: 設定値;
}
セレクター{
	プロパティ名: var(--変数名, フォールバック値);
}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルではjavascriptを使ってカスタムプロパティの値を書き換えています。 ここではscriptの説明は割愛させていただきます。

サンプル: 背景色を変数で設定する

このサンプルは三つのdiv要素で構成されています。 idDivCの要素の背景色を変更するために変数を使用し、idDivRとidDivBにはマウスオーバーしたタイミングで自作関数であるfunMouseOverを呼び出す仕様です。

[ div要素 ]
下の赤と青の要素にマウスオーバーすると、この要素に背景色が反映されます。
red
blue

サンプルコード: CSS
<style>
	:root{--bgColor: black;}
	#idDivC{background-color: var(--bgColor);}
	#idDivR{background-color: red;}
	#idDivB{background-color: blue;}
</style>
サンプルコード: HTML
<body>
	<div id="idDivC">div要素</div>
	<div id="idDivR" onmouseover="funMouseOver(this.innerText)">red</div>
	<div id="idDivB" onmouseover="funMouseOver(this.innerText)">blue</div>
</body>
サンプルコード: script
<script>
	function funMouseOver(myColor){
		let elmDivC = document.getElementById("idDivC");
		elmDivC.style.setProperty("--bgColor", myColor);
	}
</script>

目次に戻る

サンプル: ボックスの影を変数で指定する

このサンプルは一つのdiv要素と一つのinput要素number型で構成されています。 div要素にマウスオーバーするとinput要素内の値を参照してCSSの変数に値を代入する仕様です。

[ div要素 ]
この要素にマウスオーバーすると下記の設定値pxで要素に影をつけます。
px

サンプルコード: CSS
<style>
	:root{
		--tops: 0;
		--lefts: 0;
		--shadows: 0;
	}
	#idDivS:hover{
		top: var(--tops);
		left: var(--lefts);
		box-shadow: var(--shadows);
	}
	#idDivS{
		position: relative;
		top: 0;
		left: 0;
		box-shadow: 0;
		transition: top 1s, left 1s, box-shadow 1s;
	}
</style>
サンプルコード: HTML
<body>
	<div id="idDivS">div要素</div>
	<input type="number" value="5" min="0" max="10" id="idNumS">px
</body>
サンプルコード: script
<script>
	document.addEventListener("DOMContentLoaded",function(){
		let elmDivS = document.getElementById("idDivS");
		let elmNumS = document.getElementById("idNumS");
		elmDivS.style.setProperty("--tops","-" + elmNumS.value + "px");
		elmDivS.style.setProperty("--lefts","-" + elmNumS.value + "px");
		elmDivS.style.setProperty("--shadows",elmNumS.value + "px " + elmNumS.value + "px");
		document.getElementById("idNumS").addEventListener("change",function(){
			elmDivS.style.setProperty("--tops","-" + elmNumS.value + "px");
			elmDivS.style.setProperty("--lefts","-" + elmNumS.value + "px");
			elmDivS.style.setProperty("--shadows",elmNumS.value + "px " + elmNumS.value + "px");
		},false);
	},false);
</script>

目次に戻る

備考: フォールバック値について

フォールバック値はカスタムプロパティのコンテキストが無効な場合に代替として使用される値です。

つまり、CSSのコード中に変数を宣言していない場合や、何らかの理由により変数を参照できなかった場合に、変数の代わりに使用される値です。

このサンプルではフォールバック値を使用するために意図的に「--myColor」という変数の宣言をしていません。 しかしbackground-colorの設定値にvar関数で「--myColor」という変数の値を使うと指定しています。このような場合に 変数が参照できないので代わりに「pink」という値が使用されているのです。

[ div要素 ]
この要素にはフォールバック値が適用されます。

サンプルコード: CSS
<style>
	#idDivF{
		background-color: var(--myColor, pink);
	}
</style>
  • 02-04: セレクター (id属性値にidDivFをもつ要素)
  • 03: 背景色 (値に--myColor変数を使用, フォールバック値はピンク)
サンプルコード: HTML
<body>
	<div id="idDivF">div要素</div>
</body>
  • 02: div要素 (id属性値にidDivFを設定)

目次に戻る