基礎から学ぶJavaScript入門 90日コース | Webページを操作するDOM － Day 34：CSS操作

90日で身につけるJavaScript

2026.08.27

Day 34：CSS操作（前半）
CSS操作の基本発想：スタイルは“クラス”でまとめて管理する
1. 直接styleを書き換えるより、クラスを切り替える
classListとは：要素が持つ“クラスの集合”を扱うためのオブジェクト
1. class属性とclassListの関係
classList.add()：クラスを“追加する”
1. 役割
2. 簡単な例
classList.remove()：クラスを“取り除く”
1. 役割
2. addと組み合わせた例
classList.toggle()：クラスを“オン／オフ切り替え”
1. 役割
2. ボタン1つで切り替える例
実践：ダークモード切り替えの基本設計を考える
1. ダークモードとは何か
2. ステップのイメージ
ダークモード切り替えのコード例（基本版）
1. HTML＋CSS＋JavaScriptの例
2. 重要ポイントの解説
classListを使うときのセキュリティ・安全性の観点
1. スタイル操作は基本的に安全だが、“クラス名”は自分で管理する
Day 34 前半練習用テンプレート
Day 34 前半のまとめ
Day 34：CSS操作（後半）
CSS操作の本質：JavaScriptは“クラスを付け替えるだけ”
1. クラスで状態を表現するという考え方
classListの3つの基本操作をUIの動きと結びつける
1. classListとは
2. classList.add()：状態を「ON」にする
3. classList.remove()：状態を「OFF」にする
4. classList.toggle()：ON/OFFを1つのスイッチで切り替える
ダークモード切り替えを設計するステップ
1. Step 1：CSSで「通常」と「ダーク」を定義する
2. Step 2：HTMLに「切り替えボタン」を用意する
3. Step 3：JavaScriptでbodyとボタンを取得する
4. Step 4：ボタンが押されたときにdark-modeクラスをトグルする
完成コード：ダークモード切り替え（コメント付き）
add / remove を使った「明示的なON/OFF」も体験してみる
1. 明示的なON/OFFの例
セキュリティ・安全性の観点からの補足
Day 34 後半練習用テンプレート
Day 34 後半のまとめ

Day 34：CSS操作（前半）

「クラスを切り替えて“見た目のモード”を変える」

Day 34前半では、JavaScriptからCSSを操作するための基本テクニックである classList を学びます。ここでのゴールは、

classList が何をしてくれるものなのか理解する
add() / remove() / toggle() の役割と違いを掴む
それを使って「ダークモード切り替え」を実装するイメージを持つ

ことです。

DOM操作は「どの要素を触るか」を決めたあと、 「その要素の見た目をどう変えるか」 という段階に入ります。そのときに中心になるのが「クラス（class）」の付け外しです。

CSS操作の基本発想：スタイルは“クラス”でまとめて管理する

直接styleを書き換えるより、クラスを切り替える

JavaScriptからCSSを変える方法は大きく分けて2つあります。

element.style.color = 'red'; のように、styleプロパティを直接書き換える
element.classList.add('active'); のように、クラスを付け外しする

初心者のうちは、styleを直接書き換える方法も分かりやすいですが、実際の開発では クラスを切り替える方法が圧倒的に使われます。

理由はシンプルで、

CSS側に「見た目のルール」をまとめて書ける
JavaScript側は「どのクラスを付けるか」だけを考えればよい
デザイン変更があっても、CSSを直せば済む（JSを触らなくてよい）

からです。

そのクラス操作を支えているのが、 DOM要素の classList プロパティです。

classListとは：要素が持つ“クラスの集合”を扱うためのオブジェクト

class属性とclassListの関係

HTMLの要素には、class 属性を付けることができます。

<p class="message important">テキストです。</p>

この <p> 要素は、

message
important

という2つのクラスを持っています。

JavaScriptでこの要素を取得すると、

const pElement = document.querySelector('p');

const pElement = document.querySelector('p');

JavaScript

この pElement には、次のようなプロパティがあります。

pElement.className → "message important" という文字列
pElement.classList → クラスの集合を扱うためのオブジェクト

