CSS Tips | 超実務コアCSSテクニック：UIパーツ － トグルスイッチCSSのみ

Web APP CSS
スポンサーリンク

トグルスイッチは「ON/OFF を直感的に伝える」UIパーツ

チェックボックスやラジオボタンよりも、 トグルスイッチは “状態の変化が視覚的に分かりやすい” のが最大の強み。

CSSだけで作る場合は、 非表示の input（checkbox）＋見た目のスイッチ（擬似要素）＋ checked の状態反映 という構造が基本になります。

ここでは、CSS と Tailwind CSS の両方で、 初心者でも迷わないように、実務で使えるトグルスイッチを丁寧に解説します。

トグルスイッチの基本構造

input は残す（アクセシビリティのため）

appearance:none で見た目を消す

label の中に「スイッチのバー」と「丸いノブ」を作る

checked 時にノブを右へ移動させる

この4ステップで、どんなトグルスイッチでも作れます。

例1：最も基本の「丸ノブがスライドするトグル」

CSS 版

.toggle {
  position: relative;
  width: 46px;
  height: 26px;
  background: #e5e7eb;
  border-radius: 999px;
  transition: background 0.25s ease;
}

.toggle input {
  appearance: none;
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.toggle input:checked + .toggle::after {
  transform: translateX(20px);
}

.toggle input:checked + .toggle {
  background: #2563eb;
}
CSS
<label class="flex items-center gap-2">
  <input type="checkbox">
  <span class="toggle"></span>
  <span>通知をオンにする</span>
</label>
HTML

Tailwind 版（CSSなしで完全再現）

<label class="flex items-center gap-2">
  <input
    type="checkbox"
    class="peer appearance-none absolute w-0 h-0"
  >
  <span
    class="w-[46px] h-[26px] bg-gray-300 rounded-full relative
           transition peer-checked:bg-sky-600
           after:content-[''] after:absolute after:top-[3px] after:left-[3px]
           after:w-[20px] after:h-[20px] after:bg-white after:rounded-full
           after:transition-all peer-checked:after:translate-x-[20px]">
  </span>
  <span>通知をオンにする</span>
</label>
HTML

深掘りポイント

ノブ（丸）が右へ動くことで、 「ONになった」ことが直感的に伝わります。 トグルスイッチの本質は “動き” にあります。

例2：ON/OFFで色が変わる「状態が分かりやすいトグル」

CSS 版

.toggle-color {
  position: relative;
  width: 50px;
  height: 28px;
  background: #f3f4f6;
  border-radius: 999px;
  transition: background 0.25s ease;
}

.toggle-color::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.toggle-color input {
  appearance: none;
  position: absolute;
  inset: 0;
}

.toggle-color input:checked + .toggle-color {
  background: #22c55e;
}

.toggle-color input:checked + .toggle-color::after {
  transform: translateX(22px);
}
CSS

Tailwind 版

<label class="flex items-center gap-2">
  <input type="checkbox" class="peer appearance-none absolute w-0 h-0">
  <span
    class="w-[50px] h-[28px] bg-gray-200 rounded-full relative transition
           peer-checked:bg-emerald-500
           after:content-[''] after:absolute after:top-[3px] after:left-[3px]
           after:w-[22px] after:h-[22px] after:bg-white after:rounded-full
           after:transition-all peer-checked:after:translate-x-[22px]">
  </span>
  <span>有効にする</span>
</label>
HTML

深掘りポイント

色が変わることで、 「今どちらの状態か」が視覚的に明確になります。 アクセシビリティ的にも非常に優秀なデザインです。

例3：スライド時に“影が伸びる”立体トグル

CSS 版

.toggle-3d {
  position: relative;
  width: 50px;
  height: 28px;
  background: #e5e7eb;
  border-radius: 999px;
  transition: background 0.25s ease;
}

.toggle-3d::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.toggle-3d input {
  appearance: none;
  position: absolute;
  inset: 0;
}

.toggle-3d input:checked + .toggle-3d {
  background: #2563eb;
}

.toggle-3d input:checked + .toggle-3d::after {
  transform: translateX(22px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
CSS

Tailwind 版

<label class="flex items-center gap-2">
  <input type="checkbox" class="peer appearance-none absolute w-0 h-0">
  <span
    class="w-[50px] h-[28px] bg-gray-300 rounded-full relative transition
           peer-checked:bg-sky-600
           after:content-[''] after:absolute after:top-[3px] after:left-[3px]
           after:w-[22px] after:h-[22px] after:bg-white after:rounded-full
           after:shadow-[0_2px_6px_rgba(0,0,0,0.25)]
           after:transition-all peer-checked:after:translate-x-[22px]
           peer-checked:after:shadow-[0_4px_10px_rgba(0,0,0,0.35)]">
  </span>
  <span>立体トグル</span>
</label>
HTML

深掘りポイント

影が変化することで、 ノブが“動いている”感が強くなり、 触れるような質感が生まれます。

例4：背景がスライドする「アニメーション付きトグル」

CSS 版

.toggle-slide {
  position: relative;
  width: 52px;
  height: 30px;
  background: linear-gradient(90deg, #e5e7eb 50%, #2563eb 50%);
  background-size: 200%;
  background-position: left;
  border-radius: 999px;
  transition: background-position 0.3s ease;
}

.toggle-slide::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.toggle-slide input {
  appearance: none;
  position: absolute;
  inset: 0;
}

.toggle-slide input:checked + .toggle-slide {
  background-position: right;
}

.toggle-slide input:checked + .toggle-slide::after {
  transform: translateX(22px);
}
CSS

Tailwind 版（任意値）

<label class="flex items-center gap-2">
  <input type="checkbox" class="peer appearance-none absolute w-0 h-0">
  <span
    class="w-[52px] h-[30px] rounded-full relative
           bg-[linear-gradient(90deg,#e5e7eb_50%,#2563eb_50%)]
           bg-[length:200%] bg-left transition-all
           peer-checked:bg-right
           after:content-[''] after:absolute after:top-[4px] after:left-[4px]
           after:w-[22px] after:h-[22px] after:bg-white after:rounded-full
           after:transition-all peer-checked:after:translate-x-[22px]">
  </span>
  <span>スライドトグル</span>
</label>
HTML

深掘りポイント

背景がスライドすることで、 「ON/OFFの切り替え」がよりダイナミックに見えます。 LPや設定画面で映えるデザインです。

トグルスイッチ設計の重要ポイント

ノブの移動距離は「バーの幅 − ノブの幅」

例：バー 46px、ノブ 20px → 移動距離 26px Tailwind では translate-x-[◯px] を使います。

状態変化は「色＋動き」が基本

色だけ 動きだけ よりも、 色＋動き の方が圧倒的に分かりやすいです。

input は必ず残す

display:none は絶対にNG。 キーボード操作やスクリーンリーダーが使えなくなります。

そのまま使える「万能トグルスイッチ」（Tailwind）

<label class="flex items-center gap-2">
  <input type="checkbox" class="peer appearance-none absolute w-0 h-0">
  <span
    class="w-[46px] h-[26px] bg-gray-300 rounded-full relative transition
           peer-checked:bg-sky-600
           after:content-[''] after:absolute after:top-[3px] after:left-[3px]
           after:w-[20px] after:h-[20px] after:bg-white after:rounded-full
           after:transition-all peer-checked:after:translate-x-[20px]">
  </span>
  <span class="text-slate-800">トグルを切り替える</span>
</label>
HTML

影・色・動きが揃っていて、 どんな UI にも使える万能テンプレートです。

さいごに

トグルスイッチは、 「ON/OFF の状態を気持ちよく伝える」 UI パーツです。

ノブの動き・色の変化・影の変化を少し加えるだけで、 操作性と視認性が劇的に向上します。

もしあなたが作っている設定画面やフォームがあれば、 その画面に合わせた最適なトグルスイッチを一緒に設計できます。

スポンサーリンク
タイトルとURLをコピーしました