CSSカスタムプロパティ色々便利なようです

ほぼ書き終わった記事を下書きで保存したら最初と最後だけになりました。
真ん中はどこへ行ったのでしょう?

株式会社イメージ・マジックの技術ブログ前回の担当の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を引き継げばページをまたいだ指定や、そのユーザーのみのページテーマといった指定もできそうです。


結論

scss等使わないとできなかった変数での管理などがCSSカスタムプロパティでできるようになってます。 今回紹介はしていませんが、cssでなくjsで値を指定するなんてこともできます。 CSSカスタムプロパティ色々便利です。