最初からONになっているトグルスイッチを作る方法【HTML/CSS・サンプルコード付き】

ラベル・外枠・サイズ・色・角丸・切り替え速度などを設定して、HTML・CSSを自動生成できます。

最初からONになっているトグルスイッチを作る方法

最初からONになっているトグルスイッチを作る方法を紹介します。このサンプルでは、ページを開いた時点でトグルスイッチがONの状態で表示されるUIをHTMLとCSSだけで実装します。ユーザーが最初に有効な設定として利用することを想定しており、クリックするとON・OFFを自由に切り替えられる基本的なトグルスイッチです。

ダークモードを初期状態で有効にしたい場合や、通知機能・メール配信・位置情報・自動保存などを初期設定としてONにしたい管理画面や会員サイト、お問い合わせフォームなどで利用できます。チェックボックスを初期状態で選択しておく場合と同じように、ユーザーへ現在の設定状態を分かりやすく伝えられます。

サンプルではタイトル、説明文、ラベルをHTMLから変更でき、CSSでは色、サイズ、余白、角丸などを自由にカスタマイズできます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用でき、HTMLとCSSだけで導入できるシンプルなトグルスイッチとして活用できます。

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

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

デモ

通知設定

ページを開くと最初からONの状態で表示されます。

メール通知

ページを開くとトグルスイッチが最初からONの状態で表示されます。クリックすると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になっているトグルスイッチ</title>

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

</head>
<body>

  <!-- トグルスイッチ全体 -->
  <div class="toggle-on-default_wrap">

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

    <!-- 説明文 -->
    <p class="toggle-on-default_text">
      ページを開くと最初からONの状態で表示されます。
    </p>

    <!-- トグルスイッチ -->
    <div class="toggle-on-default_row">

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

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

        <!-- checkedで最初からONにする -->
        <input
          type="checkbox"
          checked>

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

      </label>

    </div>

  </div>

</body>
</html>

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

/* トグルスイッチ全体 */
.toggle-on-default_wrap{
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下余白。値を大きくすると上下の間隔が広がる */
  padding:32px; /* 内側余白。値を大きくすると余白が広がる */
  border:1px solid #dbe4f0; /* 外枠 */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fbff; /* 背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.toggle-on-default_title{
  margin:0 0 12px; /* 下側余白 */
  font-size:22px; /* タイトル文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 太字 */
  text-align:center; /* 中央揃え */
}

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

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

/* ラベル */
.toggle-on-default_label{
  font-size:16px; /* ラベル文字サイズ */
  font-weight:700; /* 太字 */
}

/* スイッチ全体 */
.toggle-on-default_switch{
  position:relative;
  width:58px; /* スイッチの横幅。値を大きくすると横長になる */
  height:32px; /* スイッチの高さ。値を大きくすると太くなる */
}

/* チェックボックス本体を非表示 */
.toggle-on-default_switch input{
  display:none;
}

/* スイッチ背景 */
.toggle-on-default_slider{
  position:absolute;
  inset:0; /* 親要素いっぱいに表示 */
  border-radius:999px; /* 丸い形にする */
  background:#cbd5e1; /* OFF状態の色 */
  cursor:pointer; /* マウスカーソルを変更 */
  transition:.3s;
  /*
    0.3秒で切り替わる。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}

/* 丸いボタン */
.toggle-on-default_slider::before{
  content:"";
  position:absolute;
  width:24px; /* 丸の大きさ。値を大きくすると大きくなる */
  height:24px;
  top:4px; /* 上位置。値を変更すると上下位置が変わる */
  left:4px; /* 左位置。値を変更すると開始位置が変わる */
  border-radius:50%;
  background:#ffffff;
  transition:.3s;
  /*
    0.3秒で移動する。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}

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

/* ON状態の丸 */
.toggle-on-default_switch input:checked + .toggle-on-default_slider::before{
  transform:translateX(26px);
  /*
    丸を26px右へ移動してON位置にする。
    値を変更すると移動位置が変わる。
  */
}

/* スマートフォン */
@media (max-width:640px){

  /* トグルスイッチ全体 */
  .toggle-on-default_wrap{
    padding:24px 18px; /* スマートフォンでは余白を小さくする */
  }

}

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではチェックボックスへchecked属性を付け、ページを開いた時点からONになっているトグルスイッチを作成します。CSSではスイッチの背景、丸いボタン、サイズ、余白、切り替えアニメーションなどを設定します。

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

各ファイルの役割
index.htmlはトグルスイッチ全体を構成するファイルです。タイトル、説明文、「メール通知」のラベルを変更できます。チェックボックスへ付けているchecked属性によって、ページを開いた時点からONの状態になります。

style.cssはトグルスイッチのデザインを設定するファイルです。全体の横幅や余白、背景色、文字サイズ、スイッチの大きさ、OFF・ONの色、丸いボタンのサイズや移動位置、切り替え速度を変更できます。

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

カスタマイズできる内容
index.htmlではタイトル、説明文、ラベルを変更できます。最初からOFFの状態にしたい場合は、チェックボックスに付けているchecked属性を削除します。

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

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

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

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

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

gap:20px;
ラベルとスイッチの間隔です。値を大きくすると間隔が広がります。

width:58px;・height:32px;
スイッチ全体の大きさです。値を大きくするとスイッチが大きく表示されます。

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

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

transform:translateX(26px);
ON状態になったときに丸いボタンを右へ移動する距離です。26pxを変更するとON時の停止位置が変わります。

transition:.3s;
スイッチの背景色と丸いボタンが切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速くなります。

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