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

HTML初心者向けに、「ドロップダウンメニュー」を表示する方法を解説した記事。【selectタグ】や【optionタグ】を使って実装。選択肢の多い項目のフォームを作成する場合は、無駄なスペースを省いてページをすっきり見せることができます。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

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

今回は、ドロップダウンメニューを表示する方法についてテックアカデミーのメンター(現役エンジニア)が初心者向けに解説します。

目次

そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

ドロップダウンメニューを表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

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

ドロップダウンメニューは、たくさんの選択肢の中からどれかひとつを選ぶタイプのメニューバーです。

プルダウンメニューとも呼びます。

ラジオボックスやチェックボックスと異なり、たくさんの選択肢がある場合に場所をとらずに表示することができます。

 

HTMLでは下記のタグを組み合わせて実装します。

<select>タグ

<select>タグとは、選択肢の中から選ぶタイプの入力項目を作るタグです。

<select></select>

name属性

name属性とは、ドロップダウンメニューの名前を設定する属性です

name属性に設定した名前は、選択項目をデータとして送信する際に、データの受け取り手が値を取得する際に利用します。

name属性は、以下のように記述します。

<select name="month"></select>

multiple属性

multiple属性は、ドロップダウンメニューで複数項目を選択したい場合に設定する属性です。

multiple属性は、以下のように記述します。

<select multiple></select>

 

<option>タグ

<option>タグは、ドロップダウンメニューに表示される選択肢を作るタグです。

<option>タグは、以下のように記述します。


<option>いち</option>

 

value属性

value属性は、選択項目をデータとして送信する際に、データの受け取り手に渡す値を設定する属性です。

value属性は、以下のように記述します。

<option value="1">いち</option>

 

<optgroup>タグ

<optgroup>タグは、複数の<option>タグをグループ分けするタグです。
グループ分けをすることで、メニューをわかりやすく表示できます。

<optgroup>タグは、以下のように記述します。

<optgroup>
  <option value="tokyo">東京</option>
</optgroup>

 

label属性

label属性は、<optgroup>タグでグループ分けした項目のラベルを設定する属性です。

label属性は、以下のように記述します。

<optgroup label="関東">
  <option value="tokyo">東京</option>
</optgroup>

 

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

 

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

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

 

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

<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属性、value属性で指定した値は、送信された先でデータの集計や保存をする際に使われます。

 

<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>

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

 

“関東”と”関西”をグルーピングすることで、ユーザーも探しやすそうですね。

dropdownmenu3

 

選択肢の多い項目はラジオボタンやチェックボックスよりも、ドロップダウンメニューを利用して表示したほうが表示スペースがコンパクトになり、ページがすっきりします

 

選択肢が多いときには<optgroup>タグを適宜利用して項目を整理すると、ユーザー目線の使いやすいページが作れます。

 

 

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

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

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

執筆してくれたメンター

メンターSSさん

文系・未経験でIT企業に就職して、9年目。

環境構築から開発・設計・テストまで何でも屋さんをやっていました。

テックアカデミーではJavaコースを担当しています。

 

大石ゆかり

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

田島悠介

HTMLではできないけど、PHPプログラミングで送ったデータを受け取れるんだよ。selectのname属性の設定値をもとに、選択項目の値を受け取れるんだ。気になる場合は、PHPでセレクトボックスから値を受け取る方法を読んでみて。

大石ゆかり

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

田島悠介

できるよ!optionタグにselectedを設定することで、optionタグの項目を選択状態にできるよ。チェックボックスの時は、checkedだったね。

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!