CSS変数を使ってコーディングする方法をわかりやすく解説

今回はCSSで変数を使う方法を紹介していきます。
JavaScriptやその他のプログラミング言語を扱ったことがある人は、変数に馴染みがあると思います。

しかし、プログラミングを触ったことが無い方にとって「変数」とは数学で少し変数を触ったことがあるくらいだと思います。
プログラムやCSSで使う変数は数学の変数とは違うので今回は変数の概念から使い方まで紹介していきます！

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

CSS変数とは

CSS変数とは、正式には「カスタムプロパティ」と定義されています。
CSS変数はCSSの作成者によって作成され、文書全体で再利用可能な特定の値を含むエンティティです。

現場ではカスタムプロパティ以外にもCSS変数や、カスケード変数と呼ばれることもあります。

変数とは

冒頭でもお伝えしましたが、数学で出てくる”変数”（xやy）とプログラミングで出てくる変数はニュアンスが違います。
プログラミングで出てくる変数は「数字や単語を入れておく箱」です。

下記画像のように変数には数字や単語が入っています。

• 変数1には「123456」
• 変数2には「ZeroPlus」

箱に入れただけでは何も役に立ちません。
変数を使用する際は言語によって記述方法がことなります。
変数を使用する例を、下記画像で紹介していきます。

• 名前には”NAME”という変数名を設定
• 挨拶には”GREET”という変数名を設定

がついています。

大型のWebサイトでは膨大な量のCSSを記述しているため、タイトルの色を変更するだけだとしても複数箇所のCSSの修正が必要となります。

そこで、CSS変数を使用していれば変更する際に1箇所を変更するだけで全ての変更を完了することができます。

上の画像の例では「ZeroPlus」から「ZeroPlusMedia」へと変更する際に、
「NAME」という変数を1箇所かえるだけで2箇所で変更が反映されています。

CSS変数の使い方

では、CSSでの変数を利用する方法をみていきましょう。

変数の概念はどの言語でも同じですが、記述方法は言語ごとに異なるので、しっかりと使えるようにしていきましょう。

CSS変数を定義する

1.利用できる範囲を設定

まずは変数を利用できるスコープ（範囲）を定義しましょう。

html全ての文書で適応したいことの方が多いので:rootの擬似クラスで定義します。

:root{
  /*  この中に変数を定義していくとどこでも変数を利用できます！  */
}

2.変数名を決める

今回は「zp_color」という変数名でゼロプラスのカラーである”#FFBB1E”を出力できるように定義していきます！

変数名は--ハイフンを2つ使って定義します。

記述していくのは1.で伝えた:root内に記述していきます。

:root{
   --zp_color: #FFBB1E;
}

これで定義は完了です。

次は定義した変数を利用する方法をみていきます。

CSS変数の呼び出す

先ほど定義した、#FFBB1Eを--zp_colorという変数名を使って呼び出してみます。

呼び出したい箇所でvar(変数名)を使って呼び出すことができます。

では実際に下記のような2つのボックスを表示するHTMLに対して

1. box1:背景色を#FFBB1E
2. box2:テキストを#FFBB1E

を適応させていきます。

HTML

<div class="box box_1">
  <p>1</p>
</div>
<div class="box box_2">
  <p>2</p>
</div>

CSS

 
.box_1{ 
  background-color: var(--zp_color); 
} 
.box_2{ 
  background-color: #a8a8a8; 
} 
.box_2 p{ 
  color: var(--zp_color); 
}

出力結果

無事、box1の背景色とbox2のテキストの色を変更する事ができました。

今回は変数を1つしか使いませんでしたが、複数定義することもかのうです。

変数名が設定されていない時の対応

CSSの変数はフォールバックを記述することができます。

たとえば、変数名が間違っていたり、変数に値が入っていない時に出力される値を設定できるのです。

具体的にはvar(変数名, フォールバック値)で設定することができます。

試しにbox1の背景色を:rootで設定していない変数名を使ってみましょう。

CSS

