WEBVTT

1
00:00:00.000 --> 00:00:00.846
こんにちは。

2
00:00:00.846 --> 00:00:03.949
エイチティーエムエル、リファレンス解説です。

3
00:00:03.949 --> 00:00:07.757
HTMLタグ編の四十四本目は、オプトグループタグです。

4
00:00:07.757 --> 00:00:15.373
オプトグループは、セレクトボックスの中に並ぶ選択肢を、意味の近いもの同士でグループにまとめるためのタグです。

5
00:00:15.373 --> 00:00:21.578
たとえば講座の一覧を、入門と応用に分けて見出し付きで表示する、といった使い方ができます。

6
00:00:21.578 --> 00:00:25.668
選択肢が増えるほど、ただ並べるだけでは探しにくくなります。

7
00:00:25.668 --> 00:00:30.322
グループに分けることで、利用者は目的の項目を素早く見つけられます。

8
00:00:30.322 --> 00:00:33.637
今回は基本の書き方から、ラベルとディセーブルドという二つの専用属性まで、

9
00:00:33.637 --> 00:00:36.951
順に確認していきます。

10
00:00:36.951 --> 00:00:42.028
セレクトとオプションの間に挟まる、中間の整理役だとイメージしてください。

11
00:00:42.028 --> 00:00:44.904
どんな場面で使うのかを整理します。

12
00:00:44.904 --> 00:00:49.133
代表例は、選択肢がたくさんあるドロップダウンです。

13
00:00:49.133 --> 00:00:54.631
講座を入門と応用に分ける、都道府県を関東や関西といった地方ごとに分ける、

14
00:00:54.631 --> 00:01:00.128
商品を飲み物と食べ物に分ける、といった分類が向いています。

15
00:01:00.128 --> 00:01:07.910
グループ名が見出しになるので、利用者はまず大まかな分類を見て、次にその中の選択肢を探せます。

16
00:01:07.910 --> 00:01:14.507
逆に、選択肢が三つや四つしかない場合は、グループ化するほどの効果はありません。

17
00:01:14.507 --> 00:01:21.950
項目が十個を超えて、探しにくさを感じ始めたら、オプトグループの出番と考えてみてください。

18
00:01:21.950 --> 00:01:28.040
分類の軸は、難度、地域、価格帯など、利用者が普段考える分け方が最適です。

19
00:01:28.040 --> 00:01:29.986
基本の書き方を確認します。

20
00:01:29.986 --> 00:01:31.334
構造は三階層です。

21
00:01:31.334 --> 00:01:38.819
一番外側がセレクト、その中にオプトグループ、そして一番内側に実際の選択肢であるオプションを置きます。

22
00:01:38.819 --> 00:01:44.059
この教材では、開始タグと終了タグを省略せず、はっきり書くことにします。

23
00:01:44.059 --> 00:01:46.155
大切な決まりが二つあります。

24
00:01:46.155 --> 00:01:50.646
一つ目は、オプトグループはセレクトの外では使えないことです。

25
00:01:50.646 --> 00:01:56.784
二つ目は、オプトグループの中に、さらにオプトグループを入れ子にはできないことです。

26
00:01:56.784 --> 00:02:00.676
グループの中にグループは作れない、と覚えてください。

27
00:02:00.676 --> 00:02:03.671
階層は浅く、シンプルに保つのが基本です。

28
00:02:03.671 --> 00:02:09.060
書く順番は、外側の入れ物から内側の項目へ、という流れを意識してください。

29
00:02:09.060 --> 00:02:12.825
記事の活用例を、自分の言葉でたどってみましょう。

30
00:02:12.825 --> 00:02:15.335
教材を選ぶセレクトボックスです。

31
00:02:15.335 --> 00:02:21.611
セレクトにはアリアラベルで教材という説明を付け、何を選ぶ欄なのかを伝えています。

32
00:02:21.611 --> 00:02:27.023
その中は、入門と応用という二つのグループに分かれていて、入門にはエイチティーエムエル、

33
00:02:27.023 --> 00:02:32.435
応用にはジャバスクリプトのオプションが入っています。

34
00:02:32.435 --> 00:02:39.809
画面では、入門と応用が太字の見出しのように表示され、その下に選択肢が少し字下げされて並びます。

35
00:02:39.809 --> 00:02:41.691
見出し自体は選べません。

36
00:02:41.691 --> 00:02:45.614
あくまで分類を示すための表示だと理解してください。

37
00:02:45.614 --> 00:02:50.320
小さな例ですが、グループ化の基本の形がすべて詰まっています。

38
00:02:50.320 --> 00:02:52.793
中心となるラベル属性を解説します。

39
00:02:52.793 --> 00:02:56.720
オプトグループのラベルは、そのグループ全体の名前です。

40
00:02:56.720 --> 00:03:05.302
画面の例では、入門というラベルを付けたグループの中に、エイチティーエムエルとシーエスエスの二つの選択肢を入れています。

41
00:03:05.302 --> 00:03:09.811
ラベル属性は、オプトグループを使うときには欠かせない属性です。

42
00:03:09.811 --> 00:03:15.775
これを書かないと、グループに名前が表示されず、分類した意味が利用者に伝わりません。

43
00:03:15.775 --> 00:03:17.375
もう一つ混同注意です。

44
00:03:17.375 --> 00:03:22.175
このラベル属性は、入力欄に説明を付けるラベル要素とは別のものです。

45
00:03:22.175 --> 00:03:26.539
名前が同じでも役割が違うので、取り違えないようにしましょう。

46
00:03:26.539 --> 00:03:31.484
グループ名は短く、誰が見ても分類が一目で分かる言葉を選んでください。

47
00:03:31.484 --> 00:03:36.451
ディセーブルド属性は、グループ全体をまとめて選べなくするためのものです。

48
00:03:36.451 --> 00:03:40.383
たとえば応用講座がまだ準備中なら、そのグループにディセーブルドを付けるだけで、

49
00:03:40.383 --> 00:03:44.315
中の選択肢がすべて選べなくなります。

50
00:03:44.315 --> 00:03:48.179
一つずつオプションを無効化する手間が省けるのが利点です。

51
00:03:48.179 --> 00:03:51.214
ここでも真偽属性の決まりに注意してください。

52
00:03:51.214 --> 00:03:55.905
ディセーブルド、イコール、フォルスと書いても無効化は解除されません。

53
00:03:55.905 --> 00:03:59.216
属性が付いている時点で有効とみなされるからです。

54
00:03:59.216 --> 00:04:03.493
選べるように戻したいときは、属性そのものを取り除いてください。

55
00:04:03.493 --> 00:04:05.977
理由が伝わる補足も添えると親切です。

56
00:04:05.977 --> 00:04:10.392
一時的に休止している分類を隠さずに見せたいときにも向いています。

57
00:04:10.392 --> 00:04:14.691
もう一つの活用例として、都道府県の選択を見てみましょう。

58
00:04:14.691 --> 00:04:20.525
四十七都道府県を五十音順にただ並べると、目的の県を探すのに時間がかかります。

59
00:04:20.525 --> 00:04:25.130
関東、関西のように地方ごとにオプトグループで分けておけば、利用者はまず住んでいる地方を見つけて、

60
00:04:25.130 --> 00:04:29.736
その中から県を選べます。

61
00:04:29.736 --> 00:04:36.491
このように、項目数が多く、はっきりした分類の軸がある場合にグループ化は効果を発揮します。

62
00:04:36.491 --> 00:04:41.558
ただし、グループを細かくしすぎると、かえって一覧が複雑になります。

63
00:04:41.558 --> 00:04:46.163
分類は、利用者が迷わずたどれる程度の数に抑えるのがコツです。

64
00:04:46.163 --> 00:04:50.769
自分の身近な一覧で試すと、分類の効果を実感しやすいでしょう。

65
00:04:50.769 --> 00:04:53.456
三つのタグの役割分担を整理します。

66
00:04:53.456 --> 00:04:56.301
セレクトは、選ぶ欄全体の入れ物です。

67
00:04:56.301 --> 00:05:01.201
オプトグループは、その中の中見出しで、選択肢の分類を示します。

68
00:05:01.201 --> 00:05:05.468
そしてオプションが、実際に選ばれる一つ一つの項目です。

