やってみよう料理のジャンルを押して、絞り込んでみてください
ボタン・操作部品メジャー（よく見る）
チップ
Chips / Filter Chips
小さな丸いボタンがいくつも並んでいて、押すと色が付いて絞り込みができる。
別名フィルターチップタグピル絞り込みボタンChip
どこで使われている？
- よく見かける場所
- Googleマップの「レストラン・カフェ」、ネット通販の絞り込み、求人サイト
- 使うとよい場面
- よく使う条件を、ワンタップで絞り込みたいとき
- 避けたい場面
- 選択肢が非常に多いとき（絞り込みパネルにまとめる）
補足入力した言葉を「×」付きの小さな札にして並べるものは「インプットチップ」と呼びます。
似ているものとの違い
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「チップ（Chips / Filter Chips）」を実装してください。 動き：短い言葉を角の丸い小さなボタンにして横に並べ、はみ出したら折り返す。押すと背景色とチェックマークが付いて選択状態になり、選んだ条件で下の一覧を絞り込む。複数選べる。 使う部品：Chip（ボタンを丸くして自作）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Chip（ボタンを丸くして自作） |
|---|---|
| iPhoneアプリなら | 標準部品なし。自作 |
| Androidアプリなら | FilterChip（他に AssistChip / InputChip） |
| Flutterなら | FilterChip（1つだけなら ChoiceChip） |
| React Nativeなら | react-native-paper の Chip |