CSS var()の使い方完全ガイド

2025年2月12日2025年2月15日

css

はじめに
var()とは？
- 基本構文
var()の基本的な使い方
応用例
まとめ

はじめに

CSSのvar()関数は、変数を定義して再利用できる便利な機能です。これを活用すると、スタイルの一貫性を保ちつつ、保守性の高いコードを書くことができます。本記事では、var()の基本的な使い方から、実践的な応用例までを詳しく解説します。

`var()`とは？

var()は、CSSカスタムプロパティ（変数）を参照するための関数です。CSSの変数は、:rootや任意のセレクタ内で--変数名: 値;の形式で定義できます。

基本構文

:root {
    --main-color: #3498db;
    --padding-size: 16px;
}

.box {
    background-color: var(--main-color);
    padding: var(--padding-size);
}

この例では、--main-colorと--padding-sizeというカスタムプロパティを定義し、.boxクラスでそれを適用しています。

`var()`の基本的な使い方

1. グローバルな変数の定義

変数を:rootで定義すると、ページ全体で再利用できます。

:root {
    --primary-color: #ff5733;
    --font-size: 14px;
}

body {
    color: var(--primary-color);
    font-size: var(--font-size);
}

2. 特定の要素に対する変数の定義

要素ごとに異なる変数を設定することも可能です。

.button {
    --button-color: #27ae60;
    background-color: var(--button-color);
}

3. フォールバック値の設定

変数が未定義の場合、デフォルト値を設定できます。

.box {
    background-color: var(--secondary-color, #ccc);
}

この場合、--secondary-colorが定義されていない場合は#cccが適用されます。

応用例

1. テーマの切り替え

CSS変数を使うと、簡単にダークモードやテーマの切り替えができます。

:root {
    --background-color: #ffffff;
    --text-color: #333333;
}

.dark-mode {
    --background-color: #222222;
    --text-color: #ffffff;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

これにより、.dark-modeクラスをbodyに追加すると、カラーテーマが変わります。

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

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

:root {
    --font-size: 16px;
}

@media (max-width: 600px) {
    :root {
        --font-size: 14px;
    }
}

body {
    font-size: var(--font-size);
}

画面サイズが600px以下になるとフォントサイズが14pxに変わります。

3. アニメーションへの適用

CSS変数はtransitionやanimationとも組み合わせられます。

:root {
    --hover-color: #ffcc00;
}

.button {
    background-color: #007bff;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: var(--hover-color);
}

この例では、ボタンをホバーしたときの背景色を変数で管理しています。

まとめ

CSSのvar()関数を活用すると、コードの可読性・保守性が向上し、テーマ管理やレスポンシブデザインの実装がスムーズになります。基本的な使い方から応用まで、ぜひ活用してみてください！