WEBVTT

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

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

3
00:00:03.912 --> 00:00:07.406
HTMLタグ編の十六本目は、ティーボディタグです。

4
00:00:07.406 --> 00:00:10.899
これは、表の中でデータ行をまとめるためのタグです。

5
00:00:10.899 --> 00:00:17.327
たとえば学習会の案内表なら、項目と値といった実際のデータが並ぶ部分がティーボディに入ります。

6
00:00:17.327 --> 00:00:22.147
見出し行をまとめるティーヘッド、合計などをまとめるティーフットと組み合わせることで、

7
00:00:22.147 --> 00:00:26.968
表が頭、本文、締めくくりという三つの部分に分かれます。

8
00:00:26.968 --> 00:00:34.094
表が長くなるほど、どこからどこまでがデータなのかが一目で分かる、このグループ分けの良さが実感できます。

9
00:00:34.094 --> 00:00:37.797
今回は、基本の書き方から、ブラウザーが自動で補う仕組み、使い方の注意点まで、

10
00:00:37.797 --> 00:00:41.500
初心者向けに順番に解説します。

11
00:00:41.500 --> 00:00:45.072
まず、表を分ける三つのグループを整理しましょう。

12
00:00:45.072 --> 00:00:49.686
ティーヘッドは見出し行の集まりで、項目名や列の名前が入ります。

13
00:00:49.686 --> 00:00:53.854
ティーボディはデータ行の集まりで、表の本文に当たります。

14
00:00:53.854 --> 00:00:58.914
そしてティーフットは、合計や件数など、表を締めくくる行の集まりです。

15
00:00:58.914 --> 00:01:06.802
この三つに分けておくと、後から見出し行だけ色を変えたり、データ部分だけスタイルを変えたりしやすくなります。

16
00:01:06.802 --> 00:01:12.458
見た目だけでなく、読み上げソフトにも表の構造が伝わりやすくなる点も大切です。

17
00:01:12.458 --> 00:01:16.328
どの行がどのグループか、意味で分けることが基本です。

18
00:01:16.328 --> 00:01:17.836
基本の書き方です。

19
00:01:17.836 --> 00:01:24.876
ティーボディは開始タグと終了タグを明示し、その中にティーアールで作った行を入れます。

20
00:01:24.876 --> 00:01:33.926
コード例では、テーブルの中にティーヘッドとティーボディを置き、ティーボディの中に二行のデータを並べています。

21
00:01:33.926 --> 00:01:38.786
一行目が定員は十二人、二行目が料金は無料、という内容です。

22
00:01:38.786 --> 00:01:42.976
入れ子の順番は、テーブル、グループ、行、セルです。

23
00:01:42.976 --> 00:01:48.004
ティーボディの直下にティーディーを直接書くことはできません。

24
00:01:48.004 --> 00:01:54.708
まずは見出し一行とデータ二、三行の小さな表から書いて、構造に慣れていきましょう。

25
00:01:54.708 --> 00:01:56.687
記事の活用事例を見てみましょう。

26
00:01:56.687 --> 00:01:59.284
テーマは、表のデータ行をまとめることです。

27
00:01:59.284 --> 00:02:02.871
見出し行はティーヘッドに入れ、ティーエイチにはスコープ、イコール、コルと書いて、

28
00:02:02.871 --> 00:02:06.457
列の見出しであることを示しています。

29
00:02:06.457 --> 00:02:11.157
データ行はティーボディに入れ、項目が定員、値が十二人という一行にしています。

30
00:02:11.157 --> 00:02:17.712
試すときは、練習用ファイルに表ごと貼り付けて保存し、再読み込みして表として表示されるかを確認してください。

31
00:02:17.712 --> 00:02:23.896
開発者ツールのエレメンツで、ティーボディの中にティーアールが正しく入っているかも確かめてみましょう。

32
00:02:23.896 --> 00:02:25.936
置く場所のルールを確認します。

33
00:02:25.936 --> 00:02:32.599
ティーボディはテーブルの直接の子として置き、ふつうはティーヘッドの後、ティーフットの前に書きます。

34
00:02:32.599 --> 00:02:38.038
中にはティーアールだけを入れ、その行の中にティーディーやティーエイチを置きます。

35
00:02:38.038 --> 00:02:42.662
表の説明であるキャプションがある場合は、その後にグループを続けます。

36
00:02:42.662 --> 00:02:49.053
また、ティーボディは一つの表に複数置くこともでき、内容のまとまりごとに分ける使い方もあります。

37
00:02:49.053 --> 00:02:55.716
不正な入れ子を書くとブラウザーが自動で直してしまうため、ソースと実際の構造がずれる原因になります。

38
00:02:55.716 --> 00:02:58.028
順番と入れ子を守って書きましょう。

39
00:02:58.028 --> 00:03:00.983
ここが記事で特に強調されている注意点です。

40
00:03:00.983 --> 00:03:07.175
ソースにティーボディを書かず、テーブルの直下にティーアールを書いても、表は表示されます。

41
00:03:07.175 --> 00:03:12.733
しかしブラウザーがエイチティーエムエルを解析するとき、ティーボディが自動で補われ、

42
00:03:12.733 --> 00:03:18.292
実際のディーオーエム、つまりブラウザー内部の構造にはティーボディが現れます。

43
00:03:18.292 --> 00:03:22.654
そのため、テーブルの直下のティーアールを直接対象にするシーエスエスやジャバスクリプトは、

