PR

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

2017年5月21日(日)
TechAcademy

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

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

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

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

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

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

・<select>タグ

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

・<option>タグ

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

・value属性

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

・<optgroup>タグ

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

20160620

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

20163020-2

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

20160620

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

20163020-2

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

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

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

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

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

<select name=”month”>
<option value=”jan”>1月</option>
<option value=”feb”>2月</option>
<option value=”mar”>3月</option>
<option value=”apr”>4月</option>
<option value=”may”>5月</option>
<option value=”jun”>6月</option>
<option value=”jul”>7月</option>
<option value=”aug”>8月</option>
<option value=”sep”>9月</option>
<option value=”oct”>10月</option>
<option value=”nov”>11月</option>
<option value=”dec”>12月</option>
</select>

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

dropdownmenu

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

dropdownmenu2

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

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

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

<select name=”address”>
<optgroup label=”関東”>
<option value=”tokyo”>東京</option>
<option value=”chiba”>千葉</option>
<option value=”saitama”>埼玉</option>
</optgroup>
<optgroup label=”関西”>
<option value=”osaka”>大阪</option>
<option value=”hyogo”>兵庫</option>
<option value=”kyoto”>京都</option>
</optgroup>
</select>

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

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

dropdownmenu3

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

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

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

20160620

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

20163020-2

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

20160620

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

20163020-2

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

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


TechAcademyマガジンは、オンラインのプログラミングスクールTechAcademyが運営する教育×ITに関するWebメディアです。トレンドや最新情報など役に立つ記事を発信しています。
https://techacademy.jp/magazine/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています