複数のトグルスイッチのうち1つだけ最初からONにする方法【HTML/CSS・サンプルコード付き】

複数のトグルスイッチのうち1つだけ最初からONにする方法

複数のトグルスイッチを配置する画面では、特定の項目だけを最初からONの状態で表示したいことがあります。例えば、お知らせメールだけを有効にしておき、それ以外の通知はOFFにする設定画面などでよく使われる実装です。本記事では、HTMLとCSSだけを使って、複数あるトグルスイッチのうち1つだけを初期状態でONにする方法を紹介します。

サンプルでは「メール通知」「プッシュ通知」「SMS通知」の3つのトグルスイッチを配置し、「メール通知」のみ最初からONで表示します。ページを開いた直後から現在の設定が分かりやすく、利用者は必要に応じて各トグルをクリックして自由にON・OFFを切り替えられます。JavaScriptを使わずに実装できるため、シンプルで導入しやすい構成です。

お問い合わせ画面や会員サイトの通知設定、管理画面の各種オプション、ECサイトの配信設定など、初期値を持たせたい場面で活用できます。ラベル名や説明文、色、サイズ、余白などは自由に変更できるため、デザインや用途に合わせてカスタマイズしやすいサンプルです。

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

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

デモ

通知設定

メール通知だけ最初からONになっています。

メール通知

プッシュ通知

SMS通知

ページを開くと「メール通知」のみONで表示されます。各トグルスイッチはクリックして自由にON・OFFを切り替えられます。

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

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

  <!-- 文字コードをUTF-8へ設定 -->
  <meta charset="UTF-8">

  <!-- スマートフォンやタブレットの画面幅へ対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ブラウザのタブへ表示するページタイトル -->
  <title>複数のトグルスイッチのうち1つだけ最初からONにする</title>

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

</head>
<body>

  <!-- 通知設定全体 -->
  <div class="toggle-one-on-default_wrap">

    <!-- タイトル -->
    <div class="toggle-one-on-default_title">
      通知設定
    </div>

    <!-- 説明文 -->
    <p class="toggle-one-on-default_text">
      メール通知だけ最初からONになっています。
    </p>

    <!-- トグルスイッチ一覧 -->
    <div class="toggle-one-on-default_list">

      <!-- メール通知 -->
      <div class="toggle-one-on-default_row">

        <div class="toggle-one-on-default_label">
          メール通知
        </div>

        <label class="toggle-one-on-default_switch">

          <!-- checked属性を付けて最初からONにする -->
          <input type="checkbox" checked>

          <span class="toggle-one-on-default_slider"></span>

        </label>

      </div>

      <!-- プッシュ通知 -->
      <div class="toggle-one-on-default_row">

        <div class="toggle-one-on-default_label">
          プッシュ通知
        </div>

        <label class="toggle-one-on-default_switch">

          <!-- checked属性がないため最初はOFF -->
          <input type="checkbox">

          <span class="toggle-one-on-default_slider"></span>

        </label>

      </div>

      <!-- SMS通知 -->
      <div class="toggle-one-on-default_row">

        <div class="toggle-one-on-default_label">
          SMS通知
        </div>

        <label class="toggle-one-on-default_switch">

          <!-- checked属性がないため最初はOFF -->
          <input type="checkbox">

          <span class="toggle-one-on-default_slider"></span>

        </label>

      </div>

    </div>

  </div>

</body>
</html>

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

/* 通知設定全体 */
.toggle-one-on-default_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と外枠の間隔が広がる */
  border:1px solid #dbe4f0; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fbff; /* 全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.toggle-one-on-default_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.toggle-one-on-default_text{
  margin:0 0 28px; /* 下側28pxの余白。値を大きくすると一覧との間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* トグルスイッチ一覧 */
.toggle-one-on-default_list{
  display:flex; /* 各項目をまとめる */
  flex-direction:column; /* 各項目を縦方向へ並べる */
  gap:18px; /* 項目同士の間隔。値を大きくすると間隔が広がる */
}

/* 各トグルスイッチの行 */
.toggle-one-on-default_row{
  display:flex; /* ラベルとスイッチを横並びにする */
  align-items:center; /* ラベルとスイッチを縦方向の中央へ揃える */
  justify-content:space-between; /* ラベルを左、スイッチを右へ配置する */
  gap:20px; /* ラベルとスイッチの間隔。値を大きくすると間隔が広がる */
}

