【初心者向け】CSS変数の使い方【カラーを一括管理する方法】

HTML/CSS

悩める人「CSSを書いている時に、色とかを一括で変えられたら便利だな・・・。かんたんな方法はありますか?」

こういった悩みにお応えします。

この記事の内容

  • CSSを一括で指定する方法【CSS変数】
  • CSS変数の使い方【覚えるべきタグ記法は3つのみ】

こんにちは、
TOMO(@Tomo___san_2525)です。

プログラミングを独学しており、初心者向けに役立つ知識をアウトプットしています。

今回は、CSS変数を使い、テーマカラーを一括で指定・管理する方法について紹介します。

いちいち、各要素に同じ色の指定をしたりするのって面倒ですよね。
あとは、まとめて色味を変えたいときに、全てを変更しなければならないのも不便です。

CSS変数はめちゃくちゃシンプルなので、覚えておくと役立つはず。

それでは、見ていきましょう(‘ω’)ノ

ページのCSSスタイリングを一括管理するには【CSS変数を使いましょう】

CSSスタイリングを一括で管理する方法【CSS変数】

CSS変数が、めちゃくちゃ便利です。

例えば、下記のような記述をしている人ってけっこう多いはず。

HTML

CSS

ブラウザ上では下記のようになります。
ブラウザ表記の画面です

テーマカラーを変えたいときには?

これまでは、全ての要素に対してCSS指定をし直す必要がありました。

CSS

上記のとおりです。
全ての色をorangeに書き直した場合

結論、これ面倒くさいです(笑)。

そこで、一括で色の変更ができるように「CSS変数」が生まれました。

CSS変数とは【最近導入された新しいCSS記法です】

2018年くらいに新しく生まれた記法です。

正式には、「CSSカスタムプロパティ(CSS Variables)」というそうですが、別に覚えなくていいはず。
jQueryやPHPもかじっている人は、「変数」と聞けば大体イメージがつくと思います。

(注意)IE(インターネットエクスプローラー)ではまだ使えない

まだ新しい記法のため、対応していないブラウザがあります。

下記のとおり。
Caniuse.comでCSS変数を検索した画面
CanIuse.comというサイトで調べることが可能。
赤くなっている部分が、「まだ対応していない」という意味になります。

IEではまだ対応しておらず、表示されない点には注意が必要です。
とはいえ、Chromeなどほとんどのブラウザにはすでに対応済み。

IEについても、使えるようになるのは時間の問題です。
確実に主流になるので、覚えておきましょう。

CSS変数で一気にスタイリングがラクになった

「変数」なので、あとからイジるのがめちゃくちゃラクです。

通常、Webページを作るときはだいたい「同じ色」を何度も使いますよね。
そのほうが統一感が出るし、キレイに見えるからです。

例えば、全体的にブルー系のカラーを使用していたけれど、あとからオレンジ系に変えてみたくなった場合。
「変数」に指定した色を変えるだけでOKになります。

めちゃくちゃ、ラクです。

CSS変数の使い方【覚えるべき記法は3つのみ】

CSS変数の使い方【覚えるべき記法3つ】

下記のとおり。

  • CSS変数を定義する【--
  • CSS変数を呼び出す【var()
  • 文書全体にCSS変数を使う【:root

上記です。

順番に見ていきましょう。

①|CSS変数を定義する【–】

CSS変数の定義には、下記を使います。

--thema-color
ハイフン2個+変数名(自由に決めてOK)

上記です。

例えば、色を変数として定義しておきたい場合。

上記のように記述してあげればOKです。
変数名は何でもOKですが、分かりやすいものにしておきましょう。

共通の「親要素」に定義すること

今回のHTMLの場合。

bodyの直下にある要素(h1~h3と.box)に同じ色を使うので、その共通の親要素であるbodyに対してCSS変数を定義します。

※ここについて詳しくは後述します。

②|CSS変数を呼び出す【var()】

ここは、Javascriptあたりを勉強していればイメージできるはず。
定義したCSS変数を使うためには、下記です。

var(--thema-color)

上記のとおり。

【例】テーマカラーをオレンジ色とする場合

CSS

上記のように記述すればOKです。
テーマカラーをオレンジに設定した

色を変えるときは、定義のみ変更すればOK

例えば、テーマカラーをグリーンにしたい場合。

CSS

このように、同じ色を使っている場所は一括で管理することが可能です。
CSS変数をgreenに変更した

全部に対してCSSを書きなおさなくていいので、めっちゃラクですね。

③|文書全体にCSS変数を使う

bodyにCSS変数を定義してもいいのですが・・・。

「子要素」にしか指定した色が使えないので、上手く反映されない場合があります。
特に、HTMLが複雑になると「孫要素」になってしまうことが多いですね。

例えば、下記の場合。

HTML

こうすると、先ほどはh1~h3あたりに色がついていたのに、独自指定したpタグの色以外はすべて消えてしまいます。

CSS変数は子要素でしか呼び出せません!

マークアップする際に、あとからdivタグで囲むことは多いです。
この際に、h1~h3が「孫要素」になり、CSS変数が使えなくなるので注意です。

bodyそのものを「子要素にする」

つまり、bodyタグの「親要素」である、htmlタグに対してCSS変数を定義してあげれば解決します。

その場合、:rootというセレクターを使います。

下記のとおりです。

HTML

CSS

上記のとおり。
これで、body内の全ての要素やクラスで、CSS変数を呼び出して使うことができます。

重要ポイントのまとめ

  • CSS変数の定義 → --main-color:red;
    (変数名は自由に決めてOK)
  • CSS変数の呼び出し → var(main-color)
  • 全ての要素で変数を使いたいなら → :rootセレクターに対し定義する

上記のとおりです。

CSS

総まとめです。

こんな感じで、いくつかのCSS変数を定義しておき、管理すると良いですね。

それでは、この記事は以上です。