CSS変数のテーマ管理術！色やフォントを効率よく設定する方法

色やフォントなどのテーマ管理にCSS変数を活用する方法

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

生徒

「サイト全体の色やフォントを統一したいのですが、一箇所ずつ設定するのは大変じゃないですか？」

先生

「その通りです。そこで役立つのがCSS変数を使ったテーマ管理ですよ。」

生徒

「テーマ管理って、スマートフォンの着せ替えみたいなことですか？」

先生

「まさにそのイメージです！一度設定を作れば、全体の雰囲気を一瞬で切り替えられるようになります。基本から学んでいきましょう！」

1. テーマ管理にCSS変数を使う理由とは？

ウェブサイトを作るとき、メインの色や見出しのフォントなど、サイト全体の「ルール」を決めることをテーマ管理と呼びます。 CSS変数を使わずに色を指定すると、もし後から「やっぱりサイトのメインカラーを青から赤に変えたい」と思ったときに、何百箇所もあるコードを手作業で書き直さなければなりません。

これはプログラミング未経験の方だけでなく、プロのエンジニアにとっても非常に重労働でミスが起きやすい作業です。しかし、CSS変数（カスタムプロパティ）を使ってテーマを管理していれば、大元の変数の値をひとつ書き換えるだけで、サイト全体のデザインが連動して切り替わります。この仕組みを導入することで、デザインの一貫性を保ちながら、修正作業を劇的に効率化できるのです。

2. サイト全体のパレットをrootで作る

テーマ管理の第一歩は、サイトで使う色の「パレット」を作ることです。 CSSでは「:root（ルート）」という場所に変数をまとめて書くのが一般的です。ルートとは、HTML文書の一番上の階層を指す言葉で、ここに書いた変数はページ内のどこからでも呼び出すことができます。

たとえば、ブランドのメインカラー、背景色、文字の色などをあらかじめ名前をつけて保存しておきます。これにより、個別の場所で具体的な色コード（#ff0000など）を意識する必要がなくなり、「メインの色を使う」という直感的な指定が可能になります。


<style>
	:root {
		--theme-primary: #6f42c1;
		--theme-bg: #f8f9fa;
		--theme-text: #212529;
	}
	body {
		background-color: var(--theme-bg);
		color: var(--theme-text);
		padding: 20px;
	}
	.header {
		color: var(--theme-primary);
		border-bottom: 2px solid var(--theme-primary);
	}
</style>

<div class="header">
	<h1>テーマ管理のデモ</h1>
</div>
<p>背景色や文字色が変数によって制御されています。</p>

ブラウザ表示

3. フォントの種類を変数で統一する方法

色と同じくらい重要なのが、フォント（文字の書体）の統一です。日本語のフォント指定は名前が長く、複数の候補を書く必要があるため、直接書くとコードが非常に見づらくなります。そこで、フォント設定も変数に入れてしまいましょう。

「--main-font」という変数に、明朝体やゴシック体の設定を保存しておきます。もし後から「やっぱり丸文字っぽいフォントにしたいな」と思ったら、ルートにある変数の設定を書き換えるだけで、サイト内のすべての文字が新しいフォントに変わります。パソコンのキーボード操作に慣れていない方でも、一度変数を設定してしまえば、後の管理がとても楽になります。

4. ボタンのデザインを一括で管理する

ウェブサイトにはたくさんのボタンが登場します。「購入する」「詳しく見る」「送信」など、それぞれのボタンの色や余白、角の丸みを一つずつ設定するのは大変です。テーマ管理の考え方を使って、ボタン専用の変数セットを作ってみましょう。

ボタンの背景色、文字色、そして角の丸み（border-radius）を変数にしておくことで、サイト全体のボタンの印象を常に同じに保つことができます。統一感のあるデザインは、それだけでサイトの信頼性を高める効果があります。


<style>
	:root {
		--btn-bg: #28a745;
		--btn-radius: 50px;
		--btn-padding: 10px 30px;
	}
	.btn-custom {
		background-color: var(--btn-bg);
		color: white;
		border-radius: var(--btn-radius);
		padding: var(--btn-padding);
		border: none;
		display: inline-block;
		text-decoration: none;
	}
</style>

