(Sample)
はじめに：ダークモードって何だろう？
ウェブサイトの背景色やテキスト色を“夜間モード”風に切り替える機能がダークモードです。スマホやPCで画面を見るとき、まぶしさを抑えて目にやさしくなるので人気がありますよね？
ここではサンプルHTMLをもとに、初心者向けに構造と動作をやさしく解説していきます。
HTMLサンプル全体の流れをつかもう
まずは大まかな動きから。
<head>内で文字コードやレスポンシブ設定、CSS（Bootstrap）を読み込む<body>内でパンくずリストや見出し、説明文を表示- ダークモード切替用ライブラリ（Darkmode.js）を読み込み
- JavaScriptでオプションを設定し、切替ボタンを表示・操作
「どの部分がどの役割を担っているか」イメージできていますか？
<head>部分の役割
<meta charset="UTF-8">：文字化けを防ぐための文字コード指定（専門用語：文字エンコーディング。ここではUTF-8を使用）<meta name="viewport" ...>：スマホでも見やすくするレスポンシブ設定<link href="…bootstrap.min.css" rel="stylesheet">：BootstrapというCSSフレームワークを読み込む。Webページのレイアウトやスタイルを手軽に整えられる道具箱のようなものです。<style> … </style>：ページ固有の簡単なCSS。ここでは余白（padding）や上マージン（margin-top）を指定しています。
<body>部分の構造
コンテナと見出し・本文
<div class="container">：Bootstrapの「幅を中央揃えにして余白を自動調整」してくれる箱。<h1>見出しと、その下に説明文（<p>タグ）を配置。
ダークモード切り替えの仕組み
Darkmode.jsの読み込み
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
CDN（専門用語：Content Delivery Network）経由でライブラリ本体を取得します。
例えるなら、ダークモードの“スイッチボタン”を組み込むための部品箱を取り寄せるイメージです。
オプション設定とウィジェット表示
const options = {
bottom: '64px',
right: '32px',
time: '0.5s',
mixColor: '#fff',
backgroundColor: '#fff',
buttonColorDark: '#100f2c',
buttonColorLight: '#fff',
saveInCookies: false,
label: '🌓',
autoMatchOsTheme: true
};
const darkmode = new Darkmode(options);
darkmode.showWidget();
bottomやright：ボタンの表示位置time：切り替えアニメーションの速さmixColor：切替時のベース色（ブレンドカラー）saveInCookies：ユーザーの設定をクッキーに保存するか否かautoMatchOsTheme：OSのテーマ（ダーク/ライト）に合わせる機能
トグル（toggle）機能追加
document.getElementById('darkmode-toggle').addEventListener('click', () => {
darkmode.toggle();
});
ページ内の別ボタン（id="darkmode-toggle"）を押すと、暗⇔明を切り替え可能に。初期のshowWidget()で出したボタン以外でも操作できる仕組みです。
メリットとデメリット
| メリット | デメリット |
|---|---|
| 導入が簡単：CDN一行＋初期化コード | カスタマイズできる範囲がライブラリ準拠 |
| ユーザー体験向上：目の疲れ軽減 | 重い処理ではないが外部依存が増える |
| OSテーマ連動でシームレス | ライブラリ更新に伴うメンテが必要 |
今後の学習の指針
- CSSカスタマイズ：
mixColorや背景色だけでなく、自分でCSSを追加してさらに細かい調整に挑戦しよう！ - Cookie/LocalStorage活用：ユーザーの切替状態を永続化して、再訪問時に覚えてもらう実装を学ぶと便利です。
- アクセシビリティ：画面リーダーやキーボード操作でも切替できるように配慮してみましょう。
- パフォーマンス最適化：読み込み順序や非同期化で初期表示を速くする工夫も確認してみましょう。