CSS変数とは？基本の使い方と便利な使用例

公開日 : 2023.01.05 最終更新日 : 2023.07.04

コーディング

こんにちは、アンドエイチエーコーディングチームです。
本記事では、「CSS変数」について、基本の使い方と便利な使用例を簡単にご紹介します。

CSS変数とは？

以下、MDNの段階変数用のCSSカスタムプロパティの引用です。

段階変数用の CSS カスタムプロパティ とは何度も繰り返して用いられるカスタムプロパティを作成できるCSSモジュールです。

むずかしいですね。。。

簡単に言うと、まず「変数」とは、文字列や数値などを格納しておく箱だと思ってください。

この箱に入れた内容は、何回でも使い回すことが可能です。そのため、他の箇所で同じ箱の内容をそのまま取り出す（呼び出す）ことができます。

もちろん大本の箱の中身を変えると、取り出している部分すべてで変更された内容が取り出せます。

そのため、修正の時間を削減できる・管理がしやすい等のメリットがあります。

CSS変数の使い方

定義の仕方

CSS変数の定義の仕方ですが、以下のように、「— (ハイフン)」2つを使って定義します。

:root {
 --red: #f00;
｝

–redの部分が変数です。

変数では色のみではなく、marginの数値など様々なものを指定できます。

ちなみに:rootは、グローバル変数というもので宣言することであらゆるところで使用できる変数のことです。

変数の呼び出し方

:root {
  --red: #f00;
｝

.red {
  background-color: var(--red);
}

上記のようにvar(–変数名)といった形で呼び出すことができます。

また、予備となるフォールバックをセットしておくことができます。
変数が適用されなかった場合に、このフォールバック値が代わりに適用されますので、対応していないブラウザ等でも安心です。

:root {
  --color: #e50012;
}

.box {
  background: var(--color,red);
}

但し、フォールバックの指定は、パフォーマンスに影響があるようです。以下は「MDN CSS のカスタムプロパティ (変数) の利用」からの引用です。

このテクニックはパフォーマンスの問題を起こすことがあります。変数を解釈するのにより時間が掛かるため、ブラウザーがページを表示するのが通常よりも遅くなります。

使用の注意点

プロパティ名は変数で定義することができない

様々なものを定義できると言いましたが、プロパティ名（CSSの左側の値）は変数として扱うことができません。

:root {
  --margin: margin;
}

.inner {
  /*プロパティ名を変数にはできない*/
  var(--margin): 30px;
}

CSS変数の便利な使用例

CSS変数を使うことで、サイトの規模によっては、管理が非常に簡単になります。
以下では、実際の使い方をご紹介します。

例１）フォントサイズの定義

メディアクエリの中でも使えるので、レスポンシブデザインで便利です。

:root {
    --f24-size:24px;
    --f20-size:20px;
    --f18-size:18px;
}

@media screen and (max-width: 1024px) {
  :root {
    --f24-size:calc(24/1024*100vw);
    --f20-size:calc(20/1024*100vw);
    --f18-size:calc(18/1024*100vw);
  }
}

例２）marginやpaddingの定義

calc()と組み合わせて画面幅に対する余白を調整できるため便利です。

:root {
  --m30-size:30px;
  --m20-size:20px;
  --m10-size:10px;
}

@media screen and (max-width: 1024px) {
  :root {
    --m30-size:calc(30/1024*100vw);
    --m20-size:calc(20/1024*100vw);
    --m10-size:calc(10/1024*100vw);
  }
}