WEBVTT

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

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

3
00:00:04.682 --> 00:00:08.360
HTMLタグ編の三十本目は、サーチタグです。

4
00:00:08.360 --> 00:00:14.714
サーチは、その名のとおり検索に関係する操作をひとまとめにするためのタグです。

5
00:00:14.714 --> 00:00:19.897
サイト内検索の入力欄とボタン、記事の絞り込みといった部品を囲み、ここが検索のための場所だと、

6
00:00:19.897 --> 00:00:25.080
ブラウザーや支援技術に伝えます。

7
00:00:25.080 --> 00:00:27.922
見た目を変えるタグではありません。

8
00:00:27.922 --> 00:00:34.610
今回は役割、フォームとの関係、実際のコード例まで、初心者向けに順番に解説します。

9
00:00:34.610 --> 00:00:38.958
比較的新しいタグですが、考え方はとてもシンプルです。

10
00:00:38.958 --> 00:00:44.308
この目印があるだけで、ページの構造がぐっと分かりやすくなります。

11
00:00:44.308 --> 00:00:49.531
サーチが向いているのは、利用者が何かを探すための操作が集まる場所です。

12
00:00:49.531 --> 00:00:53.560
代表例は、ページ上部のヘッダーに置くサイト内検索です。

13
00:00:53.560 --> 00:00:57.142
もう一つは、商品一覧や記事一覧での絞り込みです。

14
00:00:57.142 --> 00:01:03.111
キーワードを入れる、条件を選ぶ、実行する、といった一連の操作をまとめて囲みます。

15
00:01:03.111 --> 00:01:07.066
反対に、ログインや申し込み、問い合わせのようなフォームは検索ではないので、

16
00:01:07.066 --> 00:01:11.021
サーチで囲む対象ではありません。

17
00:01:11.021 --> 00:01:13.707
目印は、探すための操作かどうかです。

18
00:01:13.707 --> 00:01:19.228
探す操作が複数あるページでは、それぞれをサーチで分けて置くこともできます。

19
00:01:19.228 --> 00:01:25.496
身の回りのサイトで、検索窓がどこに置かれているか観察してみるのも良い練習になります。

20
00:01:25.496 --> 00:01:27.294
基本の形を見てみましょう。

21
00:01:27.294 --> 00:01:32.136
サーチには開始タグと終了タグがあり、その内側に検索フォームを置きます。

22
00:01:32.136 --> 00:01:33.519
役割分担が大切です。

23
00:01:33.519 --> 00:01:37.530
サーチは、あくまで検索操作のまとまりを示す外側の目印です。

24
00:01:37.530 --> 00:01:41.818
実際にキーワードを送信する働きは、内側のフォームが担当します。

25
00:01:41.818 --> 00:01:44.447
つまりサーチ単体では検索は動きません。

26
00:01:44.447 --> 00:01:48.251
検索結果を取ってくる処理は、サーバー側やプログラム側で別に用意するものだと、

27
00:01:48.251 --> 00:01:52.055
記事でもはっきり説明されています。

28
00:01:52.055 --> 00:01:55.513
まずは、この二重構造のイメージをつかんでください。

29
00:01:55.513 --> 00:01:57.588
外側が意味、内側が仕組みです。

30
00:01:57.588 --> 00:02:02.844
この分担を理解しておくと、ほかのセマンティクス要素を学ぶときにも役立ちます。

31
00:02:02.844 --> 00:02:06.987
記事の活用事例、教材の検索フォームを読み解きます。

32
00:02:06.987 --> 00:02:13.119
フォームのアクションには送信先のパス、メソッドにはゲットを指定しています。

33
00:02:13.119 --> 00:02:20.908
ゲットは、検索キーワードをアドレスに含めて送る方法で、結果のページを共有しやすいのが特徴です。

34
00:02:20.908 --> 00:02:26.045
ラベルで教材を検索という説明を示し、入力欄と結び付けています。

35
00:02:26.045 --> 00:02:29.526
入力欄のタイプはサーチ、名前はキューです。

36
00:02:29.526 --> 00:02:31.348
最後に送信ボタンです。

37
00:02:31.348 --> 00:02:40.298
注意点として、例にあるスラッシュ、サーチ、スラッシュという送信先は、実際の検索処理を用意して初めて動きます。

38
00:02:40.298 --> 00:02:44.275
自分のサイトの実在する処理に置き換えてください。

39
00:02:44.275 --> 00:02:53.224
キーワードを入れて送信すると、アドレスの末尾に検索語が付いて結果ページへ移動する流れも確認してみてください。

40
00:02:53.224 --> 00:02:56.338
フォームとの関係をもう少し整理します。

41
00:02:56.338 --> 00:03:02.403
サーチで囲まれた部分は、支援技術からは検索ランドマークとして認識されます。

42
00:03:02.403 --> 00:03:09.779
ランドマークとは、音声読み上げの利用者がページ内を移動するときの目印になる領域のことです。

43
00:03:09.779 --> 00:03:13.549
ヘッダーやメインと同じ仲間だと考えてください。

44
00:03:13.549 --> 00:03:18.302
一方、フォームは入力された値を送信する仕組みそのものです。

45
00:03:18.302 --> 00:03:22.400
なお、必ずフォームが必要というわけではありません。

46
00:03:22.400 --> 00:03:31.579
即座に絞り込む検索や、検索ページへのリンク集のように、送信を伴わない検索操作をまとめる場合にもサーチは使えます。

47
00:03:31.579 --> 00:03:37.316
目印と仕組みを分けて考えることが、セマンティクスを理解する第一歩です。

48
00:03:37.316 --> 00:03:39.636
検索窓の部品の書き方を確認します。

49
00:03:39.636 --> 00:03:42.365
入力欄には、タイプ、サーチを指定します。

50
00:03:42.365 --> 00:03:47.961
検索専用の入力欄になり、ブラウザーによっては入力を消すボタンが付くこともあります。

51
00:03:47.961 --> 00:03:49.052
次にラベルです。

52
00:03:49.052 --> 00:03:54.784
ラベルのフォー属性と入力欄のアイディーを同じ値にすると、説明と入力欄が結び付きます。

53
00:03:54.784 --> 00:03:59.697
読み上げでは入力欄の名前が伝わり、ラベルを押しても入力欄に移動できます。

54
00:03:59.697 --> 00:04:04.610
そして、ネーム属性の値が、送信時にキーワードに付けられる名前になります。

55
00:04:04.610 --> 00:04:08.841
この三点セット、ラベル、タイプ、ネームをそろえるのが基本です。

56
00:04:08.841 --> 00:04:13.344
検索語を空のまま送ったときの扱いも、実装時に決めておくと親切です。

57
00:04:13.344 --> 00:04:14.712
属性を確認します。

58
00:04:14.712 --> 00:04:17.751
サーチには、専用の必須属性はありません。

59
00:04:17.751 --> 00:04:22.158
必要に応じて、どの要素でも使えるグローバル属性を使います。

60
00:04:22.158 --> 00:04:29.148
アイディーは文書の中で一意な識別子で、ページ内リンクやジャバスクリプトからの参照に使えます。

61
00:04:29.148 --> 00:04:35.986
クラスは、シーエスエスで見た目を整えたり、複数の要素をまとめて選んだりするときの目印です。

62
00:04:35.986 --> 00:04:40.544
言語を示すラングや、独自の値を保持するデータ属性も使えます。

63
00:04:40.544 --> 00:04:44.647
ただしデータ属性は、秘密情報を置く場所ではありません。

64
00:04:44.647 --> 00:04:51.333
また、フォームや入力欄に付ける属性と、サーチ自身の属性を混同しないよう注意してください。

65
00:04:51.333 --> 00:04:56.044
属性は少なく、まずはグローバル属性だけで十分に使えるタグです。

66
00:04:56.044 --> 00:04:59.152
ほかのタグとの使い分けも整理しましょう。

67
00:04:59.152 --> 00:05:02.726
サーチは置き場所ではなく、役割を示すタグです。

68
00:05:02.726 --> 00:05:08.942
そのため、ページ上部のヘッダーの中にサーチを置く、といった組み合わせが自然です。

69
00:05:08.942 --> 00:05:14.226
ナブは主要なリンクの集まり、メインはページの中心的な内容を示します。

70
00:05:14.226 --> 00:05:18.422
検索がページの中心ならメインの中に置くこともあります。

71
00:05:18.422 --> 00:05:25.570
そしてディブは意味を持たない箱なので、検索だと伝える目的ならディブではなくサーチが適切です。

72
00:05:25.570 --> 00:05:31.631
タグ同士は対立するものではなく、場所と役割を重ねて表すものだと覚えてください。

73
00:05:31.631 --> 00:05:38.624
役割が重なる場面では、読み手と機械のどちらに何を伝えたいかを考えると判断しやすくなります。

74
00:05:38.624 --> 00:05:41.269
ブラウザー互換性を確認します。

75
00:05:41.269 --> 00:05:49.292
記事が参照するエムディーエヌの記録では、サーチ要素本体は、クロームとファイアフォックスがバージョン百十八以降、

76
00:05:49.292 --> 00:05:57.314
サファリが十七以降で対応し、エッジも同じ系統のエンジンで対応しています。

77
00:05:57.314 --> 00:06:03.310
二千二十三年ごろから主要ブラウザーがそろった、比較的新しい要素です。

78
00:06:03.310 --> 00:06:08.158
安心材料として、対応していない古い環境でも、内側のフォーム自体はふつうに表示され、

79
00:06:08.158 --> 00:06:13.007
検索操作はそのまま使えます。

80
00:06:13.007 --> 00:06:18.473
意味の目印が伝わらないだけで、機能が壊れるわけではありません。

81
00:06:18.473 --> 00:06:21.295
導入しやすい新タグだといえます。

82
00:06:21.295 --> 00:06:28.524
対応状況は変わることがあるので、新しく導入するときは最新の情報も確認してください。

83
00:06:28.524 --> 00:06:31.784
実装前後のチェックポイントをまとめます。

84
00:06:31.784 --> 00:06:35.532
一つ目、タグを置いただけでは検索は動きません。

85
00:06:35.532 --> 00:06:38.955
送信先の処理があるか必ず確認してください。

86
00:06:38.955 --> 00:06:45.800
二つ目、目的が本当に検索や絞り込みかどうか、タグ名ではなく内容の意味から判断します。

87
00:06:45.800 --> 00:06:47.756
三つ目は操作の確認です。

88
00:06:47.756 --> 00:06:53.787
タブキーで検索窓とボタンへ移動でき、エンターで実行できるか試してください。

89
00:06:53.787 --> 00:06:55.254
四つ目は表示です。

90
00:06:55.254 --> 00:07:02.425
三百二十ピクセル程度の狭い画面や文字拡大時にも、入力欄やボタンが欠けないか見てください。

91
00:07:02.425 --> 00:07:07.966
最後に開発者ツールで、入れ子の構造が崩れていないかも確かめましょう。

92
00:07:07.966 --> 00:07:12.856
小さな確認の積み重ねが、誰にでも使える検索窓につながります。

93
00:07:12.856 --> 00:07:14.842
最後に練習とまとめです。

94
00:07:14.842 --> 00:07:19.806
サーチは、検索や絞り込みに関係する操作をまとめるタグでした。

95
00:07:19.806 --> 00:07:21.957
大切なポイントは三つです。

96
00:07:21.957 --> 00:07:27.913
一つ目、サーチは意味の目印であり、見た目や検索機能そのものではないこと。

97
00:07:27.913 --> 00:07:34.863
二つ目、送信は内側のフォーム、結果を返す処理はサーバー側と、役割が分かれていること。

98
00:07:34.863 --> 00:07:41.978
三つ目、専用属性はなく、ラベルや入力欄を正しく組むことが使いやすさにつながることです。

99
00:07:41.978 --> 00:07:49.424
練習として、学習ページのヘッダーに、教材検索のフォームをサーチで囲んで置いてみてください。

100
00:07:49.424 --> 00:07:50.913
お疲れさまでした。

101
00:07:50.913 --> 00:07:55.215
次回もエイチティーエムエルタグの解説を続けましょう。

102
00:07:55.215 --> 00:08:01.172
小さく作って、実際に検索が動くか試すところまでを一セットにしてください。