CSS変数（カスタムプロパティ）とは？

2025年3月2日

CSS変数（カスタムプロパティ）とは、CSS内で再利用可能な値を定義できる機能です。
これにより、テーマのカスタマイズやスタイルの管理が容易になります。

1. CSS変数の基本的な使い方

CSS変数は--から始まる名前で定義し、var()関数を使って参照します。

CSSコード:root {
    --main-color: #3498db;
    --text-color: #333;
    --font-size: 16px;
}
 
body {
    color: var(--text-color);
    font-size: var(--font-size);
}
 
h1 {
    color: var(--main-color);
}

CSSコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14	`:root {` `--main-color:` `#3498db;` `--text-color:` `#333;` `--font-size:` `16px;` `}` `body {` `color: var(--text-color);` `font-size: var(--font-size);` `}` `h1` `{` `color: var(--main-color);` `}`

解説

:root はCSS変数をグローバルに適用するために使われます。
var(--変数名) で変数を呼び出し、どこでも利用可能。

2. CSS変数を変更する

CSS変数はJavaScriptを使って動的に変更できます。

JavaScriptコードdocument.documentElement.style.setProperty('--main-color', '#e74c3c');

JavaScriptコード
1	`document.documentElement.style.setProperty('--main-color',` `'#e74c3c');`

これにより、リアルタイムでデザインを変更することも可能です。

3. メディアクエリとの組み合わせ

レスポンシブデザインにも活用できます。

CSSコード:root {
    --font-size: 16px;
}
 
@media (max-width: 600px) {
    :root {
        --font-size: 14px;
    }
}
 
body {
    font-size: var(--font-size);
}

CSSコード
1 2 3 4 5 6 7 8 9 10 11 12 13	`:root {` `--font-size:` `16px;` `}` `@media (max-width:` `600px) {` `:root {` `--font-size:` `14px;` `}` `}` `body {` `font-size: var(--font-size);` `}`

これにより、画面幅600px以下ではフォントサイズが14pxに変わります。

4. まとめ

CSS変数を使うことで、

一元管理でスタイル変更が簡単
JavaScriptと組み合わせて動的に変更可能
レスポンシブデザインにも活用できる

などのメリットがあります。ぜひ活用して、保守しやすいCSSを作りましょう！

中級者講座:目次

comment コメントをキャンセル

: スクラッチ風に擦ると文字が浮かび上がってくるデザイン

スクラッチ風にマウスをホバーすると背景が削れ文字が浮かび上がってくる処理です。マウスを動かすと、背景が削れます。スマホやタブレットでは、画面をタッチして指でなぞると、背景が削れます。文字が見える ...

CSS HTML JavaScript

: 画像サイズがバラバラだがすべて均一に綺麗に表示させたい場合

例えば商品一覧など横並びに4つ並べて表示させたい場合しかし用意された画像が全部バラバラで統一してくれないそんな場合の処理になります。 imgタグのクラスに「img-fit」を追加して対応しておりま ...

CSS HTML

: クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた

制作理由ワードプレスのクラシックエディタを直接使っているといつも思うことがありましたコード追加ボタンを自由に追加出来たら便利じゃない？この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...

HTML WordPress プラグイン

: 楽天アフィリエイトをPCとスマホで綺麗に表示させる方法

wordpressで楽天アフィリエイトを設置したはいいが特にスマホ表示だと要素をはみ出てしまって困っている方向けのテクニックとなります楽天アフィリエイトでは「生成されたHTMLソースの中にタグを追加 ...

CSS HTML

: JavaScriptの基本文法とデータ型の理解

基本文法とデータ型の理解 JavaScriptを使いこなすためには、基本的な文法とデータ型の理解が重要です。このセクションでは、それぞれを詳しく解説します。コメントの書き方 JavaScriptでは ...

HTML JavaScript

AMD Radeonユーザー必見！無料のAI画像生成ソフト『AMUSE』の使い方

【CSS】左右いっぱいに広がるデザインを作る

CSS変数（カスタムプロパティ）とは？

1. CSS変数の基本的な使い方

解説

2. CSS変数を変更する

3. メディアクエリとの組み合わせ

4. まとめ

CSS変数を使うことで、

クラシックエディタ用のプラグインを作ってみた

クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた

Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた