sp_menu

【CSS】変数(カスタムプロパティ)の使い方を解説

【CSS】変数の使い方を解説

今回はCSSの変数(カスタムプロパティ)の使い方をご紹介します。変数を使えるとコーディング時間の短縮やサイトの管理もしやすくなり使い方を知っておくと便利ですのでよろしければ参考になさってください。

この記事は以下のお悩みを解決します。

  • ・変数って何?
  • ・変数の使い方を知りたい

1. 変数とは

CSSの変数はカスタムプロパティとも呼ばれ、データを記憶しておく箱のようなものだと思ってください。変数を定義すると何度も使い回すことができます。例として変数にカラーコード「#8ED1FC」を定義したとします。

使い方は後ほど説明しますが、プロパティの値に変数名を指定すると呼び出されます。

WEBサイトでは特定の色を何度も使うことがあります。毎回、「#8ED1FC」のような覚えにくいカラーコードを指定するのは煩わしいですし、コード量が増えてくるとその色を使った箇所を探すのに時間がかかってしまいます。

変数名は自分でわかりやすい名前をつけておけばいいですし、仮に忘れてしまっても変数は定義する場所が決まっているので確認する時間はそれ程かからないでしょう。

また、何箇所も同じ色を指定したところをやっぱり色を変更したいとなった場合、変数を使っていないと指定した箇所全部を変更する必要がありますが、変数を使っていれば変数を定義した1箇所だけ変更すればいいので修正のしやすさもメリットになります。

2. 変数の定義方法

2-1. 色を定義

ここでは変数に色を定義します。div要素(class=”box”)の背景色に定義した変数を指定します。

<div class="container">
  <div class="box"></div>
</div>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* :root内に変数を定義する */
:root {
 /*変数 --box-bg-colorを定義*/
  --box-bg-color: #8ED1FC;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 150px;
  height: 150px;
 /*backgroundに変数--box-bg-colorを指定*/
  background: var(--box-bg-color);
}

CSSの解説

8-11行目:  :root{- -box-bg-color: #8ED1FC;}

変数は:root{~}内に定義します。変数名はハイフン「- -」を2個、変数名の頭につけて通常のCSSプロパティと同じように「:」で区切って値を定義します。

 変数の定義: --変数名: 値;   

25行目: background: var(- -box-bg-color);

変数の呼び出し: プロパティ: var(--変数名);

div要素(class=”box”)の背景色に定義した変数(- -box-bg-color)を呼び出しています。変数を呼び出すにはvar()関数の中に- -変数名を書きます。

すると以下の画像のように表示されます。div(class=”box”)要素の背景は変数で指定した色になっています。

2-2. 数値や文字列を定義

色だけではなく数値や文字列も変数として定義できます。ここでは色の他にpaddingの数値とtext-alignの位置を示す文字列をそれぞれ変数に定義しています。

<header>
  <p>ヘッダー</p>
</header>

<main>
  <section class="section1">
    <p>section1</p>
  </section>
  <section class="section2">
    <p>section2</p>
  </section>
  <section class="section3">
    <p>section3</p>
  </section>
</main>

<footer>
  <p>フッター</p>
</footer>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
 /*変数--header-footer-bg-colorを定義*/
  --header-footer-bg-color: #000B6D; 
  /*変数--header-footer-paddingを定義*/
  --header-footer-padding: 20px 30px;
  /*変数--text-posを定義*/
  --text-pos: center;
}

body {
  /*変数--text-posを指定*/
  text-align: var(--text-pos);
  color: #FFF;
}

header{
 /*変数--header-footer-bg-colorを指定*/
  background: var(--header-footer-bg-color);
  /*変数--header-footer-paddingを指定*/
  padding: var(--header-footer-padding);
}

section {
  padding: 90px 20px;
}

.section1 {
  background: skyblue;
}

.section2 {
  background: orange;
}

.section3{
  background: lightgreen;
}
  
footer {
  /*変数--header-footer-bg-colorを指定*/
  background: var(--header-footer-bg-color);
  /*変数--header-footer-paddingを指定*/
  padding: var(--header-footer-padding);
}

CSSの解説

7-14行目: :root{~}

:root{~}内に変数が定義されています。

9行目:- -header-footer-bg-color: #000B6D;

ヘッダーとフッターの共通の背景色を指定するためのカラーコードを変数として定義しています。

11行目: – –header-footer-padding: 20px 30px;

ヘッダーとフッターの共通のpaddingを指定するための数値を変数として定義しています。

13行目:- -text-pos: center;

text-alignで指定する文字列を変数として定義しています。

18行目: text-align: var(- -text-pos);

text-alignの位置を定義した変数(- -text-pos)を呼び出しています。

24, 47行目:background: var(- -header-footer-bg-color);

