【CSS】レッスン3-09：CSS変数を理解しよう

一つ前の章ではリストやテーブルのスタイル変更方法について学習しました。

今回はCSS変数について見ていきましょう。

Lesson3-1：ボックス配置の基礎を理解しよう
Lesson3-2：ボックスサイズを変更しよう
Lesson3-3：ボックスを自在に配置しよう
Lesson3-4：画像を自在に配置しよう
Lesson3-5：画像のスタイルを変更しよう
Lesson3-6：背景画像を設定しよう
Lesson3-7：リンクボタンを設置しよう
Lesson3-8：リストとテーブルのスタイルを変更しよう
Lesson3-9：CSS変数を理解しよう ◁今回はココ

ウェブサイトのデザインを管理していると、色やフォントサイズ、余白などを複数の場所で繰り返し設定する場面が多くあります。

こうしたスタイルの一貫性を保ちながら、効率的に変更や調整を行うための便利な機能が「CSS変数」です。

CSS変数を活用することで、ページ全体のデザインを簡単にコントロールでき、メンテナンスの手間も大幅に軽減されます。

本記事ではCSS変数の基本的な使い方から、実際の活用方法までを初心者向けにわかりやすく解説していきます。

<<前のページ HTML/CSSの記事一覧 次のページ>>

CSS変数とは？

CSS変数（カスタムプロパティとも呼ばれます）は、CSS内で再利用できる値を定義しておくための機能です。

通常、色やフォントサイズ、余白などのスタイルは個別に指定する必要がありますが、CSS変数を使用することで、1つの変数に値をまとめておき、必要な場所で繰り返し利用することができます。

CSS変数の特徴

CSS変数には以下のような特徴があります。

  • 再利用可能: 一度定義した変数は、複数の要素で簡単に使い回すことができます。
  • メンテナンスが簡単: 変数の値を変更するだけで、関連するすべてのスタイルが自動的に更新されます。
  • 柔軟なデザイン管理: テーマやデザインの切り替えが容易になります。

CSS変数の基本構造

CSS変数は以下のように「名前」と「値」のセットで定義します。

:root {
  --main-color: #3498db;
  --font-size: 16px;
}
  • :root はCSS全体で使用できる変数を定義するための特別なセレクタです。
  • 変数名は --（ハイフン2つ）で始める必要があります。例えば、--main-color や --font-size なが変数名になります。
  • 変数の値は色コード（#3498db）やフォントサイズ（16px）など、通常のCSSプロパティで使用する値と同じ形式で指定します。

CSS変数を理解することで、効率的なスタイル管理が可能になり、デザインの変更や調整が格段に楽になります。

次の章では実際にCSS変数をどのように定義し、使用するのかを詳しく見ていきましょう。

CSS変数の基本的な使い方

CSS変数の基本的な使い方は「変数の定義」と「変数の呼び出し」の2つのステップで構成されています。

ここでは初心者でも理解しやすいように、具体的な例を交えて解説していきます。

CSS変数の定義

CSS変数は-- で始まる名前とその値をセットで定義します。

多くの場合ページ全体で使用できるように:root セレクタ内で定義します。:root はHTML文書のルート要素を指し、グローバルな変数として機能します。

:root {
  --primary-color: #ff5733;  /* メインカラーの定義 */
  --padding-size: 20px;      /* 余白のサイズを定義 */
  --font-size-large: 18px;   /* 大きめのフォントサイズを定義 */
}
  • --primary-color はメインカラーを定義しています。
  • --padding-size は余白のサイズ。
  • --font-size-large はフォントサイズを指定しています。

このように変数をまとめておくことで、デザインのルールを一元管理できます。

CSS変数の呼び出し

定義した変数はvar() 関数を使って呼び出します。var() の中に変数名を指定するだけで、簡単に値を適用できます。

body {
  background-color: var(--primary-color); /* 背景色にメインカラーを適用 */
  padding: var(--padding-size);           /* 余白に変数で指定したサイズを適用 */
  font-size: var(--font-size-large);      /* フォントサイズに変数を適用 */
}

このコードでは先ほど定義した変数を使って背景色、余白、フォントサイズを設定しています。

もしメインカラーを変更したい場合は:root に定義された --primary-color の値を変えるだけで、すべての関連するスタイルが一括で更新されます。

デフォルト値の設定（オプション）

var() 関数は、変数が未定義の場合の「デフォルト値」を指定することもできます。

