ドロップダウン（プルダウン）

Dropdown

web development beginner

操作すると候補の一覧が展開され、その中から項目を選べるUI部品のこと。

概要（サマリー）

ドロップダウン（プルダウン）とは、操作すると候補の一覧が展開され、その中から項目を選べるUI部品である。普段は候補をたたんで省スペースにし、必要なときだけ引き出しを開けるように表示する。

以下は、ボタンを押すと候補一覧が開き、選んだ地域が表示に反映される簡単なデモである。

詳細解説

一つの値を選ぶselect要素

HTMLでは、決まった候補から値を選ぶ用途にselect要素を使える。

<label for="region">地域</label>
<select id="region" name="region">
  <option value="east">東日本</option>
  <option value="west">西日本</option>
</select>

標準要素はキーボード操作や端末ごとの選択画面に対応しやすい。

選択した値に応じて次のドロップダウンの候補を切り替える「連動プルダウン」は、次の実装例で動きを確認できる。

メニュー型とは役割が異なる

ドロップダウンという言葉は、操作メニューが開くUIにも使われる。フォームのselectは値を選ぶ部品であり、メニューは移動や命令を選ぶ部品である。見た目が似ていても目的に合う要素と実装を選ぶ必要がある。

開閉状態を管理する

独自メニューではクリックやキーボードのイベントを受け、開いているかどうかを管理する。外側を押したとき、Escapeキーを押したとき、項目を選んだときに閉じる動作も考える必要がある。

候補が多すぎる場合

数十件以上の候補を一つの一覧へ詰めると探しにくい。検索できるコンボボックス、カテゴリ分け、別画面など、選択肢の量に合ったUIを検討するとよい。

キーボードと読み上げへ対応する

独自実装ではフォーカス移動、矢印キー、Enter、Escape、開閉状態の通知などを設計する必要がある。アクセシビリティ対応が複雑になるため、標準要素で要件を満たせるなら優先するのが安全である。

AIコーディングとの関係

AIには「値を選ぶだけならselect要素を使う」「独自メニューが必要なら開閉・フォーカス・Escapeキーの制御まで含める」のように、標準要素で足りるか独自実装が必要かを明示するとよい。生成されたコードでは、ラベルとの関連付け、キーボード操作、選択後のフォーカス位置が意図通りかを確認する必要がある。

よくある勘違い

ドロップダウンとselectは完全に同じ？

言葉は広く使われるが、値の選択と操作メニューでは役割が異なる。

見た目を整えれば独自実装は完成？

開閉、フォーカス、キーボード、読み上げなども含めて完成である。

候補が多いほど便利？

多すぎる候補は探しにくい。検索や分類など別のUIが適する場合がある。

まとめ

ドロップダウンは候補を展開して選ぶUIである
値の選択と操作メニューでは役割が異なる
標準のselect要素は基本的な操作へ対応しやすい
独自実装では開閉とアクセシビリティを設計する

情報ソース

より詳しくAIに聞いてみよう

ドロップダウンを初心者向けに説明してください。
selectとメニューボタンの違いを教えてください。
候補が多い場合の代替UIを提案してください。
キーボード操作できるメニューを設計してください。
このドロップダウンのアクセシビリティを確認してください。