1. TOPページに戻る
  2. CSS
  3. CSSのカスタムプロパティ(CSS変数)を使ってみよう

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

  • 2020年04月16日

CSSの便利な変数機能を使ってみよう。

Sassなどを使用して使っていたCSSの変数ですが、カスタムプロパティ(CSS変数)を使うとSassなどを使わずにそのまま使用することが可能です。

記述方法

:root {
  --mainColor: #dddddd;/* 指定する記述 */
}

body {arigatougozai
  color: var(--mainColor);/* 使用する記述 */
}

これで使うことが出来ます。簡単ですね。

テキストの色や背景のベース色など登録しておくと、使い回しが簡単にでき良さそうです。

代替値

もし、設定したカスタムプロパティに値がセットされていなかった場合用の代替値設定ができます。

div {
  color: var(--mainColor,red); /* --mainColorが定義されていない場合はred */
}

一見この記述をすれば対応していないブラウザでの指定に使えそうですが、使えないブラウザではそもそもこのプロパティが適用されないので代替値が反映されることはありません。

使える対象のブラウザ

基本的にはIE以外には使えるためIEを気にしないなら大丈夫そうです。

ツールを使ってカスタムプロパティを使う

まだIEを気にしないといけないという場合は、webpackなどにpostcss-preset-envを入れて使うと使えないブラウザへの補完もしてくれるので気にせず使用できます。

:root {
  --mainColor: #ff00cc;
}
p {
  color: var(--mainColor);
  color: #ff00cc;/* このように補完してくれます */
}