classList は「クラス名の一覧」を扱うための便利なインターフェースで、ここに対して

add()
remove()
toggle()

などのメソッドを使うことで、クラスの付け外しを簡単に行うことができます。

classList.add()：クラスを“追加する”

役割

classList.add() は、

「指定したクラス名を、その要素に追加する」

ためのメソッドです。

pElement.classList.add('highlight');

pElement.classList.add('highlight');

JavaScript

もし highlight クラスがまだ付いていなければ、追加されます。
すでに付いていても、重複して追加されることはありません。

簡単な例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>classList.addの基本</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p id="text">このテキストは、ボタンを押すとハイライトされます。</p>
  <button id="addButton">ハイライトを追加</button>

  <script>
    const textElement = document.getElementById('text');
    const addButtonElement = document.getElementById('addButton');

    addButtonElement.addEventListener('click', function () {
      // highlightクラスを追加します
      textElement.classList.add('highlight');
      console.log('highlightクラスを追加しました。');
    });
  </script>
</body>
</html>

ここでは、 CSS側で .highlight の見た目を定義し、 JavaScript側で「いつそのクラスを付けるか」を決めています。

classList.remove()：クラスを“取り除く”

役割

classList.remove() は、

「指定したクラス名を、その要素から取り除く」

ためのメソッドです。

pElement.classList.remove('highlight');

pElement.classList.remove('highlight');

JavaScript

もし highlight クラスが付いていれば、削除されます。
付いていなければ、何も起きません（エラーにはなりません）。

addと組み合わせた例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>classList.removeの基本</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p id="text">このテキストは、ハイライトを付けたり外したりできます。</p>
  <button id="addButton">ハイライトを追加</button>
  <button id="removeButton">ハイライトを削除</button>

  <script>
    const textElement = document.getElementById('text');
    const addButtonElement = document.getElementById('addButton');
    const removeButtonElement = document.getElementById('removeButton');

    addButtonElement.addEventListener('click', function () {
      textElement.classList.add('highlight');
      console.log('highlightクラスを追加しました。');
    });

    removeButtonElement.addEventListener('click', function () {
      textElement.classList.remove('highlight');
      console.log('highlightクラスを削除しました。');
    });
  </script>
</body>
</html>

このように、 add() と remove() を組み合わせることで、「状態に応じて見た目を切り替える」ことができます。

classList.toggle()：クラスを“オン／オフ切り替え”

役割

classList.toggle() は、

「指定したクラス名が付いていなければ追加し、付いていれば削除する」

という「トグル（切り替え）」を行うメソッドです。

pElement.classList.toggle('highlight');

pElement.classList.toggle('highlight');

JavaScript

クラスがない → 追加される
クラスがある → 削除される

ボタン1つで切り替える例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>classList.toggleの基本</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p id="text">このテキストは、ボタンを押すたびにハイライトが切り替わります。</p>
  <button id="toggleButton">ハイライト切り替え</button>

  <script>
    const textElement = document.getElementById('text');
    const toggleButtonElement = document.getElementById('toggleButton');

    toggleButtonElement.addEventListener('click', function () {
      // highlightクラスをトグルします
      textElement.classList.toggle('highlight');
      console.log('highlightクラスをトグルしました。現在のクラス一覧:', textElement.className);
    });
  </script>
</body>
</html>

toggle() は、「オン／オフを1つのボタンで切り替えたい」という場面で非常に便利です。

実践：ダークモード切り替えの基本設計を考える

ダークモードとは何か

ダークモードは、

背景を暗くする
文字色を明るくする
全体のコントラストを調整する

ことで、夜間や暗い環境で見やすくするモードです。

Webページでダークモードを実装するときの基本パターンは、

「ページ全体（例えばbody）に dark-mode クラスを付けるかどうか」

で切り替える、というものです。

ステップのイメージ

CSSで「通常モード」と「ダークモード」のスタイルを定義する
HTMLに「ダークモード切り替えボタン」を用意する
JavaScriptで body 要素を取得する
ボタンが押されたときに、body.classList.toggle('dark-mode') を呼ぶ

この流れで、「ダークモード切り替え」が実現できます。

