WEBVTT

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

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

3
00:00:04.501 --> 00:00:08.358
HTMLタグ編の七本目は、ティーアールタグです。

4
00:00:08.358 --> 00:00:12.055
これは、表の横一列、つまり一行を表すタグです。

5
00:00:12.055 --> 00:00:15.993
表は、行と列で情報を整理するための仕組みですが、その一行分をまとめる役割を持つのが、

6
00:00:15.993 --> 00:00:19.931
このタグです。

7
00:00:19.931 --> 00:00:23.146
中には見出しセルや通常のセルを並べます。

8
00:00:23.146 --> 00:00:30.219
行そのものは文字を表示する場所ではなく、セルを横に束ねるための入れ物だと考えてください。

9
00:00:30.219 --> 00:00:34.719
今回は、基本の書き方から、置く場所のルール、よくある間違い、ブラウザーの対応まで、

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

11
00:00:39.220 --> 00:00:44.569
ティーアールタグが活躍するのは、情報を表で整理する場面です。

12
00:00:44.569 --> 00:00:49.739
たとえば料金表なら、プラン名、月額、内容を一行に並べます。

13
00:00:49.739 --> 00:00:54.018
時間割なら、時間、科目、教室を一行にまとめます。

14
00:00:54.018 --> 00:01:00.615
大切なのは、一行を読むだけで、一件分の情報が理解できるようにすることです。

15
00:01:00.615 --> 00:01:07.568
見出しと値を横に並べる使い方も代表的で、項目名とその内容を対応付けて示せます。

16
00:01:07.568 --> 00:01:13.986
逆に、単に画面を横に区切りたいだけのレイアウト目的では、表は使いません。

17
00:01:13.986 --> 00:01:20.048
表は、行と列の関係に意味があるときに選ぶものだと覚えておきましょう。

18
00:01:20.048 --> 00:01:21.641
基本の書き方です。

19
00:01:21.641 --> 00:01:28.190
ティーアールタグは、開始タグと終了タグを明示して、その間にセルを入れます。

20
00:01:28.190 --> 00:01:31.376
置く場所は、テーブルタグの内側です。

21
00:01:31.376 --> 00:01:37.394
多くの場合は、後で学ぶティーボディなどのグループの中に行を書きます。

22
00:01:37.394 --> 00:01:43.590
コード例では、一行の中に、商品名と価格という二つのセルを並べています。

23
00:01:43.590 --> 00:01:50.139
行が増える場合は、このティーアールのまとまりを必要な回数だけ繰り返します。

24
00:01:50.139 --> 00:01:55.626
ブラウザーは、行の中のセルを左から右へ順番に並べて表示します。

25
00:01:55.626 --> 00:02:00.228
まず、この行とセルの関係をしっかり押さえてください。

26
00:02:00.228 --> 00:02:03.189
記事の活用事例を見てみましょう。

27
00:02:03.189 --> 00:02:06.335
見出しと値を一行にまとめた例です。

28
00:02:06.335 --> 00:02:13.552
最初のセルは、見出しを表すティーエイチタグで、会場という項目名を入れています。

29
00:02:13.552 --> 00:02:21.139
スコープ属性にロウを指定すると、この見出しが横方向の行見出しであることを示せます。

30
00:02:21.139 --> 00:02:26.876
次のセルは通常のデータセルで、第2教室という値を入れています。

31
00:02:26.876 --> 00:02:36.129
このように、項目名と値を同じ行に置くことで、読み手にも支援技術にも、対応関係が伝わりやすくなります。

32
00:02:36.129 --> 00:02:42.976
試すときは、保存して再読み込みし、表として正しく並ぶかを確認してください。

33
00:02:42.976 --> 00:02:46.630
行の中に入れる、二種類のセルを使い分けましょう。

34
00:02:46.630 --> 00:02:48.914
ティーエイチは見出しセルです。

35
00:02:48.914 --> 00:02:53.634
その行や列が何を表すのかを示す、ラベルのような役割を持ちます。

36
00:02:53.634 --> 00:02:57.745
一方、ティーディーはデータセルで、実際の値を入れます。

37
00:02:57.745 --> 00:03:03.530
太字で表示されるからティーエイチを使う、といった見た目で選ぶのは間違いです。

38
00:03:03.530 --> 00:03:07.337
見出しとして意味があるかどうかで判断してください。

39
00:03:07.337 --> 00:03:14.036
支援技術では、データセルを読むときに、対応する見出しもあわせて伝えられることがあります。

40
00:03:14.036 --> 00:03:18.908
正しく使い分けることで、表の意味が機械にも伝わるようになります。

41
00:03:18.908 --> 00:03:23.405
ティーアールタグを置く場所について、もう少し詳しく見ます。

42
00:03:23.405 --> 00:03:27.746
表の中の行は、役割ごとにグループで分けることができます。

43
00:03:27.746 --> 00:03:32.786
見出し行をまとめるのがティーヘッド、主なデータ行をまとめるのがティーボディ、

44
00:03:32.786 --> 00:03:37.825
合計などを示す末尾の行をまとめるのがティーフットです。

45
00:03:37.825 --> 00:03:42.632
ティーアールは、こうしたグループの内側に置くのが基本の形です。

46
00:03:42.632 --> 00:03:47.749
グループ分けをしておくと、長い表でも構造が読み取りやすくなり、シーエスエスで見出し行だけ色を変える、

47
00:03:47.749 --> 00:03:52.865
といった指定もしやすくなります。

48
00:03:52.865 --> 00:03:59.688
直接テーブルタグの下に書ける場合もありますが、グループを意識すると整理しやすくなります。

49
00:03:59.688 --> 00:04:01.124
属性を確認します。

50
00:04:01.124 --> 00:04:06.391
ティーアールタグには、この記事で必須となる専用の属性はありません。

51
00:04:06.391 --> 00:04:13.413
行ごとに特別な設定を持たせる仕組みではなく、必要に応じて共通のグローバル属性を使います。

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

53
00:04:18.440 --> 00:04:23.467
内容の言語を示すラングなどです。

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

55
00:04:30.010 --> 00:04:35.914
セル側に付ける属性と、行側に付ける属性を混同しないように注意してください。

56
00:04:35.914 --> 00:04:41.500
たとえば見出しの対象を示すスコープは、行ではなく見出しセルの属性です。

57
00:04:41.500 --> 00:04:44.062
よくある間違いを三つ紹介します。

58
00:04:44.062 --> 00:04:52.229
一つ目は、ティーアールの直下に、ピータグやディブタグ、あるいは文章そのものを直接入れてしまうことです。

59
00:04:52.229 --> 00:04:54.951
行の中に置けるのは、セルだけです。

60
00:04:54.951 --> 00:04:57.834
文章は必ずセルの中に入れてください。

61
00:04:57.834 --> 00:05:05.841
決まりに合わない書き方をすると、ブラウザーが自動で位置を補正し、意図しない表示になることがあります。

62
00:05:05.841 --> 00:05:08.563
二つ目は、終了タグの書き忘れです。

63
00:05:08.563 --> 00:05:13.367
この教材では、開始と終了を明示して構造を分かりやすくします。

64
00:05:13.367 --> 00:05:17.531
三つ目は、行ごとにセルの数がばらばらになることです。

65
00:05:17.531 --> 00:05:20.733
列の対応がずれると、読み手が混乱します。

66
00:05:20.733 --> 00:05:23.936
表全体を見渡して、列数をそろえましょう。

67
00:05:23.936 --> 00:05:26.452
見た目についても触れておきます。

68
00:05:26.452 --> 00:05:34.472
ティーアールタグは表の構造を作るもので、色や罫線といった見た目は、シーエスエスで指定するのが原則です。

69
00:05:34.472 --> 00:05:41.077
たとえば、本文の偶数行だけに薄い背景色を付けると、長い表でも行を追いやすくなります。

70
00:05:41.077 --> 00:05:44.536
罫線の重ね方を指定するプロパティもあります。

71
00:05:44.536 --> 00:05:50.984
また、スマートフォンのような狭い画面では、列が多い表が横にはみ出すことがあります。

72
00:05:50.984 --> 00:05:58.689
三百二十ピクセル程度の幅でも内容が欠けないか、横スクロールで読めるかなどを確認しておくと安心です。

73
00:05:58.689 --> 00:06:03.564
意味と見た目を分けて考える習慣を、ここでも大切にしてください。

74
00:06:03.564 --> 00:06:06.011
ブラウザー互換性を確認します。

75
00:06:06.011 --> 00:06:12.373
記事が参照するエムディーエヌの記録では、ティーアールタグはクロームが一以降、

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

77
00:06:18.736 --> 00:06:23.467
いずれも非常に古いバージョンから使える、表の基本要素です。

78
00:06:23.467 --> 00:06:28.850
現在の主要なブラウザーで、安心して使える仕組みの一つだと言えます。

79
00:06:28.850 --> 00:06:32.439
ただし、この表が示すのは要素本体の対応です。

80
00:06:32.439 --> 00:06:38.149
新しい属性や機能を使う場合は、それぞれ別に対応状況を確認してください。

81
00:06:38.149 --> 00:06:43.696
実際に使う環境でも、表示が崩れていないかを見ておくと、より確実です。

82
00:06:43.696 --> 00:06:45.672
最後に練習とまとめです。

83
00:06:45.672 --> 00:06:49.459
ティーアールタグは、表の一行を表すタグでした。

84
00:06:49.459 --> 00:06:51.599
大切なポイントは三つです。

85
00:06:51.599 --> 00:06:59.008
一つ目は、行の中には見出しセルとデータセルだけを置き、文章やほかの要素を直接入れないこと。

86
00:06:59.008 --> 00:07:05.430
二つ目は、見出しと値を同じ行にまとめることで、対応関係が伝わりやすくなること。

87
00:07:05.430 --> 00:07:11.028
三つ目は、専用の必須属性はなく、必要に応じて共通属性を使うことです。

88
00:07:11.028 --> 00:07:22.224
練習として、見出し行一列とデータ行二列からなる、三行の小さな表を作り、開発者ツールでソースと表示が一致しているかを確認してみてください。

89
00:07:22.224 --> 00:07:23.706
お疲れさまでした。

90
00:07:23.706 --> 00:07:28.316
次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。