閉じる

HTMLのselect要素でプルダウンメニューを作成する方法：基本からスタイリングまで

広告

Webサイトのユーザーインターフェースにおいて、限られたスペースで多くの選択肢を提示できるプルダウンメニューは、欠かすことのできない重要な要素です。

HTMLでは<select>要素と<option>要素を組み合わせることで、直感的に操作可能なドロップダウンリストを簡単に作成できます。

2026年現在のモダンなWeb制作においても、標準的なフォーム部品としての重要性は変わらず、アクセシビリティやカスタマイズ性の面でさらなる進化を遂げています。

本記事では、HTMLの<select>要素の基本的な使い方から、実務で役立つ応用的な属性、そしてCSSを用いた最新のスタイリング手法までを詳しく解説します。

初心者の方でも迷わず実装できるよう、具体的なコード例を交えながらステップバイステップで進めていきましょう。

目次 [ close ]
  1. HTML select要素の基本的な書き方
    1. option要素とvalue属性の役割
    2. optgroup要素による項目のグループ化
  2. ユーザーの操作性を向上させる便利な属性
    1. 初期選択状態を指定するselected属性
    2. 選択を禁止するdisabled属性
    3. 複数選択を可能にするmultiple属性
    4. 表示行数を調整するsize属性
  3. 2026年現在のモダンなスタイリング手法
    1. デフォルトデザインのリセット
    2. 擬似要素の活用制限に注意
  4. JavaScriptを用いた動的な制御
  5. アクセシビリティとユーザビリティの考慮点
    1. 適切なサイズの確保
    2. キーボード操作への対応
    3. 項目の整理と削減
  6. まとめ

HTML select要素の基本的な書き方

プルダウンメニューを作成するための最も基本的な構成は、<select>タグの中に複数の<option>タグを配置する形式です。

<select>タグはメニュー全体を囲むコンテナの役割を果たし、その中の各選択肢を<option>タグで定義します。

まずは、最もシンプルな都道府県選択の例を見てみましょう。

HTML
<!-- 基本的なプルダウンメニュー -->
<label for="pref-select">お住まいの地域：</label>
<select name="pref" id="pref-select">
    <option value="">選択してください</option>
    <option value="tokyo">東京都</option>
    <option value="osaka">大阪府</option>
    <option value="fukuoka">福岡県</option>
</select>
実行結果
お住まいの地域： [選択してください (V)]
（クリックすると「東京都」「大阪府」「福岡県」がリスト表示される）

このコードにおいて、name属性はサーバーに送信される際のデータ名となり、フォーム処理において極めて重要です。

また、<label>要素のfor属性と<select>要素のid属性を一致させることで、ラベルをクリックした際にもメニューが反応するように設定するのが一般的なマナーです。

option要素とvalue属性の役割

<option>要素の内部に記述されたテキストは、ユーザーが画面上で目にする選択肢の名称です。

一方で、value属性に指定した値は、フォームが送信された際にプログラムへ渡される実際のデータとなります。

ユーザーには分かりやすい日本語を表示し、システム内部では「tokyo」や「01」といった英数字で処理するのが一般的です。

もしvalue属性を省略した場合、タグに囲まれたテキストがそのまま値として送信されますが、データ管理の観点からは明示的に指定することが推奨されます。

optgroup要素による項目のグループ化

選択肢の数が多い場合、関連する項目をグループ化することでユーザーの利便性を高めることができます。

このようなケースでは、<optgroup>要素を使用します。

label属性にグループ名を設定することで、リスト内に見出しを表示させることが可能です。

HTML
<select name="service">
    <optgroup label="Web制作">
        <option value="html">HTML5/CSS3</option>
        <option value="js">JavaScript</option>
    </optgroup>
    <optgroup label="デザイン">
        <option value="figma">Figma</option>
        <option value="photoshop">Photoshop</option>
    </optgroup>
</select>

なお、<optgroup>自体を選択することはできず、あくまで視覚的な区切りとしての役割を持ちます。

ユーザーの操作性を向上させる便利な属性

HTMLの<select>要素には、ユーザー体験（UX）を向上させるための様々な属性が用意されています。

これらを適切に使い分けることで、より親切なフォーム設計が可能になります。

初期選択状態を指定するselected属性

ページを読み込んだ際に、特定の項目をあらかじめ選択状態にしておきたい場合は、<option>要素にselected属性を付与します。

例えば、「利用規約に同意する」といったデフォルトで選択済みにすべき項目がある場合に便利です。

選択を禁止するdisabled属性

特定の条件で見出しを選ばせたくない場合や、読み取り専用にしたい場合には、disabled属性を使用します。

この属性は、<select>タグ全体に付与してメニュー自体を無効化することも、特定の<option>のみに付与してその項目だけを選べなくすることも可能です。

複数選択を可能にするmultiple属性

通常、プルダウンメニューは1つの項目しか選べませんが、multiple属性を追加することで複数選択が可能になります。

複数選択を行う際は、WindowsであればCtrlキー、MacであればCommandキーを押しながらクリックします。

ただし、スマートフォンなどのタッチデバイスでは操作方法が異なるため、UIデザインには注意が必要です。

表示行数を調整するsize属性

