ページを移動してもON/OFFを記憶するトグルスイッチの作り方【HTML/CSS/JavaScript・サンプルコード付き】

ページを移動してもON/OFFを記憶するトグルスイッチの作り方

ページを移動してもON/OFFを記憶するトグルスイッチの作り方を紹介します。このサンプルでは、トグルスイッチで切り替えたON・OFFの状態をJavaScriptのlocalStorageへ保存します。ページを再読み込みした場合や、別のページへ移動してから戻った場合でも保存した状態が読み込まれるため、最後に設定したON・OFFをそのまま維持できます。

通知設定や表示設定など、利用者が一度切り替えた設定を次回も同じ状態で表示したい場合に利用できます。トグルスイッチを操作するたびに現在の状態をlocalStorageへ保存し、ページを表示したときに保存されている状態を読み込んで復元します。

トグルスイッチのラベルはHTMLから変更でき、CSSではスイッチの大きさ、ON・OFF時の色、余白、背景色、角丸などを調整できます。保存した状態には独自の有効期限を設定していないため、localStorageのデータが削除されるまで保持されます。レスポンシブにも対応しており、スマートフォン・タブレット・PCで利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

ON/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="remember-toggle_demo">

    <!-- タイトル -->
    <div class="remember-toggle_demo-title">
      ON/OFFを記憶するトグルスイッチ
    </div>

    <!-- 説明文 -->
    <p class="remember-toggle_demo-text">
      それぞれのスイッチの状態をブラウザへ保存します。
    </p>

    <!-- トグルスイッチ一覧 -->
    <div class="remember-toggle_demo-list">

      <!-- メール通知 -->
      <div class="remember-toggle_demo-row">

        <div class="remember-toggle_demo-label">
          メール通知
        </div>

        <label class="remember-toggle_demo-switch">
          <input
            class="remember-toggle_demo-input"
            type="checkbox"
            value="email"
            aria-label="メール通知">
          <span class="remember-toggle_demo-slider"></span>
        </label>

      </div>

      <!-- プッシュ通知 -->
      <div class="remember-toggle_demo-row">

        <div class="remember-toggle_demo-label">
          プッシュ通知
        </div>

        <label class="remember-toggle_demo-switch">
          <input
            class="remember-toggle_demo-input"
            type="checkbox"
            value="push"
            aria-label="プッシュ通知">
          <span class="remember-toggle_demo-slider"></span>
        </label>

      </div>

      <!-- お知らせ通知 -->
      <div class="remember-toggle_demo-row">

        <div class="remember-toggle_demo-label">
          お知らせ通知
        </div>

        <label class="remember-toggle_demo-switch">
          <input
            class="remember-toggle_demo-input"
            type="checkbox"
            value="news"
            aria-label="お知らせ通知">
          <span class="remember-toggle_demo-slider"></span>
        </label>

      </div>

    </div>

  </div>

  <!-- 補足説明 -->
  <p class="remember-toggle_demo-note">
    スイッチを切り替えたあとにページを再読み込みしても、それぞれ最後に設定したON・OFFの状態が維持されます。
  </p>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* トグルスイッチ全体 */
.remember-toggle_demo{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると余白が広がる */
  border:1px solid #dbe4f0; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fbff; /* 全体の背景色 */
  font-family:sans-serif; /* 使用するフォント */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.remember-toggle_demo-title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃え */
}

/* 説明文 */
.remember-toggle_demo-text{
  margin:0 0 28px; /* 下側28pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃え */
}

/* トグルスイッチ一覧 */
.remember-toggle_demo-list{
  display:grid; /* 各項目を縦方向へ配置 */
  gap:12px; /* 各項目の間隔。値を大きくすると間隔が広がる */
}

/* 各トグルスイッチ項目 */
.remember-toggle_demo-row{
  display:flex; /* ラベルとスイッチを横並びにする */
  align-items:center; /* 縦方向の中央へ揃える */
  justify-content:space-between; /* 左右へ分けて配置 */
  gap:20px; /* ラベルとスイッチの間隔 */
  min-height:56px; /* 項目の最小高さ。値を大きくすると高くなる */
  padding:14px 18px; /* 上下14px・左右18pxの内側余白 */
  border:1px solid #dbe4f0; /* 項目を囲む枠線 */
  border-radius:12px; /* 項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 項目の背景色 */
  box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}

/* 項目名 */
.remember-toggle_demo-label{
  color:#111827; /* 項目名の文字色 */
  font-size:16px; /* 項目名の文字サイズ */
  font-weight:700; /* 項目名を太字にする */
}

