WEBVTT

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

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

3
00:00:04.833 --> 00:00:09.149
HTMLタグ編の十二本目は、ティーフットタグです。

4
00:00:09.149 --> 00:00:15.018
これは、表の中で、合計など表を締めくくる行をまとめるためのタグです。

5
00:00:15.018 --> 00:00:23.131
たとえば参加者一覧の表なら、午前と午後の人数が並んだあとに、最後に合計何人かを示す行が来ます。

6
00:00:23.131 --> 00:00:30.899
その締めくくりの行を、ほかのデータ行とは別にグループとして示すのがティーフットの役割です。

7
00:00:30.899 --> 00:00:36.164
今回は、表全体の中での位置づけから、基本の書き方、自動で合計されないという大切な注意点まで、

8
00:00:36.164 --> 00:00:41.429
初心者向けに順番に解説します。

9
00:00:41.429 --> 00:00:47.125
成績表や料金表、集計表など、合計のある表は身近にたくさんあります。

10
00:00:47.125 --> 00:00:51.268
その最後の一行を正しく書けるようになりましょう。

11
00:00:51.268 --> 00:00:54.101
まず、表全体の構造を押さえましょう。

12
00:00:54.101 --> 00:00:58.665
大きな表は、行を三つのグループに分けて書くことができます。

13
00:00:58.665 --> 00:01:07.951
見出し行をまとめるティーヘッド、通常のデータ行をまとめるティーボディ、そして締めくくりの行をまとめるティーフットです。

14
00:01:07.951 --> 00:01:12.279
たとえば、項目名だけの行がティーヘッド、明細の一行一行がティーボディ、合計行がティーフット、

15
00:01:12.279 --> 00:01:16.607
という分け方です。

16
00:01:16.607 --> 00:01:21.486
こうしてグループを分けておくと、表の読み順が明確になり、読み上げソフトや検索などの機械にも、

17
00:01:21.486 --> 00:01:26.365
どの行が合計なのかが伝わります。

18
00:01:26.365 --> 00:01:32.817
見た目を整えるためだけの区切りではなく、行の意味を分ける仕組みだと覚えてください。

19
00:01:32.817 --> 00:01:36.752
今回の主役は、その最後を担当するティーフットです。

20
00:01:36.752 --> 00:01:38.633
基本の書き方です。

21
00:01:38.633 --> 00:01:44.277
ティーフットは、開始タグと終了タグを明示して使います。

22
00:01:44.277 --> 00:01:55.354
置く場所はテーブルの中であり、中には行を作るティーアールを入れ、その中に見出しセルやデータセルを置きます。

23
00:01:55.354 --> 00:02:01.938
コード例では、一番上に区分と人数という列見出し、真ん中に午前、十人というデータ、

24
00:02:01.938 --> 00:02:08.522
最後に合計、十人という締めの行が入っています。

25
00:02:08.522 --> 00:02:17.301
ポイントは、合計行をティーボディの中に混ぜず、ティーフットとして独立させることです。

26
00:02:17.301 --> 00:02:24.616
入れ子の順番が崩れると、ブラウザーが自動で補正して、意図と違う構造になることがあるため、

27
00:02:24.616 --> 00:02:31.932
開いたタグを正しい順序で閉じることも意識しましょう。

28
00:02:31.932 --> 00:02:34.369
記事の活用事例を見てみましょう。

29
00:02:34.369 --> 00:02:37.871
テーマは、合計などの集計行を区別することです。

30
00:02:37.871 --> 00:02:41.755
ここでは午前に十人、午後に五人という明細があり、ティーフットの中に合計、

31
00:02:41.755 --> 00:02:45.639
十五人という行を置いています。

32
00:02:45.639 --> 00:02:50.436
合計という文字は、この行の見出しなのでティーエイチで書き、スコープ、イコール、

33
00:02:50.436 --> 00:02:55.233
ローで、この行の見出しであることを示しています。