69
00:05:05.468 --> 00:05:10.289
フォームが送信されるときに送られるのは、選ばれたオプションのバリューであり、

70
00:05:10.289 --> 00:05:15.110
グループ名のラベル自体は値として送られません。

71
00:05:15.110 --> 00:05:19.693
グループはあくまで、探しやすくするための整理の仕組みです。

72
00:05:19.693 --> 00:05:28.544
この関係が分かると、前に学んだオプションタグの知識とつながって、セレクト周りの構造がすっきり理解できるはずです。

73
00:05:28.544 --> 00:05:33.602
名前や構造で迷ったら、この三役の分担に立ち返って考えてください。

74
00:05:33.602 --> 00:05:36.239
よくある間違いを三つ確認します。

75
00:05:36.239 --> 00:05:40.195
一つ目は、オプトグループを入れ子にすることです。

76
00:05:40.195 --> 00:05:45.799
大分類の中に小分類を作りたくなる場面はありますが、仕様上できません。

77
00:05:45.799 --> 00:05:47.612
分類は一階層だけです。

78
00:05:47.612 --> 00:05:50.579
二つ目は、ラベル属性の付け忘れです。

79
00:05:50.579 --> 00:05:56.018
名前のないグループは、利用者にとってただの字下げにしか見えません。

80
00:05:56.018 --> 00:05:59.480
三つ目は、選択肢が数百件にもなる場合です。

81
00:05:59.480 --> 00:06:08.216
グループ化しても探しにくいときは、文字を入力して候補を絞り込める、検索できる別の仕組みも検討してください。

82
00:06:08.216 --> 00:06:14.314
見た目を整える前に、意味のある分類になっているかを確かめることが大切です。

83
00:06:14.314 --> 00:06:19.424
公開前に、キーボードだけでも選べるかを一度試しておきましょう。

84
00:06:19.424 --> 00:06:21.501
ブラウザー互換性を確認します。

85
00:06:21.501 --> 00:06:27.179
記事が参照するエムディーエヌの記録では、オプトグループタグはクロームが一以降、

86
00:06:27.179 --> 00:06:32.857
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前の版から対応しています。

87
00:06:32.857 --> 00:06:35.627
ラベル属性も同じく最初期からの対応です。

88
00:06:35.627 --> 00:06:42.274
一方、ディセーブルド属性については、サファリでは七以降で、補足条件付きの対応と記録されています。

89
00:06:42.274 --> 00:06:48.645
全体としてはウェブの初期からある要素なので、対応を理由に使用をためらう場面はまずありません。

90
00:06:48.645 --> 00:06:55.985
スマートフォンではグループの見出しの表示方法が機種で少し違うため、公開前に実機でも確認しておくと安心です。

91
00:06:55.985 --> 00:06:59.724
細部の表示差は、実際に開いて目で確かめるのが確実です。

92
00:06:59.724 --> 00:07:00.935
最後にまとめです。

93
00:07:00.935 --> 00:07:06.315
オプトグループタグは、セレクトの中の選択肢を意味ごとにグループ化するタグでした。

94
00:07:06.315 --> 00:07:07.660
ポイントは三つです。

95
00:07:07.660 --> 00:07:13.445
一つ目、セレクトの中にオプトグループ、その中にオプションという三階層の構造を守ること。

96
00:07:13.445 --> 00:07:17.480
二つ目、ラベル属性でグループに分かりやすい名前を付けること。

97
00:07:17.480 --> 00:07:23.130
三つ目、ディセーブルドを付ければグループごと選べなくでき、入れ子はできないことです。

98
00:07:23.130 --> 00:07:29.318
練習として、好きな講座や都道府県を二つのグループに分けたドロップダウンを作ってみてください。

99
00:07:29.318 --> 00:07:32.681
長い一覧がぐっと探しやすくなれば、理解は十分です。

100
00:07:32.681 --> 00:07:33.891
お疲れさまでした。

101
00:07:33.891 --> 00:07:35.102
次回もお楽しみに。

102
00:07:35.102 --> 00:07:39.810
身近なフォームでグループ分けを見つけたら、構造を想像してみてください。