optgroupタグ -select内で選択肢をグループ化する｜HTML辞典

<optgroup>タグとは？

<optgroup> タグは、<select> 内で選択肢（<option>）をグループ化するためのタグです。
カテゴリー別に選択肢を整理できるため、長いリストの視認性を向上させ、ユーザーが選択しやすくなります。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、フォーム関連コンテンツ（Form-associated Content）。

閉じタグの有無

<optgroup> は開始タグ（<optgroup>）と閉じタグ（</optgroup>）の両方が必要です。

基本的な記述方法

<select name="food">
    <optgroup label="フルーツ">
        <option value="apple">りんご</option>
        <option value="banana">バナナ</option>
    </optgroup>
    <optgroup label="野菜">
        <option value="carrot">にんじん</option>
        <option value="potato">じゃがいも</option>
    </optgroup>
</select>

使用できる主な属性

<optgroup> タグにはいくつかの属性があります。

属性名	説明	例
label	グループの名前（必須）	<optgroup label="フルーツ">
disabled	グループ全体を選択不可にする	<optgroup disabled>

CSSを使ったデザイン変更

デフォルトのデザインを変更したい場合は、CSSを活用できます。

select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
}

適切な使用例

✅ カテゴリー別に選択肢をグループ化する

<select name="transport">
    <optgroup label="陸上">
        <option value="car">車</option>
        <option value="bike">自転車</option>
    </optgroup>
    <optgroup label="空">
        <option value="plane">飛行機</option>
        <option value="helicopter">ヘリコプター</option>
    </optgroup>
</select>

✅ disabled を使用して特定のグループを無効化

<select name="devices">
    <optgroup label="利用可能">
        <option value="laptop">ノートパソコン</option>
        <option value="tablet">タブレット</option>
    </optgroup>
    <optgroup label="販売終了" disabled>
        <option value="mp3">MP3プレイヤー</option>
        <option value="pager">ポケベル</option>
    </optgroup>
</select>

適切でない使用例（誤った使い方）

❌ <optgroup> を <select> の外に記述すると無効になる

<!-- NG: <optgroup> を <select> の外に記述 -->
<optgroup label="フルーツ">
    <option value="apple">りんご</option>
</optgroup>
<select name="fruit"></select>

✅ 正しい書き方（<optgroup> は <select> の中に記述）

<select name="fruit">
    <optgroup label="フルーツ">
        <option value="apple">りんご</option>
    </optgroup>
</select>

❌ label を指定しないと、グループ名が表示されない

<!-- NG: label属性なし -->
<select name="category">
    <optgroup>
        <option value="fiction">小説</option>
        <option value="nonfiction">ノンフィクション</option>
    </optgroup>
</select>

✅ 正しい書き方（label を指定）

<select name="category">
    <optgroup label="ジャンル">
        <option value="fiction">小説</option>
        <option value="nonfiction">ノンフィクション</option>
    </optgroup>
</select>

<optgroup>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<optgroup>	<option> をグループ化	label でグループ名を設定	<select> 内でカテゴリー分け
<option>	選択肢を定義	value を指定可能	<select> の個別の選択肢
<select>	ドロップダウンリストを作成	<option> を内包	単一選択、複数選択
<datalist>	入力補助リストを提供	list 属性とセットで使用	予測入力候補の表示

使用上の注意点

✅ <optgroup> は必ず <select> 内に配置する

• <select> の外に記述すると機能しない。

✅ label 属性を指定してグループ名を明確にする

• label を指定しないと、グループの意味が分かりにくくなる。

✅ disabled を使用して特定のグループを選択不可にできる

• disabled を適用すると、そのグループの全ての選択肢が無効になる。

関連タグ

• <select> – 選択肢をまとめるコンテナ
• <option> – <select> 内の個別の選択肢
• <datalist> – 入力補助リスト
• <input type="radio"> – ラジオボタンの作成

まとめ

<optgroup> タグは、HTML文書内で <select> 内の選択肢（<option>）をグループ化するためのタグ です。
label を適切に設定し、カテゴリー別に選択肢を整理することで、ユーザーが選択しやすいUIを作成できます。