ダークモード対応のBootstrapスターター！CSS変数とprefers-color-schemeを完全解説
生徒
「最近、夜になるとWebサイトが暗くなる“ダークモード”をよく見かけますが、自分のサイトでもできますか？」
先生
「はい、BootstrapとCSS変数、さらにprefers-color-schemeを使えば、初心者でも簡単にダークモードの切替ができますよ。」
生徒
「難しそうですけど、具体的にどうやってやるんですか？」
先生
「では、実際のHTMLコードを交えて、丁寧にわかりやすく説明していきましょう！」
1. ダークモードってなに？初心者にもわかりやすく解説
ダークモードとは、画面の背景を暗くして、目にやさしい表示に切り替える機能のことです。最近のスマートフォンやパソコンでは、OSの設定で「ダークモードにする」が選べるようになっています。これに合わせて、Webサイト側も自動でダークテーマに切り替えると、ユーザーにとってとても見やすくなります。
「prefers-color-scheme（プリファーズ・カラー・スキーム）」は、ユーザーの端末がライトモードかダークモードかを教えてくれるCSSの機能です。これを使えば、自動的に色を切り替えることができます。
2. CSS変数を使って色を管理しよう
CSS変数とは、あらかじめ色やサイズを変数のように定義しておき、あとから簡単に変更できる機能です。たとえば、背景色や文字色を--bg-colorや--text-colorのように指定しておけば、ダークモードに切り替えるときにもその値を変更するだけで済みます。
3. Bootstrapスターターにダークモード切替スイッチを追加する
それでは、実際にダークモード対応のスターターテンプレートを作ってみましょう。CSS変数とprefers-color-schemeを活用し、手動でも切替ができるスイッチ付きのレイアウトです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ダークモード対応Bootstrapスターター</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<style>
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #f1f1f1;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #f1f1f1;
}
}
</style>
</head>
<body>
<div class="container py-5">
<h1 class="mb-4">ダークモード切替スイッチ付きスターター</h1>
<button id="toggleTheme" class="btn btn-secondary">
<i class="bi bi-moon"></i> テーマ切替
</button>
<p class="mt-4">このテンプレートは、ダークモードとライトモードを切り替える機能を備えています。</p>
</div>
<script>
const toggleBtn = document.getElementById('toggleTheme');
toggleBtn.addEventListener('click', () => {
if (document.documentElement.getAttribute('data-theme') === 'dark') {
document.documentElement.removeAttribute('data-theme');
} else {
document.documentElement.setAttribute('data-theme', 'dark');
}
});
</script>
</body>
</html>
4. ダークモード対応のメリットとSEOの効果
ダークモードを導入することによって、ユーザー体験（UX）が向上します。特に夜間や暗い部屋での閲覧が快適になります。また、最近の検索エンジンでは「ダークモード対応」や「モバイルフレンドリーなデザイン」がSEO対策の一部として評価される傾向があり、検索順位の改善にもつながります。
また、Bootstrapを使ったダークモード切替の実装は軽量で高速なため、ページの読み込み速度にも悪影響を与えません。これはGoogleが評価する指標のひとつでもある「PageSpeed」にも好影響を与えます。
5. prefers-color-schemeの注意点と対応方法
ただし、prefers-color-schemeは一部の古いブラウザでは対応していない場合もあります。そのため、今回紹介したように「切替ボタン」を用意することで、ユーザーが自分の好みに応じてテーマを選べるようにしておくのがベストです。
CSSだけに頼らず、JavaScriptを組み合わせることで、より柔軟に制御することが可能になります。特に、企業サイトやブログなど幅広いユーザー層を想定する場合には、このような工夫がとても大切です。
6. BootstrapとCSS変数の組み合わせは初心者にも安心
Bootstrapは、すでにスタイルが整っている便利なパーツがたくさん用意されています。そこに、CSS変数を加えることで、テーマ全体の色を一括で管理できます。つまり、背景色や文字色をそれぞれ設定しなくても、一箇所を変えるだけで全体の見た目を変更できるようになるのです。
このような仕組みを活用することで、Web制作の経験が少ない初心者でも、実用的で見やすいダークモード対応のWebサイトを作ることができます。