34
00:02:55.233 --> 00:02:59.193
一方、十五人という値はデータなのでティーディーです。

35
00:02:59.193 --> 00:03:05.208
試すときは、練習用ファイルに表ごと貼り付けて保存し、再読み込みしてから、

36
00:03:05.208 --> 00:03:11.224
開発者ツールのエレメンツで、合計行がティーフットの中に入っているかを確認してください。

37
00:03:11.224 --> 00:03:13.707
ここで、とても大切な注意点です。

38
00:03:13.707 --> 00:03:18.672
ティーフットを置いても、数値が自動で合計されることはありません。

39
00:03:18.672 --> 00:03:23.482
ティーフットは、あくまで、ここが表を締めくくる行のグループです、という意味を示すタグであり、

40
00:03:23.482 --> 00:03:28.292
計算機能は持っていないからです。

41
00:03:28.292 --> 00:03:33.103
合計の数値は、作成者が正しい値を自分で書き込む必要があります。

42
00:03:33.103 --> 00:03:40.861
もし、入力に合わせて合計を自動で更新したい場合は、ジャバスクリプトなどの別の仕組みを組み合わせます。

43
00:03:40.861 --> 00:03:44.119
記事でもこの点ははっきり注意されています。

44
00:03:44.119 --> 00:03:48.542
タグを書けば何か処理が起きる、と思い込まず、タグは意味付け、計算や見た目は別の役割、

45
00:03:48.542 --> 00:03:52.964
と分けて考えることが大切です。

46
00:03:52.964 --> 00:03:57.203
では、ティーフットには具体的にどんな行を入れるのでしょうか。

47
00:03:57.203 --> 00:04:00.452
代表例は、合計や総計、平均といった集計行です。

48
00:04:00.452 --> 00:04:03.702
明細全体をまとめた結果を示す行が向いています。

49
00:04:03.702 --> 00:04:07.941
場合によっては、表全体への注記や補足を入れることもあります。

50
00:04:07.941 --> 00:04:14.581
一方、まだ明細が続いている途中の小計や、通常のデータ行まで何でも入れてよいわけではありません。

51
00:04:14.581 --> 00:04:19.102
それらはティーボディ側の行として扱う方が、意味がはっきりします。

52
00:04:19.102 --> 00:04:24.330
判断に迷ったら、この行は表全体を締めくくる内容か、と自問してみてください。

53
00:04:24.330 --> 00:04:30.264
締めくくりならティーフット、個別の明細ならティーボディ、という基準が目安になります。

54
00:04:30.264 --> 00:04:31.790
属性を確認します。

55
00:04:31.790 --> 00:04:37.048
ティーフットには、この記事で必須となる専用の属性はありません。

56
00:04:37.048 --> 00:04:41.627
必要な場合は、どの要素でも使える共通属性を利用します。

57
00:04:41.627 --> 00:04:46.969
文書の中で一意な識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、

58
00:04:46.969 --> 00:04:52.311
内容の言語を示すラングなどです。

59
00:04:52.311 --> 00:04:59.264
アプリ独自の値を保持するデータ属性も使えますが、秘密情報を置く場所ではありません。

60
00:04:59.264 --> 00:05:05.709
コード例では、クラスを付けて、合計行だけ見た目を変えられるようにしています。

61
00:05:05.709 --> 00:05:13.171
注意したいのは、子要素であるティーエイチやティーディーに付ける属性と混同しないことです。

62
00:05:13.171 --> 00:05:16.732
スコープはあくまで見出しセル側の属性です。

63
00:05:16.732 --> 00:05:20.922
グループが分かれていると、見た目の調整も楽になります。

64
00:05:20.922 --> 00:05:26.042
シーエスエスでティーフットをセレクターに指定すれば、合計行だけを太字にしたり、

65
00:05:26.042 --> 00:05:31.163
背景色を付けたり、上に太い区切り線を引いたりできます。