ダークモード切り替えのコード例（基本版）

HTML＋CSS＋JavaScriptの例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 34 前半：ダークモード切り替え</title>
  <style>
    /* 通常モードのスタイル */
    body {
      background-color: #ffffff;
      color: #000000;
      font-family: sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }

    /* ダークモードのスタイル */
    body.dark-mode {
      background-color: #121212;
      color: #f0f0f0;
    }

    /* ボタンのスタイル（見やすさのため） */
    #darkModeToggleButton {
      margin-top: 16px;
      padding: 8px 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>ダークモード切り替えの基本</h1>
  <p>このページは、ボタンを押すとダークモードに切り替わります。</p>

  <button id="darkModeToggleButton">ダークモードに切り替える</button>

  <script>
    // body要素を取得します
    const bodyElement = document.body;

    // ボタン要素を取得します
    const darkModeToggleButtonElement = document.getElementById('darkModeToggleButton');

    // ボタンがクリックされたときの処理
    darkModeToggleButtonElement.addEventListener('click', function () {
      // bodyにdark-modeクラスをトグルします
      bodyElement.classList.toggle('dark-mode');

      // 現在ダークモードかどうかを判定します
      const isDarkMode = bodyElement.classList.contains('dark-mode');

      // ボタンのラベルを状態に応じて変更します
      if (isDarkMode) {
        darkModeToggleButtonElement.textContent = 'ライトモードに戻す';
        console.log('ダークモードを有効にしました。');
      } else {
        darkModeToggleButtonElement.textContent = 'ダークモードに切り替える';
        console.log('ダークモードを解除しました。');
      }
    });
  </script>
</body>
</html>

重要ポイントの解説

CSS側で body.dark-mode { ... } を定義し、「dark-modeクラスが付いているときの見た目」をまとめて書いています。
JavaScript側では、bodyElement.classList.toggle('dark-mode') だけで、通常モードとダークモードを切り替えています。
classList.contains('dark-mode') を使って、「今ダークモードかどうか」を判定し、ボタンのラベルを変えています。

ここでのポイントは、

「見た目のルールはCSSに書き、JavaScriptは“どのクラスを付けるか”だけを決める」

という役割分担です。

classListを使うときのセキュリティ・安全性の観点

スタイル操作は基本的に安全だが、“クラス名”は自分で管理する

classList を使ったCSS操作は、基本的に「見た目の変更」に関するものであり、直接的にセキュリティリスクを生むことは少ないです。

ただし、

クラス名をユーザー入力からそのまま作る
外部データに応じて予期しないクラスを付ける

といったことをすると、意図しないスタイルが適用されてUIが崩れたり、「見せたくない要素」が表示されてしまう可能性があります。

初心者の段階では、

クラス名はコードの中で自分で決める（固定の文字列）
ユーザー入力や外部データからクラス名を作らない

という方針にしておくと、安全です。

Day 34 前半練習用テンプレート

最後に、classListとダークモード切り替えをまとめて練習できるテンプレートを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 34 前半：CSS操作 総合練習テンプレート</title>
  <style>
    body {
      background-color: #ffffff;
      color: #000000;
      font-family: sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }

    body.dark-mode {
      background-color: #121212;
      color: #f0f0f0;
    }

    .highlight {
      background-color: yellow;
    }

    #darkModeToggleButton,
    #highlightToggleButton {
      margin-top: 16px;
      padding: 8px 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Day 34 前半：CSS操作 総合練習</h1>

  <!-- ダークモード切り替え -->
  <section>
    <h2>ダークモード切り替え</h2>
    <p>このページ全体の背景と文字色が切り替わります。</p>
    <button id="darkModeToggleButton">ダークモードに切り替える</button>
  </section>

  <!-- ハイライト切り替え -->
  <section>
    <h2>テキストのハイライト切り替え</h2>
    <p id="highlightText">このテキストは、ハイライトを付けたり外したりできます。</p>
    <button id="highlightToggleButton">ハイライト切り替え</button>
  </section>

  <script>
    console.log('--- CSS操作 総合練習開始 ---');

    // ダークモード関連
    const bodyElement = document.body;
    const darkModeToggleButtonElement = document.getElementById('darkModeToggleButton');

    darkModeToggleButtonElement.addEventListener('click', function () {
      bodyElement.classList.toggle('dark-mode');

      const isDarkMode = bodyElement.classList.contains('dark-mode');

      if (isDarkMode) {
        darkModeToggleButtonElement.textContent = 'ライトモードに戻す';
        console.log('ダークモードを有効にしました。');
      } else {
        darkModeToggleButtonElement.textContent = 'ダークモードに切り替える';
        console.log('ダークモードを解除しました。');
      }
    });

    // ハイライト関連
    const highlightTextElement = document.getElementById('highlightText');
    const highlightToggleButtonElement = document.getElementById('highlightToggleButton');

    highlightToggleButtonElement.addEventListener('click', function () {
      highlightTextElement.classList.toggle('highlight');
      console.log('highlightクラスをトグルしました。現在のクラス:', highlightTextElement.className);
    });

    console.log('--- CSS操作 総合練習テンプレートの準備が完了しました ---');
  </script>
