CSS変数の使い方例。:rootを使ってカスタムプロパティを覚える。 / メモ / いがわ

CSS変数の使い方例。:rootを使ってカスタムプロパティを覚える。

2022.10.23 2024.03.20更新。

Contents - 目次

1 CSSで変数（カスタムプロパティ）を使うと、とにかく便利。
2 CSS変数の指定方法と使い方。
3 変数の値の変更。文字色や書体を後から変えたい場合。
4 CSS 関連メモ。

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

CSS変数を使う。

プログラムの基本。

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

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

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()関数で取り出す。

CSS変数（カスタムプロパティ）の書き方に閃いたわんちゃん。

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

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