BootstrapでOS設定に合わせたダークモード！初心者でもわかるprefers-color-scheme対応

1. prefers-color-schemeとは？

1. prefers-color-schemeとは？

prefers-color-scheme は、ユーザーがパソコンやスマートフォン（iOS/Android）のシステム設定で選んでいる「ライトモード」や「ダークモード」の情報を、ウェブサイト側がキャッチして自動でデザインを切り替えるためのCSSの仕組みです。

これはCSSの「メディアクエリ」という機能の一つです。メディアクエリは本来「画面の横幅」などによってデザインを変えるために使われますが、この prefers-color-scheme を使えば、「ユーザーがいま、暗い画面で見たいと思っているか」を判断基準にできます。

プログラミング未経験の方でも、「テレビの明るさ自動調節機能」のように、周りの環境やユーザーの好みに合わせてサイトが「おもてなし」をしてくれる機能だと考えれば分かりやすいでしょう。近年、目の疲れを軽減するためにダークモードを常用するユーザーが増えているため、この対応はモダンなウェブ制作において必須級のスキルとなっています。

仕組みを体験してみよう

以下のサンプルは、皆さんの端末（PCやスマホ）の設定を変えると、枠内の色が変わる仕組みです。コードの中にある (prefers-color-scheme: dark) という部分が、「もしダークモード設定だったら」という条件分岐の役割を果たしています。

<style>
    /* 通常時（ライトモード）のスタイル */
    .color-test-box {
        background-color: #f8f9fa;
        color: #212529;
        border: 2px solid #dee2e6;
        padding: 20px;
        border-radius: 8px;
    }

    /* OSがダークモード設定の時だけ適用されるスタイル */
    @media (prefers-color-scheme: dark) {
        .color-test-box {
            background-color: #343a40;
            color: #f8f9fa;
            border-color: #495057;
        }
    }
</style>

<div class="color-test-box">
    <p class="mb-0">OSの設定を切り替えると、ここの背景色と文字色が変わります！</p>
</div>

特別なJavaScript（プログラム）を書かなくても、CSSだけでこれほどスマートにユーザーの好みに寄り添えるのが prefers-color-scheme の最大の特徴です。

2. Bootstrapとダークモードの関係

2. Bootstrapとダークモードの関係

Bootstrap 5以降、Webデザインの常識は大きく変わりました。その核となるのが「CSS変数（カスタムプロパティ）」の全面採用です。 従来のBootstrapは色を変えるたびに複雑な設定が必要でしたが、現在は「色の設計図」とも言える変数を書き換えるだけで、一瞬でサイト全体の雰囲気を切り替えることができます。

ダークモード対応の鍵は、このCSS変数をシステムやブラウザの「ライト/ダーク設定」と連動させることにあります。 プログラミングが初めての方でも、「特定のルール（クラス名）をHTMLに書き足すだけで、Bootstrapが自動的に色の変数をダークモード用に差し替えてくれる」とイメージすればOKです。

<div class="p-4" data-bs-theme="dark">
    <div class="card shadow">
        <div class="card-body">
            <h5 class="card-title">ダークモードのカード</h5>
            <p class="card-text">
                このカードは、外側の要素に「data-bs-theme="dark"」を指定しているため、
                背景が暗く、文字が白く自動調整されています。
            </p>
            <button class="btn btn-primary">詳細を見る</button>
        </div>
    </div>
</div>

このように、Bootstrapの仕組みを理解しておけば、OSの設定（prefers-color-scheme）に合わせて自動で画面を暗くする「スマートなWebサイト」も、ほんの数行のコードで実現可能です。 次は、実際にこの機能をWebサイト全体に適用する方法を詳しく見ていきましょう。

3. 基本の書き方：CSSでダークモードに対応させる手順

3. 基本の書き方：CSSでダークモードに対応させる手順

ダークモードの実装と聞くと難しく感じるかもしれませんが、実は「色のルール」を2種類用意するだけです。 まずは基本となるCSSコードを書いてみましょう。2026年現在のWeb制作では、**「CSS変数（カスタムプロパティ）」**を使用して、ライトモード時とダークモード時の色を切り替える手法が最も効率的で、SEOの観点からも推奨される標準的な書き方です。