44
00:03:22.654 --> 00:03:27.016
思った通りに動かないことがあります。

45
00:03:27.016 --> 00:03:32.786
迷ったときは、ソースではなく開発者ツールで実際の構造を確認する習慣を付けましょう。

46
00:03:32.786 --> 00:03:41.088
表が正しく表示されているのに指定だけが効かない、という不思議な現象は、この自動補正が原因であることが少なくありません。

47
00:03:41.088 --> 00:03:45.577
応用として、ティーボディを複数使う書き方も紹介します。

48
00:03:45.577 --> 00:03:55.720
一つの表の中にティーボディを二つ置き、午前の部と午後の部というように、内容のまとまりごとにデータ行を分けることができます。

49
00:03:55.720 --> 00:04:00.209
グループが分かれていると、シーエスエスでまとまりごとに背景色を変えたり、

50
00:04:00.209 --> 00:04:04.698
区切り線を付けたりしやすくなります。

51
00:04:04.698 --> 00:04:11.349
行見出しにはティーエイチを使い、値にはティーディーを使う点はこれまでと同じです。

52
00:04:11.349 --> 00:04:16.835
ただし、小さな表を細かく分けすぎると、かえって読みにくくなります。

53
00:04:16.835 --> 00:04:22.156
行数が多い表や、意味の区切りがはっきりある表で使うと効果的です。

54
00:04:22.156 --> 00:04:24.365
ティーボディの属性についてです。

55
00:04:24.365 --> 00:04:28.230
記事の通り、この要素に必須となる専用の属性はありません。

56
00:04:28.230 --> 00:04:32.371
必要に応じて、グローバル属性と呼ばれる共通の属性を使います。

57
00:04:32.371 --> 00:04:36.581
アイディーは文書内で一意な識別子、クラスはシーエスエスやジャバスクリプトでまとめて選ぶ目印、

58
00:04:36.581 --> 00:04:40.791
ラングは内容の言語の指定です。

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

60
00:04:46.313 --> 00:04:51.697
コード例のようにクラスを付ければ、グループ単位で見た目を変える対象にできます。

61
00:04:51.697 --> 00:04:56.528
セルに付ける属性と、グループに付ける属性を混同しないようにしましょう。

62
00:04:56.528 --> 00:05:01.178
ティーボディで分けておくと、シーエスエスでの活用が広がります。

63
00:05:01.178 --> 00:05:07.478
たとえば、ティーボディごとに背景色を少し変えて、まとまりの区切りを分かりやすくしたり、

64
00:05:07.478 --> 00:05:13.777
データ行にマウスを重ねたときだけ色を変える指定を、本文部分だけに絞ったりできます。

65
00:05:13.777 --> 00:05:20.527
見出し行はティーヘッド側でまとめて太字や色付けができるため、役割ごとに指定を分けられます。

66
00:05:20.527 --> 00:05:25.777
大切なのは、見た目を変えたいからといってタグの意味を変えないことです。

67
00:05:25.777 --> 00:05:30.127
意味はエイチティーエムエルのグループ分けで表し、色や余白などの見た目はシーエスエスで整える、

68
00:05:30.127 --> 00:05:34.476
この分担を守りましょう。

69
00:05:34.476 --> 00:05:43.476
ジャバスクリプトで表の行を絞り込むときも、ティーボディを対象にすれば、見出し行を巻き込まずにデータ行だけを操作できます。

70
00:05:43.476 --> 00:05:45.768
ブラウザー互換性を確認します。

71
00:05:45.768 --> 00:05:51.805
記事が参照するエムディーエヌの記録では、ティーボディ本体は、クロームが一以降、

72
00:05:51.805 --> 00:05:57.841
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降で対応しています。

73
00:05:57.841 --> 00:06:06.093
ウェブのごく初期から使われてきた表の基本要素なので、現在使われているブラウザーならまず問題なく表示できます。

74
00:06:06.093 --> 00:06:13.276
ただし、これは要素本体の対応開始の記録であり、細かな表示の違いまで保証するものではありません。

75
00:06:13.276 --> 00:06:18.166
三百二十ピクセル程度の狭い画面や、文字を拡大したときにも内容が欠けないか、

76
00:06:18.166 --> 00:06:23.056
実際の利用環境で一度確認する習慣は付けておきましょう。

77
00:06:23.056 --> 00:06:24.791
最後に練習とまとめです。

78
00:06:24.791 --> 00:06:28.696
ティーボディは、表のデータ行をまとめる本文部分でした。

79
00:06:28.696 --> 00:06:30.576
大切なポイントは三つです。

80
00:06:30.576 --> 00:06:34.336
一つ目は、見出しはティーヘッド、データはティーボディ、合計はティーフットと、

81
00:06:34.336 --> 00:06:38.097
意味でグループを分けること。

82
00:06:38.097 --> 00:06:45.761
二つ目は、ティーボディは書かなくてもブラウザーに補われますが、構造をはっきりさせるために明示して書くこと。

83
00:06:45.761 --> 00:06:51.691
三つ目は、中にはティーアールを入れ、セルは行の中に置くという入れ子を守ることです。

84
00:06:51.691 --> 00:06:58.344
練習として、項目と値の二列で、見出し一行、データ三行、合計一行の案内表を作ってみてください。

85
00:06:58.344 --> 00:06:59.645
お疲れさまでした。

86
00:06:59.645 --> 00:07:03.116
次回もHTMLタグを一つずつ学んでいきましょう。