CSSの便利な色指定var()について簡単に解説！

Webサイトは基本的にメインで使う色を２〜３色決めてからデザインするので、CSSで繰り返し同じ色を指定するのは面倒ですよね。

本記事ではCSSの色指定の面倒を解決する便利機能var()について簡単に解説します。

var()とは？

プログラミングでは「変数」という箱のようなものに数値や文字などの情報を入れて、後で呼び出して使うのが一般的です。

CSS でも、変数を使うことができ、色やサイズなどをまとめて管理するのに便利です。

var() は、CSS で変数の値を参照するための機能で、色を登録したり呼び出したりすることができます。

使い方は簡単で、下記のように :root に対して色を登録して、以降に任意のクラスで背景色や文字色を指定する際に登録した色を呼び出すだけです。

:root{
 --black: #222222;
 --white: #ffffff;
 --font-size: 16px;
}
body{
 background-color: var(--white);
}
p{
 color: var(--black);
 font-size: var(--font-size)
}

登録は「–」で始まる名前で定義して、呼び出す際には数値や文字の代わりに「var(登録名)」を指定するだけです。

難しいコーディングが必要というわけでもないので、CSS初心者の方でも簡単に使うことができると思います。

便利な点や使い道

var()の便利な点は一度指定しておけば後は一括で変更できる点です。

毎回カラーコードなどで指定していると、後から色を変えようと思ったら一つ一つ変えていくかコーディングソフトの置換機能で全て変えるしかありませんが、var()で指定していれば登録している色の１箇所を変えるだけで特定の場所の色を変更できるので、かなり便利に感じると思います。

また、クライアントのサイトを制作していると、「後から自分でも色を変えられるようにして欲しい」といった要望がたまにありますが、そんな時もvar()を使えば簡単に解決することができます。

Webデザイナーのように頻繁にサイトを作るような人であれば、CSSのテンプレートを作っておいて、色やフォントサイズを変えるだけでベースのデザインができるようになるといった使い方もできますね。

まとめ

var()が増えすぎても、それはそれでややこしくなってしまうので、一回だけしか使わないのであればわざわざ使う必要はありませんが、背景色やボタン色など、繰り返し使うような場合はかなり効率化できるので、知らなかったという方はぜひ使ってみてください。