<style>
/* 1. 通常（ライトモード）の色設定 */
:root {
    --main-bg: #ffffff; /* 背景色：白 */
    --main-text: #212529; /* 文字色：濃いグレー */
}

/* 2. ダークモード用の色設定（OSの設定を検知） */
@media (prefers-color-scheme: dark) {
    :root {
        --main-bg: #121212; /* 背景色：落ち着いた黒 */
        --main-text: #f8f9fa; /* 文字色：明るいグレー */
    }
}

/* 3. 実際に色を適用する */
.theme-box {
    background-color: var(--main-bg);
    color: var(--main-text);
    padding: 20px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.3s ease; /* 切り替わりを滑らかに */
}
</style>

<div class="theme-box">
    <p class="mb-0">このボックスは、あなたのスマホやPCの設定に合わせて、自動的に「ライト」と「ダーク」が切り替わります。</p>
</div>

上記のコードのポイントは、@media (prefers-color-scheme: dark) という記述です。これは「もしユーザーがOSの設定でダークモードを選んでいたら、この中身を実行してね」というWebブラウザへの命令です。 色の指定に var(--main-bg) のような変数を使うことで、一箇所を修正するだけでサイト全体の配色を管理できるため、保守性が非常に高まります。

Windowsでモードを切り替える

「設定」アプリを開き、「個人用設定」→「色」に進みます。「モードを選ぶ」という項目で「ライト」または「ダーク」を選択すると、ブラウザの色も連動します。

Mac（macOS）でモードを切り替える

「システム設定」から「外観」を選択します。「ライト」「ダーク」「自動」の3つから選ぶことができ、「自動」にすると時間帯に合わせて切り替わります。

iPhone / Androidでモードを切り替える

iPhone：「設定」→「画面表示と明るさ」から「外観モード」を切り替えます。
Android：「設定」→「ディスプレイ」→「ダークテーマ」のスイッチをオン/オフにします。

4. ボタンの色をダークモード対応にする

4. ボタンの色をダークモード対応にする

Webサイト全体の背景だけでなく、クリックされる「ボタン」の配色もダークモード対応には欠かせない要素です。Bootstrap 5では、CSS変数（カスタムプロパティ）を書き換えるだけで、ボタンのデザインを驚くほど簡単にカスタマイズできます。

プログラミング未経験の方でも分かりやすいよう、基本の「青色」ボタンを、ライトモードでは「鮮やかなオレンジ」、ダークモードでは「目に優しい淡いオレンジ」に切り替えるサンプルを用意しました。以下のコードをコピーして、色が変わる様子を確認してみましょう。

<style>
/* 通常時（ライトモード）の設定 */
.btn-custom {
    --bs-btn-bg: #ff6600; /* ボタンの背景色 */
    --bs-btn-border-color: #ff6600; /* 枠線の色 */
    --bs-btn-hover-bg: #e65c00; /* マウスを載せた時の色 */
    --bs-btn-color: #fff; /* 文字の色 */
}

/* ダークモード時の設定（自動切り替え） */
@media (prefers-color-scheme: dark) {
    .btn-custom {
        --bs-btn-bg: #ffaa66; /* 暗い画面で見やすい明るめのオレンジ */
        --bs-btn-border-color: #ffaa66;
        --bs-btn-hover-bg: #ffbb88;
        --bs-btn-color: #212529; /* 文字色を黒っぽくして視認性を確保 */
    }
}
</style>

<div class="p-3">
    <p>ブラウザやOSの設定を「ダーク」に変更すると、ボタンの色が自動で切り替わります。</p>
    <button class="btn btn-custom">ダークモード対応ボタン</button>
</div>

ポイントは @media (prefers-color-scheme: dark) という記述です。これは「もしユーザーがダークモードを使っていたら」という条件分岐の役割を果たします。単に色を暗くするのではなく、ダークモード時にはコントラストを調整して「読みやすさ」を損なわないように工夫することが、SEOやアクセシビリティの観点からも非常に重要です。

5. 実際の使いどころと導入メリット

5. 実際の使いどころと導入メリット