size属性に数値を指定すると、プルダウン形式ではなく、指定した行数分が最初から表示されたリストボックス形式になります。

一度に多くの項目を視認させたい場合に有効な手法です。

属性名効果記述例
selected初期状態で選択済みにする<option selected>
disabled操作・選択を無効にする<select disabled>
multiple複数の項目を選択可能にする<select multiple>
required入力必須項目にする<select required>

2026年現在のモダンなスタイリング手法

かつて、HTMLの標準的な<select>要素はブラウザごとに表示が大きく異なり、CSSでのカスタマイズが難しいことで知られていました。

しかし、近年のブラウザアップデートにより、appearanceプロパティを利用することで比較的自由にスタイリングできるようになっています。

デフォルトデザインのリセット

まずは、ブラウザ固有のスタイルを解除するところから始めます。

appearance: none;を適用することで、OS特有の矢印アイコンなどを消去し、独自の背景や枠線を設定できるようになります。

CSS
/* select要素の基本カスタマイズ */
.custom-select {
    appearance: none; /* デフォルトのスタイルを解除 */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 10px 40px 10px 15px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 18px;
    cursor: pointer;
}

/* フォーカス時のスタイル */
.custom-select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

このように、背景画像（background-image）としてSVG形式の矢印を指定することで、どのブラウザでも統一感のある洗練されたデザインを実現できます。

2026年現在では、標準的なCSSのみで非常に高いレベルのカスタマイズが可能となっており、JavaScriptライブラリを導入せずとも十分な表現力を持ちます。

擬似要素の活用制限に注意

ここで一つ注意点があります。

<select>要素は「置換要素」と呼ばれる特殊な性質を持っており、CSSの::beforeや::afterといった擬似要素を直接適用することができません。

そのため、独自のアイコンを配置したい場合は、<select>を<div>などのラッパー要素で囲み、そのラッパーに対して擬似要素を設定するのが一般的なテクニックです。

JavaScriptを用いた動的な制御

静的なHTMLだけでなく、JavaScriptを組み合わせることで、ユーザーの選択に応じてリアルタイムに表示を切り替えるような高度な機能が実現できます。

最も頻繁に利用されるのが、値が変更された瞬間に処理を実行するchangeイベントです。

HTML
<select id="color-picker">
    <option value="white">白</option>
    <option value="red">赤</option>
    <option value="blue">青</option>
</select>
<p id="status-text">色を選択してください。</p>

<script>
    const selectElement = document.getElementById('color-picker');
    const statusText = document.getElementById('status-text');

    // 選択内容が変更された時の処理
    selectElement.addEventListener('change', (event) => {
        const selectedValue = event.target.value;
        statusText.textContent = `あなたは「${selectedValue}」を選択しました。`;
        statusText.style.color = selectedValue === 'white' ? 'black' : selectedValue;
    });
</script>

この仕組みを応用すれば、「1つ目のプルダウンでカテゴリー（例：PC）を選んだら、2つ目のプルダウンにそのカテゴリーに属する商品（例：ノートPC、デスクトップ）を動的に表示する」といった連動メニューも作成可能です。

アクセシビリティとユーザビリティの考慮点

プルダウンメニューを実装する際、デザインの美しさ以上に重要なのが「使いやすさ（ユーザビリティ）」と「アクセシビリティ」です。

HTMLのセマンティクスを正しく活用し、すべてのユーザーがストレスなく操作できるように配慮しましょう。

適切なサイズの確保

特にモバイルユーザーにとって、クリック領域が狭すぎることは大きなストレスとなります。

指でのタップ操作を考慮し、高さは最低でも44px以上を確保するようにスタイリングしましょう。

また、フォントサイズが16px未満だと、iOSデバイスにおいてズームアップが発生してしまうため、基本的には16px以上に設定するのが定石です。

キーボード操作への対応

マウスを使わず、キーボードのTabキーや矢印キーで操作するユーザーも存在します。

:focus時のアウトラインを消去してしまうと、現在どこを選択しているか分からなくなるため、必ず視覚的なフィードバックを残すようにしてください。

outline: none;を使用する場合は、代わりのボーダー色やシャドウを設定することが推奨されます。

項目の整理と削減

プルダウンメニューにあまりにも多くの項目を詰め込みすぎると、目的のものを探すのが困難になります。

選択肢が20を超えるような場合は、オートコンプリート機能付きのテキスト入力（<datalist>要素）の使用を検討するか、カテゴリーごとにステップを分けるのが賢明です。

まとめ

HTMLの<select>要素は、基本的な使い方をマスターするだけで強力なフォーム部品として機能します。

<option>や<optgroup>を組み合わせることで情報を構造化し、selectedやdisabledといった属性で挙動を細かく制御しましょう。

また、現代のWeb制作ではCSSのappearance: none;を活用することで、ユーザビリティを損なわずにブランドイメージに合わせたスタイリングが可能です。

JavaScriptによる動的な処理や、アクセシビリティへの配慮も忘れてはいけません。

これらのテクニックをバランスよく取り入れることで、ユーザーにとって快適でミスの少ない入力フォームを実現できるはずです。

まずはシンプルなコードから書き始め、徐々に自分好みのカスタマイズを加えてみてください。

URLをコピーしました！