selectタグ -ドロップダウンリストを作成する｜HTML辞典
<select>タグとは？
<select> タグは、ユーザーが選択肢の中から1つまたは複数を選択できるドロップダウンリストを作成するためのタグ です。<option> タグと組み合わせて使用し、リストの各選択肢を定義します。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フォーム関連コンテンツ（Form-associated Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<select> は開始タグ（<select>）と閉じタグ（</select>）の両方が必要です。
基本的な記述方法
<select name="fruit">
<option value="apple">りんご</option>
<option value="banana">バナナ</option>
<option value="grape">ぶどう</option>
</select>
使用できる主な属性
<select> タグには多くの属性がありますが、以下が代表的なものです。
| 属性名 | 説明 | 例 |
|---|---|---|
name | フォーム送信時の識別名 | <select name="color">...</select> |
multiple | 複数選択を許可 | <select multiple>...</select> |
size | 表示される選択肢の数 | <select size="3">...</select> |
required | 必須入力にする | <select required>...</select> |
disabled | 選択リストを無効化 | <select disabled>...</select> |
CSSを使ったデザイン変更
デフォルトのデザインを変更したい場合は、CSSを活用できます。
select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: white;
}
適切な使用例
✅ 一般的なドロップダウンメニュー
<select name="country">
<option value="jp">日本</option>
<option value="us">アメリカ</option>
<option value="fr">フランス</option>
</select>
✅ multiple を使用して複数選択を許可
<select name="hobbies" multiple>
<option value="reading">読書</option>
<option value="sports">スポーツ</option>
<option value="music">音楽</option>
</select>
✅ size を指定してリストの高さを変更
<select name="city" size="5">
<option value="tokyo">東京</option>
<option value="osaka">大阪</option>
<option value="kyoto">京都</option>
</select>
✅ disabled を使用して選択リストを無効化
<select name="payment" disabled>
<option value="credit">クレジットカード</option>
<option value="paypal">PayPal</option>
</select>
適切でない使用例（誤った使い方）
❌ <option> タグを <select> の外で使用すると無効になる
<!-- NG: <option> を <select> の外に記述 -->
<option value="apple">りんご</option>
<select name="fruit"></select>
✅ 正しい書き方（<option> は <select> の中に記述）
<select name="fruit">
<option value="apple">りんご</option>
</select>
❌ name 属性を指定しないとフォーム送信時に値が取得できない
<!-- NG: name属性なし -->
<select>
<option value="dog">犬</option>
<option value="cat">猫</option>
</select>
✅ 正しい書き方（name を指定）
<select name="pet">
<option value="dog">犬</option>
<option value="cat">猫</option>
</select>
<select>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<select> | ドロップダウンリストを作成 | <option> を内包 | 単一選択、複数選択のリスト |
<option> | 選択リストの項目を作成 | <select> の子要素 | 各選択肢の定義 |
<input type="radio"> | ラジオボタンを作成 | グループの中から1つを選択 | 少数の選択肢（2～5個程度） |
<datalist> | 入力補助リストを提供 | list 属性とセットで使用 | 予測入力候補の表示 |
使用上の注意点
✅ <option> タグを <select> 内に配置する
<option>は<select>の外では機能しないため、必ず<select>の中に記述する。
✅ name 属性を指定してフォーム送信時に値を取得できるようにする
nameを指定しないと、フォーム送信時に選択された値がサーバーに送信されない。
✅ multiple を使用する場合は、適切な UI を考慮する
- 複数選択可能な UI は、スマホでは操作しづらいことがあるため、UX を考慮する。
関連タグ
<option>–<select>の選択肢を定義<optgroup>–<option>のグループ化<input type="radio">– ラジオボタンの作成<datalist>– 入力補助リスト
まとめ
<select>タグは、HTML文書内で ユーザーが選択肢の中から1つまたは複数を選択できるドロップダウンリストを作成するためのタグ です。<option> と組み合わせて、ユーザーが選択しやすいフォームを作成できます。