ダークモードの自動切り替え機能は、個人のブログから企業のコーポレートサイト、ECサイトまで、現代のWebデザインにおいて必須の要素となりつつあります。特にスマートフォンの普及により、就寝前のリラックスタイムにブラウジングするユーザーが増えた今、目に優しい「低コントラスト」な画面提供は、読者のストレスを軽減し、サイトの離脱率を下げる重要な鍵となります。

プログラミングが初めての方でも、CSS（スタイルシート）の数行のコードを追加するだけで、ユーザーのOS設定（WindowsやiPhoneの設定）に合わせて自動で背景色を切り替えることが可能です。まずは、もっともシンプルな「背景色と文字色の切り替え」のサンプルを見てみましょう。

<style>
    /* 通常時（ライトモード）のスタイル */
    .sample-box {
        background-color: #ffffff;
        color: #333333;
        padding: 20px;
        border: 1px solid #ddd;
    }

    /* OSがダークモード設定の場合に自動適用されるスタイル */
    @media (prefers-color-scheme: dark) {
        .sample-box {
            background-color: #1a1a1a;
            color: #f0f0f0;
            border-color: #444;
        }
    }
</style>

<div class="sample-box">
    <h3>ダークモード対応のデモ</h3>
    <p>お使いのデバイスの設定が「ダーク」になると、この枠内の背景が黒っぽく、文字が白っぽく自動的に変わります。</p>
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="img-fluid mb-2">
</div>

このように @media (prefers-color-scheme: dark) という命令を使うだけで、「ユーザーが今求めている表示」を自動判別できます。これは単なる見た目の工夫だけでなく、アクセシビリティ（誰もが使いやすいこと）を重視するGoogleの評価指標においても、ユーザー体験（UX）を向上させるポジティブな要素として働きます。読みやすいサイトは滞在時間を延ばし、結果としてサイトの信頼性を高めることにつながるのです。

6. 注意点：自動切り替えとユーザーの利便性

6. 注意点：自動切り替えとユーザーの利便性

ダークモードの実装で最も大切なのは、「ユーザーに選択肢を与えること」です。prefers-color-schemeを使えば、OSの設定に合わせて自動で色が変わるため非常に便利ですが、中には「スマホはダークモードだけど、このサイトだけはライトモードで読みたい」というユーザーも存在します。

すべてを自動任せにすると、そうした個別の希望を妨げてしまい、結果として離脱の原因になることもあります。SEOの観点からも、ユーザーが快適に滞在できる「アクセシビリティ」の確保は非常に重要です。まずは自動切り替えを基本としつつ、将来的にはJavaScriptなどを用いて、ユーザーが手動でモードを切り替えられる「スイッチ」を設置するのが理想的です。

初心者向け：CSSだけで完結する色指定の基本

プログラミングが初めての方でも、まずは以下のコードをコピーして試してみてください。背景色と文字色を「変数（カスタムプロパティ）」として定義することで、管理がぐっと楽になります。

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

/* 2. ダークモードの設定（OSがダーク設定の時だけ上書き） */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #1a1a1a;
		--text-color: #f0f0f0;
	}
}

/* 3. 実際に色を適用する */
.sample-box {
	background-color: var(--bg-color);
	color: var(--text-color);
	padding: 20px;
	border: 1px solid #ccc;
	border-radius: 8px;
	transition: 0.3s; /* 色の変化を滑らかにする */
}
</style>

<div class="sample-box">
	<p class="fw-bold">OSの設定を変えると、この枠内の色が変わります！</p>
	<p>現在は、あなたのデバイスの設定（ライト or ダーク）に合わせた色が表示されています。</p>
</div>

このように、最初はシンプルなコードから始めて「自動で色が変わる仕組み」を体験してみましょう。この基本をマスターしてから、次のステップとして手動切り替えスイッチの実装に挑戦するのが、挫折しないコツです。

まとめ

まとめ

