【どろっぷだうん】
ドロップダウン とは？
最終更新:
💡 必要なときに、候補の一覧を開いて選ぶ
必要なときに候補や項目の一覧を開くUI。選択欄とナビゲーションの違い、コンボボックスとの関係、キーボード操作の確認を説明します。
📌 このページのポイント
ひよこ ドロップダウンは、矢印を押すと一覧が出るもの？
ペンギン先生 そのようなUIが代表例だよ。普段は閉じておき、必要なときに候補を見せる。例えばフォームで色を選ぶ欄なら、一覧を開いて「青」などを選べるんだ。
ひよこ 一覧は、必ず下へ出る？
ひよこ Webページでは、どう作る？
ペンギン先生 ひよこ コンボボックスなら、好きな文字を入力できる？
ペンギン先生 必ずではないよ。W3Cの説明には、入力欄があるものと、選択だけをするものがある。入力欄があっても候補にある値だけを受け付ける場合があるんだ。検索して選ぶ機能と、自由な値を保存できる機能は分けて確認しよう。
ひよこ サイトのメニューも、同じ仕組み？
もっと詳しく知りたい人へ
候補は、何件以内ならよい？
件数だけで一律に決められません。候補の長さや似通い方、選ぶ頻度、検索できるかなどで探しやすさが変わります。何の値を選ぶ欄かが伝わるラベルを付け、実際の候補と画面で操作を確認します。
ARIAの属性を付ければ、使いやすくなる？
属性だけで、開閉やフォーカス移動などの動作が実装されるわけではありません。役割に合うHTMLや操作を選び、支援技術も含めて確認します。W3Cの例も、そのまま本番に使う前の検証、とくにモバイルやタッチ環境での確認を求めています。
まとめ：ざっくりこれだけ覚えればOK！
「ドロップダウン」って出てきたら「必要なときに候補の一覧を開いて選ぶ画面の仕組み」と思えばだいたいOK！
📖 おまけ：英語の意味
「Drop-down」 ＝ 下へ開く
💬 一覧が下へ開く見た目に由来する呼び方です。ただし実際に開く方向や表示方法は、画面の空きや端末、実装によって変わります。