WEBVTT

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

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

3
00:00:03.657 --> 00:00:06.921
HTMLタグ編の四十三本目は、オプションタグです。

4
00:00:06.921 --> 00:00:12.276
オプションは、ドロップダウンのリストに並ぶ、一つ一つの選択肢を作るためのタグです。

5
00:00:12.276 --> 00:00:16.389
たとえば講座を選ぶ欄で、エイチティーエムエル入門、シーエスエス入門と並んでいる項目、

6
00:00:16.389 --> 00:00:20.503
あれが一つずつオプションで作られています。

7
00:00:20.503 --> 00:00:26.119
大きな特徴は、画面に表示する名前と、フォームで実際に送信する値を別々にできることです。

8
00:00:26.119 --> 00:00:31.865
今回は基本の書き方から、値、初期選択、無効化といった専用属性まで、順に確認していきます。

9
00:00:31.865 --> 00:00:35.260
身近なフォームを思い浮かべながら聞いてみてください。

10
00:00:35.260 --> 00:00:37.784
どんな場面で使うのかを整理します。

11
00:00:37.784 --> 00:00:44.615
代表例は、申し込みフォームで都道府県を選ぶ、講座やプランを選ぶ、といったドロップダウンです。

12
00:00:44.615 --> 00:00:49.293
利用者に文章を自由に打たせるのではなく、あらかじめ用意した候補の中から選んでもらうことで、

13
00:00:49.293 --> 00:00:53.971
表記のばらつきや入力ミスを防げます。

14
00:00:53.971 --> 00:00:56.495
ここで役割を分けて考えてください。

15
00:00:56.495 --> 00:01:02.584
選ぶ欄全体の入れ物がセレクトタグで、その中身の一つ一つの候補がオプションタグです。

16
00:01:02.584 --> 00:01:06.890
候補を増やしたいときは、オプションを一行追加するだけです。

17
00:01:06.890 --> 00:01:10.306
まずはこの親と子の関係を押さえておきましょう。

18
00:01:10.306 --> 00:01:15.800
選ぶ操作は、入力する操作よりもずっと手軽で、利用者の負担も小さくなります。

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

20
00:01:17.702 --> 00:01:22.090
オプションの開始タグと終了タグで、表示したい名前を囲みます。

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

22
00:01:26.478 --> 00:01:27.941
大切なのは配置です。

23
00:01:27.941 --> 00:01:33.207
オプションは単独では使えず、必ずセレクトタグなどの親要素の中に置きます。

24
00:01:33.207 --> 00:01:42.422
画面の例では、セレクトの中に二つのオプションを並べているので、ブラウザーでは二つの候補を持つドロップダウンとして表示されます。

25
00:01:42.422 --> 00:01:47.834
逆に、セレクトの外にオプションだけを置いても、選択肢としては機能しません。

26
00:01:47.834 --> 00:01:50.760
親の中に子を並べる、この構造が基本です。

27
00:01:50.760 --> 00:01:56.172
書き方自体はとても短いので、まずはこの形を手で打って覚えてしまいましょう。

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

29
00:02:00.082 --> 00:02:02.689
講座を選ぶセレクトボックスです。

30
00:02:02.689 --> 00:02:10.183
セレクトには、アリアラベルで講座という説明を付け、この欄が何を選ぶ場所なのかを伝えています。

31
00:02:10.183 --> 00:02:18.655
中には二つのオプションが入り、最初のエイチティーエムエル入門には、バリューとセレクテッドが付いています。

32
00:02:18.655 --> 00:02:24.194
つまり、最初からこれが選ばれた状態で表示され、送信されるときは入門という長い名前ではなく、

33
00:02:24.194 --> 00:02:29.734
エイチティーエムエルという短い値が送られます。

34
00:02:29.734 --> 00:02:35.925
表示と送信を分ける実例として、次のセクションから属性を一つずつ見ていきます。

