プルダウンメニューとは？初心者のための基本解説！

プルダウンメニューとは？～初心者のための基本解説～

プルダウンメニューとは、メニュー項目の下に表示されるコマンドの一覧メニューのことを指します。プルダウンメニューは、コンテンツの制作者側にもユーザー側にもメリットが有るものです。プルダウンメニューを用いる目的とメリットから、ExcelやWebページ上での実装方法について解説していきます。

ホームページ制作.jpってどんなサービス？

運営10年！老舗のホームページ制作無料一括見積サービス。
審査済の優良ホームページ制作会社のみに見積もり依頼ができる。
お見積もり無料。何度でもご相談無料。お断り代行も無料。
訪問無しのオンライン相談可能！
しつこい営業は一切致しません！

全国通話無料

受付：年中無休/24時間電話受付

0120-900-587

私たちが全力でサポート致します！

宇野（うの）

田丸（たまる）

真中（まなか）

無料見積ホームページ制作.jp無料一括見積フォームはこちら

このページの目次

1. プルダウンメニューとは？

プルダウンメニューとは、Microsoft OfficeのExcelやWebページなどでメニュー項目を選んだときに、項目の下に表示されるコマンドの一覧メニューのことを指します。プルダウンメニューは別名、ドロップダウンメニューとも言われています。

プルダウンメニューは、カテゴリやジャンルの中からさらに詳細なメニューを表示したり、項目の入力をユーザーにある程度制限させたりするために使用することが多いものです。

2. プルダウンメニューを用いる目的とメリット

プルダウンメニューは、私達が意識していないところで当たり前のように使われているものですが、実際にプルダウンメニューを用いる目的やメリットは何でしょうか。コンテンツの製作者側とユーザー側の立場から、2つの目的とメリットについて解説します。

1. 入力間違いを防げる

主にコンテンツ制作者側のメリットになりますが、ユーザーに情報を入力してもらいたい場合、ある程度入力内容を制限したい場合があります。たとえば、ユーザーが住んでいる都道府県を入力して欲しい場合、基本的には47都道府県だけを入力してほしいと考えます。しかし、ユーザーの入力間違いなどで、「東響都」などと入力されてしまうと、後々データの整理に困ることになりますね。

プルダウンメニューでは、ユーザーが選択する情報を予め用意してから表示し、ユーザーは表示された情報の中から選択することになるため、入力間違いを防ぐことができます。

2. 作業・手間の効率化、簡略化ができる

主にユーザー側のメリットになりますが、すべてを手入力することは面倒くさいものです。キーボードの入力やスマホでの入力にあまり慣れていないユーザーもいるでしょう。そのようなユーザーにとって、プルダウンメニューは入力の手間を省くことでき、効率的に情報を入力することが可能となります。

また、どのようなメニューが選べるのかといった事前知識がない場合でも、操作しやすくなるというメリットがあります。たとえば、何かを検索する場合に、検索文字列と合わせて検索メニューを選べる場合があります。

検索文字列＋「と一致する」
検索文字列＋「を含む」
検索文字列＋「で始まる」
検索文字列＋「で終わる」

上記のように、「」の中をプルダウンメニューとしておけば、ユーザーはどのような検索メニューが有るのかといった事前知識がなくとも、使用することができますね。

3. プルダウンメニューの作り方：Excel編

ここでは、Excelを使ってプルダウンメニューを作成する具体的な方法について紹介します。

1. 「データの入力規則」に直接記載する

Excelでプルダウンメニューを作るためには「データの入力規則」機能を利用します。具体的には、次の順番でプルダウンメニューを作成することが可能です。

Step.1：アプリケーション上部の「データ」タブをクリック Step.2：「データの入力規則」をクリック Step.3：「設定」タブの入力値の種類で「リスト」を選択 Step.4：「ドロップダウンリストから選択する」のチェックを入れる Step.5：元の値欄に「,」区切りでリストに表示したい内容を入力（例：東京都,埼玉県,神奈川県） Step.6：「OK」ボタンをクリック

