HTMLドロップダウンメニュー完全マスター！5つのステップ

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

はじめに
HTMLドロップダウンメニューとは
基本的な構造
アクセシビリティ
- ステップ4：ドロップダウンメニューのカスタマイズ
- ステップ5：応用例
まとめ

はじめに

初めまして！

この記事では、HTMLドロップダウンメニューの作り方や使い方、カスタマイズ方法について、初心者目線で詳しく解説していきます。

これからHTMLのドロップダウンメニューを学びたい方、既に使っているけどもっと理解を深めたい方にもオススメです。

ぜひ最後までお付き合いください。

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

HTMLドロップダウンメニューとは、Webページ上で利用者が選択肢から1つを選ぶことができるUI要素のことです。

フォーム内でよく使われる機能で、選択肢が多い場合に特に便利です。

基本的な構造

ドロップダウンメニューは、主に<select>タグと<option>タグを使って作成されます。

<select>タグでドロップダウンメニューを定義し、<option>タグで選択肢を設定します。

使用例例えば、都道府県の選択を求めるフォームの場合、次のようにコードが書かれます。

<select>
  <option value="1">北海道</option>
  <option value="2">青森県</option>
  <!-- 中略 -->
  <option value="47">沖縄県</option>
</select>

ステップ1：ドロップダウンメニューの作成

基本的なコードドロップダウンメニューを作成するには、下記のようなコードを書きます。

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

年齢の選択肢を設定するドロップダウンメニューを作成してみましょう。

<select>
  <option value="10">10代</option>
  <option value="20">20代</option>
  <option value="30">30代</option>
  <option value="40">40代</option>
  <option value="50">50代</option>
</select>

ステップ2：ドロップダウンメニューの使い方

値の取得ドロップダウンメニューで選択された値を取得するには、JavaScriptを使います。

下記のコードは、選択された値をアラートで表示する例です。

<select id="age">
  <option value="10">10代</option>
  <option value="20">20代</option>
  <option value="30">30代</option>
  <option value="40">40代</option>
  <option value="50">50代</option>
</select>

<button onclick="getSelectedValue()">選択された値を表示</button>

<script>
  function getSelectedValue() {
    const selectElement = document.getElementById("age");
    const selectedValue = selectElement.options[selectElement.selectedIndex].value;
    alert("選択された値: " + selectedValue);
  }
</script>

選択された値をページ上に表示する例を見てみましょう。

<select id="age">
  <option value="10">10代</option>
  <option value="20">20代</option>
  <option value="30">30代</option>
  <option value="40">40代</option>
  <option value="50">50代</option>
</select>

<button onclick="displaySelectedValue()">選択された値を表示</button>
<p id="output"></p>

<script>
  function displaySelectedValue() {
    const selectElement = document.getElementById("age");
    const selectedValue = selectElement.options[selectElement.selectedIndex].value;
    document.getElementById("output").innerHTML = "選択された値: " + selectedValue;
  }
</script>

ステップ3：対処法と注意点

ブラウザの違い異なるブラウザでは、ドロップダウンメニューのデザインが異なる場合があります。

これは、ブラウザがデフォルトで提供するスタイルが違うためです。

そのため、デザインを統一するためにはCSSを使ってカスタマイズする必要があります。

アクセシビリティ

ドロップダウンメニューを作成する際には、アクセシビリティにも配慮しましょう。

例えば、<label>タグを使って、ドロップダウンメニューに関連するラベルを設定することで、スクリーンリーダーを利用している人にも情報が伝わります。

ステップ4：ドロップダウンメニューのカスタマイズ

CSSを使ったデザイン変更ドロップダウンメニューのデザインを変更するには、CSSを使ってスタイルを設定します。

下記は、ドロップダウンメニューの背景色と文字色を変更する例です。

<style>
  select {
    background-color: #f0f0f0;
    color: #333;
  }
</style>

<select>
  <option value="10">10代</option>
  <option value="20">20代</option>
  <option value="30">30代</option>
  <option value="40">40代</option>
  <option value="50">50代</option>
</select>

ドロップダウンメニューのデザインをよりカスタマイズしたい場合は、下記のようにCSSを追加していきます。

<style>
  select {
    background-color: #f0f0f0;
    color: #333;
    font-size: 18px;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #ccc;
  }
</style>

<select>
  <option value="10">10代</option>
  <option value="20">20代</option>
  <option value="30">30代</option>
  <option value="40">40代</option>
  <option value="50">50代</option>
</select>

このようにして、ドロップダウンメニューの見た目を自分の好みに合わせてカスタマイズすることができます。

ステップ5：応用例

複数選択可能なドロップダウンメニュー通常のドロップダウンメニューでは、1つの選択肢しか選べませんが、multiple属性を使うことで複数選択が可能なドロップダウンメニューを作成することができます。

複数選択可能なドロップダウンメニューの例を見てみましょう。

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

このように、multiple属性を追加するだけで、簡単に複数選択が可能なドロップダウンメニューを作成できます。