h1 {
  color: var(--heading-color, #000000); /* 変数が未定義なら黒 (#000000) を適用 */
}

この例では--heading-color が未定義の場合、自動的に黒色が適用されます。

これにより、変数が存在しない場合でも安全にスタイルを維持できます。

ポイントまとめ

  • 変数は :root に定義することで、グローバルに使用可能。
  • 変数を呼び出すときは var(--変数名) を使う。
  • デフォルト値を指定することで、未定義時のフォールバックが可能。

次の章では、CSS変数の利点や具体的な活用方法について詳しく紹介していきます。

以下のようなデザインを作りたいとします。:root にCSS変数を定義してください。

  • ページ全体の背景色は 薄いグレー (#f0f0f0)
  • 文字の色は 濃いグレー (#333333)
  • 余白（padding）は 20px

CSS変数の利点と活用例

CSS変数を使うことでスタイルの管理がより効率的で柔軟になります。

この章ではCSS変数の主な利点と、実際の活用例を紹介します。

CSS変数の利点

CSS変数を利用することには以下のようなメリットがあります。

① 一括管理によるメンテナンス性の向上

CSS変数の最大のメリットは、一度定義した変数を複数の場所で再利用できることです。

例えばウェブサイト全体で使用しているメインカラーを変更したい場合、変数の値を1か所変更するだけで、すべての関連箇所が自動的に更新されます。

以下のコードでは--button-color という変数を定義し、複数のボタンに適用しています。もし色を変更したい場合は--button-color の値を変えるだけでOKです。

:root {
  --button-color: #4caf50; /* ボタンのメインカラー */
}

.button {
  background-color: var(--button-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

② デザインの一貫性を保てる

同じ変数を複数のスタイルで使用することで、デザインの統一感を保つことができます。

特に企業のブランドカラーやフォントサイズなど、サイト全体で一貫したスタイルが求められる場合に便利です。

たとえば以下のように設定することで、すべての見出しや段落に同じフォントと色を適用することができます。

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-family: 'Arial, sans-serif';
}

h1, h2, h3 {
  color: var(--primary-color);
  font-family: var(--font-family);
}

p {
  color: var(--secondary-color);
  font-family: var(--font-family);
}

③ テーマの切り替えが簡単

CSS変数はテーマの切り替え（例えばライトモードとダークモード）にも便利です。

テーマごとに変数の値を変更するだけで、デザイン全体を簡単に切り替えられます。

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

.dark-theme {
  --background-color: #333333;
  --text-color: #ffffff;
}

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

上記の例では<body> に dark-theme クラスを追加するだけで、ダークテーマに切り替わります。

<body class="dark-theme"> <!-- ダークテーマが適用される -->
  <h1>こんにちは、CSS変数！</h1>
</body>

ポイントまとめ

  • CSS変数は一括管理が可能で、メンテナンスが楽になる。
  • デザインの一貫性を保ちながら、テーマ変更も容易。
  • var() で変数を呼び出し、シンプルなコードで柔軟なスタイリングが可能。

次の章では、CSS変数を使用する際の注意点について説明します。

次のHTMLコードがあります。

  • ライトテーマ（背景色：#ffffff、文字色：#000000）と、ダークテーマ（背景色：#333333、文字色：#ffffff）の2つのテーマを作成してください。
  • :root でライトテーマ用の変数を定義し、.dark-theme クラスでダークテーマ用の変数を上書きしてください。
  • .content に適用するスタイルで、CSS変数を使って背景色と文字色を設定してください。
  • body に .dark-theme クラスを追加するだけで、ダークテーマに切り替わるようにしてみましょう。
<div class="content">
  <h1>ようこそ！</h1>
  <p>ここはCSS変数を学ぶページです。</p>
</div>

CSS変数を使用する際の注意点

CSS変数は非常に便利な機能ですが、使用する際にはいくつかの注意点があります。

ここでは初心者がつまずきやすいポイントや、より効果的に活用するためのコツを解説します。

古いブラウザのサポートに注意

CSS変数はモダンブラウザ（Google Chrome、Firefox、Safari、Edgeなど）でサポートされていますが、Internet Explorer（IE）ではサポートされていません。

そのため古いブラウザを使用しているユーザー向けの対応が必要な場合は、フォールバック（代替スタイル）の指定を考慮しましょう。

.button {
  background-color: #4caf50; /* フォールバック（IE用） */
  background-color: var(--button-color, #4caf50); /* 変数とデフォルト値 */
  color: white;
}

このコードでは最初に通常の background-color を指定し、その後にCSS変数を使用しています。

もし変数がサポートされていない場合、最初の #4caf50 が適用されるため、表示が崩れるのを防げます。

スコープ（適用範囲）の理解が重要

CSS変数はどこに定義するかによって適用範囲（スコープ）が変わる という特徴があります。

特に、グローバル変数とローカル変数の違いを理解することが大切です。

  • グローバル変数: :root に定義すると、ページ全体で使用可能。
  • ローカル変数: 特定のセレクタ内で定義すると、その範囲内でのみ有効。

例: グローバル変数とローカル変数 

:root {
  --main-color: blue; /* グローバル変数 */
}

.card {
  --main-color: red;  /* ローカル変数（この.card内のみ有効） */
  color: var(--main-color); 
}

p {
  color: var(--main-color); /* ここではグローバル変数（blue）が適用される */
}

この例では.card クラス内では赤（red）が適用され、<p> タグにはグローバルで定義された青（blue）が適用されます。

このようにスコープを正しく理解することで、意図しないデザイン崩れを防げます。

計算や条件分岐には不向き

CSS変数は非常に柔軟ですが、JavaScriptの変数のように条件分岐や複雑な計算には対応していません。

数値の加算・減算などの操作はできないため、必要に応じてSassなどのプリプロセッサやJavaScriptと組み合わせることも検討しましょう。

変数名の命名規則を工夫する

複数の変数を定義する場合、わかりやすい名前を付けることが重要です。一般的に以下のような命名規則が推奨されます。

  • プレフィックスを付ける: --btn-color, --nav-bg など、用途がわかる名前にする。
  • ハイフンで単語を区切る: --primary-color、--font-size-large など。

例: わかりやすい命名の例 

:root {
  --header-bg-color: #333;
  --text-primary-color: #fff;
  --button-hover-opacity: 0.8;
}

このようにすると後からコードを見返したときにも、変数が何を意味しているのか一目でわかります。

ポイントまとめ

  • 古いブラウザ（特にIE）ではサポートされていない ため、フォールバックを設定する。
  • スコープ（適用範囲） を理解して、適切な場所に変数を定義する。
  • 計算や条件分岐はできないため、複雑なロジックはJavaScriptと併用する。
  • わかりやすい変数名 を付けて、コードの可読性を高める。

次の章ではこれまで学んだ内容をまとめ、CSS変数の効果的な活用方法を再確認します。

まとめ

今回はCSS変数（カスタムプロパティ）について学びました。

CSS変数を活用することで、ウェブデザインの管理が驚くほど効率的になります。

最初は少し難しく感じるかもしれませんが、繰り返し練習することで自然と使いこなせるようになるでしょう。

「学ぶことは挑戦の連続ですが、少しずつ積み重ねることで確実に成長できます！」

この学びをもとに、次のステップでも自信を持って進んでいきましょう。お疲れさまでした！

練習問題3-9：CSS変数を活用したシンプルなプロフィールカードの作成

以下のHTMLコードに、条件に従ったCSSコードを読み込んでスタイルを適用してください。

<div class="profile-card">
  <h2>山田 太郎</h2>
  <p>フロントエンドエンジニア</p>
  <button class="contact-btn">お問い合わせ</button>
</div>
  1. グローバル変数の定義（:root）
    • 背景色: 白 (#ffffff)
    • 文字色: ダークグレー (#333333)
    • メインカラー（ボタン用）: 青 (#007bff)
    • 余白（padding）: 20px
    • 角の丸み（border-radius）: 10px
  2. テーマ切り替え機能（ダークテーマ）
    .dark-theme クラスを追加した場合は以下のスタイルに切り替わるようにする。

    • 背景色: ダークグレー (#333333)
    • 文字色: 白 (#ffffff)
    • メインカラー（ボタン用）: オレンジ (#ff5733)
  3. ボタンのホバー効果
    ボタンにカーソルを乗せたとき、少し暗くなるように opacity を使用してホバー効果を追加する。

    • ホバー時の透明度: 0.8
解答例
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --main-color: #007bff;
  --padding: 20px;
  --border-radius: 10px;
}

.dark-theme {
  --bg-color: #333333;
  --text-color: #ffffff;
  --main-color: #ff5733;
}

.profile-card {
  background-color: var(--bg-color);
  color: var(--text-color);
  padding: var(--padding);
  border-radius: var(--border-radius);
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-btn {
  background-color: var(--main-color);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.contact-btn:hover {
  opacity: 0.8;
}

このCSSコードをHTMLに読み込んでください。

初めてのWebサイトを作ろう3-9

このサイトの Lesson1-1（HTML学習の入り口） か Lesson2-1（CSS学習の入り口） からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ」

この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

現在準備中です。暫くお待ちください。

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト＆問題集トップへ戻る
    トップページへ戻る