【Advance】CSS変数（カスタムプロパティ）について知ろう

【Advance】のレッスンについて
CSS変数（カスタムプロパティ）とは
CSS変数の書き方・使い方

CSS変数の使い方基礎
CSS変数のスコープを理解する
CSS変数のフォールバックについて
CSS変数の継承と上書き

ZooloppaにCSS変数を使ってみる

クラス名・変数名について
1. CSS変数を定義する
2. 既存のスタイル指定と置き換える

【Advance】のレッスンについて

このレッスン以降【Advance】編のレッスンでは、CSS変数と、ダークモード対応について解説していきます。
こちらは必修ではなく、本講座課題も【Advance】編の方法を使わずに進めていただいて構いません。

【Advance】編の実習では、CSSを書く練習としてZooloppaページをアップグレードしていきます。
しかし、Zooloppaページのような小規模なコーディングだと、CSS変数を取り入れるメリットはあまり感じないかもしれません。

早く先に進みたい・時間がないという方は、後からご確認いただいても大丈夫です。
時間が取れる時に確認し、Zooloppaページの一部・ご自身の制作物で試してみて下さいませ。

なお、CSS変数を使ったコーディングで利便性を感じるのは、以下のような場面です。

複数人でコーディングを行う
サイトの規模が大きい
デザインルール、デザインシステムがある
デザイン・配色が変わる可能性がある
頻繁にメンテナンスを行う
カラーテーマ（ライトモード/ダークモードなど）を導入したい

CSS変数（カスタムプロパティ）とは

CSS変数は正式には『カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）』という、CSSのプロパティに名前をつけて呼び出せる機能です。

プログラミングでの“変数”とは少し違っているので注意が必要。
「変数感覚で扱えるプロパティ値」と言ったほうが正確な存在です。

変数を使うには、最初に変数を設定する工程があります。
パッと見ると、CSS変数を使うほうが面倒に思う方もいらっしゃるかもしれません。

ですが、例えば「緑にしていたところ、やぱり青で」のように変更があった場合。
CSS変数を使っていると、打ち替えは一箇所で済みます。

ダークモード用のCSS設定や、テーマによって配色を変えたいときも、チクチク直していかなくて良いので楽ですね。
もちろん、色だけではなく、marginなど様々なプロパティ用の設定もできます。

MDN Web Docsによると、主要なモダンブラウザは全てCSS変数対応済。

画像元：https://developer.mozilla.org/ja/docs/Web/CSS/--*

CSS量が多いWebサイトほど、CSS変数を取り入れることでコーディングの労力、更新作業の手間が省ける可能性が高いです。
SASSやSCSSよりも簡単、普段使っているcssと同じように書いていけるので、ぜひ取り入れてみましょう。

CSS変数の書き方・使い方

CSS変数の使い方基礎

1. 変数を定義する

CSS変数を使うには、まず、変数の定義が必要です。
どんな名前（変数名）で、何を記憶させたいかを決め、呼び出せるように準備します。

変数定義は下図のように、半角コロン: で区切って値を書きます。

CSSでは、変数名の冒頭に接頭辞としてハイフン2つ--が必須な点に注意してください。
CSSの変数名は、ハイフン2つから始めるのがルールと覚えておきましょう。

変数名に使えるのは、半角の英数字・アンダースコア・ハイフン。
半角のアルファベットなら大文字も小文字も使えますが、別のものとして認識されます。
このあたりは id や class の命名と共通。普段通りでOKです。

CSS変数が使えるか、実際に試してみましょう。
以下では簡単に、HTMLファイルのhead内にCSSを書いていきます。
もちろん外部CSSファイルに書いても使えますよ。

sample.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body {
            --color_main: #669900;
        }
    </style>
</head>

<body>
</body>
</html>

この時点では、CSS変数を定義しただけなので表示には何ら影響しません。
検証ツールで見ると、CSS変数の定義はできていることがわかります。

2. 呼び出す

CSS変数で設定した値を使ってみましょう。
CSS変数を利用するときにはvar() 関数というものを使います。

使い方はvar() のカッコの中に、使いたい変数名を書くだけ。

先程のHTMLファイルで、CSS変数を使って背景色を設定してみましょう。
1行付け加えます。

body {
    --color_main: #669900;
    background-color: var(--color_main);
}

ブラウザで見て、bodyの背景色が変わっていたら成功です。

CSS変数のスコープを理解する

CSS変数のスコープ

変数のスコープ（Scope）とは、変数が使える有効範囲のことです。
CSS変数に限定して言うと、スコープは普段CSSを書く時に使う“CSSセレクタ”とほぼ同じ。
例で使ってきたbody {}もCSSセレクタと一緒ですね。

変数のスコープの範囲を狭めて、例えばbg-mainクラスに限定した場合。
body要素に対するスタイル指定で、CSS変数を使っても適用されません。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .bg-main {
            --color_main: #669900;
        }
        body,
        .bg-main {
            background-color: var(--color_main);
        }
    </style>
</head>
<body>
    <div class="bg-main">
        test
    </div>
</body>
</html>

ローカル変数とグローバル変数（:root）

変数のスコープによって、CSS変数を定義していても呼び出せなくなりました。
こうした限定した範囲でのみ利用できる変数をローカル変数と呼びます。
反対にどこからでも利用できるようにした変数はグローバル変数と言います。

HTMLファイルの場合だと、body {}やhtml {}でほぼ全ての要素に有効にはなります。
しかし、厳密には<body>や<html>タグ内には限定されるため、これらを使って定義した変数もローカル変数として扱われます。

グローバル変数を宣言したいときは、:rootという擬似クラスを使います。
:rootはドキュメントのルート、ファイルの１番上の階層の要素を指します。
HTMLファイルだとhtml {}と同じ意味になりますが、HTMLに限らずどの文書（ファイル形式）で確実にルート要素を指定できる点が違いです。

:root {
    --color_main: #669900;
}

body,
.bg-main {
    background-color: var(--color_main);
}

CSS変数のフォールバックについて

var() 関数でCSS変数を呼び出す時、フォールバックと呼ばれる代替値をセットで書くことも出来ます。
「その変数がなかったら、こっちを使ってね」と予備を入れておくイメージです。

使い方は、var() の中で、変数名の後に半角コンマで区切って代替値を書くだけ。

こうすることで、指定した変数が使えない時には代替値を採用してくれます。
下図のように大文字と小文字を間違えたり、スコープから外れている場合に役立ちます。

定義されていないCSS関数を使っていることは、検証ツールでも教えてくれます。

ただ、CSS変数のフォールバックにはデメリットもあります。
MDNでは以下のように説明されています。

代替値はブラウザーの互換性を修正するためには使用されません。ブラウザーが CSS カスタムプロパティに対応していない場合、代替値は助けになりません。

この技法は変数全体を解釈するのにより時間が掛かるので、性能上の問題が見られます。

引用元：CSS カスタムプロパティ（変数）の使用 - MDN

まとめると「CSS変数非対応のブラウザでは、代替値を入れても意味がない」「ブラウザ読み込みが遅くなる」という感じ。

更に問題なのは、プロパティ値として使えない変数を指定した場合も、代替値の採用はされない点。
ブラウザ側は変数が存在するか否かしか見てくれない、という場合がほとんどです。

このため、フォールバックを書かない事も多いです。
特に、今回の色などはブラウザで確認すればすぐ分りますよね。
代替値の記述に手間をかけるより、表示確認をしたほうが良いでしょう。

CSS変数の継承と上書き

CSS変数は、通常のCSSと同じように親要素から子要素へと継承され続けます。
:rootで指定したグローバル変数が、どこでも使えるのが代表的です。

そして、通常のスタイル指定と同じくCSS変数の値を上書きすることも可能です。
CSSのルール通り、上書きしたい値は、上書きしたい対象よりも下に書くようにしてください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        :root {
            --color_main: #669900;
        }

        body,
        .bg-main {
            background-color: var(--color_main);
        }

        .bg-main { /* 変数を上書きする */
            --color_main: #d6ff85;
        }
    </style>
</head>
<body>
    <div class="bg-main">
        <p>
            test
        </p>
    </div>
</body>
</html>

検証ツールで見ると、CSS変数の値が上書きされていることがわかります。

ZooloppaにCSS変数を使ってみる

Zooloppaページでよく使われている色をCSS変数に置き換えてみましょう。

せっかく書いたご自身のコードを取っておきたい方は、こちらのページにあるデモコード（mihon06.zip）を使って試してみて下さい。

クラス名・変数名について

サイトの規模が大きい
デザイン・配色が変わる可能性がある
カラーテーマ（ライトモード/ダークモードなど）を導入したい

こうした場合、CSSクラスやCSS変数の名前には色名や、20pxなど具体的な数は入れないことが多いです。
これは後々変更があった場合、変数名やクラス名と設定内容に誤差が出来てしまうため。

反対に、更新する予定のない期間限定LP・小規模なサイトでは、分かりやすさ重視で色名を使っている場合もあります。
解説用のデモコードや、練習で作るページも「見た時に分かりやすい」ように、そのものズバリな名前を使うケースが多いです。

以下では、ここまでの解説で使っていたクラス名をそのまま使用します。

1. CSS変数を定義する

以下４つの色をCSS変数にしてみましょう。

:root{
  --color_main: #669900; /* 緑 */
  --color_accent: #F15A24; /* 橙 */
  --color_accent-subtle: #FFFDE6; /* 薄黄色 */
  --color_text-link: #0071BC; /* 青色 */
}