CSSトグルスイッチ（オン/オフボタン）ジェネレーター

CSSトグルスイッチ（オン/オフボタン）ジェネレーター: 用途

オン/オフボタンは、設定、登録フォーム、環境設定などで使われます。このジェネレーターは、CSSでスタイルした本物のチェックボックスを使い、JavaScriptなしでスイッチを作ります。状態を保持し、キーボードやタッチで操作でき、フォーム送信にも含まれ、role=switchのおかげでスクリーンリーダーがオンかオフかを読み上げます。

幅、高さ、角、色を調整して、オン、オフ、無効の状態を試せます。コードには、見えるフォーカス、動きを減らす設定に配慮したなめらかな切り替え、ハイコントラストモードへの対応が含まれます。

使い方

1. サイズと角を調整します。
2. 色とラベルのテキストを選びます。
3. HTMLとCSSをコピーします。

使うタイミング

• 通知の設定。
• サイトのダークモード。
• フォームでの利用規約への同意。

よくある質問

JavaScriptは必要ですか？

動作には不要です。ボタンが切り替わったときに設定を保存するなど何かを実行したい場合だけ、inputのchangeイベントを待ち受ければ十分です。

スマートフォンではどのサイズがよいですか？

WCAG 2.2では、タップ領域は24×24px以上が必要で、指での操作には44px前後が推奨されます。横のテキストもlabelの一部なので、クリックできる範囲が広がります。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール