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

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

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

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

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

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

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. 文字の色や背景色をダークモード向けに調整するコツ

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. 画像の明るさをダークモードで抑える方法

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変数を使って効率的にモードを切り替える

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. アイコンや枠線の色も忘れずにチェック

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

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

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

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

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

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

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

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

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

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

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

まとめ

まとめ

CSSでダークモードに対応するときに中心となるのが、prefers-color-schemeです。prefers-color-schemeを使うと、利用者がパソコンやスマートフォンで設定しているライトモードやダークモードの状態を確認し、その設定に合わせてWebページの背景色や文字色などを自動で切り替えることができます。利用者がWebサイト側で毎回設定を変更しなくても、普段使っている端末の表示設定に合わせてデザインが変わるため、見やすさや使いやすさを高めることができます。

CSS初心者が最初に覚えておきたいのは、通常のCSSをライトモード用として書き、そのあとにメディアクエリを使ってダークモード用のCSSを追加するという基本的な考え方です。prefers-color-schemeは、画面の横幅に応じてデザインを切り替えるレスポンシブデザインと同じように、条件に応じてCSSを適用する仕組みです。条件がダークモードであれば、その中に記述したCSSが適用されます。

prefers-color-schemeの基本的な書き方を確認しよう

ダークモードを設定するときは、まず通常の背景色と文字色を指定し、そのあとにダークモード用の色を上書きします。初めてCSSを書く場合でも、もし利用者がダークモードならこの色に変更するという考え方で読むと理解しやすくなります。

<style>
body {
    background-color: #ffffff;
    color: #333333;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #eeeeee;
    }
}
</style>

<div class="p-3">
    <h3>ダークモード対応ページ</h3>
    <p>端末の設定に合わせて背景色と文字色が変わります。</p>
</div>

この例では、通常は白い背景に濃い文字色が使われます。利用者の端末がダークモードになっている場合は、暗い背景色と明るい文字色へ自動的に切り替わります。HTMLそのものを書き換える必要はなく、CSSだけで表示を切り替えられることがprefers-color-schemeの大きな特徴です。

ダークモードでは背景色と文字色を一緒に調整する

ダークモード対応で初心者が注意したいのは、背景色だけを暗くしないことです。背景を暗くしたのに文字色をそのままにすると、文字が読みにくくなる場合があります。そのため、背景色を暗くするときは、文字色も明るい色へ変更することが基本です。

また、真っ黒な背景に真っ白な文字という組み合わせは、明暗の差が強すぎて長時間見ると疲れやすく感じることがあります。少し明るい黒や濃いグレーの背景と、少し暗めの白や明るいグレーの文字を組み合わせると、落ち着いたダークモードを作りやすくなります。

リンク、見出し、ボタン、カードなども背景色との組み合わせを確認することが重要です。ライトモードで読みやすかった色が、暗い背景では目立たなくなることがあります。ダークモードを作るときは、ページ全体を一度確認し、文字やリンクが十分に読みやすいか確かめましょう。

カードや枠線もダークモードに合わせて変更する

Webページには、背景色と文字色以外にもカード、入力欄、枠線などさまざまな色が使われています。ページ全体を暗くしたのにカードだけ白いままだと、その部分だけ明るく浮いて見えることがあります。そのため、カードの背景色やborderで指定している枠線の色もダークモード用に調整すると、統一感のあるデザインになります。

<style>
.info-card {
    padding: 20px;
    background-color: #f8f9fa;
    color: #333333;
    border: 1px solid #cccccc;
    border-radius: 8px;
}

@media (prefers-color-scheme: dark) {
    .info-card {
        background-color: #242424;
        color: #eeeeee;
        border-color: #555555;
    }
}
</style>

<div class="info-card">
    <h3>お知らせ</h3>
    <p>ライトモードとダークモードの両方に対応したカードです。</p>
</div>

このようにカードの背景色、文字色、枠線の色をまとめて変更すると、ダークモードでも違和感の少ない表示になります。単にページ全体を黒くするのではなく、それぞれの部品の色を確認することが、見やすいダークモードを作るポイントです。

画像の明るさもダークモードでは確認する

ダークモードでは、写真やイラストの明るさにも注意が必要です。周囲が暗くなった状態で明るい画像を表示すると、その画像だけが強く目立ち、まぶしく感じる場合があります。必要に応じてCSSのfilterとbrightnessを使い、ダークモードのときだけ画像を少し暗くすることができます。

<style>
.dark-image {
    width: 150px;
    height: auto;
}

@media (prefers-color-scheme: dark) {
    .dark-image {
        filter: brightness(0.8);
    }
}
</style>

<img src="/img/sample150-100.jpg" class="dark-image" alt="ダークモード用の表示確認画像">

