カード型チェックボックス（複数選択）

解説

選択肢をカードとして並べ、クリックで複数選べる UI です。仕組みは label でカード全体を囲み、本来のチェックボックスは opacity:0 で視覚的に隠したうえで、:checked の状態に応じてカードの枠色と背景を切り替えています。チェックボックスは見えないだけで機能はそのまま生きているため、カードのどこをクリックしても選択が切り替わり、キーボード操作も成立します。

向いている画面

• サービスや興味分野を複数選ぶ申し込みフォーム
• 絞り込み条件をカードで選ぶ検索 UI
• プラン機能のオプション選択

カードには見出しの strong と補足の span が入っており、項目名だけでなく短い説明を添えられるのが利点です。選択時の強調色は border-color と背景の rgba を変えるだけで調整できます。注意点として、チェックボックスを隠す際は display:none ではなく opacity や位置で隠すと、フォーカスや読み上げが失われにくくなります。選択中かどうかが色だけに頼らないよう、チェックマークなどの併用も検討すると親切です。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録