CSSで変数（カスタムプロパティ）を使って保守性を高めよう

今回は、CSSの「カスタムプロパティ」について学んでいきましょう。

CSSを記述する際に、paddingの値やカラーコードなど、何度も記述をすることが億劫になった経験はありませんか？

今回のCSSのカスタムプロパティを学ぶことで、そのようなお悩みを解決しつつ、CSSをより効率的に記述することができるようになります。

カスタムプロパティとは

カスタムプロパティとは、簡潔に説明すると、CSS内で「変数」を使った記述の方法です。

「CSS変数」や「カスケード変数」などとも呼ばれたりもします。

変数とは

プログラミングの世界における「変数」とは、数や文字列などの「値」を入れておく「箱（入れ物）」と覚えておきましょう。

今後、JavaScriptやその他のプログラミング言語を学ぶ際にも必ず出てくる概念になるので、今のうちからイメージを膨らませておきましょう。

カスタムプロパティを使うメリット

カスタムプロパティを使用することで、先ほど説明した「変数」をCSS内で使用することができます。

つまり、よく使用する「値」を変数の中に入れておくことで、何度も同じ記述を書かなくて済むようになるのです。

カスタムプロパティの使い方

次に、カスタムプロパティの使い方について学んでいきましょう。

変数についてうまく理解していなくても、この章を読んで変数に対するイメージを膨らましていければ大丈夫です。

カスタムプロパティの定義

まず初めに、変数の定義を行なっていきます。

変数を定義するときは「:root（ルートセレクタ）」の中で変数を作っていきます。

:root {
  --primary-color: #ffbb1e;
  --accent-color: #43cfe8;
}

変数の名前を決めるときは、先頭に「—（ハイフン）」を２つ添えます。

今回は「--primary-color」と「--zp-accent-color」という名前の変数を作りました。

これらの変数の中にはそれぞれ、カラーコードが値として入っています。

【注意】大文字と小文字は区別される

大文字と小文字は区別されて認識されるので、名前をつけるときは注意してつけましょう。
（「—sample」「—SAMPLE」はそれぞれ別物の変数名として認識されます。）

値を呼び出す

変数の定義が完了したら、変数の呼び出しを行なっていきます。

.sample {
  color: var(--primary-color);
}

変数を呼び出すときは、CSSの値の箇所で「var()」を使用します。

「var()」の中に呼び出したい変数名を記述することで、先ほど設定した変数を使用することができます。

今回の例では「--zp-primary-color」には「#ffbb1e」というカラーコードが値として入っています。

.sample {
  color: #ffbb1e;
}

なので、上記のように記述すると「color: #ffbb1e;」と記述したときと同じようにCSSが読み込まれます。

このようにカスタムプロパティは、変数の中に値を入れて必要なときに変数を呼び出して使っていきます。

そして、この「値」を持ち運ぶための「入れ物」が「変数」というものです。

【注意】変数にできるのは「値」のみ

「var()」が使用できるのは、CSSの値に対してのみです。
CSSのプロパティ名に対して使用することはできないので注意が必要です。

/*正しくない例*/
:root {
  --primary-color: color;
}

.sample {
  var(color): red;
}

【注意】var()の後に単位をつけない

「var()」の後には単位をつけることができません。
もし、単位をつけてしまうと、変数がうまく呼び出されなくなってしまいます。

/*正しくない例*/
:root {
  --samplesize: 32;
}

.sample {
  font-size: var(--samplesize)px;
}

フォールバック（代替案）を設定する

カスタムプロパティがうまく読み込まれなくなった時の対応策として、
変数の後ろに「,（カンマ）」を打つことで、２つ目の値（第二引数）を設定することができます。

.sample {
  color: var(--primary-color, #ffbb1e);
}

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

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

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

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー