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

生徒

「最近、スマホやパソコンでダークモードをよく見かけますけど、あれってどうやって作るんですか？」

先生

「それはCSSで、ユーザーの設定に応じて色を変えるように工夫しているんですよ。」

生徒

「CSSだけでダークモードにできるんですか？」

先生

「はい。メディアクエリという仕組みを使えば、色の切り替えが簡単にできます！」

1. ダークモードとは？なぜ必要なの？

ダークモードとは、背景を暗くして文字を明るくするデザインのことです。

夜に画面を見るときに目が疲れにくくなったり、電力の節約にもつながるなどのメリットがあります。

最近では、スマートフォンやパソコンでも標準でダークモードが使われていることが多く、Webサイトでも対応するのが一般的になってきています。

2. CSSで色を切り替えるにはどうすればいい？

ユーザーがダークモードを使っているかどうかは、CSSの「メディアクエリ（@media）」という仕組みを使って調べられます。

具体的には「prefers-color-scheme」という指定を使います。

prefers-color-scheme: light は、明るい（ライト）モード用
prefers-color-scheme: dark は、暗い（ダーク）モード用

この指定を使って、それぞれのモードに合った色を設定することができます。

3. 実際にダークモードをCSSで作ってみよう

まずは、通常（ライトモード）の色を設定して、その後にダークモード用のスタイルを上書きしてみましょう。


<style>
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* ダークモードの設定 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #ffffff;
    }
}
</style>

<h1>これはダークモード対応の見出しです</h1>
<p>背景と文字の色が自動で切り替わります。</p>

ブラウザ表示

このように、CSSの変数とメディアクエリを使うと、簡単にダークモード対応の色設定ができます。

4. CSS変数を使うと管理がラクになる理由

ダークモード対応では、色を一か所にまとめて管理しておくと、あとで変更するのが簡単になります。

たとえば、上のコードでは「--bg-color」や「--text-color」という変数を使っていますね。

このようにCSS変数を使っておけば、背景色や文字色を変えたいときに、すべての場所を直さなくても、変数の中身を変えるだけで済みます。

明るいモードと暗いモードで、それぞれの変数を切り替えるだけで、全体の色が自動で変わります。

5. よく使う色の組み合わせ例

初心者の方は、どんな色を使えばいいかわからないことも多いと思います。

以下は、ライトモードとダークモードでよく使われる色の例です。

要素	ライトモード	ダークモード
背景色	#ffffff（白）	#121212（黒に近いグレー）
文字色	#000000（黒）	#ffffff（白）
リンク色	#1a0dab（青）	#8ab4f8（明るい青）

このように、明るい背景には濃い文字を、暗い背景には明るい文字を使うと、読みやすくなります。

6. ダークモードのときに気をつけたいポイント

ダークモード対応をするときには、次のポイントに注意しましょう。

コントラスト：背景と文字の明るさにしっかり差をつける
リンクの色：暗い背景でも目立つ色にする
画像やアイコン：背景が変わっても見えるように工夫する

特に文字と背景の色が似すぎてしまうと、読みにくくなってしまうので、明暗のバランスを意識しましょう。

7. まとめて色の設定を管理するテクニック

色をたくさん使うと、どこでどの色を使っているのか分かりにくくなります。

そんなときは、CSS変数を使って「テーマカラー」ごとに整理しておくと便利です。


<style>
:root {
    --background: #ffffff;
    --text: #000000;
    --link: #1a0dab;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #121212;
        --text: #ffffff;
        --link: #8ab4f8;
    }
}

body {
    background-color: var(--background);
    color: var(--text);
}

a {
    color: var(--link);
}
</style>

<body>
    <h1>ダークモードに対応したページ</h1>
    <p>リンクはこちら：<a href="#">サンプルリンク</a></p>
</body>