今回の記事では、Bootstrap 5を活用しながら、OSの設定に連動して自動的にデザインを切り替える「prefers-color-scheme」の実装方法について詳しく解説してきました。ウェブデザインのトレンドとして、ユーザーの視聴環境に配慮した「ダークモード」への対応は、今や欠かせない要素となっています。特に夜間の閲覧や、有機ELディスプレイを搭載したスマートフォンでのバッテリー節約、そして何よりユーザーの目にかかる負担を軽減するという視点（アクセシビリティ）からも、ダークモード対応は非常に重要な役割を果たします。

実装のポイントは、CSSのメディアクエリを利用して、OSが提供する外観設定の情報をウェブブラウザがキャッチし、それに応じたCSS変数（カスタムプロパティ）を上書きすることです。Bootstrapは元々多くのコンポーネントでCSS変数を使用しているため、独自のスタイルを微調整するだけで、サイト全体の雰囲気をガラリと変えることが可能です。これにより、ライトモードでは清潔感のある白基調、ダークモードでは高級感や視認性を重視した暗色基調といった、柔軟なデザイン展開が容易になります。

さらに、検索エンジン最適化（SEO）の観点からも、ユーザー体験（UX）の向上はプラスに働きます。滞在時間の増加や直帰率の低下は、良質なコンテンツであると検索エンジンに評価される一つの指標です。「ダークモード対応」という付加価値をウェブサイトに持たせることで、競合サイトとの差別化を図り、より多くのユーザーに快適に閲覧してもらえる環境を整えていきましょう。

応用編：カードデザインのダークモード対応サンプル

ここでは、より実践的な例として、Bootstrapのカードコンポーネントをダークモードに対応させるコードを紹介します。画像やテキストの配置を含め、どのように見え方が変わるかを確認してみましょう。

<style>
/* デフォルト（ライトモード）の設定 */
.custom-card {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    color: #212529;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.custom-card-body {
    padding: 20px;
}

/* ダークモード時の設定 */
@media (prefers-color-scheme: dark) {
    .custom-card {
        background-color: #2b3035;
        border-color: #495057;
        color: #f8f9fa;
    }
}
</style>

<div class="container mt-4">
    <div class="custom-card shadow-sm" style="max-width: 400px;">
        <img src="/img/sample150-100.jpg" class="w-100" alt="サンプル画像">
        <div class="custom-card-body">
            <h5 class="fw-bold">最新のウェブデザイントレンド</h5>
            <p>OSの設定に合わせた自動モード切り替えを実装することで、ユーザーにとって最も心地よい閲覧体験を提供します。</p>
            <button class="btn btn-outline-primary btn-sm">詳細を読む</button>
        </div>
    </div>
</div>

このように、画像の下に続くテキストエリアの背景色や境界線の色を細かく指定することで、ダークモード時でも違和感のない、洗練されたインターフェースを構築できます。特に文字色については、真っ白（#ffffff）よりも少しグレーがかった白（#f8f9faなど）を使うと、コントラストが強すぎず、より目に優しいデザインになります。

画像素材の活用とレイアウトの工夫

デザインのアクセントとして画像を使用する場合も、ダークモード時の見え方を意識しましょう。明るい画像はダークモード下で非常に目立つため、必要に応じてCSSの filter: brightness(80%); などを適用して少しトーンを落とすといったテクニックも有効です。

<style>
.profile-section {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 10px;
    background-color: #f1f3f5;
}
@media (prefers-color-scheme: dark) {
    .profile-section {
        background-color: #1a1d20;
        color: #e9ecef;
    }
    .profile-img {
        filter: brightness(0.9);
    }
}
</style>

<div class="profile-section">
    <img src="/img/sample120-120.jpg" class="profile-img rounded-circle" width="60" height="60" alt="プロフィール">
    <div>
        <div class="fw-bold">開発者：ウェブ太郎</div>
        <div class="small">フロントエンドエンジニア。最新のBootstrap情報を発信中。</div>
    </div>
</div>

まとめとして、prefers-color-scheme は単なる色替えの機能ではなく、ユーザーへの「おもてなし」の心を表す手法です。複雑なJavaScriptを記述することなく、CSSだけでこれほど効果的な演出ができるのは大きなメリットです。ぜひ皆さんのプロジェクトでも、Bootstrapのクラスと組み合わせて積極的に導入してみてください。