WEBVTT

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

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

3
00:00:03.698 --> 00:00:08.080
エイチティーエムエルタグ編の九十一本目は、データリストタグです。

4
00:00:08.080 --> 00:00:13.969
データリストは、文字入力欄に対して、あらかじめ用意した入力候補のリストを示す要素です。

5
00:00:13.969 --> 00:00:21.912
検索窓で文字を打ち始めると候補が下に並ぶ、あの仕組みを、エイチティーエムエルだけで作るための部品だと考えてください。

6
00:00:21.912 --> 00:00:26.705
ただし大切なのは、データリスト単独では画面に何も表示されないことです。

7
00:00:26.705 --> 00:00:30.540
入力欄であるインプットと結び付けて初めて候補が現れます。

8
00:00:30.540 --> 00:00:34.580
今回は、その連携の仕組み、オプションの書き方、セレクトとの違い、コード例、

9
00:00:34.580 --> 00:00:38.620
互換性、よくある間違いまで順番に確認します。

10
00:00:38.620 --> 00:00:40.289
まず連携の仕組みです。

11
00:00:40.289 --> 00:00:42.261
つなぎ役は二つの属性です。

12
00:00:42.261 --> 00:00:46.660
インプット側では、リスト属性に候補リストの名前を書きます。

13
00:00:46.660 --> 00:00:51.666
データリスト側では、アイディー属性に、まったく同じ名前を書きます。

14
00:00:51.666 --> 00:00:55.383
この二つが一致したとき、ブラウザーは入力欄と候補リストを一組だと理解し、

15
00:00:55.383 --> 00:00:59.099
入力中に候補を表示します。

16
00:00:59.099 --> 00:01:05.471
逆に言えば、スペルが一文字でも違う、あるいは片方を書き忘れると、候補は一切出ません。

17
00:01:05.471 --> 00:01:10.932
エラー表示も出ないので、動かないときはまずこの対応関係を疑ってください。

18
00:01:10.932 --> 00:01:17.000
名前は文書の中で重複しないものを選び、役割が分かる名前を付けるのがおすすめです。

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

20
00:01:19.087 --> 00:01:25.669
この教材では、開始タグと終了タグを明示し、その間に候補となるオプションを並べます。

21
00:01:25.669 --> 00:01:33.536
画面の例では、まずラベルで学びたい言語という説明を付け、インプットのアイディーと対応させています。

22
00:01:33.536 --> 00:01:39.155
次にインプットのリスト属性が、データリストのアイディーを指しています。

23
00:01:39.155 --> 00:01:47.825
試すときは、練習用ファイルのボディの適切な位置に、ラベル、インプット、データリストをセットで写してください。

24
00:01:47.825 --> 00:01:53.042
保存して再読み込みし、入力欄に文字を入れたり、欄をクリックしたりしたときに候補が現れるか、

25
00:01:53.042 --> 00:01:58.260
開発者ツールでも入れ子を確認しましょう。

26
00:01:58.260 --> 00:02:00.470
記事の活用事例を読み解きます。

27
00:02:00.470 --> 00:02:03.269
目的は、自由入力に候補を補うことです。

28
00:02:03.269 --> 00:02:08.204
利用者がエイチ、と打ち始めれば、エイチティーエムエルが候補として絞り込まれて表示され、

29
00:02:08.204 --> 00:02:13.140
クリックやキー操作で選ぶだけで入力が完了します。

30
00:02:13.140 --> 00:02:20.800
長い駅名、都道府県名、商品名など、打ち間違いが起きやすく、よく使う値が決まっている場面で特に役立ちます。

31
00:02:20.800 --> 00:02:24.778
そして重要なのは、候補はあくまで手助けだという点です。

32
00:02:24.778 --> 00:02:32.439
候補にない言葉、たとえばジャバスクリプトを学びたい人が、そのまま自由に打ち込んで送信することもできます。

33
00:02:32.439 --> 00:02:35.680
この自由さが、データリストの最大の特徴です。

34
00:02:35.680 --> 00:02:38.974
候補の中身であるオプションの書き方です。

35
00:02:38.974 --> 00:02:42.432
候補一つにつき、オプションを一つ書きます。

36
00:02:42.432 --> 00:02:49.513
バリュー属性に書いた値が、候補として表示され、選ばれたときに入力欄へ入る値になります。

37
00:02:49.513 --> 00:02:54.453
画面の例では、東京、大阪、福岡という都市名が候補になります。

38
00:02:54.453 --> 00:02:59.476
ブラウザーによっては、バリューの横に補足の文字を添えて表示できる場合もありますが、

39
00:02:59.476 --> 00:03:04.499
見え方はブラウザーごとにかなり違います。

40
00:03:04.499 --> 00:03:11.415
そのため、候補として伝えたい一番大切な言葉は、バリュー自体に含めておくのが安全です。

41
00:03:11.415 --> 00:03:18.332
候補の数が多すぎると選びにくくなるので、よく使うものに絞る配慮も忘れないでください。

42
00:03:18.332 --> 00:03:21.908
よく混同されるセレクトとの違いを整理します。

43
00:03:21.908 --> 00:03:28.085
セレクトはドロップダウンから、用意された候補の中からだけ選ばせる仕組みです。

44
00:03:28.085 --> 00:03:36.701
都道府県や支払い方法のように、答えが決まっていて、それ以外を受け付けたくない場合はセレクトが向いています。

45
00:03:36.701 --> 00:03:41.740
一方データリストは、候補を示しつつ、候補以外の入力も許します。

46
00:03:41.740 --> 00:03:50.356
駅名の検索窓のように、候補で助けたいけれど、候補にない目的地もあり得る場面ではデータリストが向いています。

47
00:03:50.356 --> 00:03:55.232
記事も、候補だけから選ばせるならセレクト、と明言しています。

48
00:03:55.232 --> 00:03:59.784
禁止したいのか、助けたいのか、その目的で選んでください。

49
00:03:59.784 --> 00:04:01.112
属性についてです。

50
00:04:01.112 --> 00:04:05.688
データリストには、この記事で必須となる専用の属性はありません。

51
00:04:05.688 --> 00:04:09.673
ただし、連携のためにアイディーは実質的に欠かせません。

52
00:04:09.673 --> 00:04:16.167
インプットのリスト属性と一致するアイディーがなければ、候補リストとして働かないからです。

53
00:04:16.167 --> 00:04:22.808
そのほか、クラスやラングなど、多くの要素で使えるグローバル属性は必要に応じて利用できます。

54
00:04:22.808 --> 00:04:29.450
注意したいのは、候補側のオプションに付けるバリューなど、子要素の属性と混同しないことです。

55
00:04:29.450 --> 00:04:40.372
また、データリスト自体はふだん画面に見えない要素なので、クラスを付けたからといって候補の見た目が自由に変えられるわけではない点も覚えておきましょう。

56
00:04:40.372 --> 00:04:43.377
どんな入力欄と組めるかを確認します。

57
00:04:43.377 --> 00:04:48.886
中心になるのは、テキストやサーチといった文字を入力するタイプです。

58
00:04:48.886 --> 00:04:54.562
検索キーワード、都市名、言語名など、文字の候補と相性がよいからです。

59
00:04:54.562 --> 00:04:59.904
ブラウザーによっては、数値、日付、色などのタイプでも候補が働く場合がありますが、

60
00:04:59.904 --> 00:05:05.247
表示のされ方や対応状況はタイプごとに異なります。

61
00:05:05.247 --> 00:05:13.761
一方、チェックボックスやラジオボタンのように、文字を打たない入力にはデータリストは結び付けられません。

62
00:05:13.761 --> 00:05:21.440
使いたいタイプで本当に候補が出るかは、対象ブラウザーで実際に試してから採用を決めてください。

63
00:05:21.440 --> 00:05:23.880
ブラウザー互換性を確認します。

64
00:05:23.880 --> 00:05:30.875
記事が紹介するエムディーエヌのデータでは、データリスト要素本体は、クロームが二十以降、

65
00:05:30.875 --> 00:05:37.870
エッジが十二以降、ファイアフォックスが四以降、サファリが十二・一以降に対応しています。

66
00:05:37.870 --> 00:05:45.027
長く使われている要素ですが、サファリだけは比較的新しい版からである点に注意してください。

67
00:05:45.027 --> 00:05:54.788
また、この表は要素本体の対応開始版を示すもので、候補の表示方法や絞り込みの挙動まで同じことを保証するものではありません。

68
00:05:54.788 --> 00:06:00.644
特にスマートフォンでは、候補の出方がパソコンと大きく違う場合があります。

69
00:06:00.644 --> 00:06:04.548
実機で入力しやすさを確認する習慣を付けましょう。

70
00:06:04.548 --> 00:06:07.131
よくある間違いを三つ挙げます。

71
00:06:07.131 --> 00:06:14.881
一つ目は、インプットのリスト属性とデータリストのアイディーの名前が一致していないことです。

72
00:06:14.881 --> 00:06:19.875
候補が出ない原因の筆頭で、スペルの違いを見直してください。

73
00:06:19.875 --> 00:06:25.730
二つ目は、データリストが候補以外の値を禁止してくれると思うことです。

74
00:06:25.730 --> 00:06:27.625
禁止機能はありません。

75
00:06:27.625 --> 00:06:33.997
送信された値が想定内かどうかは、受け取り側でも必ず確認する必要があります。

76
00:06:33.997 --> 00:06:40.369
三つ目は、データリストを置くだけで候補一覧が常時表示されると思うことです。

77
00:06:40.369 --> 00:06:43.468
通常は入力操作のときにだけ現れます。

78
00:06:43.468 --> 00:06:52.768
あわせて、三百二十ピクセル程度の小さい画面幅や文字拡大でも、入力欄が欠けずに操作できるかを確認してください。

79
00:06:52.768 --> 00:06:53.804
まとめです。

80
00:06:53.804 --> 00:07:02.090
データリストは、入力欄に候補リストを補いながら、候補以外の自由な入力も受け付けるための要素です。

81
00:07:02.090 --> 00:07:05.370
最後にチェックリストで確認しましょう。

82
00:07:05.370 --> 00:07:11.585
まず、インプットのリスト属性とデータリストのアイディーが一致しているか。

83
00:07:11.585 --> 00:07:17.800
次に、候補はオプションのバリューで書かれ、よく使うものに絞られているか。

84
00:07:17.800 --> 00:07:25.741
そして、候補だけに限定したい場面ではないか、限定したいならセレクトを選ぶ判断ができているか。

85
00:07:25.741 --> 00:07:30.230
この三点がそろえば、入力しやすいフォームになります。

86
00:07:30.230 --> 00:07:33.855
これでデータリストタグの解説を終わります。

87
00:07:33.855 --> 00:07:38.516
ぜひ、検索窓や言語の入力欄で実際に試してみてください。