ピル型 ON/OFF スイッチ（v2）
ピル型 ON/OFF スイッチは、本物の checkbox を見えなくして、 角丸のレールの上をつまみが左右に滑る スイッチUIに見せ替えた部品です。このサンプルは input.tg__i を opacity:0 で隠し、 :checked 状態に応じて隣接するレール tg__t の背景色を灰色から緑（ #10b9…
解説
ピル型 ON/OFF スイッチは、本物の checkbox を見えなくして、角丸のレールの上をつまみが左右に滑るスイッチUIに見せ替えた部品です。このサンプルは input.tg__i を opacity:0 で隠し、:checked 状態に応じて隣接するレール tg__t の背景色を灰色から緑（#10b981）へ変え、つまみ tg__d を transform:translateX(20px) で右へ移動させます。動きは transition .25s でなめらかにつながり、JavaScript なしで状態が切り替わります。
使う場面
- 通知のオン・オフなど設定画面のスイッチ
- ダークモードや自動更新の切り替え
- フォーム内の同意・購読トグル
色を変えるときはオン時のレール色とつまみの大きさ・移動量をセットで調整します。つまみのサイズ（20px）を変えたら、translateX の移動量も合わせて見直してください。重要なのは、見た目を差し替えても中身は本物のチェックボックスなので、ラベルクリックやキーボード操作がそのまま効くことです。label で全体を囲み、tg__l に説明文を入れているため、視覚に頼らないユーザーにも状態が伝わりやすい構造になっています。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
キーボードだけで操作できますか
できます。見た目はピル型ですが、中身は本物のcheckbox要素です。Tabでフォーカスし、スペースキーでオン・オフを切り替えられます。アクセシビリティを保ったまま見た目だけを変えている点がこのサンプルの利点です。
オンのときの色を変えるにはどこを直しますか
checked状態のレール背景色（緑）を書き換えます。つまみの大きさを変えた場合は、つまみを右へ動かすtranslateXの移動量も合わせて調整すると、レール内にきれいに収まります。