全国対応年中無休 24時間電話受付 携帯・PHSからも通話可能
0120-900-5870120-900-587
簡単一括見積はこちら

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

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

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

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

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

  1. 審査済のホームページ制作会社に見積もり依頼ができる
  2. お客様に適切な制作会社を探すことができる
  3. 無料でお断り代行サービスもしてもらえる
  4. 何度でも無料相談ができる

ホームページ制作.jpでお手間なく一括で制作会社を探すことが可能。

ホームページ制作.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ページ上での実装方法も解説しましたので、ぜひあなたもプルダウンメニューを使ってみてください。


ホームページ制作のことでお困りのことはありませんか?

優良制作会社を一括比較することで適正な【価格】がわかります!

ホームページ制作会社の一括見積もりサービス

  1. 審査済のホームページ制作会社に見積もり
  2. お客様に適切な制作会社を探すことができる
  3. 無料でお断り代行サービスもしてもらえる
  4. 何度でも無料相談ができる

お急ぎの方はお電話ください。0120-900-587

ご担当者名

未入力です。

ご連絡先電話番号

無効な電話番号です。

メールアドレス

無効なメールアドレスです。