35
00:02:35.925 --> 00:02:41.464
小さな例ですが、属性の働きがすべて詰まった、実務でもよく見る形です。

36
00:02:41.464 --> 00:02:44.148
中心となるバリュー属性を解説します。

37
00:02:44.148 --> 00:02:49.070
バリューは、その選択肢が選ばれたときにフォームで送信される値です。

38
00:02:49.070 --> 00:02:58.913
画面の例では、利用者の目にはエイチティーエムエル入門と見えますが、プログラムが受け取るのはエイチティーエムエルという短い文字列です。

39
00:02:58.913 --> 00:03:04.133
人にとって分かりやすい表示と、処理しやすい値を分けられるのが利点です。

40
00:03:04.133 --> 00:03:10.546
なお、バリューを省略した場合は、タグの中に書いた表示文字そのものが値として使われます。

41
00:03:10.546 --> 00:03:17.854
省略できるからといって任せきりにせず、受け取る側で扱いやすい値を意識して指定するのがおすすめです。

42
00:03:17.854 --> 00:03:23.372
この分離があるおかげで、表示名をあとから自由に直せるのも実務上の利点です。

43
00:03:23.372 --> 00:03:29.044
セレクテッド属性は、その選択肢を最初から選ばれた状態にするためのものです。

44
00:03:29.044 --> 00:03:34.869
これは真偽属性と呼ばれるタイプで、属性を書いてあるかどうかだけで決まります。

45
00:03:34.869 --> 00:03:39.927
よく選ばれる項目や、前回の条件などを初期値にしたいときに使います。

46
00:03:39.927 --> 00:03:41.613
注意点が二つあります。

47
00:03:41.613 --> 00:03:48.051
一つ目は、単一選択のセレクトでは、複数のオプションにセレクテッドを付けないことです。

48
00:03:48.051 --> 00:03:50.351
初期選択は原則一つに絞ります。

49
00:03:50.351 --> 00:03:56.176
二つ目は、セレクテッドが決めるのはページを開いた直後の状態だということです。

50
00:03:56.176 --> 00:04:03.227
利用者が選んだあとの現在の値は、ジャバスクリプトでは親のセレクトのバリューなどから調べます。

51
00:04:03.227 --> 00:04:08.592
初期値が適切だと、利用者は何も選ばずにそのまま送信することもできます。

52
00:04:08.592 --> 00:04:13.120
ディセーブルド属性は、その選択肢を選べなくするためのものです。

53
00:04:13.120 --> 00:04:20.861
たとえば募集が終わった講座や、準備中のコースなど、存在は知らせたいけれど今は選ばせたくない項目に使います。

54
00:04:20.861 --> 00:04:26.119
無効にした項目は、選べないだけでなく、フォームの送信対象にもなりません。

55
00:04:26.119 --> 00:04:29.478
ここでも真偽属性の落とし穴に注意してください。

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

57
00:04:34.444 --> 00:04:37.949
属性が付いている時点で有効とみなされるためです。

58
00:04:37.949 --> 00:04:44.522
選び直せるようにしたいときは、値を書き換えるのではなく、属性そのものを取り除いてください。

59
00:04:44.522 --> 00:04:49.780
選べない理由が伝わるよう、準備中などの補足を文字に含めておくと親切です。

60
00:04:49.780 --> 00:04:54.292
ラベル属性は、選択肢の表示名を短くしたいときに使う属性です。

61
00:04:54.292 --> 00:05:04.671
タグの中には詳しい名前を書いておき、ラベル属性に短い名前を指定すると、ブラウザーによっては一覧でその短い名前のほうが優先して表示されます。

62
00:05:04.671 --> 00:05:10.537
ただし、表示の扱いはブラウザーごとに差があるため、ラベルに頼らなければ意味が伝わらない書き方は避け、

63
00:05:10.537 --> 00:05:16.403
中の文章だけでも内容が分かるようにしておくのが安全です。

