Bootstrapで学ぶダークモード対応！初心者でもできる画像とロゴの切替ガイド

1. Bootstrapのダークモードとは何かをやさしく理解しよう

1. Bootstrapのダークモードとは何かをやさしく理解しよう

Bootstrapのダークモードは、Webサイト全体の配色をボタン一つで「明るい色（ライト）」から「暗い色（ダーク）」へ切り替えることができる非常に便利な仕組みです。2026年現在のWebデザインにおいて、ユーザーの目への負担を軽減する「目に優しい設計」は必須となっており、Bootstrapを使えば複雑なプログラミングの知識がなくても、最新のトレンドに合わせたUI（ユーザーインターフェース）を構築できます。

具体的には、HTMLのタグにdata-bs-theme="dark"という一言を追加するだけで、背景が黒系に、文字が白系に自動で変化します。これにより、夜間のブラウジングや暗い場所での操作性が飛躍的に向上します。プログラミングに慣れていない方でも、まずは「着せ替え機能」のような感覚で取り入れることができるのが最大の特徴です。

<div class="p-4" data-bs-theme="dark" style="background-color: var(--bs-body-bg); color: var(--bs-body-color);">
    <h3>ダークモードが適用されたエリア</h3>
    <p>このように、背景が暗くなり文字が白く反転します。</p>
    <button class="btn btn-primary">青色のボタン</button>
</div>

しかし、ここで一つ注意点があります。背景色が暗く変わっても、ページ内に配置した「画像」や「ロゴ」の色は自動では変わりません。例えば、黒色のロゴを配置していた場合、背景も黒くなるとロゴが同化して消えてしまったように見えてしまいます。せっかくのサイトデザインが崩れないよう、次章から紹介するテクニックを使って、背景色に合わせて画像も賢く切り替えていきましょう。

2. 画像の色を1行で反転！ダークモード対応に便利なfilter属性の使い方

2. 画像の色を1行で反転！ダークモード対応に便利なfilter属性の使い方

Webサイトをダークモードに対応させる際、一番の悩みどころは「黒いロゴやアイコンが背景に溶けて見えなくなること」ではないでしょうか。わざわざ色違いの画像を用意しなくても、CSSの「filter（フィルター）」プロパティを使えば、初心者の方でもたった1行で画像の色を反転させることができます。

filterとは、画像に対してフォトショップのような加工（白黒、ぼかし、色反転など）をブラウザ上で直接実行できる機能です。特にinvert(1)という指定を使うと、色が100%反転し、黒い画像がパッと白く変わります。これにより、背景が暗いデザインでも画像の視認性を一瞬で確保できるため、SEOの観点からも重要な「アクセシビリティ（見やすさ）」の向上に直結します。

<style>
/* 背景が暗い場合にだけ適用するクラス */
.dark-mode-box {
    background-color: #333; /* 暗い背景 */
    padding: 20px;
    text-align: center;
}

.dark-invert {
    /* filter: invert(1); で色を反転（0が通常、1が完全反転） */
    filter: invert(1);
}
</style>

<div class="dark-mode-box">
    <p style="color: white;">↓CSSで色を反転させた画像</p>
    <img src="/img/common/logo-moku.png" width="80px" class="dark-invert" alt="ダークモード用の反転ロゴ">
</div>

この手法は、単色のロゴやシンプルなアイコン素材に最適です。逆に、写真などに使ってしまうと人の肌や風景が不自然な色になってしまうため、基本的には「図形的な要素」に絞って活用するのがスマートなWeb制作のコツです。手間をかけずに、ユーザーがストレスを感じない「読みやすいデザイン」を実現しましょう。

3. ダークモードとライトモードで画像を切り替える方法（source切替）

3. ダークモードとライトモードで画像を切り替える方法（source切替）

Bootstrapのダークモードでは、明るい画像と暗い画像を切り替える方法がとても便利です。「source切替」という方法では、ライトモードとダークモードで別々の画像を読み込むことができます。写真や色の多い画像はfilterではきれいに変換できないため、この切替方法が役立ちます。

<picture>
    <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">
    <img src="/img/common/logo-moku.png"  width="80px" alt="ロゴ">
</picture>

この仕組みでは、利用者のブラウザがダークモードかどうかを自動的に判断し、適切な画像を表示します。初心者でも扱いやすく、画像を自由にデザインできるため、ブランドロゴや商品写真に向いています。

4. SVGロゴを使うと色変更が自由自在になる

4. SVGロゴを使うと色変更が自由自在になる

SVGとは、拡大しても画質が落ちない画像形式のことで、ロゴやアイコンに最適です。ふつうの画像と違って、色をCSSで変えられるため、ダークモードとの相性がとてもよいです。Bootstrapのテーマ作成でもよく使われます。

<style>
.logo-svg {
    fill: black;
}
[data-bs-theme="dark"] .logo-svg {
    fill: white;
}
</style>

<svg class="logo-svg" width="120" height="40" viewBox="0 0 120 40">
    <rect width="120" height="40" rx="5"></rect>
</svg>

SVGは色を変えたり形を変えたりできる柔軟な画像なので、サイト全体の雰囲気を統一したいときにとても便利です。白い背景でも黒い背景でもはっきり見せられるため、ダークモードでの読みやすさが大きく向上します。

5. Bootstrapのテーマ作成とダークモード運用のポイント

5. Bootstrapのテーマ作成とダークモード運用のポイント

Bootstrapでテーマを作成するときは、画像やロゴの見え方を確認しながら配置することが大切です。ライトモードでは明るい色のロゴがきれいに見えても、ダークモードでは背景に溶け込んでしまうなど、配色の関係で見づらくなる場合があります。

初心者は「filter」「source切替」「SVG塗り」の三つを知っておくだけで、十分にきれいなダークモード対応ができます。特に、Bootstrapのdata-bs-themeを使うと、HTML上でテーマを切り替えるだけで見た目を変更できるため、管理が簡単になります。

画像の見え方は利用者の環境によって変わるため、画面の明るさやディスプレイの種類なども意識して調整すると、より利用者に親切なサイトになります。少しずつ改善しながら仕上げることで、初心者でも高品質なデザインを作れるようになります。