</body>
</html>

Day 34 前半のまとめ

Day 34前半では、

CSS操作の基本として、「スタイルはクラスで管理し、JavaScriptでクラスを切り替える」発想を確認したこと
classList が、要素のクラスを扱うためのオブジェクトであり、 add() / remove() / toggle() でクラスの付け外しができること
toggle() を使うことで、ダークモードのような「オン／オフ切り替え」を簡単に実装できること
ダークモード切り替えの基本パターンとして、「body に dark-mode クラスを付けるかどうか」で見た目を変える方法を体験したこと

を整理しました。

この「クラスを切り替えて見た目を変える」テクニックは、ボタンの状態、メニューの開閉、エラー表示、アクティブなタブなど、あらゆるUIで使われる基本スキルです。

今日のテンプレートをベースに、自分なりのクラス名やスタイルを追加しながら、

「どの状態に、どのクラスを付けるか」

を意識して練習していくことで、 CSSとJavaScriptが一体となった“動くUI”を作る力が育っていきます。

Day 34：CSS操作（後半）

「classListで“見た目のモード”を切り替える ― ダークモードを完成させる」

Day 34後半では、前半で学んだ classList / add() / remove() / toggle() を、実際のUI機能である ダークモード切り替え に落とし込んでいきます。

ここでのゴールは、

クラスを「状態のラベル」として扱う感覚を身につける
add() / remove() / toggle() を、実際の画面の動きと結びつけて理解する
ダークモードを自分で設計し、コードを書けるようになる

ことです。

CSS操作の本質：JavaScriptは“クラスを付け替えるだけ”

クラスで状態を表現するという考え方

CSS操作の基本は、

「見た目のルールはCSSに書き、JavaScriptは“どのクラスを付けるか”だけ決める」

という分業です。

例えば、ダークモードなら、

通常モード → body にクラスなし
ダークモード → body に dark-mode クラスを付ける

という形で、「状態」をクラスで表現します。

JavaScriptは、

dark-mode クラスを 付ける（ON）
dark-mode クラスを外す（OFF）

だけを担当します。

classListの3つの基本操作をUIの動きと結びつける

classListとは

element.classList は、その要素が持っているクラスの集合を扱うためのオブジェクトです。

ここに対して、

add('クラス名')
remove('クラス名')
toggle('クラス名')

を使うことで、クラスの付け外しを簡単に行うことができます。

classList.add()：状態を「ON」にする

element.classList.add('dark-mode');

element.classList.add('dark-mode');

JavaScript

指定したクラスが付いていなければ追加されます。
すでに付いていても重複しません。

UIのイメージとしては、

「この要素をダークモード状態にする」

という「ON」の操作です。

classList.remove()：状態を「OFF」にする

element.classList.remove('dark-mode');

element.classList.remove('dark-mode');

JavaScript

指定したクラスが付いていれば削除されます。
付いていなければ何も起きません。

UIのイメージとしては、

「この要素を通常モードに戻す」

という「OFF」の操作です。

classList.toggle()：ON/OFFを1つのスイッチで切り替える

element.classList.toggle('dark-mode');