brightnessの値を小さくすると画像が暗くなります。ただし、すべての画像を必ず暗くする必要があるわけではありません。写真の内容やサイトの雰囲気を確認しながら調整することが大切です。人物写真や商品画像など、色を正確に見せたい画像では暗くしすぎないように注意しましょう。

CSS変数を使うと色の管理が簡単になる

ページの規模が大きくなると、背景色や文字色を多くの場所に書くことになります。その状態でダークモード用の色を一つずつ変更すると、修正する場所が増えて管理が大変になります。そこで便利なのがCSS変数です。

CSS変数を使うと、背景色や文字色に分かりやすい名前を付けて管理できます。ライトモードとダークモードで変数の中身だけを切り替えれば、その変数を使っている場所へまとめて反映できます。複数のページを持つWebサイトや、同じ色を何度も使用するデザインでは特に便利です。

<style>
:root {
    --page-bg: #ffffff;
    --page-text: #333333;
    --card-bg: #f8f9fa;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #181818;
        --page-text: #eeeeee;
        --card-bg: #252525;
    }
}

.color-box {
    padding: 20px;
    background-color: var(--card-bg);
    color: var(--page-text);
}
</style>

<div class="color-box">
    <h3>CSS変数を使った配色</h3>
    <p>モードに合わせて色が自動的に変わります。</p>
</div>

CSS変数を使う場合は、背景色、文字色、カードの背景色などを最初にまとめて定義しておきます。その後はvarを使って変数を呼び出します。ダークモード用のメディアクエリでは変数の値だけを変更するため、同じ色を何度も書き直す必要がありません。

アイコンやボタンの色も忘れずに確認する

ダークモード対応では、本文の文字だけを確認して終わらないようにしましょう。Bootstrapアイコン、ボタン、リンク、枠線なども、背景色が変わることで見えにくくなる場合があります。特に薄いグレーの線や暗い色のアイコンは、ダークモードでは背景と同化してしまうことがあります。

ボタンの場合は、背景色と文字色の両方を確認します。リンクの場合は、通常の文字と区別できる色になっているか確認します。アイコンについても、文字色を引き継いでいる場合はダークモード用の文字色を変更することで自然に切り替わることがあります。

ダークモードの目的は、単に黒い画面を作ることではありません。利用者が暗い環境でも文章を読みやすく、ボタンやリンクを迷わず操作できる状態を作ることが大切です。そのため、色を変更したあとにはページ全体を実際に見て確認する必要があります。

ライトモードとダークモードで表示を切り替えることもできる

prefers-color-schemeでは、色だけでなく要素の表示状態を変えることもできます。例えばライトモードでは太陽のアイコンを表示し、ダークモードでは月のアイコンを表示するような切り替えもCSSだけで作ることができます。

この場合はdisplayを使って、通常は片方を表示し、ダークモードになったときに表示する要素を入れ替えます。ただし、同じ内容を重複して大量に用意するのではなく、表示を切り替える必要がある部分だけに使うと管理しやすくなります。

<style>
.light-message {
    display: block;
}

.dark-message {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .light-message {
        display: none;
    }

    .dark-message {
        display: block;
    }
}
</style>

<p class="light-message"><i class="bi bi-sun"></i> ライトモードで表示しています。</p>
<p class="dark-message"><i class="bi bi-moon"></i> ダークモードで表示しています。</p>

この例では、端末の設定に応じて表示する文章が切り替わります。色だけでなく表示そのものを切り替えられることを理解しておくと、ダークモードに合わせた細かなデザインにも応用できます。

ダークモードは実際に切り替えて確認することが大切

prefers-color-schemeを書いたら、ライトモードとダークモードの両方で表示を確認しましょう。ライトモードだけを見ていると、暗い背景になったときに文字が見えない、リンクの色が分からない、枠線が消えて見えるといった問題に気付けません。

ブラウザの開発者ツールを利用すると、パソコン本体の設定を毎回変更しなくてもダークモードを再現できる場合があります。実際に切り替えながら、背景色、文字色、リンク、カード、画像、アイコン、枠線などを順番に確認すると、見落としを減らせます。

CSSのprefers-color-schemeは、利用者の端末設定を尊重しながらWebサイトの配色を自動で変更できる便利な機能です。基本となるメディアクエリの書き方を覚えれば、背景色と文字色だけの簡単な対応から始められます。その後、カードや画像、リンク、アイコンなども必要に応じて調整すると、サイト全体に統一感のあるダークモードを作ることができます。

CSS初心者は、最初から複雑なダークモードを作ろうとせず、まず背景色と文字色の二つから試すと分かりやすいでしょう。次にカードや枠線を変更し、必要であれば画像の明るさやCSS変数を追加していきます。一つずつブラウザで変化を確認することで、prefers-color-schemeとメディアクエリの仕組みを自然に理解できるようになります。