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

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>

 

 

 

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

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

 

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

<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月の項目が縦に並びます。

 

 

月を選択するドロップダウンメニューと同じように、日にちのドロップダウンメニューも追加してみましょう。

 

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

 

つづいて、都道府県を選択するドロップダウンメニューをつくってみましょう。

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>タグで指定した”関東”と”関西”が表示されました。

 

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

 

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

 

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

 

 

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

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

 

[PR] Webデザインで副業する学習方法を動画で公開中

執筆してくれたメンター

メンターSSさん 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。

 

HTMLを学習中の方へ

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

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

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

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

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

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

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