CSSでダークモード対応！prefers-color-schemeの使い方を初心者向けに解説

prefers-color-scheme を使ってダークモードに対応する方法

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

生徒

「最近、スマホやパソコンの画面を黒っぽくする『ダークモード』をよく見かけますが、自分のサイトでも設定できますか？」

先生

「はい、ＣＳＳの prefers-color-scheme（プリファーズ・カラー・スキーム）という機能を使えば、ユーザーの設定に合わせて自動で色を切り替えられますよ。」

生徒

「自動で切り替わるのは便利ですね！難しそうですが、私でも書けますか？」

先生

「仕組みはとてもシンプルです。基本の書き方から丁寧に説明しますね！」

1. ダークモードとprefers-color-schemeの基本

ダークモードとは、画面全体の背景を暗い色にし、文字を明るい色にする表示設定のことです。夜間に画面を見るときに目が疲れにくかったり、スマートフォンのバッテリー消費を抑えられたりするメリットがあります。最近では、アイフォンやアンドロイド、ウィンドウズなどの多くのシステムで、利用者が「ライトモード（明るい）」か「ダークモード（暗い）」かを選べるようになっています。

ＣＳＳ（スタイルシート）の機能である「ｐｒｅｆｅｒｓ－ｃｏｌｏｒ－ｓｃｈｅｍｅ（プリファーズ・カラー・スキーム）」を使うと、ホームページ側が「この人は今、ダークモードを使っているな」と判断できるようになります。これによって、スイッチなどを自作しなくても、ＯＳの設定と連動して勝手にデザインが切り替わる、非常に親切なウェブサイトを作ることができるのです。

2. メディアクエリを使って色の切り替えを指示する

色の切り替えには「メディアクエリ」という仕組みを使います。これは、特定の条件（例えば画面の幅や、今回のような色の設定）に合致したときだけ、特別なＣＳＳを適用するためのルールです。プログラミング未経験の方でも、「もし～なら、この色にする」という条件分岐のイメージを持つと分かりやすいでしょう。

基本的には、まず普通のライトモード（明るい画面）用の色を書いておき、その後に「もしダークモードなら、こっちの色で上書きしてね」という命令を付け加えます。この手順で進めることで、ダークモードに対応していない古いパソコンで見てもデザインが崩れることがないので安心です。


<style>
/* 基本のスタイル（ライトモード用） */
body {
    background-color: #ffffff; /* 白 */
    color: #333333; /* 濃いグレー */
}

/* ダークモードの設定がある場合 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212; /* 暗い色 */
        color: #e0e0e0; /* 明るいグレー */
    }
}
</style>

<div class="p-3">
    <h3><i class="bi bi-moon-stars"></i> ダークモード対応テスト</h3>
    <p>あなたの端末の設定を切り替えると、この背景と文字の色が変わります。</p>
</div>

ブラウザ表示

3. 文字の色や背景色をダークモード向けに調整するコツ

ダークモードでは、単に背景を「真っ黒（#000000）」にし、文字を「真っ白（#ffffff）」にすれば良いというわけではありません。実は、真っ黒に真っ白な文字を置くと、コントラストが強すぎて逆に目が疲れてしまうことがあります。プロのデザイナーは、少しグレーがかった黒や、少し沈んだ白を使って、目に優しい配色を心がけています。

また、リンクの色（青色など）も、暗い背景の上では見えにくくなることがあります。ライトモードでは標準的な青色を使い、ダークモードのときは少し明るめの水色にするなど、状況に合わせて微調整するのがポイントです。以下の例では、カード形式のデザインをダークモードに最適化する方法を紹介します。


<style>
.my-card {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    color: #333;
}

@media (prefers-color-scheme: dark) {
    .my-card {
        background-color: #1e1e1e;
        border-color: #444;
        color: #f5f5f5;
    }
}
</style>

<div class="my-card">
    <h4><i class="bi bi-card-text"></i> 配色の最適化</h4>
    <p>ダークモードでは少しグレーを混ぜた色を使うと、目が疲れにくくなります。</p>
</div>

ブラウザ表示

4. 画像の明るさをダークモードで抑える方法

背景や文字を暗くしても、写真やイラストがそのままだと、写真だけがピカッと光って眩しく感じることがあります。特に白い背景の写真などは、ダークモードの落ち着いた雰囲気の中で浮いてしまいがちです。これを解決するために、ダークモードのときだけ画像に薄いフィルターをかけて、少しだけ暗く見せるテクニックがあります。

