WEBVTT

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

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

3
00:00:04.856 --> 00:00:09.019
HTMLタグ編の十本目は、ティーヘッドタグです。

4
00:00:09.019 --> 00:00:17.344
これは、表の見出し行をまとめるためのタグで、列の見出しを本文のデータと分けて示す役割を持ちます。

5
00:00:17.344 --> 00:00:24.802
たとえば成績表や料金表では、一番上の行に項目名が並び、その下に実際のデータが続きます。

6
00:00:24.802 --> 00:00:29.138
この一番上の見出し部分を囲むのがティーヘッドです。

7
00:00:29.138 --> 00:00:33.648
今回は、基本の書き方から、ティーエイチとの組み合わせ、よくある間違いまで、

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

9
00:00:38.157 --> 00:00:41.452
表を正しく組み立てる力が付くタグです。

10
00:00:41.452 --> 00:00:47.523
表は、料金表や時間割、商品一覧など、身近なページにたくさん登場します。

11
00:00:47.523 --> 00:00:51.512
その表を読みやすくする第一歩が、このタグです。

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

13
00:00:54.101 --> 00:00:57.985
テーブルの中身は、大きく三つのグループに分けられます。

14
00:00:57.985 --> 00:01:05.897
見出しを担当するティーヘッド、本文のデータを担当するティーボディ、そして合計や注釈などを置くティーフットです。

15
00:01:05.897 --> 00:01:14.527
このようにグループ分けをしておくと、ブラウザーや読み上げソフトが、どこが見出しでどこがデータなのかを正しく理解できます。

16
00:01:14.527 --> 00:01:20.713
見た目が同じ表でも、構造が整理されているかどうかで、情報の伝わり方は大きく変わります。

17
00:01:20.713 --> 00:01:24.165
ティーヘッドは、その整理の出発点になるタグです。

18
00:01:24.165 --> 00:01:28.409
たとえば、長い表で見出し行がはっきり分かれていると、途中の行を読んでいても、

19
00:01:28.409 --> 00:01:32.652
数字が何を表すのかを見失いにくくなります。

20
00:01:32.652 --> 00:01:34.453
基本の書き方です。

21
00:01:34.453 --> 00:01:39.858
ティーヘッドは、開始タグと終了タグを明示して使います。

22
00:01:39.858 --> 00:01:46.463
中にはティーアールで見出しの行を作り、その行の中にセルを並べます。

23
00:01:46.463 --> 00:01:55.470
置く場所も決まっていて、テーブルタグの直後、ティーボディよりも前に書くのが基本の順番です。

24
00:01:55.470 --> 00:02:04.477
コード例では、項目と値という二つの見出しの下に、名前とサンプルというデータが続いています。

25
00:02:04.477 --> 00:02:09.281
まずは、この骨組みの形をそのまま覚えてください。

26
00:02:09.281 --> 00:02:15.085
順番を守ることで、ブラウザーが表を正しく組み立てられます。

27
00:02:15.085 --> 00:02:21.891
なお、ティーヘッドの中には、見出しの行を一行だけ置くのが一般的です。

28
00:02:21.891 --> 00:02:28.696
複数行の見出しが必要な場合も、行ごとにティーアールを分けて書きます。

29
00:02:28.696 --> 00:02:31.247
ここで大切な組み合わせを紹介します。

30
00:02:31.247 --> 00:02:36.489
ティーヘッドは行をまとめる枠であり、それだけでは見出しセルにはなりません。

31
00:02:36.489 --> 00:02:39.890
実際の見出しセルは、ティーエイチタグで作ります。

32
00:02:39.890 --> 00:02:45.983
さらに、スコープ属性にコルを指定すると、そのセルが列の見出しであることを明示できます。

33
00:02:45.983 --> 00:02:51.226
コード例のように、教材と難度という見出しにスコープ、コルを付けると、読み上げソフトがデータを読むときに、

34
00:02:51.226 --> 00:02:56.469
どの列の見出しなのかを一緒に伝えてくれます。