/* トグルスイッチ */
.remember-toggle_demo-switch{
  position:relative; /* スライダー配置の基準 */
  width:58px; /* スイッチの横幅。値を大きくすると横に広がる */
  height:32px; /* スイッチの高さ。値を大きくすると高くなる */
  flex-shrink:0; /* スイッチが縮まないようにする */
}

/* チェックボックス本体 */
.remember-toggle_demo-switch input{
  position:absolute; /* レイアウトへ影響させず配置 */
  width:1px; /* 視覚上ほぼ非表示にする */
  height:1px; /* 視覚上ほぼ非表示にする */
  opacity:0; /* チェックボックス本体を透明にする */
}

/* スライダー */
.remember-toggle_demo-slider{
  position:absolute; /* スイッチ全体へ配置 */
  inset:0; /* 上下左右を0にして全体へ広げる */
  border-radius:999px; /* カプセル型にする */
  background:#cbd5e1; /* OFF時の背景色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:.3s; /* 0.3秒で状態を切り替える。値を大きくすると遅くなる */
}

/* スライダー内の丸いボタン */
.remember-toggle_demo-slider::before{
  content:""; /* 疑似要素を表示 */
  position:absolute; /* スライダー内へ配置 */
  top:4px; /* 上側から4pxの位置 */
  left:4px; /* 左側から4pxの位置 */
  width:24px; /* 丸いボタンの横幅 */
  height:24px; /* 丸いボタンの高さ */
  border-radius:50%; /* 円形にする */
  background:#ffffff; /* 丸いボタンの背景色 */
  transition:.3s; /* 0.3秒で位置を切り替える */
}

/* ON時のスライダー */
.remember-toggle_demo-switch input:checked + .remember-toggle_demo-slider{
  background:#2563eb; /* ON時の背景色 */
}

/* ON時の丸いボタン */
.remember-toggle_demo-switch input:checked + .remember-toggle_demo-slider::before{
  transform:translateX(26px); /* 右へ26px移動してON状態を表示 */
}

/* キーボード操作時 */
.remember-toggle_demo-switch input:focus-visible + .remember-toggle_demo-slider{
  outline:3px solid rgba(37,99,235,.18); /* フォーカス時の外枠 */
}

/* 補足説明 */
.remember-toggle_demo-note{
  margin:24px 0 0; /* 上側24pxの余白 */
  color:#4b5563; /* 補足説明の文字色 */
  font-size:16px; /* 補足説明の文字サイズ */
  line-height:1.8; /* 補足説明の行間 */
  text-align:center; /* 補足説明を中央揃え */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* スマートフォン用のページ全体 */
  body{
    padding:24px 16px; /* 上下24px・左右16pxへ余白を縮小 */
  }

  /* スマートフォン用のトグルスイッチ全体 */
  .remember-toggle_demo{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 内側余白を縮小 */
  }

  /* スマートフォン用の各項目 */
  .remember-toggle_demo-row{
    padding:14px; /* 内側余白を14pxへ調整 */
  }

}

// すべてのトグルスイッチを取得
const rememberToggleInputs =
  document.querySelectorAll(".remember-toggle_demo-input");

// localStorageで使用する保存名を設定
const rememberToggleKey =
  "rememberToggleStates";

// localStorageから保存済みのON・OFF状態を取得
const rememberToggleSavedStates =
  JSON.parse(
    localStorage.getItem(rememberToggleKey) || "{}"
  );

