ON・OFF状態をリアルタイム表示するトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

トグルスイッチ

ON・OFF状態をリアルタイム表示するトグルスイッチを作る方法

ON・OFF状態をリアルタイム表示するトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えた瞬間に現在の状態をJavaScriptで取得し、画面上の表示をONまたはOFFへ自動で更新します。状態取得ボタンを押す必要がなく、スイッチ操作と同時に表示内容が切り替わるため、現在の設定をすぐに確認できます。

会員サイトの通知設定、管理画面の公開・非公開設定、ECサイトのオプション選択、お問い合わせ画面の同意項目など、設定状態を分かりやすく表示したい場面に利用できます。トグルスイッチの見た目だけでなく、文字でもON・OFFを確認できるため、現在の状態を利用者へ明確に伝えられます。

HTMLではタイトル、説明文、項目名、状態表示の初期文章を変更できます。CSSではスイッチの大きさ、色、余白、角丸、文字サイズ、アニメーション速度などを調整できます。JavaScriptではチェックボックスの変更を監視し、状態に合わせて表示文字を更新します。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。

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

デモ

通知設定

スイッチを切り替えると現在の状態がリアルタイムで表示されます。

メール通知

現在の状態：OFF

トグルスイッチを切り替えると、現在のON・OFF状態がボタン操作なしでリアルタイムに更新されます。

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

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

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

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

  <!-- ページタイトル -->
  <title>ON・OFF状態をリアルタイム表示するトグルスイッチ</title>

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

</head>
<body>

  <!-- 設定エリア全体 -->
  <div class="toggle-switch-realtime-state_wrap">

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

    <!-- 説明文 -->
    <p class="toggle-switch-realtime-state_text">
      スイッチを切り替えると現在の状態がリアルタイムで表示されます。
    </p>

    <!-- 設定項目 -->
    <div class="toggle-switch-realtime-state_row">

      <!-- 項目名 -->
      <span class="toggle-switch-realtime-state_label-text">
        メール通知
      </span>

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

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

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

      </label>

    </div>

    <!-- 現在の状態を表示するエリア -->
    <p
      id="toggle-state-result"
      class="toggle-switch-realtime-state_result"
      aria-live="polite">
      現在の状態：OFF
    </p>

  </div>

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではトグルスイッチと現在の状態を表示する要素を配置し、CSSではスイッチやレイアウトのデザインを設定します。JavaScriptではトグルスイッチの切り替えを監視し、ON・OFF状態をリアルタイムで画面へ表示します。 

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

各ファイルの役割
index.htmlは画面全体のレイアウトを構成するファイルです。タイトル、説明文、項目名、状態表示の初期文字を変更できます。

style.cssはトグルスイッチや文字、余白、背景色、角丸、アニメーションなど見た目を設定するファイルです。

script.jsはトグルスイッチの状態が変更されたタイミングで現在のON・OFF状態を取得し、画面へリアルタイム表示する処理を記述しています。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。トグルスイッチを切り替えると、現在の状態が自動で「ON」または「OFF」へ更新されます。

カスタマイズできる内容
index.htmlではタイトル、説明文、項目名、状態表示の初期文章を変更できます。style.cssではトグルスイッチのサイズ、背景色、文字色、余白、角丸、影、アニメーション速度などを調整できます。script.jsでは表示する文字列を変更したり、状態変更時に別の処理を追加したりできます。

数値調整
style.css

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

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

width:62px;
トグルスイッチの横幅です。値を大きくするとスイッチ全体が横長になります。

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

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

transition:0.3s;
スイッチの色やノブが切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって画面幅に合わせてレイアウトが縮小されます。また、640px以下ではpaddingを変更して余白を最適化しているため、スマートフォン・タブレット・PCでも見やすく利用できます。

こちらもおすすめ

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

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

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

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

トップページで探す！

コメント