こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
フォームUIの中でもチェックボックスをスイッチのように見せるデザインは、スマートフォンやアプリでおなじみになりましたよね。
Webサイトでも同じように「オン・オフを直感的に切り替えられるUI」を求められるケースが増えています。
今回は、純粋なHTMLのチェックボックスをCSSだけでトグルスイッチ風にデザインする方法を解説します。
JavaScript不要なので、パフォーマンスにも優れ、静的サイトやWebアプリの軽量UIとしても活用できます。
トグルスイッチ風デザインの基本構造
HTMLでは普通のチェックボックスとラベルだけを用意し、CSSでラベル部分をスイッチに見せます。
ポイントは、ラベルをスイッチ本体に見立てることです。
チェック状態（:checked）を使って、背景色やスライダー位置を切り替えます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
デザインカスタマイズのポイント
- 色やサイズを変えることでブランドカラーに合わせやすい
- スライダーを大きくするとより視覚的にわかりやすい
- アニメーションのtransitionで滑らかに動かせる
アクセシビリティ面での工夫
- ラベル要素を使うことでクリック範囲を広げる
- aria-checked属性をJSで補助するとより明確
- フォーカス時のアウトラインも独自デザインに合わせる
まとめ
CSSだけでスイッチUIを実現
チェックボックスをトグルスイッチ風にするだけで、UIがぐっと洗練されます。
JavaScript不要なのでパフォーマンス面でも軽く、フォームや設定画面に最適です。
プロジェクトに合わせてサイズやカラーをカスタマイズすれば、そのままプロダクションでも活用できます。
JavaScript不要なのでパフォーマンス面でも軽く、フォームや設定画面に最適です。
プロジェクトに合わせてサイズやカラーをカスタマイズすれば、そのままプロダクションでも活用できます。