このページについて
このページではHTMLで使う事ができるoptgroupタグの機能と使い方を解説しています。
optgroupタグ
optgroupはselectタグとoptionタグと一緒に使うというか、そこでしか出番がないタグになります。selectタグは選択可能なリストを定義するもので、optionタグはそのselectの中に入れて使うものになります。optgroupはそのoptionをグループ分けするタグになります。
optgroupタグの書き方
optgroupはoptionタグをまとめる為の機能なので、optionの前に書きます。
<select>
<optgroup label="グループA">
<option value="A">項目1</option>
<option value="B">項目2</option>
<option value="C">項目3</option>
</optgroup>
<optgroup label="グループB">
<option value="A">項目1</option>
<option value="B">項目2</option>
<option value="C">項目3</option>
</optgroup>
</select>このように書く事で1つの選択可能なリストの中に、グループAとグループBを分けて表示する事ができます。
optgroupタグの属性
optgroupで使う事ができる属性は以下の通りになります。
| disabled | 指定したグループ全体を無効にする |
|---|---|
| label | グループ名を指定します |
optgroupで使える属性は2つだけです。disabled属性を付与すると、そのグループ全体の選択を無効にします。ちなみにiOSとiPadOSのSafariではdisabled属性が機能していないようなので、過信しないようにしましょう。
label属性はグループ名を指定するために必要な属性になります。
optgroupの入れ子について
optgroupの中にoptgroupを入れることはできません。
まとめ
optgroupはselectタグの中のoptionタグをグループ分けしてまとめる機能を持っています。グループ分け以外の機能は無いんですが、あると便利な機能だったりします。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。