タスクの道筋 / 入力から結果へ
カスタム CSS チェックボックスをデザインする方法
- 01
コントロールサイズを決める
マークは外寸ではなく境界線の内側に合わせて拡縮します。プレビューと出力は同じ CSS の境界線形状を使います。クリックするかフォーカス後にスペースキーを押すと、ネイティブのチェック状態が変わります。
- 02
外枠を整える
コントロールは 18〜64 px、境界線は 1〜8 px です。マーク用に境界線の内側を 8 px 以上残してください。無効な組み合わせではプレビューを消去し、出力を無効にします。
- 03
状態の色を選ぶ
静止時の輪郭を「ボーダーカラー」、塗りつぶされる状態を「チェック時の色」で選びます。マークは常に白なので、その上に乗る白いマークと十分にコントラストが取れるよう、「チェック時の色」は十分暗い色にしてください。
- 04
両方の状態をプレビューする
「チェック状態を表示」を切り替えて、静止時と塗りつぶし時の両面をライブプレビューで比較します。マークは 160 ms のトランジションでわずかに拡大しながら現れます。書き出される CSS が状態間で再現するのとまったく同じ動きです。
- 05
CSS をコピーまたはダウンロードする
「CSS をコピー」または「.css をダウンロード」で toolars-checkbox.css を保存します。このルールセットは本物の input を残したままです。appearance: none は描画を置き換えるだけで、:focus-visible と :disabled のスタイルも書き出しに含まれます。
- 06
マークアップはネイティブのままに
.checkbox クラスは本物の input 要素に直接適用し、通常のチェックボックスと同じように label と組にしてください。セマンティックなものは何も置き換わらないため、キーボードフォーカス、クリック動作、支援技術の読み上げはそのまま機能します。静止時の白い背景もルールの一部なので、色付きの面の上でも空の状態が読みやすいままです。