/* 項目名 */
.toggle-one-on-default_label{
  color:#111827; /* 項目名の文字色 */
  font-size:16px; /* 項目名の文字サイズ */
  font-weight:700; /* 項目名を太字にする */
  line-height:1.5; /* 項目名の行間 */
}

/* スイッチ全体 */
.toggle-one-on-default_switch{
  position:relative; /* スライダーを配置する基準にする */
  width:58px; /* スイッチの横幅。値を大きくすると横長になる */
  height:32px; /* スイッチの高さ。値を大きくすると縦方向に大きくなる */
  flex-shrink:0; /* 横幅が狭くてもスイッチを縮めない */
}

/* チェックボックス本体 */
.toggle-one-on-default_switch input{
  display:none; /* 標準のチェックボックスを非表示にする */
}

/* スイッチの背景 */
.toggle-one-on-default_slider{
  position:absolute; /* スイッチ全体へ重ねて配置する */
  inset:0; /* 親要素いっぱいに広げる */
  border-radius:999px; /* 両端を丸くする */
  background:#cbd5e1; /* OFF状態の背景色 */
  cursor:pointer; /* マウスカーソルを指型へ変更する */
  transition:background-color .3s ease;
  /*
    0.3秒で背景色を切り替える。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}

/* スイッチ内の丸いボタン */
.toggle-one-on-default_slider::before{
  content:""; /* 疑似要素を表示する */
  position:absolute; /* スイッチ内へ配置する */
  top:4px; /* 上端から4px離して配置する */
  left:4px; /* 左端から4px離して配置する */
  width:24px; /* 丸いボタンの横幅。値を大きくすると大きくなる */
  height:24px; /* 丸いボタンの高さ。値を大きくすると大きくなる */
  border-radius:50%; /* 正円にする */
  background:#ffffff; /* 丸いボタンの背景色 */
  transition:transform .3s ease;
  /*
    0.3秒で丸いボタンを移動する。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}

/* ON状態の背景 */
.toggle-one-on-default_switch input:checked + .toggle-one-on-default_slider{
  background:#2563eb; /* ON状態の背景色 */
}

/* ON状態の丸いボタン */
.toggle-one-on-default_switch input:checked + .toggle-one-on-default_slider::before{
  transform:translateX(26px);
  /*
    丸いボタンを26px右へ移動する。
    値を変更するとON状態で停止する位置が変わる。
  */
}

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

  /* 通知設定全体 */
  .toggle-one-on-default_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小する */
    padding:24px 18px; /* 内側余白を縮小して画面内へ収める */
  }

}

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは3つのトグルスイッチを配置し、そのうち「メール通知」のみchecked属性を付けて最初からONの状態で表示します。CSSではトグルスイッチ全体のデザインやサイズ、色、切り替えアニメーションを設定します。

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

各ファイルの役割
index.htmlは通知設定全体を構成するファイルです。タイトル、説明文、各トグルスイッチのラベルを変更できます。また、checked属性を付ける項目を変更することで、最初からONにするトグルスイッチを自由に切り替えられます。

style.cssはトグルスイッチ全体のデザインを設定するファイルです。背景色、文字色、余白、角丸、スイッチのサイズ、ON・OFF時の色、丸いボタンの位置やアニメーション速度などを変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くと「メール通知」のみ最初からONの状態で表示され、各トグルスイッチはクリックして自由にON・OFFを切り替えられます。

カスタマイズできる内容
index.htmlではタイトル、説明文、各ラベルを変更できます。最初からONにする項目を変更したい場合は、checked属性を付けるチェックボックスを変更してください。複数へ付けると複数項目を最初からONにすることもできます。

style.cssでは全体の横幅、余白、背景色、文字サイズ、角丸、スイッチの大きさ、丸いボタンのサイズ、ON・OFF時の背景色、切り替えアニメーションの速度などを自由に調整できます。

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

margin:40px auto;
全体の上下余白です。40pxを変更すると上下の間隔が変わります。

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

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

gap:20px;
ラベルとスイッチの間隔です。値を変更すると左右の間隔が変わります。

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

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

width:24px;・height:24px;
丸いボタンの大きさです。値を変更すると丸のサイズが変わります。

top:4px;・left:4px;
丸いボタンの初期位置です。値を変更すると配置位置が変わります。

transform:translateX(26px);
ON状態で丸いボタンが移動する距離です。値を変更すると停止位置が変わります。

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

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせて全体が縮小されます。また、640px以下ではpadding:24px 18px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCで利用できます。