element.classList.toggle('dark-mode');

JavaScript

クラスが付いていなければ追加（ON）
クラスが付いていれば削除（OFF）

UIのイメージとしては、

「ボタン1つでダークモードとライトモードを行き来する」

という「スイッチ」です。

ダークモード切り替えには、この toggle() が非常に相性が良いです。

ダークモード切り替えを設計するステップ

Step 1：CSSで「通常」と「ダーク」を定義する

まずは、見た目のルールをCSSに書きます。

/* 通常モードのスタイル */
body {
  background-color: #ffffff;
  color: #000000;
  font-family: sans-serif;
  transition: background-color 0.3s, color 0.3s; /* なめらかに切り替える */
}

/* ダークモードのスタイル（dark-modeクラスが付いたとき） */
body.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
}

ここでのポイントは、

通常モードは body に直接スタイルを書く
ダークモードは body.dark-mode として「クラスが付いたときのスタイル」を書く

という構造にすることです。

Step 2：HTMLに「切り替えボタン」を用意する

<button id="darkModeToggleButton">ダークモードに切り替える</button>

このボタンが「スイッチ」の役割を持ちます。
ラベルは後でJavaScriptから書き換えます。

Step 3：JavaScriptでbodyとボタンを取得する

// ページ全体を表すbody要素
const bodyElement = document.body;

// ダークモード切り替えボタン
const darkModeToggleButtonElement = document.getElementById('darkModeToggleButton');

// ページ全体を表すbody要素
const bodyElement = document.body;

// ダークモード切り替えボタン
const darkModeToggleButtonElement = document.getElementById('darkModeToggleButton');

JavaScript

document.body は特別なプロパティで、<body> 要素を直接取得できます。
ボタンは getElementById() で取得します。

Step 4：ボタンが押されたときにdark-modeクラスをトグルする

darkModeToggleButtonElement.addEventListener('click', function () {
  // dark-modeクラスをON/OFF切り替え
  bodyElement.classList.toggle('dark-mode');

  // 現在ダークモードかどうかを判定
  const isDarkMode = bodyElement.classList.contains('dark-mode');

  // ボタンのラベルを状態に応じて変更
  if (isDarkMode) {
    darkModeToggleButtonElement.textContent = 'ライトモードに戻す';
    console.log('ダークモードを有効にしました。');
  } else {
    darkModeToggleButtonElement.textContent = 'ダークモードに切り替える';
    console.log('ダークモードを解除しました。');
  }
});

darkModeToggleButtonElement.addEventListener('click', function () {
  // dark-modeクラスをON/OFF切り替え
  bodyElement.classList.toggle('dark-mode');

  // 現在ダークモードかどうかを判定
  const isDarkMode = bodyElement.classList.contains('dark-mode');

  // ボタンのラベルを状態に応じて変更
  if (isDarkMode) {
    darkModeToggleButtonElement.textContent = 'ライトモードに戻す';
    console.log('ダークモードを有効にしました。');
  } else {
    darkModeToggleButtonElement.textContent = 'ダークモードに切り替える';
    console.log('ダークモードを解除しました。');
  }
});

JavaScript

ここで新しく出てきたのが、

bodyElement.classList.contains('dark-mode');

bodyElement.classList.contains('dark-mode');

JavaScript

です。

これは、

「この要素は今、指定したクラスを持っているか？」

を真偽値（true / false）で返すメソッドです。

true → ダークモード中
false → 通常モード中

この結果を使って、ボタンのラベルを切り替えています。

完成コード：ダークモード切り替え（コメント付き）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 34 後半：ダークモード切り替え</title>

  <style>
    /* ▼ 通常モードのスタイル */
    body {
      background-color: #ffffff;
      color: #000000;
      font-family: sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }

    /* ▼ ダークモードのスタイル（dark-modeクラスが付いたとき） */
    body.dark-mode {
      background-color: #121212;
      color: #f0f0f0;
    }

    /* ▼ ボタンのスタイル */
    #darkModeToggleButton {
      margin-top: 16px;
      padding: 8px 16px;
      cursor: pointer;
      border-radius: 4px;
      border: none;
      background-color: #333;
      color: #fff;
    }
  </style>
