HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<optgroup>
オプション グループ（Option Group）要素。ドロップダウンリスト（<select>）内のオプションをグループ化し、見出しを付けます。
info
概要
<optgroup> 要素は、<select> 要素内で複数の <option> 要素を論理的なグループにまとめるために使用されます。
グループ化により、長い選択肢リストの**可読性**と**使いやすさ**を向上させることができます。グループ自体は見出しとして表示され、選択はできません。
play_circle
デモ (静的表示)
HTML (Source)
<select name="fruits">
<optgroup label="柑橘類">
<option value="orange">オレンジ</option>
<option value="lemon">レモン</option>
</optgroup>
<optgroup label="ベリー類">
<option value="strawberry">イチゴ</option>
<option value="blueberry">ブルーベリー</option>
</optgroup>
</select>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| label | **必須属性**。グループの見出しとしてユーザーに表示されるテキストを指定します。 |
| disabled | この属性が存在する場合、グループ内の全てのオプションが選択不可（無効）になります。値は不要です（ブール属性）。 |
code
実用例
1. グループ化した選択肢の作成
<select name="prefectures">
<option value="">都道府県を選択...</option>
<optgroup label="関東地方">
<option value="tokyo">東京都</option>
<option value="kanagawa">神奈川県</option>
</optgroup>
<optgroup label="関西地方">
<option value="osaka">大阪府</option>
<option value="kyoto">京都府</option>
</optgroup>
</select>
2. グループ全体を選択不可にする
<select name="products">
<optgroup label="在庫あり">
<option value="a">商品A</option>
</optgroup>
<optgroup label="生産終了" disabled>
<option value="b">商品B</option>
<option value="c">商品C</option>
</optgroup>
</select>
lightbulb
知っておくべき重要事項
warning
ネストは不可
<optgroup> 要素は、他の <optgroup> の中にネストすることはできません。階層は一段階のみとなります。
構造としては、<select> の直下に <optgroup> または <option> を配置します。
accessibility_new
アクセシビリティ
グループの見出しである
グループの見出しである
label 属性の値は、スクリーンリーダーによって読み上げられ、視覚障害を持つユーザーに選択肢の文脈を提供します。
グループ化は、フォームの使いやすさ（UX）とアクセシビリティ（A11y）の両面で推奨されます。