確認メッセージを表示するトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

トグルスイッチ

確認メッセージを表示するトグルスイッチを作る方法

確認メッセージを表示するトグルスイッチを作る方法を紹介します。トグルスイッチを切り替える前に確認ダイアログを表示し、ユーザーが「OK」を選択した場合のみ状態を変更するシンプルなサンプルです。誤操作を防ぎたい設定画面や管理画面などで利用できます。

このサンプルでは、HTMLでトグルスイッチを配置し、CSSで見た目を整え、JavaScriptで確認メッセージを表示します。キャンセルを選択した場合はトグルスイッチの状態は変更されず、現在の状態を維持します。コードがシンプルなため、確認文の変更や処理の追加も簡単に行えます。

管理画面の重要な設定変更や通知の有効・無効、公開設定の切り替えなど、誤って変更すると困る場面で役立ちます。確認メッセージを表示することで操作ミスを防ぎながら、安全にトグルスイッチを利用できる実装方法を学べます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

通知設定
トグルスイッチを切り替えると確認メッセージが表示されます。
「OK」を押すと切り替わり、「キャンセル」で元の状態に戻ります。

コードをコピーして使おう！

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

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>確認メッセージを表示するトグルスイッチ</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 通知設定全体 -->
  <div class="toggle-switch-confirm-message_wrap">

    <!-- タイトル -->
    <div class="toggle-switch-confirm-message_title">
      通知設定
    </div>

    <!-- 説明文 -->
    <p class="toggle-switch-confirm-message_text">
      トグルスイッチを切り替えると確認メッセージが表示されます。
    </p>

    <!-- トグルスイッチの設定項目 -->
    <div class="toggle-switch-confirm-message_row">

      <!-- 項目名 -->
      <span class="toggle-switch-confirm-message_label-text">
        通知を有効にする
      </span>

      <!-- トグルスイッチ -->
      <label class="toggle-switch-confirm-message_switch">

        <!-- ON・OFF状態を管理するチェックボックス -->
        <input
          id="notification-toggle"
          class="toggle-switch-confirm-message_checkbox"
          type="checkbox"
          aria-label="通知のONとOFFを切り替える">

        <!-- スイッチの背景と丸いノブ -->
        <span class="toggle-switch-confirm-message_slider"></span>

      </label>

    </div>

    <!-- 補足文 -->
    <p class="toggle-switch-confirm-message_note">
      「OK」を選ぶと切り替わり、「キャンセル」を選ぶと元の状態に戻ります。
    </p>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではトグルスイッチを配置し、CSSではスイッチ全体のデザインやON・OFFの見た目を設定しています。JavaScriptではトグルスイッチを操作したときに確認メッセージを表示し、「OK」と「キャンセル」の選択によって状態を切り替える処理を行います。 

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはトグルスイッチ全体を構成するファイルです。タイトル、説明文、項目名、補足文など表示する文章を変更できます。

style.cssはトグルスイッチの見た目を設定するファイルです。サイズ、色、余白、角丸、背景色、アニメーション速度などを変更できます。

script.jsは確認メッセージを表示する処理を担当します。トグルスイッチを切り替えたときに確認ダイアログを表示し、「OK」の場合のみ状態を変更し、「キャンセル」の場合は元の状態へ戻します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。トグルスイッチを操作すると確認メッセージが表示され、「OK」を選択すると切り替わり、「キャンセル」を選択すると変更前の状態へ戻ります。

カスタマイズできる内容
index.htmlではタイトル、説明文、項目名、補足文を用途に合わせて変更できます。通知設定以外にも公開設定や利用許可など、さまざまなON・OFF設定へ応用できます。

style.cssではスイッチ全体の横幅、高さ、背景色、角丸、文字サイズ、余白、アニメーション速度を変更できます。ON・OFF時の色やノブのサイズも自由に調整できます。

script.jsでは確認メッセージの内容を変更できます。ONとOFFで異なるメッセージを表示したり、用途に合わせた文章へ変更したりできます。

数値調整
style.css

max-width:700px;
全体の最大横幅です。値を大きくすると全体が横へ広がり、小さくするとコンパクトになります。

margin:40px auto;
全体の上下余白です。値を大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

width:88px;
トグルスイッチの横幅です。値を大きくすると横長になり、小さくすると短くなります。

height:46px;
トグルスイッチの高さです。値を大きくすると全体が高くなり、小さくすると低くなります。

width:36px;
丸いノブのサイズです。値を大きくするとノブが大きくなり、小さくすると小さくなります。

transform:translateX(42px);
ON時のノブの移動量です。値を変更すると移動する距離が変わります。

transition:0.3s;
アニメーション時間です。0.3秒で切り替わります。値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって画面幅に応じて自動で縮小表示されます。また、640px以下では余白を小さくし、設定項目を縦並びへ変更しているため、スマートフォン・タブレット・PCのいずれでも操作しやすく利用できます。

こちらもおすすめ

トグルスイッチ
トグルスイッチのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント