CSS変数だけでダークモード対応！初心者でも簡単に切り替えができる完全ガイド

ダークモード対応をCSS変数だけで実装する方法

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

生徒

「最近、スマホの設定を黒っぽくするダークモードをよく見かけますが、自分のサイトでも作れますか？」

先生

「はい、CSS変数という仕組みを使えば、プログラミングの難しい知識がなくても簡単に実装できますよ。」

生徒

「CSS変数だけでいいんですか？なんだか魔法みたいですね！」

先生

「そうですね。ユーザーの設定に合わせて自動で色を塗り替える仕組みを作ってみましょう！」

1. ダークモードとCSS変数の基本をマスターしよう

ダークモードとは、ウェブサイトの背景を黒や紺などの暗い色にし、文字を白などの明るい色にする表示モードのことです。目に優しく、スマートフォンのバッテリー消費を抑える効果があるため、近年非常に人気が高まっています。

このダークモードを効率よく作るために欠かせないのが「CSS変数（カスタムプロパティ）」です。 CSS変数とは、色やサイズなどの情報を一時的に保存しておく「魔法の箱」のようなものです。「メインの色はこの箱の中身を使ってね」とあらかじめ指定しておくことで、箱の中身を入れ替えるだけでサイト全体の色を一瞬で変えることができます。

2. ユーザーの設定を読み取る便利な命令文を知ろう

パソコンやスマートフォンには、あらかじめ「私はライトモード（明るい画面）が好き」「私はダークモード（暗い画面）が好き」という設定項目があります。ウェブサイト側でこの設定を自動的に読み取ることができれば、ユーザーにわざわざボタンを押させなくても、最適な色を表示できます。

これには「メディアクエリ」という技術の中にある「prefers-color-scheme（プリファーズ・カラー・スキーム）」という命令を使います。これは日本語で「好みの配色計画」という意味です。この命令の中に「ダークモードの時は、変数の箱の中身をこの色に変えてね」と書いておくだけで、ブラウザが勝手に判断して色を塗り替えてくれるのです。


<style>
	:root {
		/* 通常（ライトモード）のときの色 */
		--bg-color: #ffffff;
		--text-color: #333333;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			/* ダークモードに設定されているときの色 */
			--bg-color: #1a1a1a;
			--text-color: #f0f0f0;
		}
	}

	.sample-box {
		background-color: var(--bg-color);
		color: var(--text-color);
		padding: 20px;
		border: 1px solid #ccc;
	}
</style>

<div class="sample-box">
	<p>お使いの端末の設定に合わせて、背景色と文字色が変わります。</p>
</div>

ブラウザ表示

3. 実際に背景色と文字色を入れ替えるステップ

ダークモードを作る際の鉄則は、単に白と黒を反転させるだけではないということです。真っ黒な背景に真っ白な文字を置くと、コントラスト（明暗の差）が強すぎて、逆に目が疲れてしまうことがあります。

プロのデザイナーは、少しグレーがかった黒や、少しクリーム色がかった白を使って、目に優しい配色を心がけます。 CSS変数を使えば、こうした微調整も簡単です。「--bg-color」と「--text-color」という二つの箱を用意し、ダークモード用のエリアでその中身を少しだけ優しい色に書き換えてみましょう。一箇所を直せばサイト全体のバランスが整うのが、変数管理の最大のメリットです。

4. ボタンやリンクの色もダークモード向けに調整する

背景や文字だけでなく、ボタンの色やリンクの青色もダークモードでは見え方が変わります。明るい背景では綺麗に見えていた青色が、黒い背景では暗すぎて沈んで見えてしまうことがあるのです。

そのため、ボタンのメインカラーなども変数で管理しましょう。パソコン操作に慣れていない初心者の方は、まず「基本となる色」をすべて変数にして書き出してみるのがおすすめです。そうすることで、どの色がダークモードで問題になりそうか、パズルを解くように整理することができます。


