無料ホームページ作成！ＨＴＭＬ
メニューのグループ化

無料ホームページ作成！HTML・フォーム
メニューのグループ化（OPTGROUP要素）

ホームページでメニューのグループ化

OPTGROUP要素　（インライン）

optgroup要素はメニューの項目をグループ化できる要素です。メニューの項目が多くなってきたりするととても分かり辛くなってしまうのでこの要素を使って見やすくします。

<optgroup>タグの使い方

HTMLソース

<form action="url">
 <p>プルダウン式<br>
  <select name="mihon1">
   <optgroup label="1">
    <option>1-1</option>
    <option>1-2</option>
   </optgroup>
   <optgroup label="2">
    <option>2-1</option>
    <option>2-2</option>
   </optgroup>
  </select>
 </p>
 <p>リスト式<br>
  <select name="mihon2" size="4">
   <optgroup label="1">
    <option>1-1</option>
    <option>1-2</option>
   </optgroup>
   <optgroup label="2">
    <option>2-1</option>
    <option>2-2</option>
   </optgroup>
  </select>
 </p>
</form>
 

結果

選択できる項目が多くなってくると便利になってきます。

OPTGROUP要素で宣言できる属性

optgroup要素はlabel属性とセットで覚えましょう。