JavaScriptの関数　classListで見た目を変えてみよう！

完成イメージ

ボタンをクリックしたら指定の場所の文字色が「class」によって変わる

今回のテーマ

classList.add() / remove() / toggle() を使って、CSSクラスを切り替える操作を体験してみましょう。

目的

.classList を使って見た目をコントロールできるようになる
add, remove, toggle の違いを理解する
CSSとJavaScriptの連携イメージをつかむ

作成ファイル・保存場所

js-domフォルダに以下のファイルを作成してください。

ファイル名	内容
js-dom04.html	ボタンクリックの動作練習用HTML/js
js-dom__04.html	ステップアップ練習用HTML/js

練習するHTMLは下記からコピーしてください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>classList の基本操作</title>
    <style>
        /* Part 1：背景色切り替え */
        .colored {
            background-color: #f0f8ff;
        }

        /* Part 2：テキスト強調 */
        .highlight {
            font-weight: bold;
            color: #c00;
        }

        body {
            font-family: sans-serif;
            padding: 2em;
            line-height: 1.6;
        }

        button {
            margin: 0.5em;
            padding: 0.5em 1em;
            font-size: 1em;
        }
    </style>
</head>

<body>
    <h1>classList を使ってスタイルを切り替えよう</h1>

    <!-- Part 1 -->
    <h2>toggle の練習（背景色を切り替える）</h2>
    <button id="toggle-btn">背景色を切り替える</button>

    <!-- Part 2 -->
    <h2>add / remove の練習（テキストを強調する）</h2>
    <p id="message">このメッセージを強調してみよう</p>
    <button id="add-btn">強調する</button>
    <button id="remove-btn">元に戻す</button>

    <script>
        // Part 1: toggle を使った背景色切り替え

        // Part 2: add/remove を使った強調切り替え

    </script>
</body>

</html>

👉 JavaScriptは <script> タグ内に直接記述してください（内部JS）

チェックポイント

classList.add() を使って要素の見た目が変化しているか
classList.remove() で元に戻せるか
classList.toggle() でON/OFFの切り替えができているか

JavaScript基礎トレーニング

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>classList の基本操作</title>
    <style>
        /* Part 1：背景色切り替え */
        .colored {
            background-color: #f7506b;
        }

        /* Part 2：テキスト強調 */
        .highlight {
            font-weight: bold;
            color: #c00;
        }

        body {
            font-family: sans-serif;
            padding: 2em;
            line-height: 1.6;
        }

        button {
            margin: 0.5em;
            padding: 0.5em 1em;
            font-size: 1em;
        }
    </style>
</head>

<body>
    <h1>classList を使ってスタイルを切り替えよう</h1>

    <!-- Part 1 -->
    <h2>toggle の練習（背景色を切り替える）</h2>
    <button id="toggle-btn">背景色を切り替える</button>

    <!-- Part 2 -->
    <h2>add / remove の練習（テキストを強調する）</h2>
    <p id="message">このメッセージを強調してみよう</p>
    <button id="add-btn">強調する</button>
    <button id="remove-btn">元に戻す</button>

    <script>
        // Part 1: toggle を使った背景色切り替え
        const toggleBtn = document.getElementById('toggle-btn');
        toggleBtn.addEventListener('click', () => {
            document.body.classList.toggle('colored');
        });

        // Part 2: add/remove を使った強調切り替え
        const addBtn = document.getElementById('add-btn');
        const removeBtn = document.getElementById('remove-btn');
        const message = document.getElementById('message');

        addBtn.addEventListener('click', () => {
            message.classList.add('highlight');
        });

        removeBtn.addEventListener('click', () => {
            message.classList.remove('highlight');
        });
    </script>
</body>

</html>

.classListとは？

HTML要素に付けられているclassの一覧を操作するためのプロパティです。
JavaScriptから「クラスを追加／削除／切り替え」すると、CSSのスタイルを動的に切り替えることができます。

メソッド	動作内容
`classList.add()`	指定したクラスを追加する
`classList.remove()`	指定したクラスを削除する
`classList.toggle()`	クラスの有無を切り替える

JavaScriptステップアップトレーニング

条件付きでクラスを切り替えてみましょう！

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>ステップアップ：条件付きでクラスを切り替える</title>
    <style>
        .highlight {
            background-color: #ffeecc;
            color: #c00;
            font-weight: bold;
            padding: 1em;
            border: 2px dashed orange;
        }

        body {
            font-family: sans-serif;
            padding: 2em;
        }

        button {
            margin-top: 1em;
            padding: 0.5em 1em;
        }
    </style>
</head>

<body>
    <h1>条件付きでクラスを切り替える</h1>
    <p id="text">このテキストの強調表示を切り替えます</p>
    <button id="check-btn">クラスの状態を確認して切り替え</button>

    <script>
        const text = document.getElementById('text');
        const btn = document.getElementById('check-btn');

        btn.addEventListener('click', () => {
            if (text.classList.contains('highlight')) {
                // すでにクラスがついている → 外す
                text.classList.remove('highlight');
                btn.textContent = '強調をつける';
            } else {
                // クラスがついていない → 追加
                text.classList.add('highlight');
                btn.textContent = '強調を外す';
            }
        });
    </script>
</body>

</html>

なぜクラスの状態を「調べる」必要があるの？

toggleを使えば、クラスのON/OFFは自動で切り替わります。
でも、状態に応じて「違う処理」をしたいときは、あらかじめ調べる必要があります。

たとえば…

クラスが付いていたらボタンの文字も変えたい
クラスが付いていたら何もしない（外さない）
クラスが付いていなければアラートを出す

このような 条件による分岐処理をしたいとき は、
classList.contains("クラス名") を使って「現在の状態」を確認するのが基本です。

操作	説明
`classList.contains('クラス名')`	クラスが付いているかどうか調べる（true / false）
`classList.add()` / `remove()`	条件に応じて追加／削除する
`btn.textContent = ...`	ボタンのラベルを切り替えて状態がわかるようにする工夫

JavaScriptの関数 classListで見た目を変えてみよう！