結論: ボタンを探して、押されたら class を付け外しする

POINTHTML にボタン（id="btn"）を置き、script.js を script タグでつなぐ。JavaScript は getElementById でボタンを探し、addEventListener で「押されたら」を待ち、classList.toggle で body に dark を付けたり外したりする。見た目（暗い色）は CSS の .dark に任せる。

実際に動く見本です。ボタンを押すたびに切り替わります。

はじめてのページ

IT業界をやさしく案内します。

今日のコード（コピーして使えます）

動画の最後にできあがったファイルです。contact.html は変更なし（第8回の記事と同じ）。index.html の <button> と <script>、style.css の .dark、新しい script.js の3つが今回足した部分です。

script.js（新しく作る）
const btn = document.getElementById("btn");
btn.addEventListener("click", function () {
  document.body.classList.toggle("dark");
});
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width">
  <title>はじめてのページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <a href="index.html">自己紹介</a>
    <a href="contact.html">お問い合わせ</a>
  </nav>
  <div class="box">
  <h1>はじめてのページ</h1>
  <button id="btn">ダークモード</button>
  <h2>自己紹介</h2>
  <table>
    <tr>
      <th>好きなもの</th>
      <th>理由</th>
    </tr>
    <tr>
      <td>猫</td>
      <td>かわいいから</td>
    </tr>
    <tr>
      <td>カレー</td>
      <td>おいしいから</td>
    </tr>
  </table>
  <p>IT業界をやさしく案内します。</p>
  <p>これは1行目。<br>
  これは2行目。</p>
  <ol>
    <li>開発の流れ</li>
    <li>職種図鑑</li>
    <li>用語集</li>
    <li>学び方</li>
  </ol>
  <a href="https://it-nyumon.com/">サイトへ</a>
  <a href="https://it-nyumon.com/">
    <img src="neko.png" alt="ねこ" width="200">
  </a>
  </div>
  <script src="script.js"></script>
</body>
</html>
style.css
h1 { color: tomato; }
p { font-size: 20px; }
body { background: lightcyan; }
h1 { text-align: center; }
th, td { border: 1px solid gray; }
table { border-collapse: collapse; }
th, td { padding: 8px; }

.box {
  background: white;
  padding: 24px;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 12px;
}

nav a {
  margin-right: 16px;
}

img {
  max-width: 100%;
}

.dark {
  background: #333;
  color: white;
}
.dark .box {
  background: #555;
}

id と script タグの置き場所

POINTclass は「同じ名前を何個でも付けられる名札」、id は「ページに1つだけの名札」。JavaScript から「この1つ」を探すのに id を使う。script タグは body の最後に置き、CSS の link と同じ考え方で別ファイルをつなぐ。
  • <button id="btn">ダークモード</button>: 第5回のボタンに id を付けました。id はページの中で1つだけにします。
  • <script src="script.js"></script>: 第6回の link タグと同じく、別ファイルをつなぐ1行です。body の最後に置くのがポイントで、ボタンより前に書くと「まだボタンがない」状態で探すことになり、見つかりません。
  • .dark { ... }: ダークモードの見た目は CSS に書いておきます。JavaScript がやるのは「dark という class を付けるか外すか」だけ。役割を分けると、あとで色を変えたいときも CSS だけ直せば済みます。

3行の JavaScript を1行ずつ

  • const btn = document.getElementById("btn");: ページ（document）の中から id が btn の要素を探してきて、btn という名前で持っておきます。
  • btn.addEventListener("click", function () { ... });: ボタンが click されたら、中かっこの中をやれ、という意味です。「押されるのを待つ係」を付けるイメージです。
  • document.body.classList.toggle("dark");: body の class 一覧（classList）に dark を付けたり外したりします。toggle はスイッチで、付いていなければ付け、付いていれば外します。押すたびに切り替わるのはこのためです。

ここまでの3つを一言でまとめると、HTML が意味の札、CSS が見た目の指示書、JavaScript が動きの台本です。

HTML入門シリーズ全10回（まとめ）

自己紹介ページを作って、ネットに公開するところまで、全10回でやってきました。振り返りにどうぞ。

次のシリーズは「JavaScript入門」です。今日の3行の続き（数を数える、文字を変える、入力を受け取る、覚えておく）をじっくりやります。学び方ガイドも参考にしてください。

よくある質問

script タグはなぜ body の最後に書くのですか？

JavaScript は書かれた場所で上から順に実行されます。ボタンより前に書くと、探す時点でまだボタンが読み込まれておらず見つかりません。body の最後に置けば、ページの部品がそろってから動きます。

const は何ですか？

値に名前を付けて持っておく「箱（変数）」を作る書き方です。あとで中身を入れ替えないときは const を使います。今回は探してきたボタンに btn という名前を付けています。

ボタンを押しても何も起きません。

確認する順番は、HTML の id="btn" と JavaScript の "btn" の綴りが同じか、script タグの src が script.js と同じファイル名か、script タグが body の最後にあるか、CSS の .dark が書けているか。ブラウザで F12 を押してコンソールに赤いエラーが出ていないかを見ると原因が分かります。

ダークモードをページを開き直しても覚えさせるには？

ブラウザに小さなメモを残す localStorage という仕組みを使います。押したときに保存し、開いたときに読み出して dark を付け直します。次のシリーズ「JavaScript入門」で扱います。