SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLのsearchタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 8:01動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:01エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の三十本目は、サーチタグです。
  4. 0:08サーチは、その名のとおり検索に関係する操作をひとまとめにするためのタグです。
  5. 0:14サイト内検索の入力欄とボタン、記事の絞り込みといった部品を囲み、ここが検索のための場所だと、
  6. 0:19ブラウザーや支援技術に伝えます。
  7. 0:25見た目を変えるタグではありません。
  8. 0:27今回は役割、フォームとの関係、実際のコード例まで、初心者向けに順番に解説します。
  9. 0:34比較的新しいタグですが、考え方はとてもシンプルです。
  10. 0:38この目印があるだけで、ページの構造がぐっと分かりやすくなります。
  11. 0:44サーチが向いているのは、利用者が何かを探すための操作が集まる場所です。
  12. 0:49代表例は、ページ上部のヘッダーに置くサイト内検索です。
  13. 0:53もう一つは、商品一覧や記事一覧での絞り込みです。
  14. 0:57キーワードを入れる、条件を選ぶ、実行する、といった一連の操作をまとめて囲みます。
  15. 1:03反対に、ログインや申し込み、問い合わせのようなフォームは検索ではないので、
  16. 1:07サーチで囲む対象ではありません。
  17. 1:11目印は、探すための操作かどうかです。
  18. 1:13探す操作が複数あるページでは、それぞれをサーチで分けて置くこともできます。
  19. 1:19身の回りのサイトで、検索窓がどこに置かれているか観察してみるのも良い練習になります。
  20. 1:25基本の形を見てみましょう。
  21. 1:27サーチには開始タグと終了タグがあり、その内側に検索フォームを置きます。
  22. 1:32役割分担が大切です。
  23. 1:33サーチは、あくまで検索操作のまとまりを示す外側の目印です。
  24. 1:37実際にキーワードを送信する働きは、内側のフォームが担当します。
  25. 1:41つまりサーチ単体では検索は動きません。
  26. 1:44検索結果を取ってくる処理は、サーバー側やプログラム側で別に用意するものだと、
  27. 1:48記事でもはっきり説明されています。
  28. 1:52まずは、この二重構造のイメージをつかんでください。
  29. 1:55外側が意味、内側が仕組みです。
  30. 1:57この分担を理解しておくと、ほかのセマンティクス要素を学ぶときにも役立ちます。
  31. 2:02記事の活用事例、教材の検索フォームを読み解きます。
  32. 2:06フォームのアクションには送信先のパス、メソッドにはゲットを指定しています。
  33. 2:13ゲットは、検索キーワードをアドレスに含めて送る方法で、結果のページを共有しやすいのが特徴です。
  34. 2:20ラベルで教材を検索という説明を示し、入力欄と結び付けています。
  35. 2:26入力欄のタイプはサーチ、名前はキューです。
  36. 2:29最後に送信ボタンです。
  37. 2:31注意点として、例にあるスラッシュ、サーチ、スラッシュという送信先は、実際の検索処理を用意して初めて動きます。
  38. 2:40自分のサイトの実在する処理に置き換えてください。
  39. 2:44キーワードを入れて送信すると、アドレスの末尾に検索語が付いて結果ページへ移動する流れも確認してみてください。
  40. 2:53フォームとの関係をもう少し整理します。
  41. 2:56サーチで囲まれた部分は、支援技術からは検索ランドマークとして認識されます。
  42. 3:02ランドマークとは、音声読み上げの利用者がページ内を移動するときの目印になる領域のことです。
  43. 3:09ヘッダーやメインと同じ仲間だと考えてください。
  44. 3:13一方、フォームは入力された値を送信する仕組みそのものです。
  45. 3:18なお、必ずフォームが必要というわけではありません。
  46. 3:22即座に絞り込む検索や、検索ページへのリンク集のように、送信を伴わない検索操作をまとめる場合にもサーチは使えます。
  47. 3:31目印と仕組みを分けて考えることが、セマンティクスを理解する第一歩です。
  48. 3:37検索窓の部品の書き方を確認します。
  49. 3:39入力欄には、タイプ、サーチを指定します。
  50. 3:42検索専用の入力欄になり、ブラウザーによっては入力を消すボタンが付くこともあります。
  51. 3:47次にラベルです。
  52. 3:49ラベルのフォー属性と入力欄のアイディーを同じ値にすると、説明と入力欄が結び付きます。
  53. 3:54読み上げでは入力欄の名前が伝わり、ラベルを押しても入力欄に移動できます。
  54. 3:59そして、ネーム属性の値が、送信時にキーワードに付けられる名前になります。
  55. 4:04この三点セット、ラベル、タイプ、ネームをそろえるのが基本です。
  56. 4:08検索語を空のまま送ったときの扱いも、実装時に決めておくと親切です。
  57. 4:13属性を確認します。
  58. 4:14サーチには、専用の必須属性はありません。
  59. 4:17必要に応じて、どの要素でも使えるグローバル属性を使います。
  60. 4:22アイディーは文書の中で一意な識別子で、ページ内リンクやジャバスクリプトからの参照に使えます。
  61. 4:29クラスは、シーエスエスで見た目を整えたり、複数の要素をまとめて選んだりするときの目印です。
  62. 4:35言語を示すラングや、独自の値を保持するデータ属性も使えます。
  63. 4:40ただしデータ属性は、秘密情報を置く場所ではありません。
  64. 4:44また、フォームや入力欄に付ける属性と、サーチ自身の属性を混同しないよう注意してください。
  65. 4:51属性は少なく、まずはグローバル属性だけで十分に使えるタグです。
  66. 4:56ほかのタグとの使い分けも整理しましょう。
  67. 4:59サーチは置き場所ではなく、役割を示すタグです。
  68. 5:02そのため、ページ上部のヘッダーの中にサーチを置く、といった組み合わせが自然です。
  69. 5:08ナブは主要なリンクの集まり、メインはページの中心的な内容を示します。
  70. 5:14検索がページの中心ならメインの中に置くこともあります。
  71. 5:18そしてディブは意味を持たない箱なので、検索だと伝える目的ならディブではなくサーチが適切です。
  72. 5:25タグ同士は対立するものではなく、場所と役割を重ねて表すものだと覚えてください。
  73. 5:31役割が重なる場面では、読み手と機械のどちらに何を伝えたいかを考えると判断しやすくなります。
  74. 5:38ブラウザー互換性を確認します。
  75. 5:41記事が参照するエムディーエヌの記録では、サーチ要素本体は、クロームとファイアフォックスがバージョン百十八以降、
  76. 5:49サファリが十七以降で対応し、エッジも同じ系統のエンジンで対応しています。
  77. 5:57二千二十三年ごろから主要ブラウザーがそろった、比較的新しい要素です。
  78. 6:03安心材料として、対応していない古い環境でも、内側のフォーム自体はふつうに表示され、
  79. 6:08検索操作はそのまま使えます。
  80. 6:13意味の目印が伝わらないだけで、機能が壊れるわけではありません。
  81. 6:18導入しやすい新タグだといえます。
  82. 6:21対応状況は変わることがあるので、新しく導入するときは最新の情報も確認してください。
  83. 6:28実装前後のチェックポイントをまとめます。
  84. 6:31一つ目、タグを置いただけでは検索は動きません。
  85. 6:35送信先の処理があるか必ず確認してください。
  86. 6:38二つ目、目的が本当に検索や絞り込みかどうか、タグ名ではなく内容の意味から判断します。
  87. 6:45三つ目は操作の確認です。
  88. 6:47タブキーで検索窓とボタンへ移動でき、エンターで実行できるか試してください。
  89. 6:53四つ目は表示です。
  90. 6:55三百二十ピクセル程度の狭い画面や文字拡大時にも、入力欄やボタンが欠けないか見てください。
  91. 7:02最後に開発者ツールで、入れ子の構造が崩れていないかも確かめましょう。
  92. 7:07小さな確認の積み重ねが、誰にでも使える検索窓につながります。
  93. 7:12最後に練習とまとめです。
  94. 7:14サーチは、検索や絞り込みに関係する操作をまとめるタグでした。
  95. 7:19大切なポイントは三つです。
  96. 7:21一つ目、サーチは意味の目印であり、見た目や検索機能そのものではないこと。
  97. 7:27二つ目、送信は内側のフォーム、結果を返す処理はサーバー側と、役割が分かれていること。
  98. 7:34三つ目、専用属性はなく、ラベルや入力欄を正しく組むことが使いやすさにつながることです。
  99. 7:41練習として、学習ページのヘッダーに、教材検索のフォームをサーチで囲んで置いてみてください。
  100. 7:49お疲れさまでした。
  101. 7:50次回もエイチティーエムエルタグの解説を続けましょう。
  102. 7:55小さく作って、実際に検索が動くか試すところまでを一セットにしてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

searchタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。検索や絞り込みに関係する操作をまとめます。検索結果を取得する処理は別に実装します。

解説記事・サンプルコードを読む：HTMLのsearchタグとは？属性・使い方・ブラウザー互換性と活用例 →