一つ前の章ではリストやテーブルのスタイル変更方法について学習しました。
今回はCSS変数について見ていきましょう。
Lesson１：HTML入門編
Lesson２：CSS入門編
Lesson３：CSS応用編
・Lesson3-1：ボックス配置の基礎を理解しよう
・Lesson3-2：ボックスサイズを変更しよう
・Lesson3-3：ボックスを自在に配置しよう
・Lesson3-4：画像を自在に配置しよう
・Lesson3-5：画像のスタイルを変更しよう
・Lesson3-6：背景画像を設定しよう
・Lesson3-7：リンクボタンを設置しよう
・Lesson3-8：リストとテーブルのスタイルを変更しよう
・Lesson3-9：CSS変数を理解しよう ◁今回はココ
・Lesson3-☆1：コピペして使える！カードレイアウト集
・Lesson3-☆2：HTML/CSSテンプレート６選
・Lesson3-☆3：CSSのリセット＆ノーマライズとは？
ウェブサイトのデザインを管理していると、色やフォントサイズ、余白などを複数の場所で繰り返し設定する場面が多くあります。
こうしたスタイルの一貫性を保ちながら、効率的に変更や調整を行うための便利な機能が「CSS変数」です。
CSS変数を活用することで、ページ全体のデザインを簡単にコントロールでき、メンテナンスの手間も大幅に軽減されます。
本記事ではCSS変数の基本的な使い方から、実際の活用方法までを初心者向けにわかりやすく解説していきます。
<<前のページ
HTML/CSSの記事一覧
次のページ>>
CSS変数とは？基本をわかりやすく解説
CSS変数（カスタムプロパティとも呼ばれます）は、CSS内で再利用できる値を定義しておくための機能です。
通常、色やフォントサイズ、余白などのスタイルは個別に指定する必要がありますが、CSS変数を使用することで、1つの変数に値をまとめておき、必要な場所で繰り返し利用することができます。
CSS変数の基本構造を理解しよう
CSS変数は以下のように「名前」と「値」のセットで定義します。
:root {
--main-color: #3498db;
--font-size: 16px;
}:rootはCSS全体で使用できる変数を定義するための特別なセレクタです。- 変数名は
--（ハイフン2つ）で始める必要があります。例えば、--main-colorや--font-sizeなが変数名になります。 - 変数の値は色コード（#3498db）やフォントサイズ（16px）など、通常のCSSプロパティで使用する値と同じ形式で指定します。
CSS変数を理解することで、効率的なスタイル管理が可能になり、デザインの変更や調整が格段に楽になります。
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変数の利点や具体的な活用方法について詳しく紹介していきます。
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変数の強み
- CSS変数は一括管理が可能で、メンテナンスが楽になる。
- デザインの一貫性を保ちながら、テーマ変更も容易。
var()で変数を呼び出し、シンプルなコードで柔軟なスタイリングが可能。
次の章では、CSS変数を使用する際の注意点について説明します。
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変数は非常に柔軟ですが、Pythonや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コードを読み込んでスタイルを適用してください。
ファイル名はそれぞれ、training3-9.htmlとtraining3-9.cssとしましょう。
<div class="profile-card"> <h2>山田 太郎</h2> <p>フロントエンドエンジニア</p> <button class="contact-btn">お問い合わせ</button> </div>
- グローバル変数の定義（
:root）- 背景色: 白 (
#ffffff) - 文字色: ダークグレー (
#333333) - メインカラー（ボタン用）: 青 (
#007bff) - 余白（padding）: 20px
- 角の丸み（border-radius）: 10px
- 背景色: 白 (
- テーマ切り替え機能（ダークテーマ）
.dark-themeクラスを追加した場合は以下のスタイルに切り替わるようにする。- 背景色: ダークグレー (
#333333) - 文字色: 白 (
#ffffff) - メインカラー（ボタン用）: オレンジ (
#ff5733)
- 背景色: ダークグレー (
- ボタンのホバー効果
ボタンにカーソルを乗せたとき、少し暗くなるように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; }
<<前のページ
HTML/CSSの記事一覧
次のページ>>
初めてのWebサイトを作ろう3-9
このサイトの Lesson1-1（HTML学習の入り口） か Lesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。
Lesson3-9のまとめノートと練習問題を追加しよう
このLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。
１．練習問題の解答を保存
練習問題3-9で作成した２つのファイルを学習フォルダの中に保存しましょう。
- training3-9.html ⇒ Lesson3フォルダに保存
- training3-9.css ⇒ Lesson3フォルダの中のstyleフォルダに保存
トップページからリンクで飛べるようになりますので確認しましょう。
２．まとめノートを作成・保存
下記のHTMLコードは、このLesson3-9で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite3-9.html」という名前で保存し、「lesson3（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson3-9</title> <link rel="stylesheet" href="style/styles-lesson3.css"> </head> <body> <header> <h1>Lesson3-9：CSS変数のを理解しよう</h1> </header> <div class="container"> <section> <h2>目的・要点</h2> <p>ウェブサイトのデザインを管理する際、色やフォントサイズ、余白などのスタイルを統一しながら、効率的に管理することが求められます。本記事では、<strong>CSS変数</strong>を活用してスタイルを一括管理し、変更を容易にする方法を学びます。</p> <p>このレッスンの到達目標は、CSS変数の基本を理解し、実際に活用できるようになることです。</p> </section> <section> <h2>このレッスンで学習した内容</h2> <h3>CSS変数の基本</h3> <ul> <li><code>:root</code> セレクタを使用して変数をグローバルに定義する方法</li> <li><code>--変数名: 値;</code> の形式でCSS変数を定義する</li> <li><code>var(--変数名)</code> を使って変数を適用する方法</li> </ul> <h3>CSS変数の活用方法</h3> <ul> <li>ページ全体で共通のデザイン要素（背景色、フォントサイズ、ボタンの色など）を一括管理する</li> <li><code>var(--変数名, デフォルト値);</code> を活用し、変数が未定義の場合のフォールバックを設定する</li> <li><code>:root</code> にテーマカラーを設定し、全体のデザインを統一する</li> </ul> <h3>CSS変数のメリット</h3> <ul> <li><strong>メンテナンス性向上：</strong>一箇所で値を変更するだけで、サイト全体のスタイルを変更できる</li> <li><strong>デザインの統一：</strong>複数のスタイル設定を一貫させることができる</li> <li><strong>テーマの切り替えが容易：</strong>ダークモードとライトモードを切り替えるなどのカスタマイズが可能</li> </ul> </section> <section> <h2>トピック・豆知識</h2> <ul> <li><code>:root</code> に定義した変数はページ全体で使用可能。</li> <li><code>.dark-theme</code> などのクラスを使って変数の値を切り替えることで、簡単にテーマを変更できる。</li> <li><code>calc()</code> を併用すると、変数を使った動的なスタイル計算が可能。</li> </ul> </section> <section> <h2>まとめ</h2> <p>本レッスンでは、CSS変数の基本的な使い方とその活用方法について学びました。CSS変数を適切に利用することで、<strong>スタイルの管理が効率化</strong>され、サイト全体のデザイン統一やメンテナンスが容易になります。CSS変数を活用し、柔軟なデザインを実現しましょう。</p> </section> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </div> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>これでLesson3-9の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^
FAQ｜CSS変数に関するよくある質問
今回の記事に関する「よくある質問」とその解答について、以下の内容を参考にしてください。
- Q1. CSS変数（カスタムプロパティ）はどのような場面で使うのが効果的ですか？
-
サイト全体で色やサイズを統一したい場合、複数の場所で同じ値を使いたい場合、後からデザインを調整しやすくしたい場合などにCSS変数は特に効果を発揮します。1箇所を変更するだけで関連する全てのスタイルに反映できるため、保守性や拡張性が向上します。
- Q2. :rootセレクターと他のセレクターにCSS変数を定義する違いは何ですか？
-
:rootセレクターはグローバル変数として全体に値を適用でき、全ての要素で参照できます。一方、個別のセレクターで定義した場合は、そのセレクターの範囲（スコープ）内だけで有効なローカル変数となります。用途に応じて使い分けましょう。
- Q3. CSS変数は従来のプリプロセッサ（SassやLESS）と比べてどんなメリットがありますか？
-
CSS変数はブラウザで動的に値を切り替えられるため、テーマ切り替えやユーザー操作に応じたスタイル変更が容易です。JavaScriptから値を動的に変更することも可能です。一方、Sassなどのプリプロセッサの変数はビルド時に決まるため、動的な変更には向いていません。
よくあるトラブルと解決法｜CSS変数編
今回の記事に関する「よくあるトラブル」とその原因、解決法について、以下の内容を参考にしてください。
CSS変数が適用されない
- トラブルの原因と対処法を見る
-
トラブルの原因例
変数を定義したつもりでも、意図した要素に値が反映されていない場合があります。たとえばスコープ（変数を定義した場所）が違うと、参照先で変数が見つからず値が適用されません。
トラブルの解決法
CSS変数をどのセレクターで定義しているか（:rootなのか、クラスやIDセレクターなのか）を確認し、意図した範囲で正しく定義・参照できているか探しましょう。また、参照する側のセレクターが変数のスコープ内に含まれているかも確認してください。
var()で指定した値が初期値（デフォルト）になってしまう
- トラブルの原因と対処法を見る
-
トラブルの原因例
var()関数で指定した変数が未定義だった場合、第2引数で指定した初期値が使われてしまうため、意図しない色やサイズになることがあります。
トラブルの解決法
該当するCSS変数が正しく定義されているかを探し、スペルミスや定義の場所が間違っていないか確認しましょう。特にコロンやハイフンなど細かい記号の打ち間違いがないか、CSSファイル全体を見直すことをおすすめします。
JavaScriptからCSS変数を変更したのに反映されない
- トラブルの原因と対処法を見る
-
トラブルの原因例
JavaScriptでCSS変数を書き換えたのに、スタイルが変わらないことがあります。これは指定した要素やプロパティの書き方が誤っていることが多いです。
トラブルの解決法
JavaScriptのコードで、document.documentElementやstyle.setPropertyなどの使い方が正しいかを探しましょう。また、CSS変数の名前やセレクターの指定に間違いがないか、JavaScriptで書き換えたい変数が正しく選択できているかどうか、順番にチェックしてください。
<<前のページ
HTML/CSSの記事一覧
次のページ>>