SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:01エイチティーエムエル、リファレンス解説です。
  3. 0:04HTMLタグ編の十二本目は、ティーフットタグです。
  4. 0:09これは、表の中で、合計など表を締めくくる行をまとめるためのタグです。
  5. 0:15たとえば参加者一覧の表なら、午前と午後の人数が並んだあとに、最後に合計何人かを示す行が来ます。
  6. 0:23その締めくくりの行を、ほかのデータ行とは別にグループとして示すのがティーフットの役割です。
  7. 0:30今回は、表全体の中での位置づけから、基本の書き方、自動で合計されないという大切な注意点まで、
  8. 0:36初心者向けに順番に解説します。
  9. 0:41成績表や料金表、集計表など、合計のある表は身近にたくさんあります。
  10. 0:47その最後の一行を正しく書けるようになりましょう。
  11. 0:51まず、表全体の構造を押さえましょう。
  12. 0:54大きな表は、行を三つのグループに分けて書くことができます。
  13. 0:58見出し行をまとめるティーヘッド、通常のデータ行をまとめるティーボディ、そして締めくくりの行をまとめるティーフットです。
  14. 1:07たとえば、項目名だけの行がティーヘッド、明細の一行一行がティーボディ、合計行がティーフット、
  15. 1:12という分け方です。
  16. 1:16こうしてグループを分けておくと、表の読み順が明確になり、読み上げソフトや検索などの機械にも、
  17. 1:21どの行が合計なのかが伝わります。
  18. 1:26見た目を整えるためだけの区切りではなく、行の意味を分ける仕組みだと覚えてください。
  19. 1:32今回の主役は、その最後を担当するティーフットです。
  20. 1:36基本の書き方です。
  21. 1:38ティーフットは、開始タグと終了タグを明示して使います。
  22. 1:44置く場所はテーブルの中であり、中には行を作るティーアールを入れ、その中に見出しセルやデータセルを置きます。
  23. 1:55コード例では、一番上に区分と人数という列見出し、真ん中に午前、十人というデータ、
  24. 2:01最後に合計、十人という締めの行が入っています。
  25. 2:08ポイントは、合計行をティーボディの中に混ぜず、ティーフットとして独立させることです。
  26. 2:17入れ子の順番が崩れると、ブラウザーが自動で補正して、意図と違う構造になることがあるため、
  27. 2:24開いたタグを正しい順序で閉じることも意識しましょう。
  28. 2:31記事の活用事例を見てみましょう。
  29. 2:34テーマは、合計などの集計行を区別することです。
  30. 2:37ここでは午前に十人、午後に五人という明細があり、ティーフットの中に合計、
  31. 2:41十五人という行を置いています。
  32. 2:45合計という文字は、この行の見出しなのでティーエイチで書き、スコープ、イコール、
  33. 2:50ローで、この行の見出しであることを示しています。
  34. 2:55一方、十五人という値はデータなのでティーディーです。
  35. 2:59試すときは、練習用ファイルに表ごと貼り付けて保存し、再読み込みしてから、
  36. 3:05開発者ツールのエレメンツで、合計行がティーフットの中に入っているかを確認してください。
  37. 3:11ここで、とても大切な注意点です。
  38. 3:13ティーフットを置いても、数値が自動で合計されることはありません。
  39. 3:18ティーフットは、あくまで、ここが表を締めくくる行のグループです、という意味を示すタグであり、
  40. 3:23計算機能は持っていないからです。
  41. 3:28合計の数値は、作成者が正しい値を自分で書き込む必要があります。
  42. 3:33もし、入力に合わせて合計を自動で更新したい場合は、ジャバスクリプトなどの別の仕組みを組み合わせます。
  43. 3:40記事でもこの点ははっきり注意されています。
  44. 3:44タグを書けば何か処理が起きる、と思い込まず、タグは意味付け、計算や見た目は別の役割、
  45. 3:48と分けて考えることが大切です。
  46. 3:52では、ティーフットには具体的にどんな行を入れるのでしょうか。
  47. 3:57代表例は、合計や総計、平均といった集計行です。
  48. 4:00明細全体をまとめた結果を示す行が向いています。
  49. 4:03場合によっては、表全体への注記や補足を入れることもあります。
  50. 4:07一方、まだ明細が続いている途中の小計や、通常のデータ行まで何でも入れてよいわけではありません。
  51. 4:14それらはティーボディ側の行として扱う方が、意味がはっきりします。
  52. 4:19判断に迷ったら、この行は表全体を締めくくる内容か、と自問してみてください。
  53. 4:24締めくくりならティーフット、個別の明細ならティーボディ、という基準が目安になります。
  54. 4:30属性を確認します。
  55. 4:31ティーフットには、この記事で必須となる専用の属性はありません。
  56. 4:37必要な場合は、どの要素でも使える共通属性を利用します。
  57. 4:41文書の中で一意な識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
  58. 4:46内容の言語を示すラングなどです。
  59. 4:52アプリ独自の値を保持するデータ属性も使えますが、秘密情報を置く場所ではありません。
  60. 4:59コード例では、クラスを付けて、合計行だけ見た目を変えられるようにしています。
  61. 5:05注意したいのは、子要素であるティーエイチやティーディーに付ける属性と混同しないことです。
  62. 5:13スコープはあくまで見出しセル側の属性です。
  63. 5:16グループが分かれていると、見た目の調整も楽になります。
  64. 5:20シーエスエスでティーフットをセレクターに指定すれば、合計行だけを太字にしたり、
  65. 5:26背景色を付けたり、上に太い区切り線を引いたりできます。
  66. 5:31コード例は、合計行を太字にして薄い背景色を付け、セルの上に太い線を引く指定です。
  67. 5:37ただし、順番を間違えないでください。
  68. 5:40先に意味としてティーフットで正しくグループ化し、見た目はシーエスエスで付ける、
  69. 5:44という分け方が基本です。
  70. 5:48ただ目立たせたいからという理由だけで選ぶタグではありません。
  71. 5:52意味と見た目を分けて考えることが、ほかのタグにも共通する大切な考え方です。
  72. 5:58よくある間違いを三つ紹介します。
  73. 6:01一つ目は、合計行をティーボディの中に紛れ込ませてしまうことです。
  74. 6:06見た目は同じ表に見えても、締めくくりの行という意味が伝わりません。
  75. 6:11二つ目は、先ほど触れたとおり、ティーフットを書けば自動で合計されると思い込むことです。
  76. 6:18値は自分で書くものだと覚えてください。
  77. 6:21三つ目は、その手書きの合計が、明細の実際の合計と合っていないことです。
  78. 6:27公開前に必ず検算しましょう。
  79. 6:29あわせて、三百二十ピクセル程度の狭い画面や、文字を拡大したときにも、合計行が欠けずに読めるか確認すると安心です。
  80. 6:38構造と数値、その両方をチェックする習慣を付けましょう。
  81. 6:43ブラウザー互換性を確認します。
  82. 6:45記事が参照するエムディーエヌの記録では、ティーフットはクロームが一以降、
  83. 6:51エッジが十二以降、ファイアフォックスが一以降、サファリが一以降に対応しています。
  84. 6:56古くからある基本的な表の要素なので、現在の主要なブラウザーでは安心して使えます。
  85. 7:03ただし、これは要素本体の対応状況であり、周りで使う新しい属性や機能まで保証するものではありません。
  86. 7:10また、アイオーエス版サファリやアンドロイド版クロームなど、モバイル版では実装や配信条件が異なる場合もあるため、
  87. 7:16公開前には対象の実機でも表示を確認しておきましょう。
  88. 7:22最後に練習とまとめです。
  89. 7:24ティーフットは、合計など表を締めくくる行をまとめるタグでした。
  90. 7:29大切なポイントは三つです。
  91. 7:31一つ目は、見出しはティーヘッド、本体はティーボディ、締めはティーフットと、
  92. 7:35意味でグループを分けること。
  93. 7:39二つ目は、ティーフットを書いても自動で合計はされず、数値は自分で正しく書くこと。
  94. 7:45三つ目は、合計行を目立たせる見た目はシーエスエスで付け、意味付けと分けることです。
  95. 7:51練習として、自分で作った集計表の合計行を、ティーボディからティーフットへ移すところから始めてみてください。
  96. 8:00お疲れさまでした。
  97. 8:01次回もHTMLタグを一つずつ学んでいきましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

tfootタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。合計など、表を締めくくる行をまとめます。

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