<a href="#" class="btn-custom">詳しく見る</a>
<a href="#" class="btn-custom" style="filter: brightness(90%);">購入する</a>
<p>丸みや余白が共通の変数で管理されています。</p>

ブラウザ表示

5. ダークモードとライトモードの切り替え

最近のスマートフォンでは当たり前になった「ダークモード」も、CSS変数を使えば簡単に実装できます。「背景色」という名前の変数を作り、ライトモードのときは白、ダークモードのときは黒を指定するように設定します。

このように、中身の値を状況に応じて入れ替えることで、ページ全体の配色を一気に切り替えることが可能になります。これはCSS変数が持つ最大の魅力の一つです。初心者の方は、まず「ライトモード用の色セット」を作ることから始めて、徐々に色のバリエーションを増やしていくのがおすすめです。

6. 余白とサイズ感をルール化する

デザインのプロは、余白（マージンやパディング）の数値もあらかじめ決めています。「ここは10ピクセル、あそこは15ピクセル」とバラバラに指定するのではなく、「--space-small: 8px;」「--space-medium: 16px;」といった具合に変数を定義します。

こうすることで、要素同士の距離感が一定になり、画面がすっきりと整って見えます。パソコンの画面を初めて作る方は、どのくらいの数値が良いか迷うことが多いですが、あらかじめ変数としていくつかパターンを用意しておけば、数値選びに迷う時間がなくなります。


<style>
	:root {
		--card-margin: 20px;
		--card-shadow: 0 4px 8px rgba(0,0,0,0.1);
		--card-border: #dee2e6;
	}
	.card-item {
		margin: var(--card-margin);
		box-shadow: var(--card-shadow);
		border: 1px solid var(--card-border);
		width: 200px;
		display: inline-block;
		vertical-align: top;
	}
</style>

<div class="card-item">
	<img src="/img/sample150-100.jpg" alt="見本画像1" style="width:100%;">
	<div style="padding:10px;">カード1</div>
</div>
<div class="card-item">
	<img src="/img/sample150-100.jpg" alt="見本画像2" style="width:100%;">
	<div style="padding:10px;">カード2</div>
</div>

ブラウザ表示

7. セマンティックな名前の付け方

変数に名前をつけるとき、単に「--red」とするよりも「--danger-color」や「--main-action」とする方が、テーマ管理としては優れています。これを「セマンティック（意味のある）」な名前付けと言います。

なぜなら、もし後から「警告の色を赤からオレンジに変えたい」と思ったとき、名前が「--red」だと、中身がオレンジなのに名前が赤という矛盾が起きてしまうからです。「警告の色」という名前になっていれば、中身が何色になっても意味が通じます。将来の自分や、一緒にサイトを作る仲間のために、役割がわかる名前をつけましょう。

8. 実際に画像サイズを管理してみる

最後に、画像の大きさも変数で制御してみましょう。例えば、プロフィール写真のサイズをサイト内のあちこちで使っている場合、その大きさを変数化しておくと便利です。サンプルの画像パスを使って、どのように管理できるかを確認します。


<style>
	:root {
		--avatar-size: 80px;
		--avatar-border: #007bff;
	}
	.profile-pic {
		width: var(--avatar-size);
		height: var(--avatar-size);
		border: 3px solid var(--avatar-border);
		border-radius: 50%;
		object-fit: cover;
	}
</style>

<img src="/img/sample120-120.jpg" alt="ユーザー" class="profile-pic">
<p>画像サイズと枠線の色を変数で統一しています。</p>

ブラウザ表示

9. メンテナンス性を高めるプロの知恵

ウェブサイトは作って終わりではありません。むしろ、作った後の修正や更新の方が長い時間を占めます。 CSS変数を使ったテーマ管理は、まさに「未来の自分への投資」です。最初は変数を設定する手間が増えるように感じるかもしれませんが、一度この快適さを知ると、もう直接数値を書き込む方法には戻れなくなるでしょう。

パソコン初心者の方も、まずは「色」や「フォント」といったわかりやすい部分から変数を活用してみてください。少しずつ変数が増えていき、サイト全体が自分の思い通りにコントロールできるようになったとき、プログラミングやコーディングの本当の楽しさを実感できるはずです。

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