真ん中はどこへ行ったのでしょう？
株式会社イメージ・マジックの技術ブログ前回の担当のsoenoです。
最近CSSカスタムプロパティを触ることがあり、そのうちの機能で使わなかったところが気になったので コードと合わせて紹介します。
CSSカスタムプロパティとは？
CSSカスタムプロパティ（またはCSS変数）は、CSSで再利用可能なスタイル情報を格納し、管理するための仕組みです。つまりscss環境を作らなくてもcssで変数が使えます。
また、scssの変数と合わせて使うこともできます。
CSSカスタムプロパティの使い方
通常のCSSプロパティと異なり、カスタムプロパティは--（ハイフン2つ）で指定します。
記載場所はcssで:root{}のカッコ内に指定すると（グローバルなスコープになるので） そのcssの読み込まれていれば別のcssからでも使えるようになります。
使うときはvar();で囲います。指定して使用する例を以下に挙げます。
:root {
--main-bg-color: blue;
}
#main{
background:var(--main-bg-color);
}
上の例の#main{}の中でもCSSカスタムプロパティーを指定することができますが、その場合は#main{}の外では使えません。
javascriptからCSSカスタムプロパティの値を変更する
さて、本題です。 CSSカスタムプロパティで指定した値はjavascriptから変更することができます。 以下に例を挙げます。<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>カスタムプロパティデモ</title>
<style type="text/css">
:root {
--h1Color: #e70d9e;
--h2Color: #9e0de7;
--h3Color: #350de7;
--h4Color: #0d4be7;
--h5Color: #0da2e7;
--h6Color: #0de77a;
}
h1 {
color: var(--h1Color);
}
h2 {
color: var(--h2Color);
}
h3 {
color: var(--h3Color);
}
h4 {
color: var(--h4Color);
}
h5 {
color: var(--h5Color);
}
h6 {
color: var(--h6Color);
}
#stage{
display: flex;
}
#inputArea {
margin: 30px;
width: 350px;
flex:1;
}
#inputArea label{
display: inline-block;
width: 225px;
}
#inputTargetArea {
display: flex;
}
</style>
</head>
<body id="stage">
<div id="targetArea">
<h1>h1 hello world</h1>
<h2>h2 hello world</h2>
<h3>h3 hello world</h3>
<h4>h4 hello world</h4>
<h5>h5 hello world</h5>
<h6>h6 hello world</h6>
</div>
<div id="inputArea">
<div id="inputTargetArea">
<label for="targetChanger" name="targetChanger">何を変更するか選べます。</label>
<select id="targetChanger">
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
</select>
</div>
<div id="inputColorArea">
<label for="colorChanger">何色に変更するかを選べます。</label>
<input type="color" id="colorChanger" name="colorChanger" value="#cbcbcb" />
</div>
</div>
<script language="javascript">
document.getElementById("colorChanger").addEventListener("input", changeColor, false);
function changeColor() {
var targetTagName = document.getElementById("targetChanger").value;
var newColor = this.value;
document.documentElement.style.setProperty('--' + targetTagName + 'Color', newColor);
}
</script>
</body>
</html>
例は次のようになっています。・cssカスタムプロパティでh1～h6の要素に文字色を指定。 ・セレクトボックスで各要素を指定できるように。 ・カラーピッカーで指定した色をCSSのカスタムプロパティーの変更で指定の要素に反映させる。
例では一対一なので良さがわかりにくいですが、変数で指定した個所すべてが変わります。 ですので指定したcssを引き継げばページをまたいだ指定や、そのユーザーのみのページテーマといった指定もできそうです。