CSSのグローバル変数とローカル変数の違い！初心者向け完全ガイド

グローバル変数とローカル変数の違いを理解しよう

先生と生徒の会話形式で理解しよう

生徒

「CSSの変数を勉強中なのですが、書く場所によって使える範囲が変わるって本当ですか？」

先生

「はい、その通りです。それをグローバル変数とローカル変数の違いと言います。」

生徒

「グローバルとローカル、なんだか難しそうな言葉ですね。どう使い分ければいいんでしょうか？」

先生

「影響を与える範囲が、家全体なのか、自分の部屋だけなのかの違いだと考えると分かりやすいですよ。詳しく見ていきましょう！」

1. CSSにおける変数のスコープとは何かを知ろう

プログラミングやウェブ制作の世界では、変数が使える有効な範囲のことを「スコープ」と呼びます。初心者の方には耳慣れない言葉かもしれませんが、これは「その変数がどこまで届くか」という影響力の範囲のことだと考えてください。

CSSで変数を定義するとき、ページ内のどこからでも呼び出せるようにするか、それとも特定の場所だけでしか使えないように制限するかを自分で決めることができます。この「範囲の広さ」によって、グローバル変数とローカル変数の二種類に分けられます。パソコンを触ったことがない方でも、家の中にある「リビングのテレビ（家族全員が見れる）」と「自分の部屋のスマホ（自分だけが見れる）」の違いだと思えば、イメージが湧きやすいはずです。

2. どこでも使えるグローバル変数の基本

グローバル変数とは、ウェブページ全体のどこからでも呼び出して使うことができる便利な変数のことです。これを定義するには、通常「:root（ルート）」という特別な場所に記述します。このルートというのは、HTMLの文書全体を包み込む一番外側の枠組みを指します。

サイト全体で共通して使いたいテーマカラーや、ロゴの色、共通の余白などは、このグローバル変数として登録するのが一般的です。一度ルートで定義してしまえば、見出しでも、ボタンでも、フッターでも、どこでもその色を呼び出すことができます。まさに、サイト全体を支配する「共通のルール」を作るようなものです。


<style>
	:root {
		--global-main-color: #ff4500;
	}
	.header-title {
		color: var(--global-main-color);
	}
	.footer-text {
		color: var(--global-main-color);
	}
</style>

<h1 class="header-title">ここはヘッダーの見出しです</h1>
<p class="footer-text">ここはフッターの文字です</p>
<p>どちらも同じグローバル変数を使っています。</p>

ブラウザ表示

3. 特定の場所だけで有効なローカル変数とは

一方、ローカル変数とは、特定の「タグ」や「クラス」の中だけで定義され、その中とその子要素（内側にある要素）でしか使えない変数のことです。これを定義するには、特定のセレクタ（デザインを適用する対象）の波括弧の中に直接変数を書き込みます。

例えば、ある特定のニュースエリアの中だけで使いたい色がある場合、そのニュースエリアのクラス内に変数を書きます。この変数は、ニュースエリアの外にあるボタンや見出しからは使うことができません。このように範囲を限定することで、他の場所のデザインを誤って変えてしまう心配がなくなり、安全に作業を進めることができるようになります。


<style>
	.special-box {
		--local-box-color: #4caf50;
		background-color: var(--local-box-color);
		padding: 20px;
		border: 2px solid darkgreen;
	}
	.outside-text {
		/* これは反映されません。変数の範囲外だからです */
		color: var(--local-box-color);
	}
</style>

<div class="special-box">
	<p>このボックス内はローカル変数が使えます。</p>
</div>
<p class="outside-text">ボックスの外側の文字は、変数が届きません。</p>

ブラウザ表示

4. グローバル変数を使うメリットと活用シーン

グローバル変数の最大のメリットは、メンテナンスが驚くほど楽になることです。大規模なホームページを制作していると、何百箇所も同じ色が使われることがあります。これらをすべて一つの「グローバルな箱」で管理していれば、色の変更が必要になったときに、たった一箇所の数値を書き換えるだけで、サイト全体の雰囲気を一瞬で変えることが可能です。

また、統一感のあるデザインを保つのにも非常に役立ちます。人間はうっかりミスをする生き物ですが、一度「メインの色はこの変数」と決めてしまえば、微妙に違う色を間違えて使ってしまうミスを防げます。サイトの「憲法」のような存在として、グローバル変数をしっかりと設定しておくことは、プロの現場でも必須のスキルとなっています。

5. ローカル変数が活躍する具体的な場面

ローカル変数が役立つのは、パーツ（コンポーネント）ごとに独立したデザインを作りたいときです。例えば、サイトの中に「お知らせカード」と「商品カード」という似たような見た目のパーツが二つあるとします。それぞれで違う色を使いたいけれど、コードの書き方は同じにしたい。そんな時にローカル変数が真価を発揮します。

それぞれのクラス内で同じ名前の変数（例：--accent-color）を定義し、中身の色だけを変えておけば、HTMLの構造を共通化したまま、見た目だけを切り替えることができます。このように、「その部品の中だけで完結する設定」を作るのがローカル変数の得意分野です。部品を組み立てるようにサイトを作る現代のウェブ制作では、欠かせない考え方です。