上記の順番でプルダウンメニューを作成したセルには、入力した項目以外の値を入力できなくなります。例のとおりに入力すると、東京都・埼玉県・神奈川県のみが入力可能ということですね。

Excelでは、このように簡単にプルダウンメニューを作成可能です。もし、誤ってプルダウンメニューを作成してしまい、削除したい場合は、Step.3の入力値の種類を「すべての値」に変更することで、もとに戻せます。

Step.5で入力した情報をリストに表示することになりますが、たとえば、複数のプルダウンメニューを作成する場合に、47都道府県をすべて入力することは大変ですよね。 Excelでは、セルを参照させることによってもプルダウンメニューを作成できますので、次にその手順について解説します。

2. 元の値を用意して参照させる

プルダウンメニューの作り方は、先程解説したとおりの手順となりますが、リストに表示する元の値を最初に用意しておき、参照させる方法を解説します。

Step.1：リストに表示する元の値をセルに書き出す（例：A1～A3セルに東京都・埼玉県・神奈川県と入力） Step.2：アプリケーション上部の「データ」タブをクリック Step.3：「データの入力規則」をクリック Step.4：「設定」タブの入力値の種類で「リスト」を選択 Step.5：「ドロップダウンリストから選択する」のチェックを入れる Step.6： Step.1で用意したセルを入力（例：$A$1:$A$3） Step.7：「OK」ボタンをクリック

直接元の値を入力する方式との違いは、Step.1とStep.5になりますが、最終的に出来上がるプルダウンメニューは同じものになります。値を参照させる方式は、リストの値を修正したい場合に参照先のセルを修正すればよいため、メンテナンス性が上がります。

値を参照させる方式は汎用性があるため、基本的にはこちらの方式がおすすめです。

4. プルダウンメニューの作り方：JavaScript編

ここでは、Webページ上でプルダウンメニューを作成する方法法について解説します。 Webページ上でプルダウンメニューを作成する方法はいくつかありますが、比較的簡単に実装ができるJavaScriptを使用した方法を紹介します。

1. HTMLと合わせてJavaScriptのコードをテキストに保存する

コードを見ただけではイメージが掴めないため、実際にあなたのパソコン上で動かしてみましょう。パソコンのテキストエディタに次のコードをコピー＆ペーストして、「pulldown.html」として保存します。

	  
		<html>
		<head><title>プルダウンメニュー：サンプル</title></head>
		<body>
		<h1>プルダウンメニュー</h1>
		<form>
		   <select onChange="location.href=value;">
			  <option value="#">移動先を選択</option>
			  <option value="https://www.yahoo.co.jp/">Yahoo!Japanのページへ</option>
			  <option value="https://www.google.co.jp/">Googleのページへ</option>
			  <option value="https://www.bing.com/">Bingのページへ</option>
		   </select>
		</form>
		</body>
		</html>

formタグとselectタグを用いることで、プルダウンメニューを実現しており、JavaScriptを用いることで、プルダウンメニューを選択した場合のアクションを定義しています。

2. 保存したHTMLファイルをブラウザで実行する

パソコンに保存した「pulldown.html」をダブルクリックして実行することで、あなたが普段使っているWebブラウザ上で、プルダウンメニューが表示されます。 Yahoo!Japan、Google、Bingのメニューを用意し、選択するとそれぞれのWebページに遷移するようになっています。

このようにWebページ上でも簡単にプルダウンメニューは作成することが可能です。注意点として、JavaScriptを使用しているため、WebブラウザでJavaScriptが実行できない設定になっていると動作しません。

プルダウンメニューの動作イメージを掴むためにも、実際にあなたのパソコン上でも動かしてみてくださいね。

5. まとめ

プルダウンメニューは、メニュー項目の下に表示されるコマンドの一覧メニューです。 ExcelやWebページなどで実装することができ、入力間違いを防いだり、入力の手間を省いたりする目的で使用されます。プルダウンメニューを使用することは、コンテンツの制作者側にもユーザー側にもメリットがあり、効果的に使用することで見栄えも良くなります。

ExcelとWebページ上での実装方法も解説しましたので、ぜひあなたもプルダウンメニューを使ってみてください。