CSS スイッチ ジェネレーター

このツールとは？

CSSトグルスイッチとは、物理的なオン/オフスイッチのように見えて動作するようスタイリングされたcheckboxのことです——ピル型のトラックの中を、円形のつまみが端から端へスライドします。内部的には本物のcheckbox入力のままで、これが重要なポイントです。クリック可能なdivだけで作ったスイッチと違い、キーボード操作、スクリーンリーダー対応、フォーム送信をそのまま保てます。

このツールはそのパターンを自動で組み立てます——非表示のcheckbox、:checked状態で色が変わるトラック、CSSのtransformでスライドするつまみです。スライダーとカラーピッカーで調整し、プレビューをクリックして実際の切り替えアニメーションを確認したら、CSSとそれが依存する最小限のHTMLマークアップを一緒にコピーできます。

出典: WAI-ARIA Authoring Practices, W3C ——スイッチコントロールのアクセシブルな基盤として本物のcheckbox入力を使うことを推奨しており、このジェネレーターの出力が基盤となるinput要素を保持しているのはそのためです。

なぜこれを使うのか？

• プレビューは静止画像ではなく本物のクリック可能なスイッチ——使う前に正確なアニメーションを確認できます。
• CSSと、そのCSSが依存するアクセシブルなHTML構造（checkbox入力 + label）の両方を出力します。
• トラックの幅・高さ、オフ時の色、オン時の色、つまみの色、角丸、トランジション速度をすべて一箇所で制御。
• 標準のcheckbox + :checkedセレクターのパターンを使うため、スイッチはキーボード操作可能なままで、実際のフォーム内でも機能します。
• すべてブラウザ内で完結——設定した内容はどこにもアップロードされません。
• 無料、登録不要、モバイルでも動作します。

使い方

1. 幅と高さを設定してトラックのサイズを決めます——つまみは内側の余白を保ちながら自動的にサイズが調整されます。
2. トラックのオフ状態（未選択）の色と、オンに切り替えたときの色を選びます。
3. つまみの色を選びます——白や明るいニュートラルカラーは、通常トラックとの対比が最も強くなります。
4. border-radiusを50%にすると定番のピル型スイッチに、値を下げるとやや角丸の長方形になります。
5. トランジション速度を調整して、状態が切り替わる際のつまみのスライド速度とトラックの色の変化速度をコントロールします。
6. プレビューのスイッチをクリックしてアニメーションの見た目を確認したら、CSSとHTMLをプロジェクトにコピーします。

例

入力

幅: 52px · 高さ: 28px · オフ色: #cbd5e1 · オン色: #ea580c · 角丸: 50% · 速度: 200ms

出力

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

このパターンの核心部分です。checkboxの:checked状態と一般兄弟セレクター（~）を組み合わせることで、トラックの背景色とつまみのスライド距離の両方を制御しています。

クリックハンドラー付きdivではなくcheckboxを使う理由

2つの<div>要素とクリック時にクラスを切り替えるJavaScriptでスイッチを作りたくなるかもしれませんが、その方法は通常キーボード操作、スクリーンリーダーの読み上げ、フォーム送信を壊してしまいます——本物のcheckboxならこの3つを何もせずに満たせます。このツールが生成するパターンは、<input type="checkbox">を実際のインタラクティブ要素として保持し（見た目上は隠されていてもフォーカス可能）、checkboxのネイティブな:checked状態に基づいてトラックとつまみをスタイリングするのに純粋なCSSだけを使い、JavaScriptは一切使いません。

よくあるスイッチのスタイル

• 定番のピル型スイッチ：border-radiusを50%に、サイズは中程度（幅48〜56px）、オン/オフではっきりと色が変わります。
• 設定パネル風スイッチ：サイズは小さめ（幅36〜44px）、オフ時は控えめな色（明るいグレー）、オン時はブランドカラー。
• やや角丸のスイッチ：完全なピル型ではなくborder-radiusを20〜30%程度にすると、よりアプリらしい長方形の見た目になります。
• 素早くキビキビしたスイッチ：トランジション速度100〜150msは即応性のある印象になります。
• ゆっくりとした落ち着いたスイッチ：トランジション速度300〜400msはより滑らかで洗練された印象になり、目立つ単一の設定スイッチに向いています。

他のCSSツールとの組み合わせ

生成されるトラックとつまみは内部的にすでにborder-radiusを使っているため、スライダーの範囲を超えて角の丸みを個別に調整したい場合は、Border Radius ジェネレーターで各角を独立して微調整してから値を貼り付けられます。Box Shadow ジェネレーターは、つまみに控えめな影を加えて奥行きを出すのに便利です。

→ Border Radius ジェネレーター · Box Shadow ジェネレーター

よくある質問