CSSで変数（カスタムプロパティ）を使うと、とにかく便利。

変数。

JavaScriptやPHPなど、プログラミング言語ではごくごく基本の変数。

CSSでも使える便利な機能。

変数のニーズ。

もともとCSSの生みの親であるホーコン・ウィウム・リー氏によると、CSSは意図的にプログラミング言語にならないようにしていたそうだ。

それが今では、時代の変化によるニーズの増加もあり、CSS変数（カスタムプロパティ）が使えるようになっている。

変数に慣れていない人でも、形式が決まっているので、習うより慣れろですぐに使える。

CSS変数の指定方法と使い方。

変数のルールと基本的な使い方。

変数名は「–」（ハイフン2つ）から始まる英数字とハイフン、アンダースコアの組み合わせで、id名やクラス名のように任意で決められる。

他の人が見ても分かりやすい名前が好ましく、cssファイルの最初の方に、:root {}で指定しておくと良い。

「root（ルート）」とは、複数形の「roots（ルーツ）」と同様、起源や根源、祖先という意味なので覚えやすい。

CSS

変数（カスタムプロパティ）の値の指定例。

:root {
 --white: #fff;
 --black: #000;
 --red: #f00;
 --serif: 游明朝, 游明朝体, 'Yu Mincho', YuMincho, serif;
 --sans_serif: 游ゴシック, 游ゴシック体, 'Yu Gothic', YuGothic, sans-serif;
}

その後は、以下のように使える。

h1〜h6タグの背景を真っ白、文字を真っ黒、書体を游ゴシック（ない場合はゴシック体）にしたいときのコード例。

varから始まる()の中に、上記で決めた変数名を入れる。

変数（カスタムプロパティ）の読み込み方法。

h1, h2, h3, h4, h5, h6 {
　background: var(--white);
　color: var(--black);
　font-family: var(--sans_serif);
}

「var」というのは「variable（変数）」の略称で、この名前は変えられないが、プログラミング言語ではよく使われるお決まりの単語となっている。

変数の値の変更。文字色や書体を後から変えたい場合。

変数の値は後からでも変えられる。

真っ白や真っ黒、真っ赤ではなく、若干色味を変えたり、書体をヒラギノ角ゴ（ない場合はゴシック体）に変えたくなった場合。

CSS

変数（カスタムプロパティ）の値の指定例。

:root {}の中だけを変更する。

:root {
 --white: #fffafa;
 --black: #240401;
 --red: #ff005b;
 --serif: 游明朝, 游明朝体, 'Yu Mincho', YuMincho, serif;
 --sans_serif: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
}

変数を使用するセレクタの方は何も変えなくても良い。

変数（カスタムプロパティ）の読み込み方法。

h1, h2, h3, h4, h5, h6 {
 background: var(--white);
 color: var(--black);
 font-family: var(--sans_serif);
}

上記の例ではh1〜h6タグのみだが、あちこちで文字色や背景色などを指定することができる。

section p {
 color: var(--black);
}

p.red {
 color: var(--red);
}

ul {
 background: var(--black);
 border: 1px solid var(--white);
 color: var(--white);
}

変数を使わない場合は、コピペや打ち直し、エディタの置換機能などで変更を行うことができるが、手間や誤操作が起きやすい。

変数を使うと、:root {}の箇所だけを変えれば（値を代入すれば）良いので楽でかつ安全だ。

変数のイメージ。

変数とは、「値」を保存しておける、ヴァーチャルの「入れ物」のようなもの。
そして、「入れ物」の中身は後から「変える（代入する）」ことができる。

CSSの場合はvar()という入れ物を使って、入れたり取り出したりする。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。