HOME ブログ Web制作 フロントエンド 【CSS】知らなきゃ損!CSS変数(カスタムプロパティ)の使い方

【CSS】知らなきゃ損!CSS変数(カスタムプロパティ)の使い方

frontend frontend

CSS変数の使い方

CSSでも変数が使えるのはご存じでしょうか?

変数というのは、一度定義しておけば繰り返し汎用的に利用できるものになります。Sass等を使っている人は同じみですね。SassがなくてもCSSで変数を使うことはできます。

CSS変数を使いこなすことで、より効率的かつ便利なCSSを書くことができます。

今回はそんなCSSの変数について、具体的にどのようなものがあるのか、どのように使うのか、について初心者でも分かるように解説していきたいと思います。

田中くん
田中くん

変数は便利なので使わなきゃ損ですよ

CSS変数(カスタムプロパティ)とは

CSS変数とはなんでしょうか?
公式では、カスケード変数のためのCSSカスタムプロパティと言われています。その他にも、CSS変数、カスケーディングスタイルとも言われます。

そもそも変数とは?

そもそも変数についてですが、プログラミングを少しでもかじったことがある人なら分かるかとおもいますが、簡単に説明すると文字列や数値などを格納しておく箱やパーツのようなイメージです。

一度定義した変数は、何度でも使い回すことができ、変数の中身を変えると、その変数を使った箇所にもその変更が反映されるため、修正の手間をかなり削減することができます。

たとえば、赤色を格納した変数を使って、複数のオブジェクトを作ったとします。

後々、赤色をやっぱ青色に変えたいと思った時、変更するのは変数のみで済みます。

田中くん
田中くん

もし変数を使っていなかったら、作成したオブジェクト一つひとつを手作業で青色に修正しなくてはなりません

CSS変数はどのように書くの?

では具体的にCSSの変数とはどういった記述をするのか見ていきましょう。

CSS変数の定義の仕方

CSS変数の定義についてですが、--ハイフンふたつを使って定義します。

以下のような感じです。

:root {
  --yellow: #fff100;
}

上記の--yellowの部分が変数名になります。変数名については何と決まっているわけではなく、好きな名前をつけてだい

そして#fff100の部分が値です。ここは通常と同じですね。

:rootというのは、グローバル変数というものになります。

グローバル変数とは?

グローバル変数とは、宣言することであらゆるところで使用できる変数のことを言います。

    グローバル変数とは、コンピュータプログラムで使用される変数のうち、プログラム中のどこにあるコードからでも同じように値の読み取りや書き換えが可能なもの。グローバル変数(大域変数)とは – IT用語辞典

    変数では色のみではなく、さまざまなものを指定できます。

    以下bootstrapの例です。

    :root {
      --blue: #007bff;
      --indigo: #6610f2;
      --purple: #6f42c1;
      --pink: #e83e8c;
      --red: #dc3545;
      --orange: #fd7e14;
      --yellow: #ffc107;
      --green: #28a745;
      --teal: #20c997;
      --cyan: #17a2b8;
      --white: #fff;
      --gray: #6c757d;
      --gray-dark: #343a40;
      --primary: #007bff;
      --secondary: #6c757d;
      --success: #28a745;
      --info: #17a2b8;
      --warning: #ffc107;
      --danger: #dc3545;
      --light: #f8f9fa;
      --dark: #343a40;
      --breakpoint-xs: 0;
      --breakpoint-sm: 576px;
      --breakpoint-md: 768px;
      --breakpoint-lg: 992px;
      --breakpoint-xl: 1200px;
      --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    CSS変数の呼び出し方

    では次に作成した変数を実際に使ってみましょう。

    作成した変数を呼び出します。

    :root {
      --yellow: #fff100;
    }
    
    .selector {
      background-color: var(--yellow);
    }

    呼び出し方ですが、var(--変数名)といった形式で呼び出します。

    See the Pen KKpYWOO by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

    いかがでしょうか。背景色に変数で宣言したものが適用されているのが分かります。

    変数の中で変数も使える

    ちなみに変数の中で変数を使うこともできます。

    See the Pen xxGedVr by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

    上記の場合、marginを変数で指定しています。まずはmargin-topを定義して、次にmargin-bottomを定義、それらを使ってボックスのmarginモデルを作成しています。

    予備のフォールバックの値をセットできる

    予備となるフォールバックの値をセットしておくことができます。

    なにかの拍子に変数を消してしまったり、適用されなかった場合にフォールバック値が変わりに適用されるようになります。

    :root {
      --color: #fff100;
    }
    
    .box {
      background: var(--color,yellow);
    }

    var(--color,フォールバック値)と言ったように指定します。

    Sassを使っている人も覚えておいた方がいい理由

    CSSでの変数と言えば、Sassがあるでしょう。弊社でもSassの使用が標準のため、変数はすべてSassで実現しています。しかしSassを使っている方なら分かるかと思いますが、Sassではメディアクエリ内で変数を定義することができません。

    以下例を見てみましょう。

    See the Pen wvaZdob by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

    メディアクエリ内で変数を定義していますが、適用されていないのが分かります。こういった場合にCSS変数を使うことでやりたいことを実現することができます。

    CSS変数の注意点

    CSS変数を使用する際にいくつか注意点があります。

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

    CSSのプロパティ名を変数として定義することはできないので注意が必要です。

    :root {
      --size: margin;
    }
    
    .box {
      /*プロパティ名を変数に置き換えることはできない*/
      var(--size): 30px;
    }

    CSS変数まとめ

    CSS変数まとめ
    • 変数定義することで繰り返し使うことができる
    • 変数の中で変数を使うこともできる
    • メディアクエリ内で変数を定義することができる
    • フォールバック値を設定しておくことで変数が無効になってしまった時に代替の値を適用することができる
    • プロパティ名を変数で置き換えることはできない

      参考:CSSで変数(カスタムプロパティ)を使ってみよう

      SHARE !

      TAG