このツールはブラウザで即時実行できます。登録もサーバー処理も不要です。
このツールが役に立ちましたか？
byteflow.tools をインストールすると、起動が速くなり、オフラインでもツールを使えます。
インストールガイドこのツールが役に立ちましたか？
byteflow.tools をインストールすると、起動が速くなり、オフラインでもツールを使えます。
インストールガイドサイズ、色、状態を調整できる洗練されたトグルスイッチ CSS を生成します。
設定パネル、フォーム、対話型コントロール用に、アクセス可能な状態とコピー可能な CSS を備えたカスタマイズ可能なトグル スイッチ スタイルを構築します。
サイズ、色、モーションを構成できるオン/オフ コントロールのスイッチ UI スタイルを生成します。
製品設定画面全体でトグルの外観を標準化するのに役立ちます。
フォーカス、無効、およびチェック状態のアクセス可能なインタラクション スタイルをサポートします。
ベースの寸法
トラック: 44x24、サム: 20、ギャップ: 2
色の状態
オフ: #94A3B8、オン: #2563EB、フォーカス リング: #93C5FD
モーション設定
サム トランジション: 180 ミリ秒イーズアウト
スイッチ CSS
.switch[data-checked='true'] { background: #2563EB; }サム トランスフォーム
transform: translationX(20px);
アクセシビリティに関する注意
コントロールがセマンティック チェックボックスまたはスイッチの役割にマップされていることを確認してください。
スイッチはアクティブに見えますが、セマンティック状態が間違っています
視覚的な状態を実際のチェック値と ARIA にバインドします属性。
フォーカス インジケーターがありません
キーボード ユーザー向けに明確にフォーカスが表示されるスタイルを追加します。
親指の動きが途切れます
変換ベースのアニメーションを使用し、レイアウトをトリガーするプロパティを回避します。
オフ時のロー コントラストstate
背景表面に対するオフ状態のコントラストを高めます。
CSS スイッチジェネレーター は、提出・公開・引き継ぎの前に行う迅速な検証ステップとして運用するのが適切です。
スイッチにはチェックボックスまたはボタンを使用する必要がありますか?
チェックボックスベースのセマンティクスは、バイナリ設定状態では一般的です。
スイッチのタッチターゲットはどのくらいの大きさにすべきですか?
快適なモバイル タップ ターゲットを目指します。多くの場合、最小約 44 ピクセルです。
親指とトラックを別々にアニメーション化できますか?
はい、ただし、ぎこちない動きを避けるために、タイミングを統一してください。
スイッチにはテキスト ラベルが必要ですか?
はい、スイッチは常に明確なラベルとペアにします。アクセシビリティと明瞭さ。