HTMLでトグルボタンを簡単に作れる！実装方法を解説 weblife blog

HTMLでウェブページを作るとき、ユーザーの操作を簡単にする「トグルボタン」という機能があります。

トグルボタンは、1回クリックするとON、もう1回クリックするとOFFというように、切り替えができるボタンのことです。

とても便利なので、ウェブサイトのメニューや設定の切り替えに使われることが多いです。

この記事では、トグルボタンの基本と、その実装方法を詳しく解説します。

＼1日5分でアプリでサクッと学習／
≫ プログラミング単語帳

HTMLのトグルボタンとは？
HTMLでトグルボタンを作る基本ステップ
実際に動かしてみよう！
トグルボタンの応用例
1. メニューの開閉に使う
まとめ

HTMLのトグルボタンとは？

トグルとは「切り替える」という意味で、トグルボタンは1つのボタンで2つ以上の状態を切り替えることができます。

たとえば、電気のスイッチのように、ボタンを押すことでONとOFFを切り替えるのが一般的です。

トグルボタンの使いどころはたくさんあります。以下のような場面で役に立ちます。

ウェブサイトのメニュー表示の切り替え
設定のON/OFFの切り替え
詳細情報の表示/非表示の切り替え

使い方はとても簡単ですが、まずはHTMLとCSSの基本的な知識が必要です。

HTMLでトグルボタンを作る基本ステップ

次に、実際にトグルボタンをHTMLとCSSで作ってみましょう。

ここでは、ボタンをクリックすると「表示される/隠れる」動作をするシンプルな例を紹介します。

ステップ1：HTMLコードを書く

まずは、基本となるHTMLのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>トグルボタンの例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>トグルボタンの例</h1>
    <button id="toggleButton">詳細を表示</button>
    <div id="toggleContent" style="display: none;">
        <p>ここに表示される詳細な情報です。</p>
    </div>

    <script src="script.js"></script>

</body>
</html>

このコードでは、まずボタン（<button>タグ）を作り、その下に表示する内容（<div>タグ）を用意しています。ボタンを押すと、この内容が表示されたり、非表示になったりします。

ステップ2：CSSでスタイルを追加する

次に、トグルボタンの見た目を少し整えましょう。style.cssファイルに以下のようなCSSを追加します。

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

#toggleContent {
    margin-top: 10px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

このCSSでは、ボタンに少しデザインを加えて、押したくなるような見た目にしています。また、表示される内容にもスタイルをつけて見やすくしています。

ステップ3：JavaScriptで動きをつける

最後に、ボタンをクリックしたときに実際に内容が表示されたり非表示になったりする動作を、JavaScriptを使って実装します。script.jsファイルに以下のコードを追加します。

document.getElementById('toggleButton').addEventListener('click', function() {
    var content = document.getElementById('toggleContent');
    if (content.style.display === 'none') {
        content.style.display = 'block';
        this.textContent = '詳細を隠す';
    } else {
        content.style.display = 'none';
        this.textContent = '詳細を表示';
    }
});

このJavaScriptでは、ボタンがクリックされたときに、toggleContentというIDがつけられた部分を「表示する」か「隠す」かを判断しています。ボタンのテキストも同時に「詳細を表示」から「詳細を隠す」に切り替わるように設定しています。

実際に動かしてみよう！

▼これをブラウザで開いてみると、ボタンをクリックするたびに内容が表示されたり非表示になったりすることがわかります。

トグルボタンの応用例

トグルボタンは、このシンプルな例だけでなく、もっと複雑な動作にも応用できます。たとえば、メニューを開閉するために使ったり、ダークモードのON/OFFスイッチとして使ったりすることもできます。

メニューの開閉に使う

次の例では、トグルボタンを使ってメニューを表示・非表示にすることができます。

<button id="menuButton">メニューを表示</button>
<nav id="menu" style="display: none;">
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</nav>

<script>
    document.getElementById('menuButton').addEventListener('click', function() {
        var menu = document.getElementById('menu');
        if (menu.style.display === 'none') {
            menu.style.display = 'block';
            this.textContent = 'メニューを隠す';
        } else {
            menu.style.display = 'none';
            this.textContent = 'メニューを表示';
        }
    });
</script>