<style>
	:root {
		--accent-color: #007bff; /* ライトモード用の青 */
		--card-bg: #f8f9fa;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--accent-color: #66b2ff; /* ダークモード用の明るい青 */
			--card-bg: #2d2d2d;
		}
	}

	.info-card {
		background-color: var(--card-bg);
		border-top: 5px solid var(--accent-color);
		padding: 15px;
		margin: 10px;
	}

	.link-text {
		color: var(--accent-color);
	}
</style>

<div class="info-card">
	<p>カードの枠線や<span class="link-text">リンクの色</span>も、モードに合わせて最適化されます。</p>
</div>

ブラウザ表示

5. 画像の明るさをダークモードで抑える工夫

意外と忘れがちなのが「画像」の扱いです。背景をせっかく暗くしても、画像が真っ白で眩しいままだと、ダークモードの効果が半減してしまいます。実は、CSS変数と「フィルタ」という機能を使えば、画像全体の明るさをダークモードの時だけ少し下げることも可能です。

「--img-brightness」という変数を作っておき、通常は「1（100%）」に、ダークモードの時は「0.8（80%）」に設定します。これを画像に適用すれば、夜でも眩しくない、非常に親切なウェブサイトになります。細かな気遣いができるようになると、初心者から一歩抜け出した本格的な制作者に近づけます。


<style>
	:root {
		--img-bright: 1;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--img-bright: 0.7;
		}
	}

	.night-vision-img {
		filter: brightness(var(--img-bright));
		width: 150px;
		height: 100px;
		transition: 0.3s;
	}
</style>

<img src="/img/sample150-100.jpg" alt="見本" class="night-vision-img">
<p>画像もダークモードでは少し暗く表示され、目に優しくなります。</p>

ブラウザ表示

6. 複雑な影の表現をダークモードに合わせるコツ

ライトモードでは、要素を浮かせるために「黒い影」を付けます。しかし、背景がすでに黒いダークモードでは、黒い影を付けても見えなくなってしまいます。

ここで役に立つのが、影の「色」を変数にすることです。ダークモードでは影を付ける代わりに、要素の枠線を少しだけ明るい色にしたり、影そのものをさらに深い黒にしたりすることで、立体感を出すことができます。このような高度な表現も、変数を使えば「モードごとに影の色を入れ替える」という単純な作業で済んでしまいます。

7. 入力ミスを防ぐためのHTMLとCSSの書き方

ダークモードの設定を書くときに一番多い失敗は、メディアクエリのカッコを閉じ忘れることです。「@media ... {」で始めた命令は、必ず最後にもう一つの「}」で閉じなければなりません。

また、CSS変数の名前は「--（ハイフン二つ）」で始めるというルールも徹底しましょう。全角文字が混ざっていないか、スペルが間違っていないか、一つずつ指差し確認をするのが成功の秘訣です。特にパソコンを触り始めたばかりの方は、英数字をすべて半角で打つという感覚をしっかりと身につけていきましょう。

8. どんなデバイスでも正しく表示されるためのテスト方法

作成したダークモードが正しく動いているか確認するには、自分のパソコンやスマートフォンのシステム設定を変更してみるのが一番確実です。また、Google Chromeなどのブラウザには、仮想的にダークモードの状態を再現できる便利な機能も備わっています。

ライトモードとダークモードを何度も行き来して、文字が読みづらくなっていないか、色が変に浮いていないかを確認しましょう。もし問題があれば、変数の値を少し変えるだけで解決できます。この手軽さこそが、CSS変数を使ったダークモード実装の最大の強みなのです。

9. 将来的にJavaScriptと連携させるための準備

今回はCSS変数だけで自動切り替えを行う方法を解説しましたが、慣れてくると「ユーザーが手動でスイッチを切り替えられるようにしたい」と思うようになるかもしれません。実は、今回のようにCSS変数で色を管理しておけば、後からJavaScript（動きをつけるプログラム）を追加するのも非常にスムーズになります。

今のうちにすべての色を変数にしておくことで、将来的な機能拡張にも耐えられる、プロのようなしっかりとした土台のサイトが完成します。初心者だからこそ、こうした「整理整頓された書き方」を意識することが、上達への近道となります。

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