</head>
<body>
  <h1>ダークモード切り替え</h1>
  <p>ボタンを押すと、ページ全体の色が切り替わります。</p>

  <button id="darkModeToggleButton">ダークモードに切り替える</button>

  <script>
    // ▼ body要素を取得（ページ全体の背景や文字色を変えるため）
    const bodyElement = document.body;

    // ▼ ボタン要素を取得
    const darkModeToggleButtonElement = document.getElementById('darkModeToggleButton');

    // ▼ ボタンがクリックされたときの処理を登録
    darkModeToggleButtonElement.addEventListener('click', function () {
      // dark-modeクラスをON/OFF切り替えます
      bodyElement.classList.toggle('dark-mode');

      // 現在ダークモードかどうかを判定します
      const isDarkMode = bodyElement.classList.contains('dark-mode');

      // 状態に応じてボタンのラベルを変更します
      if (isDarkMode) {
        darkModeToggleButtonElement.textContent = 'ライトモードに戻す';
        console.log('ダークモードを有効にしました。');
      } else {
        darkModeToggleButtonElement.textContent = 'ダークモードに切り替える';
        console.log('ダークモードを解除しました。');
      }
    });
  </script>
</body>
</html>

add / remove を使った「明示的なON/OFF」も体験してみる

toggle() は便利ですが、「明示的にONにする」「明示的にOFFにする」書き方も理解しておくと、より柔軟に状態を制御できます。

明示的なON/OFFの例

function enableDarkMode() {
  bodyElement.classList.add('dark-mode'); // 必ずONにする
}

function disableDarkMode() {
  bodyElement.classList.remove('dark-mode'); // 必ずOFFにする
}

function enableDarkMode() {
  bodyElement.classList.add('dark-mode'); // 必ずONにする
}

function disableDarkMode() {
  bodyElement.classList.remove('dark-mode'); // 必ずOFFにする
}

JavaScript

これをボタンやチェックボックスと組み合わせることで、

「設定画面でダークモードをONにする」
「別の画面でダークモードをOFFにする」

といった、より複雑なUIも作れるようになります。

セキュリティ・安全性の観点からの補足

CSS操作（クラスの付け外し）は、基本的に「見た目の変更」に関するものであり、直接的なセキュリティリスクは少ないです。

ただし、

ユーザー入力からクラス名をそのまま作る
外部データに応じて予期しないクラスを付ける

といったことをすると、意図しないスタイルが適用されてUIが崩れたり、「本来隠すべき要素」が表示されてしまう可能性があります。

初心者の段階では、

クラス名はコードの中で自分で決める（固定の文字列）ユーザー入力や外部データからクラス名を作らない

という方針にしておくと、安全です。

Day 34 後半練習用テンプレート

