真ん中はどこへ行ったのでしょう？
株式会社イメージ・マジックの技術ブログ前回の担当の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を引き継げばページをまたいだ指定や、そのユーザーのみのページテーマといった指定もできそうです。
青線が今回削除した部分、赤線がかっこでくくったり文字列をそのまま指定して新しく作る文字列として指定している部分です。こうやった方が分かりやすかったかも。
今回はIDの値にあたる部分がVALUES ( の後に来る文字列だったためVALUES ( をわざわざべた書きでパターンとしたけどもっと簡潔に書けたかもしれないと思えてきました。話が脱線しそうなので今回はここまでです。