35
00:02:56.469 --> 00:03:01.145
ティーヘッドとティーエイチは、必ずセットで考えるようにしましょう。

36
00:03:01.145 --> 00:03:05.395
読み上げソフトを使う人にとって、この対応付けは特に重要です。

37
00:03:05.395 --> 00:03:09.788
目で見れば分かる並びも、音声では順番に読み上げられるためです。

38
00:03:09.788 --> 00:03:12.358
記事の活用事例を見てみましょう。

39
00:03:12.358 --> 00:03:16.053
テーマは、列見出しの行を本文と分けることです。

40
00:03:16.053 --> 00:03:23.763
コードでは、ティーヘッドの中に見出し行があり、教材と難度という二つのティーエイチが並んでいます。

41
00:03:23.763 --> 00:03:30.671
その下のティーボディには、エイチティーエムエルと入門という実際のデータが入っています。

42
00:03:30.671 --> 00:03:35.490
見出しとデータで使うタグが分かれている点に注目してください。

43
00:03:35.490 --> 00:03:45.610
試すときは、練習用ファイルに表ごと貼り付け、保存して再読み込みし、開発者ツールで構造が崩れていないかを確認するとよいでしょう。

44
00:03:45.610 --> 00:03:50.429
この例のように、見出しが二列だけの小さな表でも、グループ分けの書き方を練習しておくと、

45
00:03:50.429 --> 00:03:55.248
大きな表を作るときに応用できます。

46
00:03:55.248 --> 00:03:57.735
注意点を一つ、はっきりさせておきます。

47
00:03:57.735 --> 00:04:03.102
ティーヘッドで囲んだからといって、中のセルが自動で見出しになるわけではありません。

48
00:04:03.102 --> 00:04:07.422
中身がティーディーのままでは、それはデータのセルとして扱われます。

49
00:04:07.422 --> 00:04:11.349
見出しにしたいセルは、必ずティーエイチに書き換えてください。

50
00:04:11.349 --> 00:04:15.341
また、長い表を印刷するときに見出し行が各ページに繰り返されるかどうかは、

51
00:04:15.341 --> 00:04:19.334
ブラウザーやシーエスエスの指定によって変わります。

52
00:04:19.334 --> 00:04:23.784
ティーヘッドを書けば必ず繰り返される、と思い込まないことも大切です。

53
00:04:23.784 --> 00:04:26.402
実際の表示は、使う環境で確認しましょう。

54
00:04:26.402 --> 00:04:29.871
開発者ツールで要素を確認すれば、ティーヘッドの中にティーエイチがあるかどうかを、

55
00:04:29.871 --> 00:04:33.340
その場でチェックできます。

56
00:04:33.340 --> 00:04:35.978
見た目の整え方も見ておきましょう。

57
00:04:35.978 --> 00:04:41.022
ティーヘッドにクラスを付けたり、ティーヘッドの中のティーエイチを対象にしたりして、

58
00:04:41.022 --> 00:04:46.066
シーエスエスで背景色や文字の配置を指定できます。

59
00:04:46.066 --> 00:04:51.498
コード例では、見出しセルに薄い背景色を付け、文字を左揃えにしています。

60
00:04:51.498 --> 00:04:55.378
ここでも原則は同じで、意味付けはエイチティーエムエル、見た目はシーエスエス、

61
00:04:55.378 --> 00:04:59.258
と役割を分けることです。

62
00:04:59.258 --> 00:05:05.776
太字や色だけで見出しらしく見せても、タグがティーディーのままでは意味は伝わりません。

63
00:05:05.776 --> 00:05:09.811
まず正しいタグを選び、そのあとで装飾を考えましょう。

64
00:05:09.811 --> 00:05:15.243
クラス名は、表の種類が分かるような名前を付けると管理しやすくなります。

65
00:05:15.243 --> 00:05:18.968
後から自分で読んでも迷わない名前を選びましょう。

66
00:05:18.968 --> 00:05:20.282
属性を確認します。

67
00:05:20.282 --> 00:05:24.954
ティーヘッドには、この記事で必須とされる専用の属性はありません。

