HTMLプルダウンメニューをマスター！実例&カスタマイズ7選

はじめに
●HTMLプルダウンメニューの基本
●プルダウンメニューの作り方
●プルダウンメニューの使い方
●プルダウンメニューの注意点
●プルダウンメニューのカスタマイズ方法
- ○CSSでデザインを変更する
- ○JavaScriptで挙動を制御する
●プルダウンメニューの応用例
まとめ

はじめに

この記事を読めば、HTMLプルダウンメニューを簡単に作成し、カスタマイズできるようになります。

これからご紹介する方法やサンプルコードを参考にして、あなたのウェブページに活用してみてください。

HTMLプルダウンメニューとは、ウェブページ上でユーザーが選択肢の中から1つを選ぶことができるUI要素です。

ウェブフォームの一部として使用されることが多く、使い方やカスタマイズ方法がたくさんあります。

それでは、HTMLプルダウンメニューの基本から応用例まで、詳しく解説していきましょう。

●HTMLプルダウンメニューの基本

プルダウンメニューは、HTMLの<select>要素を使って作成します。

この要素の中に、<option>要素を追加することで選択肢を設定できます。基本的な構造は下記のようになります。

<select>
  <option value="選択肢1">選択肢1</option>
  <option value="選択肢2">選択肢2</option>
  <option value="選択肢3">選択肢3</option>
</select>

●プルダウンメニューの作り方

それでは、実際にプルダウンメニューを作成してみましょう。

下記の例では、選択肢として「りんご」「みかん」「ぶどう」を設定しています。

<!DOCTYPE html>
<html>
<head>
  <title>プルダウンメニューのサンプル</title>
</head>
<body>
  <form>
    <label for="fruits">果物を選択してください：</label>
    <select id="fruits">
      <option value="apple">りんご</option>
      <option value="orange">みかん</option>
      <option value="grape">ぶどう</option>
    </select>
  </form>
</body>
</html>

●プルダウンメニューの使い方

プルダウンメニューは、ユーザーが選択した項目を送信するために、フォーム要素と組み合わせて使われることが一般的です。

下記の例では、選択された果物の名前がサーバーに送信されます。

<!DOCTYPE html>
<html>
<head>
  <title>プルダウンメニューの使い方</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="fruits">果物を選択してください：</label>
    <select id="fruits" name="selected_fruit">
      <option value="apple">りんご</option>
      <option value="orange">みかん</option>
      <option value="grape">ぶどう</option>
    </select>
    <input type="submit" value="送信">
  </form>
</body>
</html>

●プルダウンメニューの注意点

プルダウンメニューを使用する際には、いくつか注意点があります。

○選択肢に空の値を設定しておく

プルダウンメニューの最初の選択肢には、空の値（value=""）を設定しておくことが推奨されます。

これで、ユーザーが誤って送信ボタンを押してしまっても、意図しない選択肢が送信されることを防ぐことができます。

○複数の選択肢を選べるようにする

プルダウンメニューには、複数の選択肢を選べるようにするオプションがあります。

<select>タグにmultiple属性を追加することで実現できます。

ただし、複数選択を許可する場合は、ユーザビリティを考慮し、選択肢が多すぎないように注意してください。

○<optgroup>タグで選択肢をグループ化する

選択肢が多くなる場合は、<optgroup>タグを使用して選択肢をグループ化することができます。

これにより、選択肢を見やすく整理できます。

○プルダウンメニューのデザインに注意

デフォルトのプルダウンメニューのデザインは、ブラウザによって異なります。

デザインを統一するために、CSSやJavaScriptを使用してカスタマイズすることができます。

ただし、カスタマイズする際には、ユーザビリティを損なわないように注意してください。

●プルダウンメニューのカスタマイズ方法

プルダウンメニューの見た目や挙動は、CSSやJavaScriptを使ってカスタマイズすることができます。下記に、いくつかのカスタマイズ方法を紹介します。

○CSSでデザインを変更する

プルダウンメニューのデザインは、CSSを使って変更することができます。

例えば、下記のようなCSSを適用することで、プルダウンメニューのフォントサイズや背景色を変更できます。

select {
  font-size: 18px;
  background-color: lightblue;
}

○JavaScriptで挙動を制御する

プルダウンメニューの挙動は、JavaScriptを使って制御することができます。

例えば、下記のようなJavaScriptを使用して、プルダウンメニューの選択肢が変更されたときにアラートを表示することができます。

<!DOCTYPE html>
<html>
<head>
  <title>プルダウンメニューのJavaScript制御</title>
  <script>
    function showAlert() {
      const select = document.getElementById("fruits");
      const selectedValue = select.options[select.selectedIndex].value;
      alert("選択された果物: " + selectedValue);
    }
  </script>
</head>
<body>
  <form>
    <label for="fruits">果物を選択してください：</label>
    <select id="fruits" onchange="showAlert()">
      <option value="apple">りんご</option>
      <option value="orange">みかん</option>
      <option value="grape">ぶどう</option>
    </select>
  </form>
</body>
</html>

●プルダウンメニューの応用例

プルダウンメニューは、さまざまな場面で活用できます。

ここでは、いくつか応用例とサンプルコードを紹介します。

○都道府県の選択

プルダウンメニューを使って、都道府県を選択できるようにすることができます。

下記のサンプルコードでは、日本の都道府県を選択できるプルダウンメニューを作成しています。

<!DOCTYPE html>
<html>
<head>
  <title>都道府県の選択</title>
</head>
<body>
  <form>
    <label for="prefectures">都道府県を選択してください：</label>
    <select id="prefectures">
      <option value="">選択してください</option>
      <option value="hokkaido">北海道</option>
      <option value="aomori">青森県</option>
      <!-- 中略 -->
      <option value="okinawa">沖縄県</option>
    </select>
  </form>
</body>
</html>

○価格帯の選択

プルダウンメニューを使って、価格帯を選択できるようにすることができます。

下記のサンプルコードでは、価格帯を選択できるプルダウンメニューを作成しています。

<!DOCTYPE html>
<html>
<head>
  <title>価格帯の選択</title>
</head>
<body>
  <form>
    <label for="price_range">価格帯を選択してください：</label>
    <select id="price_range">
      <option value="">選択してください</option>
      <option value="1">〜1,000円</option>
      <option value="2">1,001円〜2,000円</option>
      <option value="3">2,001円〜3,000円</option>
      <option value="4">3,001円〜4,000円</option>
      <option value="5">4,001円〜5,000円</option>
    </select>
  </form>
</body>
</html>

○商品カテゴリーの選択

プルダウンメニューを使って、商品カテゴリーを選択できるようにすることができます。

下記のサンプルコードでは、商品カテゴリーを選択できるプルダウンメニューを作成しています。

<!DOCTYPE html>
<html>
<head>
  <title>商品カテゴリーの選択</title>
</head>
<body>
  <form>
    <label for="category">カテゴリーを選択してください：</label>
    <select id="category">
      <option value="">選択してください</option>
      <option value="electronics">家電</option>
      <option value="fashion">ファッション</option>
      <option value="books">書籍</option>
      <option value="toys">おもちゃ</option>
      <option value="food">食品</option>
    </select>
  </form>
</body>
</html>