Neat Design Journal

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

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

サイトのデザイン部分を担うCSS（カスケーディング・スタイル・シート）は日々どんどん進化しています。特に近年の新しいCSSにはサイト制作時に使えるとても便利なものが増えてきました。今日はその中でもCSS変数（カスタムプロパティ）についてご紹介したいと思います。

CSS変数とは？

プログラミングをかじったことのある人には変数と聞けば大体のことが想像できるんじゃないかと思いますが、Javascriptなどのプログラミング言語で扱う変数がCSSでも使えます。変数なので、自分で定義した値をCSS内のどこでも使い回せるのが大きな利点です。

CSS カスタムプロパティ（変数）の使用 - CSS: カスケーディングスタイルシート | MDN

カスタムプロパティ（CSS 変数やカスケード変数と呼ばれることもあります）は、CSS の作者によって作成され、文書全体で再利用可能な特定の値を表すエンティティです。これらは、@property アットルールまたはカスタムプロパティ構文（例: --primary-color: blue;）を使用して設定します。 カスタムプロパティは、CSS の var() 関数（例: color: var(--primary-color);）を使用してアクセスします。

CSS カスタムプロパティ（変数）の使用 - CSS: カスケーディングスタイルシート | MDNのファビコン
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties
CSS カスタムプロパティ（変数）の使用 - CSS: カスケーディングスタイルシート | MDNのサムネイル

詳しいことは上記のサイトもご参照ください。

書き方

カスタムプロパティの書き方は少し独特で、以下のように--（ハイフン2つ）から始めます。

/* :root要素にカスタムプロパティを定義 */
:root {
    --font-color-base: #242628;
}

/* 使いたい要素のところでvar(変数名)と記述 */
body {
    color: var(--font-color-base);
}

このように書くと、var(--font-color-base)に#242628が代入されて、

body {
    color: #242628;
}

こういう風に指定するのと同じ効果となります。覚えてしまえば簡単ですね。

ちょっと応用編

では、変数の使いどころはどんなところでしょうか。単に1回だけ指定するなら直接指定するのと何ら変わりはありませんが、最初にも書いたように、変数なので使い回しができる点が大きなメリットです。

例えば、以下のように指定していたとします。

:root {
    --color-base: #242628;
}

.post {
    color: var(--color-base);
}

.list {
    color: var(--color-base);
}

サイトのデザイン上、.postと.list以下のフォントカラーは同じにしたいというような場面でカスタムプロパティを使って指定していると、後でやっぱりフォントカラーを変えたいと考えた時に変数のところを一箇所変更するだけで、.postと.listの両方を一気に変更できるということになります。

:root {
    --color-base: #333; /* #242628から#333に変更 */
}

/* 以下の記述は変えなくて良い */
.post {
    color: var(--color-base);
}

.list {
    color: var(--color-base);
}

これは便利ですね。変更する際に変更箇所の漏れがなくなりますし、作業コストもグッと下がります。また、サイト全体のカラーに一貫性を持たせることにも寄与するし、いいことづくめです。

もう少し深掘り

さて、カスタムプロパティはサイト全体で使えるように定義したい時には:root要素に、特定の要素の中だけで定義したい時には当該要素の中で変数を定義することもできます。そのため、

:root {
    --color-base: #242628;
}

.post {
    color: var(--color-base);
}

.list {
    --color-base: #333;
    color: var(--color-base);
}

こんな風に書くと、.postのフォントカラーは#242628、.listのフォントカラーは#333となります。上記のように何も:root要素に書かないと適用されないわけではなく、当該要素の中だけで変数を定義して使うことが可能なんです。

さらに、計算式の中でもカスタムプロパティは使えます。

:root {
    --space: 1rem;
}

.post {
    margin-block-start: calc(var(--space) * 2);
}

.postの上マージンを1remの2倍に指定しています。これも便利ですね。このようにカスタムプロパティをうまく活用すると効率よくスタイル作成ができます。

最後に

カスタムプロパティで特に便利だなと思ったのは、繰り返し使えるのでサイト全体で同じことを何回も書き直さなくてよくなるという点です。フォントサイズやフォントカラーなど、一旦決めたにもかかわらずやっぱり修正したいっていう場面はよくあると思います。以前はその都度該当箇所を一つ一つ書き直していましたが、カスタムプロパティを使うようになってからはその工程がなくなりましたので、作業ペースも早くなりました。他にも様々な使い方があるので、気になった方はぜひ調べてみてください。

参考サイト

CSS Variablesはここまで進化した | gihyo.jp

Misskeyでは2025年も大きな機能改修・リファクタリングに取り組んでいます。その中にCSS Variablesに関する作業もあったので、今回はその紹介も兼ねてMisskeyで使っている便利なテクニックなどを取り上げます。

CSS Variablesはここまで進化した | gihyo.jpのファビコン
https://gihyo.jp/article/2025/04/misskey-19
CSS Variablesはここまで進化した | gihyo.jpのサムネイル

CSS変数（カスタムプロパティ）が便利だった - Qiita

ずっとSassの変数と同じだろうと思いスルーしていました。 試しに使ってみたところ、Sass ではできない便利な変数の利用方法を発見！ というわけで、CSS変数（カスタムプロパティ）の仕様をまとめてみました。 変数の宣言と値の定義 変数の宣言 先頭にハイフンを2つ -...

CSS変数（カスタムプロパティ）が便利だった - Qiitaのファビコン
https://qiita.com/taqumo/items/b221e689c8c27500b47a
CSS変数（カスタムプロパティ）が便利だった - Qiitaのサムネイル

変数にすると良い値

カスタムプロパティを“定数”として利用する、カスタムプロパティの素直な活用方法。

変数にすると良い値のファビコン
https://lopan.jp/css-custom-properties/variables/
変数にすると良い値のサムネイル