68
00:05:24.954 --> 00:05:29.772
必要に応じて、ほかの要素でも使う共通のグローバル属性を利用します。

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

70
00:05:34.371 --> 00:05:38.970
内容の言語を示すラングなどです。

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

72
00:05:44.956 --> 00:05:51.088
なお、スコープ属性はティーヘッドではなく、見出しセルのティーエイチに付ける属性です。

73
00:05:51.088 --> 00:05:54.446
付ける場所を混同しないように注意してください。

74
00:05:54.446 --> 00:05:57.804
属性をたくさん付けることが目的ではありません。

75
00:05:57.804 --> 00:06:03.060
必要なときに、決められた属性を正しい要素に付ける、という姿勢が大切です。

76
00:06:03.060 --> 00:06:05.399
よくある間違いを三つ紹介します。

77
00:06:05.399 --> 00:06:10.807
一つ目は、ティーヘッドの中にティーディーを置いたままにしてしまうことです。

78
00:06:10.807 --> 00:06:16.361
見出しセルはティーエイチでなければならない、という基本を忘れないでください。

79
00:06:16.361 --> 00:06:18.700
二つ目は、書く順番の間違いです。

80
00:06:18.700 --> 00:06:22.866
ティーヘッドはティーボディより前に置くもので、後ろに書くとブラウザーが補正し、

81
00:06:22.866 --> 00:06:27.032
意図と違う構造になる場合があります。

82
00:06:27.032 --> 00:06:33.025
三つ目は、行を作るティーアールを省略して、ティーエイチを直接置いてしまうことです。

83
00:06:33.025 --> 00:06:35.948
行、セル、という階層を必ず守りましょう。

84
00:06:35.948 --> 00:06:44.280
書いたあとは、表を一度上から下まで読み直し、見出しとデータの対応が合っているかを目視で確認する習慣を付けましょう。

85
00:06:44.280 --> 00:06:46.398
ブラウザー互換性を確認します。

86
00:06:46.398 --> 00:06:51.763
記事が参照するエムディーエヌの記録では、ティーヘッドはクロームが一以降、

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

88
00:06:57.128 --> 00:07:04.046
サファリには補足条件があるとされているため、細かな表示が重要な場合は出典の注記も確認してください。

89
00:07:04.046 --> 00:07:09.834
とはいえ、古くからある基本要素であり、現在の主要なブラウザーでは安心して使えます。

90
00:07:09.834 --> 00:07:12.941
ただし、この表が示すのは要素本体の対応です。

91
00:07:12.941 --> 00:07:18.023
印刷時の繰り返し表示など、細かな挙動は環境ごとに試す習慣を持ちましょう。

92
00:07:18.023 --> 00:07:26.212
モバイル版のブラウザーでは実装や配信条件が異なる場合もあるため、公開前には対象の実機でも表示を試しておくと安心です。

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

94
00:07:27.879 --> 00:07:33.158
ティーヘッドは、表の見出し行をまとめ、列見出しを本文と分けて示すタグでした。

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

96
00:07:34.964 --> 00:07:40.659
一つ目は、ティーヘッドは行をまとめる枠で、見出しセル自体はティーエイチで作ること。

97
00:07:40.659 --> 00:07:44.618
二つ目は、テーブル、ティーヘッド、ティーアール、ティーエイチという階層と、

98
00:07:44.618 --> 00:07:48.578
ティーボディより前に置く順番を守ること。

99
00:07:48.578 --> 00:07:53.579
三つ目は、見た目の装飾はシーエスエスに任せ、意味はタグで伝えることです。

100
00:07:53.579 --> 00:07:59.413
練習として、自作ページの表にティーヘッドとティーボディの区切りを付けてみてください。

101
00:07:59.413 --> 00:08:00.663
お疲れさまでした。

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

103
00:08:03.997 --> 00:08:11.360
確認のコツは、表の途中のデータを一つ指さして、その列の見出しを声に出して言えるかどうかを確かめることです。