カラーピッカー（プリセット候補）

解説

あらかじめ用意した色チップから 1 色だけ選ぶ、軽量なカラーピッカーです。仕組みは同じ name を持つラジオボタン群で、各ラベルを丸い色見本に化けさせています。色は各ラベルの --c という CSS 変数で指定し、background:var(--c) で塗っているため、色の追加・変更は変数を書き換えるだけで済みます。選択中のチップは input:checked+label でその色の輪郭が付き、どれを選んだか一目で分かります。JavaScript は使いません。

使う場面

• テーマカラーやアクセント色の設定画面
• 商品のカラーバリエーション選択
• アバターやラベルの色分け指定

ラジオボタンを土台にしているので、フォーム送信時に選んだ色の値を自然に受け取れます。チップを増やすときは input と label のセットを 1 組足し、--c に色を入れるだけです。ホバーで少し拡大するのは transform:scale による演出で、選択中は色の枠で強調しています。注意点として、選択状態を色の輪郭だけで示しているため、チェックマークや形の違いも足すと色覚に頼らず伝わり、より親切になります。

使用例・適したシーン

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