ガジェット通信 GetNews

見たことのないものを見に行こう
ワンダーウーマン

HTMLでドロップダウンメニューを表示する方法【初心者向け】

DATE:
  • ガジェット通信 GetNewsを≫

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、ドロップダウンメニューを表示する方法について解説します。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

ドロップダウンメニューとは

ドロップダウンメニューは、たくさんの選択肢の中からどれかひとつを選ぶタイプのメニューバーです。ラジオボックスやチェックボックスと異なり、たくさんの選択肢がある場合に場所をとらずに表示することができます。

 

HTMLでは下記のタグで実装可能です。

・タグ

ドロップダウンメニューをつくります。

・タグ

ドロップダウンメニューに表示される項目をつくります。

・value属性

選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。

・タグ

複数のタグをグループ分けし、メニューをわかりやすく表示させます。

 

20160620

 

ドロップダウンメニューもフォームの部品なんですか?

 

20163020-2

 

そうそう。都道府県を選んだり、月を選んだりする場合に向いている項目なんだよ。

 

20160620

 

複数の中から1つ選ぶ、という感じですね。

 

20163020-2

 

そうだよ。では、実際に書いてみよう!

 

 

ドロップダウンメニューを実装する

それでは実際にコードの例をみていきましょう。

 

今回は月を選択するドロップダウンメニューをつくります。

タグで項目を囲み、valueを設定します。name属性が”month”のタグでを囲みましょう。

1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

 

ブラウザで表示すると、小さなドロップダウンメニューが表示されました。クリックすると、1月から12月の項目が縦に並びます。

dropdownmenu

 

同じ要領で、日にちのドロップダウンメニューも追加してみましょう。

dropdownmenu2

月と日にちを組み合わせて、簡単な日付の選択バーができましたね。

 

続いて、都道府県を選択するドロップダウンメニューをつくってみましょう。name属性で”address”と指定し、タグで各都道府県の項目をつくり、valueに県名を指定します。さらに、項目を選択しやすくするためにタグでタグをグルーピングしましょう。

name属性、label属性、value属性で指定した値は、送信された先でデータの集計をしたり、データを保存したりする際に使われます。

東京
千葉
埼玉

大阪
兵庫
京都

 

こうすることで、都道府県名の頭にタグで指定した”関東”と”関西”が表示されました。

これならユーザーも探しやすそうですね。

dropdownmenu3

 

選択肢の多い項目はラジオボタンやチェックボックスよりも、ドロップダウンメニューを使って表示したほうが無駄なスペースを省くことができ、ページをすっきりさせることができます。選択肢が多いときにはタグを適宜つかって項目を整理すると、ユーザー目線の使いやすいページをつくることができることでしょう。

 

今回はドロップダウンメニューを表示する方法についてご紹介しました。

HTMLでフォームをさらにカスタマイズしたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法も合わせてご覧ください。

 

20160620

 

selectタグがあって、その中にoptionタグで選択項目を表示しているっていうのはわかるんですが・・・。

 

20163020-2

 

HTMLでは出来ないけど、PHPプログラミングで送ったデータを受け取れるんだよ。selectのnameは、value値だったという感じで受け取れるんだ。今は気にしなくてもいいよ。

 

20160620

 

selectタグも、ページ表示時に何かの項目を選択状態にしておくことは出来るんですか?

 

20163020-2

 

出来るよ!selectedだよ。チェックボックスの時は、checkedだったね。

 

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。

カテゴリー : デジタル・IT タグ :
TechAcademyマガジンの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。