:root{ 
  --zp_color: #FFBB1E; 
} 
.box{
  text-align: center;
  padding: 5px 0;
}
.box_1{ 
  /* ここを変更します */
  background-color: var(--zp_color_test, #FF9158);
} 
.box_2{ 
  background-color: #a8a8a8; 
} 
.box_2 p{ 
  color: var(--zp_color); 
}

出力結果

--zp_color_testという変数は定義していないので、#FF9158というオレンジ色が出力されました。

カスタムプロパティの使用例

次に、カスタムプロパティを実際にどう使うのかを学んでいきましょう。

グラデーションを指定する

グラデーションに関するコーディングを行うときは、カスタムプロパティを使うと便利です。

:root {
  --primary-color: #ffbb1e;
  --secondary-color: #ff9158;
  --bg-gradation: linear-gradient(45deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.sample {
  background: var(--bg-gradation);
}

カスタムプロパティを使用すると複雑なグラデーションの色の設定を簡潔に行うことができます。
グラデーションの設定をしたあとは「var()」で呼び出すだけなので、コードも全体的に少なくわかりやすく記述することができます。

calc()と組み合わせる

先ほど「var()」の後には単位を設定できないと説明しましたが、「calc()」と一緒に使うことで単位を設定することができます。

ちょっとした小技として覚えておくと良いでしょう。

.sample {
  --sample-size: 24;
  font-size: calc(var(--sample-size) * 1px);
}

「calc()」の中で「1pxをかける」処理を行うと、計算結果の最後に単位をつけることができます。

「%」の単位を付与したいときは「1%をかける」処理を行なってあげましょう。

CSS変数のスコープ

CSS変数にはスコープを設定することができます。
スコープとは変数を参照できる範囲のことです。

実際にスコープの例を見てみましょう。

<p class="scope1">scope1</p>
<p class="scope2">scope2</p>
<p class="scope3">scope3</p>

:root{
  --zp_color: blue; 
} 
.scope1 { 
  color: var(--zp_color, #000000);
}
.scope2 { 
  --zp_color: red;
  color: var(--zp_color, #000000);
  --zp_color_orange: orange;
}
.scope3 { 
  color: var(--zp_color_orange, #000000);
}

出力結果

.scope1では:rootで設定したblueが文字色に出力されます。
.scope2では.scope2で設定したredが文字色に出力されます。
.scope3では.scope2で設定したorangeが文字色に出力されるように感じるかもしれませんが、.scope2で定義した変数は.scope2の中でしか参照することができません。
そのため、フォールバック値に設定した#000000（黒色）が出力されます。

JavaScriptやその他の言語でもsocpeの概念は必要なのでこの機会にぜひ覚えておきましょう。

CSS変数を使う注意点

CSS変数のルールを覚えていないと思わぬ表示崩れをおこしてしまうでしっかり覚えておきましょう。

CSS変数は大文字と小文字が区別される

CSSの変数名では大文字と小文字が別物として認識されます。

:root{
   --ZP_COLOR: orange;
   --zp_color: blue;
}

上記のvar(--ZP_COLOR)ではorangeが、var(--zp_color)ではblueが、出力されます。

CSS変数をプロパティで使えない

CSSの変数は値を出力するときにのみ使用することができます。

例えば、下記のようにmarginプロパティをよく使用していたとしても変数にすることはできません。

:root{
   --mg: margin;
}
.ng{
   var(--mg): 10px;
}

変数に単位まで入れて使用する

例えば16pxを出力する時2つの方法をみていきます。

:root{
   --px1: 16;
   --px2: 16px;
}
.ng{
   font-size: var(--px1)px;
}
.ok{
   font-size: var(--px2);
}

どちらもfont-size:16px;と出力できそうですが、実際は--px2の方のみが正解です。

以上が基本ルールなので、これらのルールを守り変数を使いこなしてより、保守性の高いサイトをより素早く作れるようになっていきましょう。

対応ブラウザ

CSS変数に対応しているブラウザーはInternet Explorer以外のほぼ全てです。
現在メインで使われているChromeやSafari、Edgeで利用することができます。

しっかりと設計された保守性の高いCSSを記述するには変数の利用が必要です。
Internet Explorerのサポート終了に伴いCSS変数を利用する機会は増えていくことが想定されるので、ぜひ扱えるようになりましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー