WEBVTT

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

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

3
00:00:04.615 --> 00:00:08.571
HTMLタグ編の二十八本目は、セレクトタグです。

4
00:00:08.571 --> 00:00:15.658
セレクトは、あらかじめ用意された候補の中から、利用者に選んでもらうための入力部品です。

5
00:00:15.658 --> 00:00:21.098
都道府県や講座名のように、答えが限られている場面でよく使われます。

6
00:00:21.098 --> 00:00:29.998
閉じた状態では選んだ項目が一行で表示され、クリックすると一覧が開く、いわゆるドロップダウンの形が一般的です。

7
00:00:29.998 --> 00:00:36.921
今回は基本の書き方、主な属性、コード例、注意点までを、初心者向けに順番に解説します。

8
00:00:36.921 --> 00:00:42.030
フォームの中でも特によく登場する部品なので、仕組みを早めに理解しておくと、

9
00:00:42.030 --> 00:00:47.140
申し込み画面や設定画面を読む力もぐっと上がります。

10
00:00:47.140 --> 00:00:52.413
セレクトが向いているのは、選ぶ答えがあらかじめ決まっている場面です。

11
00:00:52.413 --> 00:00:58.772
たとえば都道府県、参加する講座、商品の個数など、利用者に文字を打たせるより、

12
00:00:58.772 --> 00:01:05.131
候補から選んでもらう方が入力ミスを防げますし、受け取る側もデータをそろえやすくなります。

13
00:01:05.131 --> 00:01:10.094
逆に候補が何十件もあって探しにくい場合や、候補にない答えも受け付けたい場合は、

14
00:01:10.094 --> 00:01:15.058
テキスト入力や検索できる仕組みの方が向いています。

15
00:01:15.058 --> 00:01:23.588
候補が数件で同時に見比べたいときはラジオボタン、複数自由に選ばせたいときはチェックボックスも選択肢になります。

16
00:01:23.588 --> 00:01:31.808
選ばせる設計は、利用者の負担を減らすだけでなく、表記ゆれのないきれいなデータを集めることにもつながります。

17
00:01:31.808 --> 00:01:34.536
基本の構造はとてもシンプルです。

18
00:01:34.536 --> 00:01:40.504
セレクトには開始タグと終了タグがあり、その内側にオプシヨンを並べます。

19
00:01:40.504 --> 00:01:43.403
一つのオプシヨンが一つの候補です。

20
00:01:43.403 --> 00:01:51.246
利用者が候補を選ぶと、そのオプシヨンに設定された値が、フォームの送信データとして送られます。

21
00:01:51.246 --> 00:01:56.532
画面に表示される文字と、実際に送られる値は分けて考えられます。

22
00:01:56.532 --> 00:02:03.182
表示は分かりやすい日本語、値は短い英数字のコードにするのがよくある書き方です。

23
00:02:03.182 --> 00:02:10.514
入れ子の順番を逆にしたり、セレクトの外にオプシヨンを置いたりしないよう注意しましょう。

24
00:02:10.514 --> 00:02:17.676
この親子の関係がセレクトの土台ですので、まずはこの形を手で写して覚えるのが近道です。

25
00:02:17.676 --> 00:02:20.125
記事の活用事例を見てみましょう。

26
00:02:20.125 --> 00:02:27.623
まずラベルで、この選択欄が講座を選ぶものだと説明し、フォー属性とセレクトのアイディーをそろえます。

27
00:02:27.623 --> 00:02:30.990
セレクトにはネームとリクワイアドを付けます。

28
00:02:30.990 --> 00:02:35.734
最初のオプシヨンは、値が空で、選んでください、という案内です。

29
00:02:35.734 --> 00:02:42.774
これが未選択の状態を表し、リクワイアドと組み合わせることで、選ばずに送信することを防げます。

30
00:02:42.774 --> 00:02:45.835
続く二つのオプシヨンが、本当の候補です。

31
00:02:45.835 --> 00:02:52.415
選んだ講座の値、エイチティーエムエルやシーエスエスが、コースという名前で送信されます。

32
00:02:52.415 --> 00:02:59.608
ブラウザーで開いたら、実際に候補を切り替えて、画面の表示がどう変わるかも観察してみてください。

33
00:02:59.608 --> 00:03:01.992
ここからは主な属性を確認します。

34
00:03:01.992 --> 00:03:04.525
まずネームは、送信時の項目名です。

35
00:03:04.525 --> 00:03:12.422
ネームがないと、選んだ値がフォームのデータに含まれないことがあるので、送信する選択欄には必ず付けましょう。

36
00:03:12.422 --> 00:03:15.998
次にリクワイアドは選択を必須にする真偽属性です。

37
00:03:15.998 --> 00:03:21.064
先頭に空の値の案内を用意しておくと、未選択のままでは送信できません。

38
00:03:21.064 --> 00:03:25.236
最後にディスエーブルドは、操作自体を無効にする属性です。

39
00:03:25.236 --> 00:03:29.855
無効化された部品は選べなくなり、通常は送信対象にもなりません。

40
00:03:29.855 --> 00:03:33.878
理由もなく無効化すると利用者が困るので、条件がそろったときにだけ有効化する、

41
00:03:33.878 --> 00:03:37.901
といった設計とセットで使います。

42
00:03:37.901 --> 00:03:45.500
属性は暗記するより、送信されるかどうか、操作できるかどうか、という観点で整理すると覚えやすくなります。

43
00:03:45.500 --> 00:03:47.285
続いて応用的な属性です。

44
00:03:47.285 --> 00:03:51.895
マルチプルを付けると、複数の候補を同時に選べるようになります。

45
00:03:51.895 --> 00:03:56.655
その場合、見た目はドロップダウンではなく、一覧が開いたリストの形になることが多く、

46
00:03:56.655 --> 00:04:01.414
サイズ属性で表示する行数の目安を指定できます。

47
00:04:01.414 --> 00:04:06.917
ただし複数選択は操作方法が端末で異なり、初心者には伝わりにくいこともあるので、

48
00:04:06.917 --> 00:04:12.420
案内文を添えるか、チェックボックスで代用できないかも検討してください。

49
00:04:12.420 --> 00:04:16.808
オートコンプリートは自動入力に関する指定で、用途に応じた目安として使いますが、

50
00:04:16.808 --> 00:04:21.195
セレクトでは必須の場面は多くありません。

51
00:04:21.195 --> 00:04:28.632
実際に使う前に、パソコンとスマートフォンの両方で、操作感がどう変わるかを確かめる習慣を付けましょう。

52
00:04:28.632 --> 00:04:31.559
オプシヨン側のポイントも押さえましょう。

53
00:04:31.559 --> 00:04:34.485
バリュー属性は、実際に送信される値です。

54
00:04:34.485 --> 00:04:40.265
省略すると、オプシヨンに書かれた表示文字そのものが値として送られますが、

55
00:04:40.265 --> 00:04:46.045
表示を後から変えてもデータが変わらないよう、通常はバリューを明示しておくのが安全です。

56
00:04:46.045 --> 00:04:50.874
最初から選ばれた状態にしたい候補には、セレクテッド属性を付けます。

57
00:04:50.874 --> 00:04:57.020
ただし利用者の答えを勝手に決めてしまう形にならないよう、既定値には慎重さが必要です。

58
00:04:57.020 --> 00:05:02.727
迷う場合は、先頭の案内を初期表示にして、利用者自身に選んでもらう形が無難です。

59
00:05:02.727 --> 00:05:09.604
表示名を直しても送信データが変わらない設計にしておくと、サイトのリニューアルにも強くなります。

60
00:05:09.604 --> 00:05:13.675
候補が増えてきたら、オプトグループでグループ化できます。

61
00:05:13.675 --> 00:05:20.653
オプトグループはセレクトの中に置き、ラベル属性でグループ名を示し、その中にオプシヨンを並べます。

62
00:05:20.653 --> 00:05:26.759
たとえば講座なら、入門と応用に分けるだけで、利用者は目的の候補を探しやすくなります。

63
00:05:26.759 --> 00:05:29.812
グループ名自体は選べる候補ではありません。

64
00:05:29.812 --> 00:05:31.265
あくまで見出しです。

65
00:05:31.265 --> 00:05:38.244
関連するタグとして、オプシヨンとオプトグループはセレクトとセットで覚えると整理しやすくなります。

66
00:05:38.244 --> 00:05:41.733
候補が少ないうちは無理に分ける必要はありません。

67
00:05:41.733 --> 00:05:47.984
グループ化は、見た目の飾りではなく、情報を探しやすくするための構造だと考えてください。

68
00:05:47.984 --> 00:05:50.253
使いやすさの要はラベルです。

69
00:05:50.253 --> 00:05:54.305
セレクト単体では、何を選ぶ欄なのかが伝わりません。

70
00:05:54.305 --> 00:06:04.191
ラベル要素を使って、講座や都道府県といった目的を文字で示し、フォー属性とセレクトのアイディーを一致させて関連付けましょう。

71
00:06:04.191 --> 00:06:10.350
ラベルをクリックしても選択欄にフォーカスが移るので、操作の助けにもなります。

72
00:06:10.350 --> 00:06:15.537
標準のセレクトはキーボードのタブ移動や矢印キーでも操作できます。

73
00:06:15.537 --> 00:06:21.371
その利点を損なわないよう、独自の見た目に作り替えすぎないことも大切です。

74
00:06:21.371 --> 00:06:28.016
三百二十ピクセル程度の狭い画面や文字拡大でも、候補名が欠けないか確認してください。

75
00:06:28.016 --> 00:06:35.796
音声読み上げを使う方にとっても、ラベルの関連付けは内容を理解するための大切な手がかりになります。

76
00:06:35.796 --> 00:06:38.693
ブラウザー互換性は安心できる部類です。

77
00:06:38.693 --> 00:06:44.639
記事が参照するエムディーエヌの記録では、セレクト要素本体はクローム、エッジ、

78
00:06:44.639 --> 00:06:50.585
ファイアフォックス、サファリのいずれでもごく初期のバージョンから対応しています。

79
00:06:50.585 --> 00:06:54.701
リクワイアドやオートコンプリートなど、後から追加された属性は対応開始が少し遅れますが、

80
00:06:54.701 --> 00:06:58.818
現在では広く使えます。

81
00:06:58.818 --> 00:07:01.562
よくある間違いは真偽属性の扱いです。

82
00:07:01.562 --> 00:07:07.660
ディスエーブルド、ドット、イコール、フォルス、と書いても無効化は解除されません。

83
00:07:07.660 --> 00:07:13.301
真偽属性は書いてあるだけで有効なので、外したいときは属性ごと取り除きます。

84
00:07:13.301 --> 00:07:17.723
また選択画面の見た目はオペレーティングシステムやブラウザーで異なるため、

85
00:07:17.723 --> 00:07:22.144
特定の外観を前提にデザインしないでください。

86
00:07:22.144 --> 00:07:23.823
最後に練習とまとめです。

87
00:07:23.823 --> 00:07:30.120
セレクトは、限られた候補から選んでもらう入力部品で、中にオプシヨンを並べるのが基本でした。

88
00:07:30.120 --> 00:07:31.940
大切なポイントは三つです。

89
00:07:31.940 --> 00:07:35.998
一つ目は、ラベルで目的を伝え、ネームで送信名を決めること。

90
00:07:35.998 --> 00:07:41.176
二つ目は、値が空の先頭候補とリクワイアドを組み合わせて、未選択を防ぐこと。

91
00:07:41.176 --> 00:07:47.333
三つ目は、候補が多いときはオプトグループで整理し、複数選択は本当に必要か考えることです。

92
00:07:47.333 --> 00:07:51.741
練習として、記事の講座選択の例を写し、候補を一つ増やしたり、初期選択を変えたりして、

93
00:07:51.741 --> 00:07:56.149
表示と送信値の違いを確かめてみてください。

94
00:07:56.149 --> 00:07:59.368
小さく試して、仕組みを確認しながら少しずつ候補や属性を増やしていくのが、

95
00:07:59.368 --> 00:08:02.586
確実な上達方法です。

96
00:08:02.586 --> 00:08:03.846
お疲れさまでした。

97
00:08:03.846 --> 00:08:07.484
次回もエイチティーエムエルタグの解説を続けましょう。