CSSの変数をrootで管理！サイト全体で色やサイズを再利用する完全ガイド

:rootに変数を定義してサイト全体で再利用する方法

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

生徒

「ホームページ全体で同じ色を何度も使うとき、もっと楽に管理する方法はありませんか？」

先生

「それなら、CSSのrootを使って変数を定義するのが一番ですよ。サイト全体でその設定を使い回せるようになります。」

生徒

「ルート、ですか？難しそうですが、初心者でも簡単にできるのでしょうか。」

先生

「もちろんです。仕組みさえ分かれば、パソコンの操作に慣れていない方でもすぐにマスターできます。具体的な使い方を一緒に見ていきましょう！」

1. rootとは何かを初心者向けに分かりやすく解説

まず「:root（ルート）」という言葉について説明します。パソコンやプログラミングの世界で「ルート」とは、一番根っこの部分、つまり全体を支える基礎という意味があります。 CSSにおける「:root」は、ウェブページ全体の情報を管理するための「大元の親玉」のような存在です。

ここに変数を書いておくことで、ページ内のどこからでもその情報を呼び出すことができるようになります。例えば、家全体で使う「共通のルール」を玄関の掲示板に貼っておくようなイメージです。家族全員（ウェブページ内のすべての要素）がその掲示板を見て、ルールに従うことができるようになるのです。

2. サイト全体で色を使い回すメリットとは

なぜわざわざ「:root」に変数を書くのでしょうか。最大の理由は、後からの修正が劇的に楽になるからです。普通、CSSで色を指定するときは、一箇所ずつ色コードを書いていきます。しかし、サイトが大きくなって数十ページ、数百箇所に同じ色を使っている場合、その色を少しだけ変えたくなったらどうなるでしょうか。

一箇所ずつ手作業で書き直すのは、パソコン操作に慣れていない人にとっては気が遠くなるような作業です。しかし、ルートに変数を定義しておけば、その「根っこ」の設定を一箇所書き換えるだけで、サイト全体のデザインが魔法のように一瞬で変わります。これを「メンテナンス性が高い」と言います。プロの制作者は、必ずと言っていいほどこの方法を使っています。

3. 実際にrootに変数を定義してみよう

それでは、具体的な書き方を見てみましょう。CSSのファイルの中に「:root」と書き、その後に波括弧「{ }」を書きます。その中に、ハイフン二つから始まる変数名を書き、コロン「:」の後に実際の値を指定します。最後にセミコロン「;」を忘れないようにしましょう。


<style>
	:root {
		--main-theme-color: #007bff;
		--sub-text-color: #666666;
	}
	h1 {
		color: var(--main-theme-color);
	}
	p {
		color: var(--sub-text-color);
	}
</style>

<h1>ルート変数のテスト</h1>
<p>この文字は、ルートで定義したサブカラーが適用されています。</p>

ブラウザ表示

4. サイズや余白もrootで一括管理する方法

ルート変数は色だけに使うものではありません。文字の大きさや、画像周りの余白、ボタンの丸みなど、数値が必要な場所ならどこでも使えます。例えば、サイト全体の「標準的な余白」を変数にしておけば、ページ全体で統一感のある美しいレイアウトを作ることができます。

デザインがバラバラに見える原因の多くは、余白やサイズが場所によって微妙に違うことです。「ここは15ピクセル、あっちは20ピクセル」と適当に決めるのではなく、ルートで「標準の隙間」を決めておけば、初心者でも整った印象のサイトを作ることが可能になります。


<style>
	:root {
		--standard-padding: 20px;
		--box-radius: 15px;
	}
	.custom-box {
		padding: var(--standard-padding);
		border-radius: var(--box-radius);
		background-color: #e9ecef;
		border: 2px solid #ced4da;
	}
</style>

<div class="custom-box">
	<p>余白と角の丸みを、ルート変数で一括管理しています。統一感を出すのに非常に役立ちます。</p>
</div>

ブラウザ表示

5. 画像の枠線や影の設定も再利用しよう

写真やイラストに付ける飾りも、ルート変数で管理すると非常にスマートです。例えば、サイト内のすべての画像に「少し太めのグレーの枠線」を付けたいとします。これを変数にしておけば、後で「やっぱり細い青色の枠線にしたい」と思ったときも、ルートの設定を一つ変えるだけで済みます。

パソコンの操作で、何箇所も同じ設定をコピーして回るのはミスのもとです。「再利用」を意識することで、コードがすっきりし、自分でも内容が把握しやすくなります。初心者の方は、まずは「よく使う設定は変数にする」という習慣をつけてみましょう。


<style>
	:root {
		--img-border-style: 4px solid #adb5bd;
		--img-shadow: 5px 5px 10px rgba(0,0,0,0.1);
	}
	.gallery-img {
		border: var(--img-border-style);
		box-shadow: var(--img-shadow);
		margin-bottom: 10px;
	}
</style>

<img src="/img/sample150-100.jpg" alt="サンプル画像" class="gallery-img">
<p>画像の枠線と影の設定を変数で再利用しています。</p>

ブラウザ表示

6. 複雑なフォント設定も変数でシンプルに

ウェブサイトの印象を左右する「フォント（文字の種類）」の設定は、意外と長くて複雑な指定になることが多いです。これを毎回書くのは大変ですし、一文字間違えるだけで正しく表示されなくなってしまいます。ルート変数にその複雑な設定を丸ごと入れておけば、使うときは短い変数名を書くだけでよくなります。

「メインのフォント」という名前の箱に、長いフォント名をしまっておく感覚です。こうすることで、CSSの中身が読みやすくなり、初心者の方でもどこで何の設定をしているのかがパッと見て分かるようになります。読みやすいコードを書くことは、プログラミング上達の近道です。

7. ダークモードへの対応もrootがあれば簡単

最近の流行りである「ダークモード（画面を黒っぽくする設定）」も、ルート変数があれば簡単に作ることができます。通常時の色を変数に入れておき、ダークモードのときだけその変数の「中身」を黒系の色に入れ替えるという手法です。

もし変数を使っていなかったら、何百箇所もある色の指定をすべてダークモード用に書き直さなければなりませんが、ルート変数を活用していれば一瞬です。これから本格的にサイト制作を学びたい人にとって、将来的な拡張性（機能を追加しやすくすること）を考えてルート変数を使うことは非常に大切です。

8. root変数を正しく使うための注意点

最後に、初心者がハマりやすい注意点をお伝えします。まず、変数名は必ず「--（ハイフン二つ）」から始めてください。一つだとエラーになります。また、大文字と小文字は区別されます。ルートで定義した名前と、呼び出す時の名前が少しでも違うと、パソコンは「そんな箱はありません」と判断してしまいます。

そして、必ず「var( )」の中に変数名を入れなければなりません。パソコン操作に慣れていない方は、半角と全角の間違いにも注意しましょう。 CSSはすべて「半角」で書くのが鉄則です。全角のスペースが一つ混じっているだけでも動かなくなることがあるので、丁寧に入力することを心がけてください。


<style>
	:root {
		--footer-bg: #343a40;
		--footer-text: #ffffff;
	}
	.footer-section {
		background-color: var(--footer-bg);
		color: var(--footer-text);
		padding: 30px;
		text-align: center;
	}
</style>

<footer class="footer-section">
	<p>株式会社サンプルウェブサイト</p>
	<p>ルート変数を使えばフッターの管理も楽々です。</p>
</footer>

ブラウザ表示