SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:01エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の十本目は、ティーヘッドタグです。
  4. 0:09これは、表の見出し行をまとめるためのタグで、列の見出しを本文のデータと分けて示す役割を持ちます。
  5. 0:17たとえば成績表や料金表では、一番上の行に項目名が並び、その下に実際のデータが続きます。
  6. 0:24この一番上の見出し部分を囲むのがティーヘッドです。
  7. 0:29今回は、基本の書き方から、ティーエイチとの組み合わせ、よくある間違いまで、
  8. 0:33初心者向けに順番に解説します。
  9. 0:38表を正しく組み立てる力が付くタグです。
  10. 0:41表は、料金表や時間割、商品一覧など、身近なページにたくさん登場します。
  11. 0:47その表を読みやすくする第一歩が、このタグです。
  12. 0:51まず、表全体の構造を押さえましょう。
  13. 0:54テーブルの中身は、大きく三つのグループに分けられます。
  14. 0:57見出しを担当するティーヘッド、本文のデータを担当するティーボディ、そして合計や注釈などを置くティーフットです。
  15. 1:05このようにグループ分けをしておくと、ブラウザーや読み上げソフトが、どこが見出しでどこがデータなのかを正しく理解できます。
  16. 1:14見た目が同じ表でも、構造が整理されているかどうかで、情報の伝わり方は大きく変わります。
  17. 1:20ティーヘッドは、その整理の出発点になるタグです。
  18. 1:24たとえば、長い表で見出し行がはっきり分かれていると、途中の行を読んでいても、
  19. 1:28数字が何を表すのかを見失いにくくなります。
  20. 1:32基本の書き方です。
  21. 1:34ティーヘッドは、開始タグと終了タグを明示して使います。
  22. 1:39中にはティーアールで見出しの行を作り、その行の中にセルを並べます。
  23. 1:46置く場所も決まっていて、テーブルタグの直後、ティーボディよりも前に書くのが基本の順番です。
  24. 1:55コード例では、項目と値という二つの見出しの下に、名前とサンプルというデータが続いています。
  25. 2:04まずは、この骨組みの形をそのまま覚えてください。
  26. 2:09順番を守ることで、ブラウザーが表を正しく組み立てられます。
  27. 2:15なお、ティーヘッドの中には、見出しの行を一行だけ置くのが一般的です。
  28. 2:21複数行の見出しが必要な場合も、行ごとにティーアールを分けて書きます。
  29. 2:28ここで大切な組み合わせを紹介します。
  30. 2:31ティーヘッドは行をまとめる枠であり、それだけでは見出しセルにはなりません。
  31. 2:36実際の見出しセルは、ティーエイチタグで作ります。
  32. 2:39さらに、スコープ属性にコルを指定すると、そのセルが列の見出しであることを明示できます。
  33. 2:45コード例のように、教材と難度という見出しにスコープ、コルを付けると、読み上げソフトがデータを読むときに、
  34. 2:51どの列の見出しなのかを一緒に伝えてくれます。
  35. 2:56ティーヘッドとティーエイチは、必ずセットで考えるようにしましょう。
  36. 3:01読み上げソフトを使う人にとって、この対応付けは特に重要です。
  37. 3:05目で見れば分かる並びも、音声では順番に読み上げられるためです。
  38. 3:09記事の活用事例を見てみましょう。
  39. 3:12テーマは、列見出しの行を本文と分けることです。
  40. 3:16コードでは、ティーヘッドの中に見出し行があり、教材と難度という二つのティーエイチが並んでいます。
  41. 3:23その下のティーボディには、エイチティーエムエルと入門という実際のデータが入っています。
  42. 3:30見出しとデータで使うタグが分かれている点に注目してください。
  43. 3:35試すときは、練習用ファイルに表ごと貼り付け、保存して再読み込みし、開発者ツールで構造が崩れていないかを確認するとよいでしょう。
  44. 3:45この例のように、見出しが二列だけの小さな表でも、グループ分けの書き方を練習しておくと、
  45. 3:50大きな表を作るときに応用できます。
  46. 3:55注意点を一つ、はっきりさせておきます。
  47. 3:57ティーヘッドで囲んだからといって、中のセルが自動で見出しになるわけではありません。
  48. 4:03中身がティーディーのままでは、それはデータのセルとして扱われます。
  49. 4:07見出しにしたいセルは、必ずティーエイチに書き換えてください。
  50. 4:11また、長い表を印刷するときに見出し行が各ページに繰り返されるかどうかは、
  51. 4:15ブラウザーやシーエスエスの指定によって変わります。
  52. 4:19ティーヘッドを書けば必ず繰り返される、と思い込まないことも大切です。
  53. 4:23実際の表示は、使う環境で確認しましょう。
  54. 4:26開発者ツールで要素を確認すれば、ティーヘッドの中にティーエイチがあるかどうかを、
  55. 4:29その場でチェックできます。
  56. 4:33見た目の整え方も見ておきましょう。
  57. 4:35ティーヘッドにクラスを付けたり、ティーヘッドの中のティーエイチを対象にしたりして、
  58. 4:41シーエスエスで背景色や文字の配置を指定できます。
  59. 4:46コード例では、見出しセルに薄い背景色を付け、文字を左揃えにしています。
  60. 4:51ここでも原則は同じで、意味付けはエイチティーエムエル、見た目はシーエスエス、
  61. 4:55と役割を分けることです。
  62. 4:59太字や色だけで見出しらしく見せても、タグがティーディーのままでは意味は伝わりません。
  63. 5:05まず正しいタグを選び、そのあとで装飾を考えましょう。
  64. 5:09クラス名は、表の種類が分かるような名前を付けると管理しやすくなります。
  65. 5:15後から自分で読んでも迷わない名前を選びましょう。
  66. 5:18属性を確認します。
  67. 5:20ティーヘッドには、この記事で必須とされる専用の属性はありません。
  68. 5:24必要に応じて、ほかの要素でも使う共通のグローバル属性を利用します。
  69. 5:29文書の中で一意な識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
  70. 5:34内容の言語を示すラングなどです。
  71. 5:38アプリ独自の値を保持するデータ属性も使えますが、秘密情報を置く場所ではありません。
  72. 5:44なお、スコープ属性はティーヘッドではなく、見出しセルのティーエイチに付ける属性です。
  73. 5:51付ける場所を混同しないように注意してください。
  74. 5:54属性をたくさん付けることが目的ではありません。
  75. 5:57必要なときに、決められた属性を正しい要素に付ける、という姿勢が大切です。
  76. 6:03よくある間違いを三つ紹介します。
  77. 6:05一つ目は、ティーヘッドの中にティーディーを置いたままにしてしまうことです。
  78. 6:10見出しセルはティーエイチでなければならない、という基本を忘れないでください。
  79. 6:16二つ目は、書く順番の間違いです。
  80. 6:18ティーヘッドはティーボディより前に置くもので、後ろに書くとブラウザーが補正し、
  81. 6:22意図と違う構造になる場合があります。
  82. 6:27三つ目は、行を作るティーアールを省略して、ティーエイチを直接置いてしまうことです。
  83. 6:33行、セル、という階層を必ず守りましょう。
  84. 6:35書いたあとは、表を一度上から下まで読み直し、見出しとデータの対応が合っているかを目視で確認する習慣を付けましょう。
  85. 6:44ブラウザー互換性を確認します。
  86. 6:46記事が参照するエムディーエヌの記録では、ティーヘッドはクロームが一以降、
  87. 6:51エッジが十二以降、ファイアフォックスが一以降、サファリが一以降に対応しています。
  88. 6:57サファリには補足条件があるとされているため、細かな表示が重要な場合は出典の注記も確認してください。
  89. 7:04とはいえ、古くからある基本要素であり、現在の主要なブラウザーでは安心して使えます。
  90. 7:09ただし、この表が示すのは要素本体の対応です。
  91. 7:12印刷時の繰り返し表示など、細かな挙動は環境ごとに試す習慣を持ちましょう。
  92. 7:18モバイル版のブラウザーでは実装や配信条件が異なる場合もあるため、公開前には対象の実機でも表示を試しておくと安心です。
  93. 7:26最後に練習とまとめです。
  94. 7:27ティーヘッドは、表の見出し行をまとめ、列見出しを本文と分けて示すタグでした。
  95. 7:33大切なポイントは三つです。
  96. 7:34一つ目は、ティーヘッドは行をまとめる枠で、見出しセル自体はティーエイチで作ること。
  97. 7:40二つ目は、テーブル、ティーヘッド、ティーアール、ティーエイチという階層と、
  98. 7:44ティーボディより前に置く順番を守ること。
  99. 7:48三つ目は、見た目の装飾はシーエスエスに任せ、意味はタグで伝えることです。
  100. 7:53練習として、自作ページの表にティーヘッドとティーボディの区切りを付けてみてください。
  101. 7:59お疲れさまでした。
  102. 8:00次回もHTMLタグを一つずつ学んでいきましょう。
  103. 8:03確認のコツは、表の途中のデータを一つ指さして、その列の見出しを声に出して言えるかどうかを確かめることです。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

theadタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。表の見出し行をまとめます。

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