いまさら聞けない。CSSの変数（カスタムプロパティ）ってどんな時に便利なの？基本的な設定とテクニック

tutorial
 

もう当たり前に、使えている人は便利に使っていると思いますが、
これって一体なんなんだろうとか、どういう時に便利なの？
と、いまさら聞けないCSSの変数（カスタムプロパティ）について、
何がどうなっているかは知っておきたい。とこっそり思っておられる方のために、
「見たことある」から「知ってる！使ったことある！」ぐらいになるよう説明しておきます。

CSSの変数（カスタムプロパティ）ってなに？

カスタムプロパティとも呼ばれる、CSSの変数は、文書全体で再利用が可能な特定の値をあらかじめ定義していく方法のことです。
「？？」となった人のために簡単にお伝えすると
サイト全体で、使いたい色が3色（#000,#FF0,#EEE）があった時に、その都度指定するのではなく、
色①は「#000」、色②は「#FF0」、色③は「#EEE」をはじめに指定しておき、それぞれの要素には「色①」や「色②」を呼び出す形で指定していきます。

大規模なサイトや、形は同じでいいけど色は変えて欲しいなど特定のテンプレートを使って量産するような場合に、これが便利になります。
一人web担当の方など、修正の手間を省けるなら省きたいと思っている方などには、おすすめです。

例えば、下記サンプルのCSSでは、ブロックのボーダー・h3タイトル・擬似要素のアイコンで、同じ色が3回指定されています。
「この青色をピンクに変えてよ〜」って言われた時、3箇所変更しなくてはいけません。
3箇所なら大目に見てられますが、これが大規模サイトだったりしたら、ザワザワして白目になるのは確定です。

ニャン易度

記事タイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た...

<div class="sample01">
<h3>記事タイトル</h3>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た...</p>
</div>
.sample01 {
  border: 2px solid #0056f7;
}
.sample01 h3 {
  color: #0056f7;
}
.sample01 h3::before {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background: #0056f7;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

「検索して、置換すりゃええやん。」っていうのもありますが、ここでCSSの変数を使うことでもっと簡単になるのです。

基本的な設定の仕方

  • 変数の定義は「:root」か「html」要素にします。
  • 変数名には、「–」をつけて「–変数名」のように指定します。
  • 英数字・アンダースコア・ハイフンが使用可能です。
  • 呼び出す方法は、「var(–変数名)」にすれば呼び出せます。

先ほどのサンプルを改めて、変数を使って書いてみましょう。

ニャン易度

記事タイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た...

<div class="sample02">
<h3>記事タイトル</h3>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た...</p>
</div>
:root {
  --color01:#0056f7;
}
.sample02 {
  border: 2px solid var(--color01);
}
.sample02 h3 {
  color: var(--color01);
}
.sample02 h3::before {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background: var(--color01);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

「:root」に設定した変数「–color01」に入っているカラー「#0056f7」変更するだけで「–color01」として呼び出しているものが一度に変更可能となりました。

CSS変数は上書きも可能

「:root」で定義したものはグローバル変数なので、全体に継承されますが、
特定のクラスでのみ色を変えたい場合もあるでしょう。その場合、通常のCSS通り上書きが可能です。

ニャン易度

デフォルトのタイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た...

カラーを上書きされたタイトル

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た...

<div class="sample03">
<h3>デフォルトのタイトル</h3>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た...</p>
</div>
<div class="sample04">
<h3>カラーを上書きされたタイトル</h3>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た...</p>
/* グローバル変数 */
:root {
  --color01:#0056f7;
}
/* デフォルトのh3カラーとアイコン */
h3 {
  color: var(--color01);
}
h3::before {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background: var(--color01);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* タイトルのカラーの上書き */
.sample04 h3 {
  --color01:#ffa07a;
  color: var(--color01);
}

CSSの変数のフォールバック

これは、CSS変数で使用できる機能で、なんらかの理由で変数が定義されていない場合に代替値を採用します。
呼び出しの際に、「var(–color01, #222);」と指定します。

CSSの変数の便利な使い方

色を指定するのは、もっとも想像しやすものかと思いますが、それ以外には何に使えるの？ということでわかりやすい使い方をご紹介します。

ボタンサイズをあらかじめ準備しておく。

サイトを作っていると、ボタンのサイズなどはあらかじめ3サイズぐらい用意することが多いと思います。
それらをあらかじめcssの変数で準備しておくと非常に便利です。
関数「calc()」と組み合わせて使うことも使えます。

ニャン易度 
<button class="button btn_small">smallボタン</button>
<button class="button">normalボタン</button>
<button class="button btn_large">largeボタン</button>
.button {
  /*ボタンの基本設定*/
  display: block;
  border: none;
  border-radius: 5px;
  margin-bottom: 1em;
  color: #fff;
  transition: all .5s;
  cursor: pointer;
  background: #fd9765;
  /*ボタンのpaddingとfont-sizeをあらかじめ設定*/
  --unit: 1rem;
  font-size: var(--unit);
  padding: calc( var(--unit) / 2 ) var(--unit);/*上下paddingは1/2として設定*/
}
.btn_small {
  --unit: 0.8rem;
}
.btn_large {
  --unit: 1.3rem;
  padding: calc( var(--unit) / 2 ) calc( var(--unit) * 2 );/*上下paddingは1/2、左右は2倍に設定*/
}

さらに色もあらかじめ準備しておく。

ニャン易度 
<button class="button btn_small">smallボタン</button>
<button class="button">normalボタン</button>
<button class="button btn_large">largeボタン</button>
.button {
  /*ボタンの基本設定*/
  display: block;
  border: none;
  border-radius: 5px;
  margin-bottom: 1em;
  color: #fff;
  transition: all .5s;
  cursor: pointer;
  /*色をあらかじめ設定*/
  --colo_h: 194;
  --colo_s: 86%;
  --colo_b: 54%;
  /*ボタンのpaddingとfont-sizeをあらかじめ設定*/
  --unit: 1rem;
  font-size: var(--unit);
  padding: calc( var(--unit) / 2 ) var(--unit);/*上下paddingは1/2として設定*/
  background: hsl(var(--colo_h), var(--colo_s), var(--colo_b));
}
.btn_small {
  --unit: 0.8rem;
  background: hsl(var(--colo_h), var(--colo_s), var(--colo_b));
}
.btn_large {
  --unit: 1.3rem;
  padding: calc( var(--unit) / 2 ) calc( var(--unit) * 2 );/*上下paddingは1/2、左右は2倍に設定*/
  background: hsl(var(--colo_h), var(--colo_s), var(--colo_b));
}
.button:hover {
  --colo_b: 28%;
}
色を指定するのは、色相(Hue)、彩度(Saturation)、明度(Lightness)で設定するhsl()、hsla()などの方が、バリエーションが作りやすいかもしれません。
最近だとoklab()なんてのもあったりしますね。
ちなみにoklab()は、「彩度・輝度を同じく揃えた色でも色相によって人の目には明るさが異なって見える」のをちょうどよく補正できるようです。とはいえデザインツール（photoshopなど）のカラーピッカーなどには、まだ対応していなかったりなので、ここでは、あまり使っていません。

これ以外にも、ダークモード用のカラーセットや、アイコンサイズ、メディアクエリで指定するスペースをあらかじめ定義する、
フォントをいくつか指定しておきブロックによって切り替えるなど、アイデア次第でとても便利に使用できると思います。

cssの変数を使うと、大きなサイトを作るときだけでなく、運営していく上で、効率よく運用できるようになるので、うまく利用できるようになるといいと思います。

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？