はじめに

Webページを作成する上で、ユーザーに選択肢を提供したい場面は多くありますよね。そんな時に便利なのが、プルダウンメニューです。

プルダウンメニューは、限られたスペースに多くの選択肢をコンパクトに表示できるため、様々なWebサイトで活用されています。

この記事では、HTMLを使ってプルダウンメニューを作成する方法を、初心者の方にもわかりやすく解説いたします。select タグや option タグの使い方から、初期値の設定、選択された値の取得方法まで、具体的なコード例とともに丁寧に説明しますので、ぜひ最後までお読みください。

1. プルダウンメニューの基本：select タグと option タグ

HTMLでプルダウンメニューを作成するには、select タグと option タグを使用します。

• select タグ: プルダウンメニュー全体を定義します。
• option タグ: プルダウンメニューの選択肢を一つずつ定義します。

コード例

<select>
  <option value="apple">りんご</option>
  <option value="banana">バナナ</option>
  <option value="orange">みかん</option>
</select>

上記のコードでは、select タグの中に、りんご、バナナ、みかんの3つの選択肢を option タグで定義しています。それぞれの option タグには、value 属性で選択肢の値を指定しています。

このコードをブラウザで表示すると、以下のようなプルダウンメニューが表示されます。

[プルダウンメニューの画像]

2. プルダウンメニューに初期値を設定する

プルダウンメニューを作成する際に、あらかじめ選択されている状態、つまり初期値を設定したい場合があります。初期値を設定するには、該当する option タグに selected 属性を追加します。

コード例

<select>
  <option value="apple">りんご</option>
  <option value="banana" selected>バナナ</option>
  <option value="orange">みかん</option>
</select>

上記のコードでは、「バナナ」の option タグに selected 属性を追加したので、「バナナ」が初期値として選択された状態でプルダウンメニューが表示されます。

3. まとめ｜プルダウンメニューを使いこなそう！

この記事では、HTMLでプルダウンメニューを作成する方法を解説いたしました。select タグと option タグ、value 属性、selected 属性について、具体的なコード例を交えながら詳しく説明しました。

これらの知識を活用すれば、様々なWebサイトでユーザーにとって使いやすいプルダウンメニューを作成することができます。ぜひ、この記事を参考にプルダウンメニューを使いこなしてみてください。

関連記事

• 【CSS入門】HTMLにCSSを適用する3つの方法を完全解説！装飾の基本をマスターしよう

  はじめに：CSSってどんなもの？ Webページを作成する上で欠かせないHTML。しかし、HTMLだけでは文字の大きさや色、レイアウトなどを細か
• 【CSSのidを使いこなそう】ピンポイント装飾でWebデザインをレベルアップ！

  CSSのidとは？Webページに個性を吹き込む魔法の杖 Webサイトを彩るCSS。その中でも、idは特定のHTML要素にピンポイントでスタイル
• 【脱・初心者】HTMLリンクをおしゃれに見せる装飾テクニック

  はじめに Webサイトを作成する上で欠かせない要素の一つが「リンク」です。リンクは、他のページへユーザーを誘導する道しるべのような存在。しかし
• 【HTML入門】divタグを使いこなす！Webページの構成を自由自在に！

  Webページの構成要素、divタグとは？ Webページを作成する際に、欠かせない要素の一つがHTMLです。HTMLは、Webページの構造を定義
• 【CSS装飾を使いこなそう！】Webページに動きをつける擬似クラス入門

  CSS擬似クラスとは？装飾の幅を広げる便利な機能 Webサイトを構築する上で、見た目の美しさや使いやすさは欠かせない要素です。CSSは、Web