プルダウンメニューを展開する方法
ウェブサイトやアプリケーションでよく見かけるプルダウンメニュー。目的の項目を選択するために展開する必要がありますが、マウス操作以外にキーボードで操作する方法をご存知でしょうか？
今回は、プルダウンメニュー（リスト、ドロップダウンとも言います）を展開する便利なキーをご紹介します。
キーボードショートカット：[Alt] + [↓]
プルダウンメニューを展開する最も簡単な方法は、キーボードの [Alt] キーを押しながら [↓] (下矢印) キーを押すことです。
このショートカットキーを使うと、マウスカーソルを動かすことなく、選択状態をプルダウンメニューに移すことができます。あとは、[↓] キーで目的の項目に移動し、[Enter] キーを押せば選択完了です。
| 操作 | キー |
|---|---|
| プルダウンメニューにフォーカスを移動 | [Alt] + [↓] |
| 項目を下に移動 | [↓] |
| 項目を上に移動 | [↑] |
| 項目を選択 | [Enter] |
| プルダウンメニューを閉じる | [Esc] |
使用例：インターネットブラウザの履歴表示
このショートカットキーは、インターネットブラウザのアドレスバーなど、様々な場面で応用できます。例えば、Google Chromeでウェブサイトの閲覧履歴を表示する場合、以下の手順で操作できます。
- アドレスバーにカーソルを移動します。
- [Alt] + [↓] キーを押します。履歴のプルダウンメニューが表示されます。
- [↓] キーで目的の履歴に移動し、[Enter] キーを押します。
HTMLでのプルダウンメニューの実装例
HTMLでプルダウンメニューは、
<label for="fruit">好きな果物を選んでください：</label>
<select id="fruit">
<option value="">選択してください</option>
<option value="apple">りんご</option>
<option value="banana">バナナ</option>
<option value="orange">オレンジ</option>
</select>
参考文献
よくある質問
Q1: [Alt] + [↓] キーを押してもプルダウンメニューが開きません。
A1: フォーム要素（テキストボックスやプルダウンメニューなど）にカーソルが当たっていることを確認してください。また、一部のアプリケーションでは、異なるショートカットキーが割り当てられている場合があります。
Q2: マウス操作でプルダウンメニューを開く方法は？
A2: プルダウンメニューをクリックすると展開されます。展開後、目的の項目をクリックして選択します。
Q3: プルダウンメニューの項目が多すぎて、目的の項目を見つけるのが大変です。
A3: 一部のプルダウンメニューでは、入力と同時に候補を絞り込む機能があります。目的の項目の最初の数文字を入力してみてください。
その他の参考記事:ドロップ ダウン メニュー jquery