66
00:05:31.163 --> 00:05:37.369
コード例は、合計行を太字にして薄い背景色を付け、セルの上に太い線を引く指定です。

67
00:05:37.369 --> 00:05:40.162
ただし、順番を間違えないでください。

68
00:05:40.162 --> 00:05:44.119
先に意味としてティーフットで正しくグループ化し、見た目はシーエスエスで付ける、

69
00:05:44.119 --> 00:05:48.076
という分け方が基本です。

70
00:05:48.076 --> 00:05:52.731
ただ目立たせたいからという理由だけで選ぶタグではありません。

71
00:05:52.731 --> 00:05:58.472
意味と見た目を分けて考えることが、ほかのタグにも共通する大切な考え方です。

72
00:05:58.472 --> 00:06:01.068
よくある間違いを三つ紹介します。

73
00:06:01.068 --> 00:06:06.260
一つ目は、合計行をティーボディの中に紛れ込ませてしまうことです。

74
00:06:06.260 --> 00:06:11.615
見た目は同じ表に見えても、締めくくりの行という意味が伝わりません。

75
00:06:11.615 --> 00:06:18.592
二つ目は、先ほど触れたとおり、ティーフットを書けば自動で合計されると思い込むことです。

76
00:06:18.592 --> 00:06:21.674
値は自分で書くものだと覚えてください。

77
00:06:21.674 --> 00:06:27.353
三つ目は、その手書きの合計が、明細の実際の合計と合っていないことです。

78
00:06:27.353 --> 00:06:29.625
公開前に必ず検算しましょう。

79
00:06:29.625 --> 00:06:38.711
あわせて、三百二十ピクセル程度の狭い画面や、文字を拡大したときにも、合計行が欠けずに読めるか確認すると安心です。

80
00:06:38.711 --> 00:06:43.092
構造と数値、その両方をチェックする習慣を付けましょう。

81
00:06:43.092 --> 00:06:45.376
ブラウザー互換性を確認します。

82
00:06:45.376 --> 00:06:51.163
記事が参照するエムディーエヌの記録では、ティーフットはクロームが一以降、

83
00:06:51.163 --> 00:06:56.950
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降に対応しています。

84
00:06:56.950 --> 00:07:03.042
古くからある基本的な表の要素なので、現在の主要なブラウザーでは安心して使えます。

85
00:07:03.042 --> 00:07:10.504
ただし、これは要素本体の対応状況であり、周りで使う新しい属性や機能まで保証するものではありません。

86
00:07:10.504 --> 00:07:16.672
また、アイオーエス版サファリやアンドロイド版クロームなど、モバイル版では実装や配信条件が異なる場合もあるため、

87
00:07:16.672 --> 00:07:22.840
公開前には対象の実機でも表示を確認しておきましょう。

88
00:07:22.840 --> 00:07:24.691
最後に練習とまとめです。

89
00:07:24.691 --> 00:07:29.473
ティーフットは、合計など表を締めくくる行をまとめるタグでした。

90
00:07:29.473 --> 00:07:31.479
大切なポイントは三つです。

91
00:07:31.479 --> 00:07:35.412
一つ目は、見出しはティーヘッド、本体はティーボディ、締めはティーフットと、

92
00:07:35.412 --> 00:07:39.346
意味でグループを分けること。

93
00:07:39.346 --> 00:07:45.517
二つ目は、ティーフットを書いても自動で合計はされず、数値は自分で正しく書くこと。

94
00:07:45.517 --> 00:07:51.841
三つ目は、合計行を目立たせる見た目はシーエスエスで付け、意味付けと分けることです。

95
00:07:51.841 --> 00:08:00.017
練習として、自分で作った集計表の合計行を、ティーボディからティーフットへ移すところから始めてみてください。

96
00:08:00.017 --> 00:08:01.406
お疲れさまでした。

97
00:08:01.406 --> 00:08:05.108
次回もHTMLタグを一つずつ学んでいきましょう。