CSS変数の使い方

こんにちは、アンドエイチエーコーディングチームです。
今回はCSS変数についてご紹介致します。

CSS変数とは？

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

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

むずかしいですね。

簡単に言うと変数とは文字列や数値などを格納しておく箱のようなものです。

定義した変数は、何回でも使い回すことが可能で、中身を変えると、他の変数を使用した所にも変更が同じように適用されます。
そのため、修正の時間を削減できる、管理がしやすい等のメリットがあります。

CSS変数の使い方

宣言の仕方

CSS変数の定義の仕方ですが、以下のように--ハイフンふたつを使って定義します。

: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 のカスタムプロパティ (変数) の利用」からの引用です。

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

注意点

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

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

:root {
  --margin: margin;
}

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

使用例

変数にすることでサイトの規模などにもよりますが管理がしやすくなるときがあります。
実際の使い方を一部ご紹介します。

フォントサイズの定義
メディアクエリの中でも使えるのでレスポンシブデザインには便利です。

: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);
  }
}

いかがでしたか？
今回は「CSS変数（カスタムプロパティ）の使い方」をご紹介しました。
ぜひみなさんも使ってみて下さい。

なお、弊社ではサイトリニューアルから運用まで幅広く対応しております。
お困りごとがございましたら、弊社アンドエイチエーまでお気軽にご相談ください！