<style>
	.info-card {
		--card-color: #007bff;
		border: 3px solid var(--card-color);
		margin-bottom: 10px;
	}
	.product-card {
		--card-color: #e91e63;
		border: 3px solid var(--card-color);
	}
	.card-title {
		/* 同じ名前の変数を参照していますが、所属するカードによって色が変わります */
		color: var(--card-color);
		padding: 5px;
	}
</style>

<div class="info-card">
	<h3 class="card-title">お知らせ</h3>
	<p>こちらは青色のローカル変数が適用されます。</p>
</div>

<div class="product-card">
	<h3 class="card-title">新商品</h3>
	<p>こちらはピンク色のローカル変数が適用されます。</p>
</div>

ブラウザ表示

6. 優先順位のルールを理解しよう

もし、グローバル変数とローカル変数で同じ名前の変数を作ってしまったらどうなるでしょうか？この場合、CSSには「より近くにある設定を優先する」というルールがあります。つまり、グローバル（広域）で決められたルールよりも、その場所限定（ローカル）で決められたルールの方が力が強くなります。

この仕組みを「上書き」と呼びます。基本的にはサイト全体の色をグローバル変数で決めておき、特定の場所だけ特別に色を変えたい場合にローカル変数で上書きする、というテクニックが使われます。これにより、全体の統一感を保ちつつ、部分的にアクセントを加えるといった柔軟なデザインが可能になります。この優先順位を理解しておくと、CSSのトラブル解決がとてもスムーズになります。

7. 変数の継承という大切な仕組み

CSS変数において、もう一つ知っておくべき言葉が「継承（けいしょう）」です。これは、親要素（外側の箱）で決めた変数が、その中にある子要素（内側の箱）にも自動的に引き継がれる仕組みのことです。ローカル変数がそのタグの中だけでしか使えないと言っても、そのタグの内側に入っている文字や画像には、その設定がちゃんと伝わります。

逆に言えば、親要素の外側には変数は漏れ出しません。この「内側には伝わるけれど、外側には漏れない」という性質こそが、ローカル変数の安全性の正体です。初心者のうちは、変数をどこに書くか迷ったら、まずは「その変数を使いそうなタグの中で一番外側のもの」に書く、と覚えておくと失敗が少なくなります。慣れてきたら、より広い範囲をカバーするルートへの移行を検討しましょう。

8. 実際に画像と組み合わせて使ってみる練習

変数を使うと、写真の枠線やサイズなども簡単に管理できます。ここでは、サンプル画像を使って、グローバル変数で画像のサイズを、ローカル変数でその写真専用の枠線の色を指定する例を見てみましょう。異なる種類の変数を組み合わせることで、より高度な管理ができるようになります。


<style>
	:root {
		--img-width: 120px;
	}
	.gallery-item {
		--border-color: orange;
		width: var(--img-width);
		border: 5px solid var(--border-color);
		margin: 5px;
	}
</style>

<div class="gallery-item">
	<img src="/img/sample120-120.jpg" alt="サンプル写真" class="img-fluid">
</div>
<p>サイズはグローバル変数、枠の色はローカル変数です。</p>

ブラウザ表示

9. 名前をつけるときのコツと注意点

グローバル変数もローカル変数も、名前の付け方がとても重要です。グローバル変数の場合は、サイト全体のどこで使われるか分からないため、「--main-blue」や「--text-dark」のように、役割や色そのものを表す名前にするのが良いでしょう。一方でローカル変数の場合は、「--btn-bg」や「--box-gap」のように、そのパーツ特有の場所を表す名前にすると分かりやすくなります。

また、パソコン操作に慣れていない方向けの注意ですが、変数名にスペースを入れることはできません。言葉を繋げたいときは、ハイフン「-」を使って「--main-color」のように繋げます。また、全角の文字（日本語など）も使えませんので、必ず半角の英数字で入力してください。これらを守るだけで、エラーで動かないという悩みの多くを解決できます。

10. どちらを優先して使うべきかの判断基準

最後に、結局どちらを使えばいいのかという疑問にお答えします。基本的には「迷ったらグローバル変数（:root）」で構いません。初心者のうちは、あちこちに定義を散らばせるよりも、一箇所にまとめておいた方が管理しやすいからです。サイトが出来上がっていく中で、「この色はここ以外では絶対に使わないな」とはっきり分かったものだけ、後からローカル変数に移動させるというやり方がスムーズです。

プログラミングの学習において大切なのは、一度に完璧を目指さないことです。まずはグローバル変数の便利さを体験し、それから少しずつローカル変数による細かな制御に挑戦してみてください。この二つの使い分けができるようになれば、あなたのCSSのスキルは格段に向上し、より複雑なデザインにも対応できるようになるでしょう。焦らず一歩ずつ、楽しみながらコードを書いていきましょう。

2026年最新スキルアップ・実践セミナー