SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのoptgroupタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:40動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:03HTMLタグ編の四十四本目は、オプトグループタグです。
  4. 0:07オプトグループは、セレクトボックスの中に並ぶ選択肢を、意味の近いもの同士でグループにまとめるためのタグです。
  5. 0:15たとえば講座の一覧を、入門と応用に分けて見出し付きで表示する、といった使い方ができます。
  6. 0:21選択肢が増えるほど、ただ並べるだけでは探しにくくなります。
  7. 0:25グループに分けることで、利用者は目的の項目を素早く見つけられます。
  8. 0:30今回は基本の書き方から、ラベルとディセーブルドという二つの専用属性まで、
  9. 0:33順に確認していきます。
  10. 0:36セレクトとオプションの間に挟まる、中間の整理役だとイメージしてください。
  11. 0:42どんな場面で使うのかを整理します。
  12. 0:44代表例は、選択肢がたくさんあるドロップダウンです。
  13. 0:49講座を入門と応用に分ける、都道府県を関東や関西といった地方ごとに分ける、
  14. 0:54商品を飲み物と食べ物に分ける、といった分類が向いています。
  15. 1:00グループ名が見出しになるので、利用者はまず大まかな分類を見て、次にその中の選択肢を探せます。
  16. 1:07逆に、選択肢が三つや四つしかない場合は、グループ化するほどの効果はありません。
  17. 1:14項目が十個を超えて、探しにくさを感じ始めたら、オプトグループの出番と考えてみてください。
  18. 1:21分類の軸は、難度、地域、価格帯など、利用者が普段考える分け方が最適です。
  19. 1:28基本の書き方を確認します。
  20. 1:29構造は三階層です。
  21. 1:31一番外側がセレクト、その中にオプトグループ、そして一番内側に実際の選択肢であるオプションを置きます。
  22. 1:38この教材では、開始タグと終了タグを省略せず、はっきり書くことにします。
  23. 1:44大切な決まりが二つあります。
  24. 1:46一つ目は、オプトグループはセレクトの外では使えないことです。
  25. 1:50二つ目は、オプトグループの中に、さらにオプトグループを入れ子にはできないことです。
  26. 1:56グループの中にグループは作れない、と覚えてください。
  27. 2:00階層は浅く、シンプルに保つのが基本です。
  28. 2:03書く順番は、外側の入れ物から内側の項目へ、という流れを意識してください。
  29. 2:09記事の活用例を、自分の言葉でたどってみましょう。
  30. 2:12教材を選ぶセレクトボックスです。
  31. 2:15セレクトにはアリアラベルで教材という説明を付け、何を選ぶ欄なのかを伝えています。
  32. 2:21その中は、入門と応用という二つのグループに分かれていて、入門にはエイチティーエムエル、
  33. 2:27応用にはジャバスクリプトのオプションが入っています。
  34. 2:32画面では、入門と応用が太字の見出しのように表示され、その下に選択肢が少し字下げされて並びます。
  35. 2:39見出し自体は選べません。
  36. 2:41あくまで分類を示すための表示だと理解してください。
  37. 2:45小さな例ですが、グループ化の基本の形がすべて詰まっています。
  38. 2:50中心となるラベル属性を解説します。
  39. 2:52オプトグループのラベルは、そのグループ全体の名前です。
  40. 2:56画面の例では、入門というラベルを付けたグループの中に、エイチティーエムエルとシーエスエスの二つの選択肢を入れています。
  41. 3:05ラベル属性は、オプトグループを使うときには欠かせない属性です。
  42. 3:09これを書かないと、グループに名前が表示されず、分類した意味が利用者に伝わりません。
  43. 3:15もう一つ混同注意です。
  44. 3:17このラベル属性は、入力欄に説明を付けるラベル要素とは別のものです。
  45. 3:22名前が同じでも役割が違うので、取り違えないようにしましょう。
  46. 3:26グループ名は短く、誰が見ても分類が一目で分かる言葉を選んでください。
  47. 3:31ディセーブルド属性は、グループ全体をまとめて選べなくするためのものです。
  48. 3:36たとえば応用講座がまだ準備中なら、そのグループにディセーブルドを付けるだけで、
  49. 3:40中の選択肢がすべて選べなくなります。
  50. 3:44一つずつオプションを無効化する手間が省けるのが利点です。
  51. 3:48ここでも真偽属性の決まりに注意してください。
  52. 3:51ディセーブルド、イコール、フォルスと書いても無効化は解除されません。
  53. 3:55属性が付いている時点で有効とみなされるからです。
  54. 3:59選べるように戻したいときは、属性そのものを取り除いてください。
  55. 4:03理由が伝わる補足も添えると親切です。
  56. 4:05一時的に休止している分類を隠さずに見せたいときにも向いています。
  57. 4:10もう一つの活用例として、都道府県の選択を見てみましょう。
  58. 4:14四十七都道府県を五十音順にただ並べると、目的の県を探すのに時間がかかります。
  59. 4:20関東、関西のように地方ごとにオプトグループで分けておけば、利用者はまず住んでいる地方を見つけて、
  60. 4:25その中から県を選べます。
  61. 4:29このように、項目数が多く、はっきりした分類の軸がある場合にグループ化は効果を発揮します。
  62. 4:36ただし、グループを細かくしすぎると、かえって一覧が複雑になります。
  63. 4:41分類は、利用者が迷わずたどれる程度の数に抑えるのがコツです。
  64. 4:46自分の身近な一覧で試すと、分類の効果を実感しやすいでしょう。
  65. 4:50三つのタグの役割分担を整理します。
  66. 4:53セレクトは、選ぶ欄全体の入れ物です。
  67. 4:56オプトグループは、その中の中見出しで、選択肢の分類を示します。
  68. 5:01そしてオプションが、実際に選ばれる一つ一つの項目です。
  69. 5:05フォームが送信されるときに送られるのは、選ばれたオプションのバリューであり、
  70. 5:10グループ名のラベル自体は値として送られません。
  71. 5:15グループはあくまで、探しやすくするための整理の仕組みです。
  72. 5:19この関係が分かると、前に学んだオプションタグの知識とつながって、セレクト周りの構造がすっきり理解できるはずです。
  73. 5:28名前や構造で迷ったら、この三役の分担に立ち返って考えてください。
  74. 5:33よくある間違いを三つ確認します。
  75. 5:36一つ目は、オプトグループを入れ子にすることです。
  76. 5:40大分類の中に小分類を作りたくなる場面はありますが、仕様上できません。
  77. 5:45分類は一階層だけです。
  78. 5:47二つ目は、ラベル属性の付け忘れです。
  79. 5:50名前のないグループは、利用者にとってただの字下げにしか見えません。
  80. 5:56三つ目は、選択肢が数百件にもなる場合です。
  81. 5:59グループ化しても探しにくいときは、文字を入力して候補を絞り込める、検索できる別の仕組みも検討してください。
  82. 6:08見た目を整える前に、意味のある分類になっているかを確かめることが大切です。
  83. 6:14公開前に、キーボードだけでも選べるかを一度試しておきましょう。
  84. 6:19ブラウザー互換性を確認します。
  85. 6:21記事が参照するエムディーエヌの記録では、オプトグループタグはクロームが一以降、
  86. 6:27エッジが十二以降、ファイアフォックスが一以降、サファリが四以前の版から対応しています。
  87. 6:32ラベル属性も同じく最初期からの対応です。
  88. 6:35一方、ディセーブルド属性については、サファリでは七以降で、補足条件付きの対応と記録されています。
  89. 6:42全体としてはウェブの初期からある要素なので、対応を理由に使用をためらう場面はまずありません。
  90. 6:48スマートフォンではグループの見出しの表示方法が機種で少し違うため、公開前に実機でも確認しておくと安心です。
  91. 6:55細部の表示差は、実際に開いて目で確かめるのが確実です。
  92. 6:59最後にまとめです。
  93. 7:00オプトグループタグは、セレクトの中の選択肢を意味ごとにグループ化するタグでした。
  94. 7:06ポイントは三つです。
  95. 7:07一つ目、セレクトの中にオプトグループ、その中にオプションという三階層の構造を守ること。
  96. 7:13二つ目、ラベル属性でグループに分かりやすい名前を付けること。
  97. 7:17三つ目、ディセーブルドを付ければグループごと選べなくでき、入れ子はできないことです。
  98. 7:23練習として、好きな講座や都道府県を二つのグループに分けたドロップダウンを作ってみてください。
  99. 7:29長い一覧がぐっと探しやすくなれば、理解は十分です。
  100. 7:32お疲れさまでした。
  101. 7:33次回もお楽しみに。
  102. 7:35身近なフォームでグループ分けを見つけたら、構造を想像してみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

optgroupタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。select の選択肢を label 属性の名前でグループ化します。

解説記事・サンプルコードを読む：HTMLのoptgroupタグとは？属性・使い方・ブラウザー互換性と活用例 →