// 各トグルスイッチへ処理を設定
rememberToggleInputs.forEach(function(input){

  // 保存されている状態を各スイッチへ復元
  input.checked =
    rememberToggleSavedStates[input.value] === true;

  // ON・OFFが変更された時
  input.addEventListener("change",function(){

    // 現在のすべてのON・OFF状態を保存するオブジェクト
    const currentStates = {};

    // 各スイッチの状態を取得
    rememberToggleInputs.forEach(function(item){

      // 項目名をキーとしてON・OFF状態を保存
      currentStates[item.value] =
        item.checked;

    });

    // 現在の状態をlocalStorageへ保存
    localStorage.setItem(
      rememberToggleKey,
      JSON.stringify(currentStates)
    );

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでメール通知・プッシュ通知・お知らせ通知の3つのトグルスイッチを作成し、CSSでスイッチの大きさや色、余白、角丸などの見た目を整えます。JavaScriptでは各スイッチのON・OFF状態を取得し、ブラウザのlocalStorageへまとめて保存します。

それぞれのトグルスイッチを切り替えるたびに、現在のON・OFF状態がlocalStorageへ保存されます。ページを再読み込みした場合や、同じサイト内の別ページへ移動してから戻った場合でも、保存されている状態を読み込んで各スイッチへ復元します。3つのスイッチは個別に状態を記憶できるため、メール通知だけON、ほかはOFFといった設定もそのまま維持できます。

保存した状態にはこのコード側で有効期限を設定していません。localStorageのデータが残っている間は状態を復元できますが、ブラウザのサイトデータやlocalStorageを削除した場合は保存状態も失われます。また、保存内容は利用しているブラウザ内に保持されるため、別のブラウザや別の端末へ自動的に共有されるものではありません。

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

各ファイルの役割
index.htmlはトグルスイッチ全体を構成するファイルです。「ON/OFFを記憶するトグルスイッチ」のタイトル、説明文、メール通知・プッシュ通知・お知らせ通知の項目名、補足説明を記述しています。各input要素のvalueは、それぞれのスイッチを識別して状態を保存するために使用します。

style.cssはトグルスイッチのデザインを設定するファイルです。全体の最大横幅、余白、背景色、枠線、角丸、各項目の高さ、スイッチの横幅・高さ、OFF時とON時の色、丸いボタンの大きさや移動量などを変更できます。

script.jsは各トグルスイッチのON・OFF状態を保存・復元するファイルです。ページ表示時にlocalStorageから保存済みの状態を読み込み、それぞれのvalueに対応する状態を各スイッチへ反映します。スイッチが変更されると、3つすべての現在の状態をオブジェクトへまとめ、JSON形式に変換してlocalStorageへ保存します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。メール通知・プッシュ通知・お知らせ通知の各スイッチをクリックすると、それぞれON・OFFを切り替えられます。

スイッチを切り替えるたびに現在の状態がlocalStorageへ保存されます。ページを再読み込みするか、別のページへ移動してから戻ると、最後に保存した3つのON・OFF状態が復元されます。各項目は個別に保存されるため、複数のスイッチを異なる状態に設定した場合でも、その組み合わせを維持できます。

カスタマイズできる内容
index.htmlではタイトル、説明文、メール通知・プッシュ通知・お知らせ通知の項目名、補足説明を変更できます。トグルスイッチを追加する場合は、既存項目と同じ構造でinput要素を追加し、ほかの項目と重複しないvalueを設定します。

style.cssでは全体の最大横幅、背景色、余白、枠線、角丸、各項目の高さ、スイッチの大きさ、ON・OFF時の背景色、丸いボタンのサイズ、移動量などを変更できます。

script.jsではrememberToggleStatesをlocalStorageの保存名として使用しています。この文字列を変更すると、保存に使用するキー名を変更できます。

数値調整
style.css

padding:40px 20px;
ページ全体の余白です。40pxは上下、20pxは左右の余白です。値を大きくすると画面端との間隔が広がります。

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

margin:40px auto;
トグルスイッチ全体の上下余白です。40pxを大きくすると上下の間隔が広がります。

padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。

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

margin:0 0 28px;
説明文の下側余白です。28pxを大きくするとトグルスイッチ一覧との間隔が広がります。

gap:12px;
各トグルスイッチ項目の間隔です。値を大きくすると項目同士の間隔が広がります。

gap:20px;
各項目内の文字とスイッチの間隔です。値を大きくすると両者の間隔が広がります。

min-height:56px;
各項目の最小高さです。値を大きくすると項目が高くなります。

padding:14px 18px;
各項目の内側余白です。14pxは上下、18pxは左右の余白です。

border-radius:12px;
各項目の角丸です。値を大きくすると丸みが強くなります。

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

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

width:24px;・height:24px;
スイッチ内部の丸いボタンの大きさです。値を大きくすると丸いボタンも大きくなります。

top:4px;・left:4px;
OFF時の丸いボタンの位置です。値を変更するとスイッチ内部での配置位置が変わります。

transition:.3s;
ON・OFFを切り替えたときに色や丸いボタンが移動する時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。

transform:translateX(26px);
ON時に丸いボタンを右方向へ移動する距離です。26pxを変更するとON時のボタン位置が変わります。

outline:3px solid ...
キーボード操作でスイッチへフォーカスしたときの外枠です。3pxを大きくすると強調範囲が広がります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてトグルスイッチ全体が縮小されます。画面幅640px以下ではページ全体の余白を24px 16px、トグルスイッチ全体の余白を24px 18pxへ変更し、各項目の内側余白も14pxへ調整しています。スマートフォン・タブレット・PCで利用できます。