ドロップダウンとプルダウンの違いとは？
Webサイトを閲覧していると頻繁に見かける「ドロップダウン」。選択式リストから項目を選ぶUIですが、「プルダウン」と呼ばれることもありますよね。どちらも同じものを指しているように思えますが、何か違いはあるのでしょうか？
ドロップダウンとプルダウンは同じもの？
結論から言うと、ドロップダウンとプルダウンは同じ意味です。どちらも、クリックまたはタップするとリストが表示され、その中から項目を選択できるUIを指します。
では、なぜ呼び方が2つあるのでしょうか？それは、これらの言葉が英語を直訳した言葉であり、明確な使い分けがなかったことに由来します。
| 用語 | 英語 | 意味 |
|---|---|---|
| ドロップダウン | drop-down | 下へ落ちる |
| プルダウン | pull-down | 引き下げる |
「ドロップダウン」はリストが上から下に表示される様子を、「プルダウン」はリストを表示するためにクリックする動作を表しているという解釈もできますが、実際にはどちらを使っても問題ありません。
Web制作の現場では「セレクトメニュー」と呼ばれることも
Web制作の現場では、ドロップダウンやプルダウンよりも「セレクトメニュー」と呼ばれることの方が多いかもしれません。これは、Web技術の標準化を行う団体である「W3C」が、このUIを「The <select> element」と定義していることに由来します。
<select>
<option value="value1">選択肢1</option>
<option value="value2">選択肢2</option>
<option value="value3">選択肢3</option>
</select>
上記のように、HTMLでは「select」要素を用いてセレクトメニューを実装します。そのため、Web制作の現場では「セレクトメニュー」という呼び方が一般的になっています。
まとめ
ドロップダウンとプルダウンは、どちらもクリックまたはタップでリストを表示し、項目を選択できるUIを指す言葉です。Web制作の現場では「セレクトメニュー」と呼ばれることも多いですが、いずれの呼び方を使っても意味は通じます。
関連QA
Q1: ドロップダウンメニューとプルダウンメニュー、どちらの呼び方が正しいのでしょうか？
A1: どちらも間違いではありません。ドロップダウンとプルダウンは同じ意味で使われますので、どちらの呼び方を使っても問題ありません。
Q2: セレクトメニューは何のために使うのですか？
A2: セレクトメニューは、ユーザーに複数の選択肢の中から1つを選ばせる際に使用します。例えば、性別の選択や商品のカテゴリー選択など、様々な場面で利用されます。
Q3: セレクトメニューのデザインを変更することはできますか？
A3: はい、CSSを使用することでセレクトメニューのデザインを変更することができます。ただし、ブラウザによってデザインの自由度が異なる場合があるため、注意が必要です。
その他の参考記事:ドロップ ダウン メニュー jquery