64
00:05:16.403 --> 00:05:18.058
もう一つ混同注意です。

65
00:05:18.058 --> 00:05:23.473
このラベル属性は、入力欄に説明を付けるラベル要素とはまったくの別物です。

66
00:05:23.473 --> 00:05:27.384
名前が同じでも、役割を取り違えないようにしましょう。

67
00:05:27.384 --> 00:05:32.648
共通属性のアイディーやクラスも併用でき、スタイル調整にも利用できます。

68
00:05:32.648 --> 00:05:38.458
オプションが登場する親は、セレクトだけではありません。

69
00:05:38.458 --> 00:05:44.591
選択肢が多いときは、オプトグループタグで意味の近いオプションをグループにまとめ、

70
00:05:44.591 --> 00:05:50.723
見出しを付けて探しやすくできます。

71
00:05:50.723 --> 00:05:59.761
画面の例では、ウェブ制作というグループの中にエイチティーエムエル入門を入れています。

72
00:05:59.761 --> 00:06:03.204
もう一つの親がデータリストです。

73
00:06:03.204 --> 00:06:14.608
こちらではオプションが、文字入力欄に対する入力候補として使われ、候補以外の文字を打つことも禁止されません。

74
00:06:14.608 --> 00:06:20.956
同じオプションでも、親がセレクトなら選ぶ項目、データリストなら候補の提示と、

75
00:06:20.956 --> 00:06:27.304
役割が少し変わる点を覚えておいてください。

76
00:06:27.304 --> 00:06:34.620
候補が増えてきたら、構造を工夫するだけで使い勝手は大きく変わります。

77
00:06:34.620 --> 00:06:36.692
ブラウザー互換性を確認します。

78
00:06:36.692 --> 00:06:42.216
記事が参照するエムディーエヌの記録では、オプションタグはクロームが一以降、

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

80
00:06:47.741 --> 00:06:51.953
今回扱ったバリュー、セレクテッド、ディセーブルド、ラベルといった属性についても、

81
00:06:51.953 --> 00:06:56.166
同じく最初期からの対応が記録されています。

82
00:06:56.166 --> 00:07:01.967
ウェブのごく初期からある要素なので、対応を理由に使用をためらう場面はまずありません。

83
00:07:01.967 --> 00:07:06.317
ただし、ラベル属性の表示のされ方のように細部にはブラウザー差があるため、

84
00:07:06.317 --> 00:07:10.668
実際の表示は手元の環境でも一度確認しておくと安心です。

85
00:07:10.668 --> 00:07:15.640
スマートフォンでのプルダウン表示も含めて、公開前に確認しておきましょう。

86
00:07:15.640 --> 00:07:17.024
最後にまとめです。

87
00:07:17.024 --> 00:07:22.409
オプションタグは、セレクトなどの親の中に置く、一つ一つの選択肢でした。

88
00:07:22.409 --> 00:07:23.947
ポイントは三つです。

89
00:07:23.947 --> 00:07:29.331
一つ目、入れ物がセレクト、候補がオプションという親子の構造を守ること。

90
00:07:29.331 --> 00:07:34.869
二つ目、バリュー属性で、利用者に見せる名前と送信する値を分けられること。

91
00:07:34.869 --> 00:07:42.714
三つ目、セレクテッドで初期選択を決め、ディセーブルドで選べなくし、ラベルで短い表示名を補えることです。

92
00:07:42.714 --> 00:07:51.790
練習として、好きな講座を三つ並べ、一つにセレクテッド、一つにディセーブルドを付けたドロップダウンを作ってみてください。

93
00:07:51.790 --> 00:07:55.175
表示と送信の違いが見えれば、理解は十分です。

94
00:07:55.175 --> 00:08:00.251
まずは小さなセレクトボックスから、自分の手で試してみてくださいね。

95
00:08:00.251 --> 00:08:01.636
お疲れさまでした。

96
00:08:01.636 --> 00:08:03.020
次回もお楽しみに。