ヘッダーとフッターの背景色を定義した変数(- – header-footer-bg-color)を呼び出しています。

26, 49行目:padding: var(- -header-footer-padding);

ヘッダーとフッターのpaddingを定義した変数(- -header-footer-padding)を呼び出しています。

実行結果は以下のように表示されます。

色だけでなく数値や文字列も変数を定義できることがおわかりいただけたと思います。

また、今回ヘッダーとフッターはpaddingに同じ値を指定していますが、もし途中でpaddingを変更したくなった場合、変数を使わずに従来通りpaddingを指定しているとヘッダーとフッターの2箇所修正しなければいけませんが変数を使っていれば:root{~}内の変数を定義している箇所だけ変更するだけですみます。

このくらいの簡易なコードでは変数を使うメリットはあまりないかもしれませんが、WEBサイトの規模が大きくなると共通する箇所が増えていくので修正するときに「ここのプロパティの修正をし忘れた」みたいな修正ミスをなくすことができます。

2-3. メディアクエリ内に変数を定義

ブラウザの幅に応じて変数の値を変更することもできます。元々定義していた変数をメディアクエリ内でも定義します。CodePenの右上の「EDIT ON CODE PEN」をクリックしてブラウザの幅を変えてみてください。

ブラウザの幅を小さくするとdiv要素(class=”box”)の背景の色が変わることがわかると思います。

See the Pen CSS Custom Property2 by Hiro (@Coffee1610) on CodePen.

<div class="container">
  <div class="box"></div>
</div>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
 /*変数--box-bg-colorを定義*/
  --box-bg-color: #8ED1FC;
}

/*ブラウザ幅が600px以下のとき*/
@media(max-width:600px) {
  :root {
  /*変数--box-bg-colorを定義*/
    --box-bg-color: #FFBCBC;
  }
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 150px;
  height: 150px;
 /*変数--box-bg-colorを指定*/
  background: var(--box-bg-color); 
}

CSSの解説

13-18行目:@media(max-width:600px) {~}

ブラウザの幅が600px以下になったとき、中括弧内に指定したプロパティが適用されます。

16行目: – -box-bg-color: #FFBCBC;

メディアクエリ内に変数 – -box-bg-colorを定義したことでブラウザ幅が600pxより大きいときはカラーコードが「#8ED1FC」、600px以下のときは「#FFBCBC」になります。

以下は今回参考にさせていただいたサイトです。

2-4. JavaScriptからCSSの変数を変更する

最後にJavaScriptからCSSの変数を変更する方法をご紹介します。これまでと同じように、div要素(class=”box”)にCSSでカラーコードを変数として定義します。

ボタンをクリックするとJavaScriptで指定した色に変数を上書きするようにします。CodePenで「Run Pen」を押して確認してみてください。

See the Pen CSS Custom Property1 by Hiro (@Coffee1610) on CodePen.

<div class="container">
    <div class="box"></div>
    <button class="btn">色を変える</button>
</div>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
 /*変数--box-bg-colorを定義*/
  --box-bg-color: #8ED1FC;
}


.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  /*変数--box-bg-colorを指定*/
  background: var(--box-bg-color); 
}

.btn {
  margin-top: 30px;
}

CSSの解説

9行目:- -box-bg-color: #8ED1FC;

変数「- -box-bg-color」にカラーコード「#8ED1FC」を定義しています。

26行目:background: var(- -box-bg-color);

変数(– -box-bg-color)を呼び出しています。

//ボタンを取得
const btn = document.querySelector('.btn');
//:rootを取得
const root = document.querySelector(':root');

//ボタンをクリックすると処理を実行する
btn.addEventListener('click', () => {
  //変数--box-bg-colorに#FFBCF0'を指定する
    root.style.setProperty('--box-bg-color', '#FFBCF0');
});

JavaScriptの解説

2行目:const btn = document.querySelector(‘.btn’);

ボタン要素(class=”btn”)を取得しています。

4行目: const root = document.querySelector(‘:root’);

ルート要素を取得しています。

7-10行目:btn.addEventListener(‘click’, () => {~});

addEventListener()は特定のイベントを実行したら呼び出される関数です。ここではボタンをクリックしたら処理を実行します。

9行目:root.style.setProperty(‘- -box-bg-color’, ‘#FFBCF0’);

要素.style.setProperty('変更するCSSのプロパティ名', '変更する値')

変数「- -box-bg-color」「#FFBCF0」を設定します。「- -box-bg-color」はCSSで「#8ED1FC」を指定していますが、ボタンをクリックすることで「#FFBCF0」に上書きされます。

3. まとめ

今回はCSSの変数(カスタムプロパティ)の使い方をご紹介しました。WEBサイトの規模が大きくなるほど変数を使ったほうがより管理しやすくなると思うので、ぜひ使ってみてください。

関連記事