bootstrap トグルボタン

Bootstrap トグルボタンで簡単実装！状態保持や動的切り替えをコード例と解説付きで徹底解説

Bootstrap トグルボタンとは？

トグルボタンは、クリックすることでオンとオフの状態を切り替えることができるUI要素です。一般的なボタンとは異なり、一度クリックしただけでは操作が完了せず、再度クリックするまで状態が保持されます。チェックボックスやラジオボタンと似たような機能を持っていますが、より視覚的に分かりやすく、直感的な操作が可能です。

Bootstrap を使用すると、HTML と CSS のわずかな記述で、簡単にトグルボタンを実装することができます。レスポンシブデザインにも対応しており、様々なデバイスで快適に操作できる点が魅力です。

チェックボックスやラジオボタンとの違い、メリット

トグルボタンは、チェックボックスやラジオボタンと比較して、以下のようないくつかのメリットがあります。

視覚的に分かりやすく、直感的な操作が可能
デザイン性が高く、WebサイトやアプリケーションのUIに自然に馴染ませやすい
Bootstrap を使用することで、簡単に実装できる

Bootstrap トグルボタンの基本的な実装方法

Bootstrap でトグルボタンを実装するには、<button> 要素に data-bs-toggle="button" 属性を追加します。これだけで、基本的なトグルボタンの機能が有効になります。


<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
  トグルボタン
</button>

aria-pressed="false" 属性は、初期状態を「オフ」に設定します。autocomplete="off" 属性は、ブラウザの自動補完機能を無効にします。

active クラスで初期状態を設定する方法

初期状態を「オン」に設定するには、active クラスを追加します。


<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true" autocomplete="off">
  トグルボタン
</button>

この場合、aria-pressed="true" 属性も忘れずに設定してください。

状態保持機能付きのトグルボタン

基本的なトグルボタンは、クリックするたびに状態が切り替わるだけで、状態を保持することはできません。状態を保持するためには、チェックボックスとラベルを組み合わせる方法があります。


<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">トグルボタン</label>

この方法では、チェックボックスの状態に応じて、ラベルの表示が切り替わります。フォーム送信時には、チェックボックスの値が送信されるため、状態を保持することができます。

フォーム送信時に値を取得する方法

フォーム送信時にチェックボックスの値を取得するには、以下のように記述します。


<form method="post">
  <input type="checkbox" class="btn-check" id="btn-check" name="toggle" value="on" autocomplete="off">
  <label class="btn btn-primary" for="btn-check">トグルボタン</label>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

チェックボックスがオンの場合、$_POST['toggle'] に "on" という値が格納されます。

JavaScriptを使った動的なトグルボタン

JavaScript を使用すると、クリックイベントと連動した動的なトグルボタンを実装することができます。例えば、トグルボタンをクリックすると、特定の要素を表示・非表示にするといった処理が可能です。


<button type="button" class="btn btn-primary" id="myToggle">トグルボタン</button>
<div id="myContent" style="display: none;">
  表示・非表示するコンテンツ
</div>

<script>
  const toggleButton = document.getElementById('myToggle');
  const content = document.getElementById('myContent');

  toggleButton.addEventListener('click', () => {
    if (content.style.display === 'none') {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
</script>

このコードでは、トグルボタンをクリックすると、myContent という ID を持つ要素の表示・非表示が切り替わります。

addEventListener を使ったイベントリスナーの設定方法

addEventListener メソッドを使用すると、特定のイベントが発生したときに実行する処理を設定することができます。上記のコードでは、click イベントに対して、要素の表示・非表示を切り替える処理を設定しています。

カスタマイズ

Bootstrap のユーティリティクラスを使用すると、ボタンの外観を簡単にカスタマイズすることができます。例えば、サイズを変更するには、btn-lg、btn-sm などのクラスを追加します。色を変更するには、btn-primary、btn-secondary などのクラスを追加します。


<button type="button" class="btn btn-success btn-lg">大きな緑色のボタン</button>
<button type="button" class="btn btn-danger btn-sm">小さな赤いボタン</button>

アイコンを追加するには、Font Awesome などのアイコンフォントを使用します。


<button type="button" class="btn btn-primary">
  <i class="fas fa-heart"></i> いいね
</button>

独自のCSSクラスを使用したカスタマイズ方法

独自のCSSクラスを作成することで、より自由度の高いカスタマイズが可能です。例えば、以下のようにCSSを記述します。


.my-toggle-button {
  background-color: #f0f0f0;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}

.my-toggle-button:hover {
  background-color: #ddd;
}

.my-toggle-button.active {
  background-color: #007bff;
  color: white;
}

作成したCSSクラスを適用するには、以下のようにHTMLを記述します。


<button type="button" class="my-toggle-button" data-bs-toggle="button">カスタムトグルボタン</button>

まとめ

Bootstrap のトグルボタンは、Webサイトやアプリケーションにインタラクティブな要素を追加するための簡単で効果的な方法です。状態保持や動的な切り替えなど、様々な機能を実装することができます。ぜひ、本記事を参考に、Bootstrap トグルボタンを活用してみてください。

この記事に関するよくある質問

質問	回答
トグルボタンの状態をJavaScriptで取得するにはどうすればよいですか？	`checked` プロパティを使用します。例えば、IDが "myToggle" のチェックボックスの状態を取得するには、`document.getElementById("myToggle").checked` と記述します。
トグルボタンに複数のクラスを適用することはできますか？	はい、可能です。クラス名をスペースで区切って記述することで、複数のクラスを適用できます。
Bootstrap 以外のフレームワークでもトグルボタンを実装できますか？	はい、可能です。多くのJavaScriptライブラリやCSSフレームワークが、トグルボタンの実装を提供しています。

その他の参考記事:bootstrap 右寄せボタン