CSS変数の使い方例。:rootを使ってカスタムプロパティを覚える。
CSSで変数（カスタムプロパティ）を使うと、とにかく便利。
CSS変数を使う。
プログラムの基本。
JavaScriptやPHPなど、プログラミング言語ではごくごく基本の変数。
CSSでも使える便利な機能。
CSS変数のニーズ。
CSS変数（カスタムプロパティ）。
もともとCSSの生みの親であるホーコン・ウィウム・リー氏によると、CSSは意図的にプログラミング言語にならないようにしていたそう。
それが今では、時代の変化によるニーズの増加もあり、CSS変数（カスタムプロパティ）が使えるようになっている。
CSS変数の指定方法と使い方。
基本的な使い方と変数のルール。
使い方は難しくない。
変数名は「–」（ハイフン2つ）から始まり、英数字とハイフン、アンダースコアの組み合わせで、id名やクラス名のように任意で決められる。
形式が決まっているので、習うより慣れろですぐに使える。
:rootで指定する。
cssファイルの最初の方に、:root {}で指定しておくと便利。変数名は他の人が見ても分かりやすい名前が好ましい。
「root（ルート）」とは、複数形の「roots（ルーツ）」と同様、起源や祖先という意味なので覚えやすい。
var()関数で呼び出す。
varから始まる()の中に、:rootで決めた変数名を入れる。
CSS変数（カスタムプロパティ）の値の指定例。
:rootでいくつか指定をしておく。
CSS
:root {
--white: #fff;
--black: #000;
--red: #f00;
--serif: 游明朝, 游明朝体, 'Yu Mincho', YuMincho, serif;
--sans_serif: 游ゴシック, 游ゴシック体, 'Yu Gothic', YuGothic, sans-serif;
}
その後は、以下のように使える。
例）
h1〜h6タグの背景を真っ白、文字を真っ黒、書体を游ゴシック（ない場合はゴシック体）にしたいときのコード例。
CSS変数（カスタムプロパティ）の読み込み方法。
var()で呼び出す。
CSS
h1, h2, h3, h4, h5, h6 {
background: var(--white);
color: var(--black);
font-family: var(--sans_serif);
}
「var」というのは「variable（変数）」の略称。プログラミング言語ではお決まりで、よく使われる。
変数の値の変更。文字色や書体を後から変えたい場合。
変数の値は後からでも変えられる。
値を変えられるから変数。
真っ白や真っ黒、真っ赤ではなく、若干色味を変えたり、書体をヒラギノ角ゴ（ヒラギノ角ゴがない場合はゴシック体）に変えたくなった場合。
変数（カスタムプロパティ）の値の変更例。
:root {}の中だけを変更する。
CSS
:root {
--white: #fffafa;
--black: #240401;
--red: #ff005b;
--serif: 游明朝, 游明朝体, 'Yu Mincho', YuMincho, serif;
--sans_serif: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
}
変数（カスタムプロパティ）の読み込み方法。
CSS
h1, h2, h3, h4, h5, h6 {
background: var(--white);
color: var(--black);
font-family: var(--sans_serif);
}
上記の例ではh1〜h6タグのみだが、pタグの文字色やulの背景色など、色々と指定することができる。
CSS
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のフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。
