一つ前の章ではリストやテーブルのスタイル変更方法について学習しました。
今回は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変数の利点や具体的な活用方法について詳しく紹介していきます。
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変数は非常に柔軟ですが、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変数を活用することで、ウェブデザインの管理が驚くほど効率的になります。
最初は少し難しく感じるかもしれませんが、繰り返し練習することで自然と使いこなせるようになるでしょう。
「学ぶことは挑戦の連続ですが、少しずつ積み重ねることで確実に成長できます！」
この学びをもとに、次のステップでも自信を持って進んでいきましょう。お疲れさまでした！
FAQ｜CSS変数に関するよくある質問
- Q1. CSS変数とSassの変数はどう違いますか？
-
CSS変数はブラウザ上で動的に変更可能ですが、Sassの変数はコンパイル時に値が確定し、変更できません。
例えばJavaScriptでCSS変数の値を変更することで、リアルタイムにデザインを変えることができます。
- Q2. CSS変数を定義したのに適用されません。原因は？
-
主な原因は以下の3つが考えられます。
- 変数を正しく定義していない（例：
--main-color: red;の記述ミス）。 - 変数を適用するプロパティが適切でない（例：
background: var(--main-color);のように適用する）。 - 変数のスコープが適用範囲外である（
:rootで定義するとグローバル適用可能）。
- 変数を正しく定義していない（例：
- Q3. CSS変数はどんな場面で使うと便利ですか？
-
主に以下のような場面で活用されます。
- サイト全体のカラーテーマを統一（例えば、ブランドカラーを変更する際に、一括で色を変更可能）。
- 複数のボタンや見出しのデザインを一元管理（フォントサイズや余白の調整を簡単に統一）。
- ダークモードやカラーテーマの切り替え（CSS変数をJavaScriptと組み合わせることで、テーマ変更がスムーズに）。
- Q4. 古いブラウザでもCSS変数は使えますか？
-
CSS変数はIE11以前のブラウザではサポートされていません。しかし最新のChrome、Firefox、Safari、Edgeでは正常に動作します。
もし古いブラウザに対応する必要がある場合は、CSS変数を使わずに直接スタイルを記述するフォールバックを用意すると良いでしょう。
- Q5. CSS変数を複数定義する場合、管理しやすい方法はありますか？
-
:root内でカテゴリごとに整理するのがおすすめです。例えば、以下のように色、フォント、余白の変数を分類すると、管理しやすくなります。:root { /* カラー設定 */ --primary-color: #3498db; --secondary-color: #2ecc71; /* フォント設定 */ --base-font-size: 16px; --heading-font-size: 24px; /* 余白設定 */ --padding-large: 20px; --margin-small: 10px; }また変数の名前をわかりやすくすることも、管理のコツです。
練習問題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; }
初めての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も、引き続き頑張ってください^^
<<前のページ
HTML/CSSの記事一覧
次のページ>>
この記事への質問・コメント
この記事を作成するにあたりAIの力を借りています。
問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。