フィルターチップ群（複数選択可）
フィルターチップ群は、丸みのあるボタン（チップ）をクリックするたびに ON/OFF が切り替わる、複数選択式の絞り込み UI です。各チップは classList.toggle で is-on クラスを付け外しするだけのシンプルな JavaScript で動き、選択中は背景がダーク、未選択は白というはっきりしたコン…
解説
フィルターチップ群は、丸みのあるボタン（チップ）をクリックするたびに ON/OFF が切り替わる、複数選択式の絞り込み UI です。各チップは classList.toggle で is-on クラスを付け外しするだけのシンプルな JavaScript で動き、選択中は背景がダーク、未選択は白というはっきりしたコントラストで状態が伝わります。チップは flex-wrap で折り返すため、項目が増えても自動で複数行に収まります。
向いている用途
- EC サイトの商品絞り込み（カテゴリ・色・サイズ）
- 記事一覧のカテゴリやタグでの選別
- 検索結果に条件を重ねがけする画面
このスニペットは見た目の切り替えだけを行うため、実際の絞り込み結果と連動させるには、選択中チップのラベルを集めて一覧を再描画する処理を足します。「すべて」を押したら他の選択を解除する、といった排他制御を入れると使い勝手が上がります。色は .is-on の背景値でまとめて変更でき、チップの余白や角丸（border-radius:999px）を調整すれば印象を細かく整えられます。タップ領域は小さくなりすぎないよう余白を確保すると、スマートフォンでも押しやすくなります。
よくある質問
チップを押すと実際に一覧が絞り込まれますか？
このスニペットは見た目の ON/OFF 切り替えだけを行います。実際に商品や記事を絞り込むには、選択中のチップを読み取って一覧を再描画する処理を別途追加してください。
「すべて」を押したら他の選択を外したいです。
クリック処理の中で、押されたのが「すべて」のときは他のチップから is-on を外し、逆に他を押したときは「すべて」を外す、という分岐を足すと排他的な動きになります。