← 一覧へ

やってみよう「並び替え」のボタンを押して、順番を選んでみてください

ボタン・操作部品メジャー（よく見る）

ドロップダウンメニュー

Dropdown Menu / Select

押すと、下に選択肢のリストがズラッと出てきて、1つを選ぶ。

別名ドロップダウンプルダウンメニューセレクトボックスSelectコンボボックス

どこで使われている？

よく見かける場所
会員登録の都道府県、並び替え、管理画面の絞り込み
使うとよい場面
5つ以上の選択肢から1つ選ぶとき
避けたい場面
選択肢が2〜3個のとき（ラジオボタンやセグメントの方が早い）

補足日本では「プルダウン」と呼ぶことも多いです。文字を入力して候補を絞れるものは「コンボボックス」と呼びます。

似ているものとの違い

選択肢から選ぶ部品の違い（ドロップダウン・アクションシート・コンテキストメニュー・チップ）

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「ドロップダウンメニュー（Dropdown Menu / Select）」を実装してください。

動き：現在の選択肢と「▼」を表示したボタンを置き、押すとそのすぐ下に選択肢のリストを開く。選んだものにチェックを付けて閉じ、ボタンの表示と並び順を切り替える。外側を押しても閉じる。

使う部品：<select>（見た目を自由にするなら自作のメニュー）
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら<select>（見た目を自由にするなら自作のメニュー）
iPhoneアプリならMenu（または Picker の .pickerStyle(.menu)）
AndroidアプリならExposedDropdownMenuBox / DropdownMenu
FlutterならDropdownMenu（旧 DropdownButton）
React Nativeなら@react-native-picker/picker

似ているもの・一緒に使うもの