タスクの道筋 / 入力から結果へ
Pure CSS のスイッチをデザインする方法
- 01
トラックのサイズを決める
「トラック幅」を 44〜128 px、「トラックの高さ」を 24〜64 px で設定します。つまみが動く余地を確保するため、幅は高さより少なくとも 8 px 大きい必要があります。デフォルトの 64 × 34 px は、多くのモバイルスイッチの比率を反映しています。
- 02
つまみを収める
「つまみサイズ」を 16〜56 px の間で選びます。つまみはトラック内に収まる必要があり、トラックの高さマイナス 4 px を超えると、ステータスが「値を確認」に変わり、違反したルールが正確に示されます。
- 03
両状態に色を付ける
オフ位置を「非アクティブ時のトラック」、オン位置を「アクティブ時のトラック」で選びます。つまみ自体は小さな柔らかい影を伴う白のままなので、両方のトラックカラーは白とのコントラストだけを確保すれば大丈夫です。
- 04
トランジションをプレビューする
「アクティブ状態を表示」を切り替えると、実際の 180 ms の ease タイミングでつまみがスライドし、トラックが色を変えます。つまみ周囲のパディングは残りのトラック高さの半分として計算されるため、どのサイズを選んでも収まりは均一です。
- 05
CSS をコピーまたはダウンロードする
「CSS をコピー」または「.css をダウンロード」で toolars-switch.css を保存します。白いつまみは計算された移動距離だけ両状態間をスライドし、書き出しには最初からフォーカスと reduced-motion の処理が含まれます。出力パネルにはライブのバイト数が表示され、コンポーネントがどれほどコンパクトかを確認できます。
- 06
マークアップを組み立てる
.switch のラッパーの中に、チェックボックス input とそれに続く .switch-track 要素を、この順番どおりに置きます。兄弟セレクターがこの順序に依存するためです。input は見えない 1 px のボックスに縮みますがフォーカス可能なままで、フォーカス時には「アクティブ時のトラック」の色で 3 px のアウトラインが描かれます。