やってみよう「絞り込み」を押して、条件を選んでみてください
表示・レイアウトメジャー（よく見る）
絞り込みパネル
Filter Panel / Filter Sheet
「絞り込み」を押すと条件を選ぶパネルが出てきて、選ぶたびに「○件を表示」の数が変わる。
別名フィルターパネル絞り込み条件フィルターシートファセット検索
どこで使われている？
- よく見かける場所
- ネット通販、不動産・求人・ホテル検索
- 使うとよい場面
- 条件がたくさんある一覧を、まとめて絞り込みたいとき
- 避けたい場面
- 条件が2〜3個しかないとき（チップを並べるだけでよい）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「絞り込みパネル（Filter Panel / Filter Sheet）」を実装してください。 動き：「絞り込み」ボタンを押すと、画面の横（スマホでは下）から条件のパネルを出す。チェックボックスなどで条件を選ぶたびに、下のボタンの「○件を表示」を更新し、押すとパネルを閉じて一覧に反映する。「リセット」で条件を全部外す。 使う部品：自作のパネル（スマホでは下から出す）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | 自作のパネル（スマホでは下から出す） |
|---|---|
| iPhoneアプリなら | .sheet に条件のフォームを入れる |
| Androidアプリなら | ModalBottomSheet に条件を並べる |
| Flutterなら | showModalBottomSheet に条件を並べる |
| React Nativeなら | @gorhom/bottom-sheet に条件を並べる |