Home
CSS
CSS変数(カスタムプロパティ)の使い方

CSS変数(カスタムプロパティ)の使い方

公開日
2022.01.08
更新日
2022.04.02
CSS変数(カスタムプロパティ)の使い方

どうも!かけちまるです!

プログラミング言語で便利な変数。格納した値を使いまわせて重宝します。
実はCSSも変数を使うことができるのです。

フォントサイズやメインカラーを登録しておくと使い回せるし、後から変更があったときに修正箇所は1か所で済みます。

この記事では、

  • ・CSS変数の使い方
  • ・CSS変数の代替値設定
  • ・JavaScriptでCSS変数を操作する方法
  • ・CSS変数のブラウザサポート状況

を解説します。

CSS変数の使い方

使い方を簡単に説明すると、ハイフン2つの変数名と適当なCSSプロパティーの値(例えば、--color: #ffffff;)で変数を宣言します。
宣言した変数を使うにはvar()関数(例えば、background-color: var(--color);)で使うことができます。

詳しく見ていきましょう。

CSS変数の宣言

CSS変数はハイフン2つの変数名と適当なCSSプロパティーの値(例えば、--color: #ffffff;)で変数を宣言します。

CSS変数の宣言方法は2つあります。
1つ目は変数の有効範囲を制限する宣言方法です。

次のように書きます。

CSS
コピー
.sample{ --color: #ffff00; }

2つ目はCSS全体に有効な宣言方法です。
こちらの宣言方法がよく使う方法と思います。

次のように書きます。

CSS
コピー
:root{ --color: #ffff00; }
補足
  • ・CSS変数の変数名は大文字と小文字を区別するので–colorと–Colorは別の変数名として扱われます。

CSS変数の使用

宣言した変数を使うにはvar()関数(例えば、background-color: var(--color);)で使うことができます。

次のように書きます。

CSS
コピー
.sample{ background-color: var(--color); }

上記の書き方だと何らかの理由でCSS変数が定義されていなかった場合、意図しない表示になりそうです。
そんな時には代替値を設定しましょう。

次のように書きます。

CSS
コピー
.sample{ /* --colorが定義されていなければ#ffff00が適用される */ background-color: var(--color, #ffff00); }
補足
  • ・CSS変数の代替値はブラウザサポートをカバーするものではありません。
    CSS変数がブラウザでサポートされていなければ代替値も適用されないので注意が必要です。
    ブラウザサポートについてはこちら

CSS変数をJavaScriptで使う方法

CSS変数はJavaScriptでも操作できます。
ここでは、CSS変数の値を取得する方法と値を変更する方法を解説します。

仮にHTMLとCSSとJavaScriptは次のように書きます。

HTML
コピー
<div class="sample"></div>
CSS
コピー
:root { --bg-color: #ff0000; } .sample { background-color: var(--bg-color); width: 50px; height: 50px; }
JavaScript
コピー
// CSS変数の値を変更する const element = document.querySelector('.sample'); const style = getComputedStyle(element); const property = style.getPropertyValue('--bg-color').trim(); console.log(property); // #ff0000 // CSS変数の値を変更する document.documentElement.style.setProperty('--bg-color', '#0000ff');

実装サンプル

赤色のboxがJavaScriptによって青色に変わっているのが確認できるでしょうか?

CSS変数のブラウザサポート状況

IE以外は新しいバージョンであればサポートされているようですね。
IEを気にしなければ問題なく使えそうです。

以下の表がブラウザサポート状況です。※2022年1月8日時点

IE Edge Firefox Chrome Safari iOS Android
–* × 15~ 31~ 49~ 9.1~ 9.3~ 96~
var() × 16~ 31~ 49~ 10~ 10~ 96~

最新のサポート状況は「Can I use」にて確認できます。

–* : https://caniuse.com/?search=–*
var() : https://caniuse.com/?search=var()

まとめ

この記事では、CSS変数の使い方を解説してきました。
CSS変数を使いこなせるようになれば後から変更があっても1か所の編集で済むので保守性が高くなりそうですね。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【セキュリティ対策】WP Cerber Securityの設定方法

【セキュリティ対策】WP Cerber Securityの設定方法

【Three.js】カメラの距離を調節してWebGL座標をwindow座標(px)に合わせる

【Three.js】カメラの距離を調節してWebGL座標をwindow座標(px)に合わせる

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

【GSAP】擬似要素(before・after)をアニメーションさせる方法

【GSAP】擬似要素(before・after)をアニメーションさせる方法

WordPressでショートコードを自作する方法

WordPressでショートコードを自作する方法

【GSAP】registerEffectでアニメーションをテンプレート化する方法

【GSAP】registerEffectでアニメーションをテンプレート化する方法