最後に、ダークモードとテキストハイライトをまとめて練習できるテンプレートを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 34 後半：CSS操作 総合練習テンプレート</title>
  <style>
    body {
      background-color: #ffffff;
      color: #000000;
      font-family: sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }

    body.dark-mode {
      background-color: #121212;
      color: #f0f0f0;
    }

    .highlight {
      background-color: yellow;
    }

    button {
      margin-top: 12px;
      padding: 8px 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Day 34 後半：CSS操作 総合練習</h1>

  <!-- ダークモード切り替え -->
  <section>
    <h2>ダークモード切り替え</h2>
    <p>ページ全体の背景と文字色が切り替わります。</p>
    <button id="darkModeButton">ダークモードに切り替える</button>
  </section>

  <!-- テキストハイライト切り替え -->
  <section>
    <h2>テキストのハイライト切り替え</h2>
    <p id="highlightText">このテキストは、ハイライトを付けたり外したりできます。</p>
    <button id="highlightButton">ハイライト切り替え</button>
  </section>

  <script>
    console.log('--- CSS操作 総合練習開始 ---');

    // ダークモード関連
    const bodyElement = document.body;
    const darkModeButton = document.getElementById('darkModeButton');

    darkModeButton.addEventListener('click', function () {
      bodyElement.classList.toggle('dark-mode');

      const isDark = bodyElement.classList.contains('dark-mode');
      darkModeButton.textContent = isDark
        ? 'ライトモードに戻す'
        : 'ダークモードに切り替える';

      console.log('ダークモード状態:', isDark ? 'ON' : 'OFF');
    });

    // ハイライト関連
    const highlightTextElement = document.getElementById('highlightText');
    const highlightButton = document.getElementById('highlightButton');

    highlightButton.addEventListener('click', function () {
      highlightTextElement.classList.toggle('highlight');
      console.log('highlightクラスをトグルしました。現在のクラス:', highlightTextElement.className);
    });

    console.log('--- CSS操作 総合練習テンプレートの準備が完了しました ---');
  </script>
</body>
</html>

Day 34 後半のまとめ

Day 34後半では、

classList を「状態を表すラベルの集合」として捉え直したこと
add() / remove() / toggle() を、UIのON/OFFと結びつけて理解したこと
ダークモードを「bodyにdark-modeクラスを付けるかどうか」で実現する基本パターンを身につけたこと
CSSとJavaScriptの役割分担（CSSが見た目、JSが状態）を意識できるようになったこと

を整理しました。

この「クラスで状態を表現し、JavaScriptで切り替える」テクニックは、ボタンの状態、メニューの開閉、タブの切り替え、エラー表示など、あらゆるUIで使われる基礎スキルです。

今日のコードを何度か書き直しながら、

「どの状態に、どのクラスを付けるか」

を自分の言葉で説明できるようになると、 DOMとCSSを使ったインタラクティブなWebページ作りが、ぐっと楽しくなっていきます。

@lifehacker

挫折しないで楽しく学べるプログラミング。プログラミングを学ぶなら基礎から学べるMONO365 -LifeHack-。「覚える」ではなく「使える」ようになるプログラミング学習。

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、Web制作、例題や多くのサンプルコードで実践的な使い方などを、日本一詳しくわかりやすく解説するサイト。
更には、中級者や上級者が実務で使うプログラミングコードや考え方、設計手法、チーム開発、コードレビューなどの実践的な内容も学ぶことができます。

2026年8月
月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Day 34：CSS操作（前半）

CSS操作の基本発想：スタイルは“クラス”でまとめて管理する

直接styleを書き換えるより、クラスを切り替える

classListとは：要素が持つ“クラスの集合”を扱うためのオブジェクト

class属性とclassListの関係

classList.add()：クラスを“追加する”

役割

簡単な例

classList.remove()：クラスを“取り除く”

役割

addと組み合わせた例

classList.toggle()：クラスを“オン／オフ切り替え”

役割

ボタン1つで切り替える例

実践：ダークモード切り替えの基本設計を考える

ダークモードとは何か

ステップのイメージ

ダークモード切り替えのコード例（基本版）

HTML＋CSS＋JavaScriptの例

重要ポイントの解説

classListを使うときのセキュリティ・安全性の観点

スタイル操作は基本的に安全だが、“クラス名”は自分で管理する

Day 34 前半 練習用テンプレート

Day 34 前半のまとめ

Day 34：CSS操作（後半）

CSS操作の本質：JavaScriptは“クラスを付け替えるだけ”

クラスで状態を表現するという考え方

classListの3つの基本操作をUIの動きと結びつける

classListとは

classList.add()：状態を「ON」にする

classList.remove()：状態を「OFF」にする

classList.toggle()：ON/OFFを1つのスイッチで切り替える

ダークモード切り替えを設計するステップ

Step 1：CSSで「通常」と「ダーク」を定義する

Step 2：HTMLに「切り替えボタン」を用意する

Step 3：JavaScriptでbodyとボタンを取得する

Step 4：ボタンが押されたときにdark-modeクラスをトグルする

完成コード：ダークモード切り替え（コメント付き）

add / remove を使った「明示的なON/OFF」も体験してみる

明示的なON/OFFの例

セキュリティ・安全性の観点からの補足

Day 34 後半 練習用テンプレート

Day 34 後半のまとめ

広告ブロッカーが検出されました

Day 34 前半練習用テンプレート

Day 34 後半練習用テンプレート