ＣＳＳの「フィルター：ブライトネス（brightness）」という命令を使うと、画像の明るさを調整できます。これをメディアクエリの中で指定することで、ダークモードのときだけ画像が周囲の暗いデザインに馴染むようになります。ユーザーが夜にサイトを見ていても、「うわっ、眩しい！」とならないような気配りが、良いサイト作りには欠かせません。


<style>
.sample-img {
    width: 150px;
    height: auto;
    transition: filter 0.3s;
}

@media (prefers-color-scheme: dark) {
    .sample-img {
        /* 明るさを80%に落とす */
        filter: brightness(0.8);
    }
}
</style>

<div class="p-3">
    <img src="/img/sample150-100.jpg" class="sample-img" alt="サンプル画像">
    <p>ダークモードでは画像が少し落ち着いた明るさになります。</p>
</div>

ブラウザ表示

5. CSS変数を使って効率的にモードを切り替える

サイト全体の色を一つずつ書き換えるのは大変です。そこで便利なのが「ＣＳＳ変数（カスタムプロパティ）」という機能です。これは、色に名前をつけて保存しておける「箱」のようなものです。例えば「メインの背景色」という名前の箱を作っておき、その中身をライトモード用とダークモード用で入れ替えるように設定します。

この方法を使うと、各場所で「背景色はこの色！」と何度も書く必要がなくなり、箱の名前を指定するだけで済みます。将来的に「もう少し背景を明るくしたいな」と思ったときも、箱の中身を１箇所変えるだけでサイト全体のダークモード設定が一度に変わるため、修正作業がとても楽になります。プログラミングの効率を上げるための大事なステップです。


<style>
/* 変数の定義（基本はライトモード） */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

/* ダークモードなら変数の中身を入れ替える */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #2c3e50;
        --text-color: #ecf0f1;
    }
}

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

<div class="variable-demo">
    <h5><i class="bi bi-gear-fill"></i> 変数での一括管理</h5>
    <p>一箇所の設定を変えるだけで、全体のデザインを管理できます。</p>
</div>

ブラウザ表示

6. アイコンや枠線の色も忘れずにチェック

背景や文字以外にも、意外と忘れがちなのがアイコンや枠線の色です。ライトモードで薄いグレーの枠線を使っている場合、ダークモードの暗い背景ではほとんど見えなくなってしまいます。また、ブートストラップアイコンなどの図記号も、文字色と同じ色に設定されているか確認が必要です。

細かな部分まで丁寧に対応することで、サイトの完成度は格段に上がります。ライトモードでは「優しく明るい印象」、ダークモードでは「クールで高級感のある印象」というように、それぞれのモードで異なる魅力を引き出せるようになると、ホームページ作りがより一層楽しくなります。パソコンを触り始めたばかりの方も、色の組み合わせをパズルのように楽しんでみてください。

7. ライトモード限定やダークモード限定の要素を作る

色を変えるだけでなく、「このメッセージはダークモードの時だけ出したい」ということも可能です。例えば「ダークモードをご利用いただきありがとうございます」という挨拶文を、ライトモードの時は消しておき、ダークモードの時だけ表示させるといった演出です。これはＣＳＳの「ｄｉｓｐｌａｙ（ディスプレイ）」という命令を切り替えることで実現できます。

同じように、明るい画面では太陽のアイコン、暗い画面では月のアイコンを表示させるといった使い分けも面白いでしょう。ユーザーの選択を尊重し、それに応えるような変化をサイトに持たせることは、訪問者とのコミュニケーションの一つにもなります。技術的なことだけでなく、使う人の状況を想像する力が、素晴らしいウェブサイトを生みます。

8. 開発者ツールで切り替えをテストする方法

ダークモードの表示を確認するために、わざわざパソコン自体の設定を何度も変えるのは面倒ですよね。そんな時は、ブラウザの「開発者ツール（デベロッパーツール）」を使いましょう。グーグルクロームなどのブラウザでは、ツール内のボタン一つで「仮想的なダークモード」を作り出し、リアルタイムで表示をチェックすることができます。

開発者ツールを開き、レンダリング設定の項目から「prefers-color-scheme: dark」をエミュレート（真似すること）すれば、すぐに結果が確認できます。プロの制作者も、この方法で効率よくテストを行っています。自分の書いたコードが思い通りに動く瞬間は、何度経験しても嬉しいものです。失敗を恐れずに、色々な色の組み合わせにチャレンジしてみましょう！

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