【HTML Living Standard】optgroup要素の使い方
optgroup要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
optgroupオブジェクトは、HTMLの<select>要素内で、関連する複数の<option>要素を意味的にグループ化するために使用されるオブジェクトです。この機能により、ユーザーがドロップダウンリストから選択肢を選ぶ際に、視覚的に整理された状態を提供し、特に選択肢が多い場合に目的の項目を素早く見つけられるよう支援します。結果として、ユーザーインターフェースの操作性が向上し、より良いユーザーエクスペリエンスが提供されます。
<optgroup>は、必ず<select>要素の直接の子要素として配置され、その内部にグループに属する<option>要素を記述します。各<optgroup>オブジェクトには、必須のlabel属性を指定する必要があります。このlabel属性に設定された値が、ウェブブラウザ上でそのグループの見出しとして表示されます。例えば、「フルーツ」「野菜」といった明確なカテゴリ名を設定することで、ユーザーはどの選択肢がどの分類に属するかを直感的に理解できます。
また、オプションとしてdisabled属性を指定することも可能です。この属性が<optgroup>に設定された場合、そのグループ内に含まれるすべての<option>要素が選択不可能となり、ユーザーはそれらの選択肢を選ぶことができなくなります。これは、特定の条件に基づいて一部の選択肢グループの利用を制限したい場合に有効です。なお、<optgroup>要素はネスト（入れ子）にすることはできませんのでご注意ください。
構文(syntax)
1<select> 2 <optgroup label="グループのラベル"> 3 <option value="オプション値1">オプション表示テキスト1</option> 4 <option value="オプション値2">オプション表示テキスト2</option> 5 </optgroup> 6 <optgroup label="別のグループのラベル"> 7 <option value="オプション値3">オプション表示テキスト3</option> 8 </optgroup> 9</select>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML optgroupタグで選択肢をグループ化する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>optgroupタグのサンプル</title> 7</head> 8<body> 9 10 <h1>商品の選択</h1> 11 12 <!-- 13 <select>要素は、ドロップダウンリストを作成します。 14 ユーザーはリストから1つのオプションを選択できます。 15 --> 16 <label for="product-category">商品カテゴリを選択してください:</label> 17 <select id="product-category" name="product-category"> 18 <!-- 19 <optgroup>タグは、関連する選択肢をグループ化して表示します。 20 label属性でグループのタイトルを指定します。 21 これにより、ドロップダウンリストが見やすくなります。 22 --> 23 <optgroup label="電子機器"> 24 <!-- 各グループに属する具体的な選択肢 --> 25 <option value="smartphone">スマートフォン</option> 26 <option value="laptop">ノートパソコン</option> 27 <option value="tablet">タブレット</option> 28 </optgroup> 29 30 <optgroup label="家電製品"> 31 <option value="refrigerator">冷蔵庫</option> 32 <option value="washing-machine">洗濯機</option> 33 <option value="microwave">電子レンジ</option> 34 </optgroup> 35 36 <optgroup label="書籍"> 37 <option value="programming">プログラミング</option> 38 <option value="novel">小説</option> 39 <option value="manga">漫画</option> 40 </optgroup> 41 </select> 42 43</body> 44</html>
HTMLのoptgroupタグは、ドロップダウンリストを作成する<select>要素内で使用される特別な要素です。このタグの主な役割は、多くの選択肢（<option>タグ）の中から関連性の高いものをグループ化し、ユーザーインターフェースの視認性を高めることです。これにより、ユーザーはリストの中から目的の選択肢をより簡単に見つけることができるようになります。
optgroupタグには、グループのタイトルを指定するための必須のlabel属性があります。例えば、サンプルコードでは「電子機器」や「家電製品」のようにカテゴリ名をlabel属性に設定し、そのカテゴリに属する具体的な商品を選択肢としてまとめています。このようにグループ化することで、ドロップダウンリストが論理的に整理され、非常に分かりやすくなります。
optgroupタグ自体は、特別な引数を受け取ったり、特定の戻り値を返したりすることはありません。あくまで<select>要素の内部で、選択肢を構造的に整理し、ユーザーエクスペリエンスを向上させるための要素として機能します。システムエンジニアを目指す上で、このようなユーザーフレンドリーなUIを実装する手法を理解しておくことは非常に重要です。
optgroupタグは、<select>要素内で関連する<option>要素をグループ化するために使用します。このタグは必ず<select>要素の直下に配置し、label属性でグループのタイトルを必ず指定してください。label属性がないとグループ化の意図が正しく伝わりません。また、optgroupタグ自体は選択できず、その内部の<option>タグのみが選択可能です。ネスト（入れ子）にして複数の階層のグループを作成することはできませんので注意が必要です。多数の選択肢がある場合にグループ化することで、ユーザーは目的の項目を見つけやすくなり、ドロップダウンリストの視認性と操作性が大きく向上し、ウェブサイトのユーザビリティとアクセシビリティを高めます。
HTML optgroupで選択肢をグループ化する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML optgroup サンプル</title> 7</head> 8<body> 9 <h1>商品の選択</h1> 10 11 <label for="product-category">商品カテゴリを選択してください:</label> 12 <select id="product-category" name="selected_product"> 13 <!-- optgroup要素は、関連するオプションをグループ化します。 14 label属性は、グループのタイトルとして表示されます。 15 optgroup自体は選択できませんが、その中のoption要素が選択可能です。 --> 16 <optgroup label="電子機器"> 17 <option value="smartphone">スマートフォン</option> 18 <option value="laptop">ノートパソコン</option> 19 <option value="tablet">タブレット</option> 20 </optgroup> 21 22 <optgroup label="衣料品"> 23 <option value="tshirt">Tシャツ</option> 24 <option value="jeans">ジーンズ</option> 25 <option value="jacket">ジャケット</option> 26 </optgroup> 27 28 <optgroup label="食品"> 29 <option value="fruit">果物</option> 30 <option value="vegetable">野菜</option> 31 <option value="meat">肉</option> 32 </optgroup> 33 </select> 34</body> 35</html>
HTMLのoptgroup要素は、ドロップダウンリスト（<select>要素）の中で、関連する複数の選択肢（<option>要素）をグループ化するために使用されます。これにより、ユーザーは多くの選択肢の中から目的のものを探しやすくなり、フォームの視認性と操作性が向上します。
この要素自体には、直接の「引数」という概念はありませんが、グループのタイトルを指定するlabel属性が重要な役割を果たします。label属性に設定された値は、ドロップダウンリスト内でグループの見出しとして表示され、どの選択肢がどのカテゴリに属しているかを明確に示します。例えば、サンプルコードでは「電子機器」「衣料品」「食品」といったカテゴリがlabel属性によって定義されています。
optgroup要素は、それ自体が選択されることはなく、「戻り値」を直接返すものでもありません。あくまで選択可能なのは、optgroup内部に配置された個々の<option>要素です。optgroupは、選択可能なoption要素を整理し、ユーザーがスムーズに項目を選べるようにするための表示上の仕組みを提供します。
サンプルコードでは、ユーザーが商品カテゴリを選択する際に、複数の商品をカテゴリ別に整理して表示しています。ドロップダウンリストを開くと、「電子機器」というグループ名の下に「スマートフォン」などの選択肢が、次に「衣料品」の下に「Tシャツ」などが表示され、ユーザーは商品の種類を一目で把握し、目的の商品を効率的に探すことができます。このようにoptgroupは、フォームにおける選択項目を論理的に整理し、ユーザー体験を高める重要な役割を担っています。
optgroup要素は、ドロップダウンリスト（select要素）内で関連する選択肢（option要素）をカテゴリごとにまとめるために使われます。最も重要な注意点として、optgroup要素自体は選択できません。ユーザーが実際に選択できるのは、そのoptgroup内にあるoption要素のみですので、混同しないよう注意が必要です。グループのタイトルを表示するためのlabel属性は必ず指定してください。この属性がないと、どのカテゴリに属する選択肢なのかユーザーに伝わりません。長い選択肢リストの視認性を高め、ユーザーが目的の項目を見つけやすくする目的で利用されます。この要素は必ずselect要素の子要素として使用し、その中にoption要素を配置する構造が正しい使い方です。