WEBVTT

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

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

3
00:00:04.827 --> 00:00:09.137
HTMLタグ編の十一本目は、ティーエイチタグです。

4
00:00:09.137 --> 00:00:13.792
これは、表の中で見出しになるセルを作るためのタグです。

5
00:00:13.792 --> 00:00:21.205
たとえば料金表では、参加費や日程といった項目名があり、その横や下に実際の値が並びます。

6
00:00:21.205 --> 00:00:26.549
この項目名の部分がティーエイチで、値の部分とは役割が違います。

7
00:00:26.549 --> 00:00:35.169
今回は、基本の書き方から、スコープ属性の使い方、複雑な表での工夫まで、初心者向けに順番に解説します。

8
00:00:35.169 --> 00:00:42.237
表を、目で見て分かるだけでなく、機械にも正しく伝わる形にするための大切なタグです。

9
00:00:42.237 --> 00:00:47.926
料金表や時間割、成績表など、表は身近なページにたくさん登場します。

10
00:00:47.926 --> 00:00:53.788
その一つ一つの見出しを正しく書くことが、読みやすい表への第一歩です。

11
00:00:53.788 --> 00:00:56.597
まず、よく似たタグとの違いを押さえましょう。

12
00:00:56.597 --> 00:00:58.385
表のセルには二種類あります。

13
00:00:58.385 --> 00:01:02.726
見出しを入れるティーエイチと、実際のデータを入れるティーディーです。

14
00:01:02.726 --> 00:01:06.812
ブラウザーでは、ティーエイチの文字が太字で中央寄せに表示されることが多いため、

15
00:01:06.812 --> 00:01:10.898
文字を目立たせる目的で使いたくなるかもしれません。

16
00:01:10.898 --> 00:01:15.878
しかし、記事でもはっきり書かれているとおり、単に太字にする目的では使いません。

17
00:01:15.878 --> 00:01:18.432
使い分けの基準は見た目ではなく意味です。

18
00:01:18.432 --> 00:01:22.901
そのセルが周りのデータの見出しになっているかどうかで判断してください。

19
00:01:22.901 --> 00:01:25.327
この考え方が、表作りの土台になります。

20
00:01:25.327 --> 00:01:31.328
表を読む側だけでなく、検索や読み上げなどの機械にとっても、この区別は大切な手がかりになります。

21
00:01:31.328 --> 00:01:32.874
基本の書き方です。

22
00:01:32.874 --> 00:01:37.511
ティーエイチは、開始タグと終了タグを明示して使います。

23
00:01:37.511 --> 00:01:44.553
置く場所は、行を作るティーアールの中であり、さらにその外側にはテーブルが必要です。

24
00:01:44.553 --> 00:01:49.534
コード例では、一番上の行に項目と内容という二つの見出しを並べ、その下の行に、

25
00:01:49.534 --> 00:01:54.515
参加費、無料というデータを入れています。

26
00:01:54.515 --> 00:02:00.698
列の見出しは、このようにティーヘッドの中の行に並べる書き方が一般的です。

27
00:02:00.698 --> 00:02:06.366
まずは、テーブル、行、セルという階層を守って書く形を覚えましょう。

28
00:02:06.366 --> 00:02:13.236
順番や入れ子が崩れると、ブラウザーが補正して意図と違う構造になることがあります。

29
00:02:13.236 --> 00:02:16.787
ティーエイチで最も大切な属性が、スコープです。

30
00:02:16.787 --> 00:02:20.802
見出しが、どの範囲のデータに対応するのかを示します。

31
00:02:20.802 --> 00:02:24.276
列の見出しならスコープ、イコール、コル、行の見出しならスコープ、イコール、

32
00:02:24.276 --> 00:02:27.750
ローと書きます。

33
00:02:27.750 --> 00:02:32.228
コード例の上段は列見出し、下段の第一回は行見出しの例です。

34
00:02:32.228 --> 00:02:38.791
目で表を見れば対応は自然に分かりますが、読み上げソフトはセルを順番に読み上げるため、

35
00:02:38.791 --> 00:02:45.353
この指定があると、データを読み上げるときに対応する見出しも一緒に伝えることができます。

36
00:02:45.353 --> 00:02:50.140
見出しを書いたら、スコープもセットで考える習慣を付けましょう。

37
00:02:50.140 --> 00:02:57.088
値には、ほかに行と列をまとめる指定もありますが、基本の二つをまず使いこなすことが大切です。

38
00:02:57.088 --> 00:02:59.897
記事の活用事例を見てみましょう。

39
00:02:59.897 --> 00:03:04.637
テーマは、セルがどのデータの見出しかを伝えることです。

40
00:03:04.637 --> 00:03:13.064
コードでは、参加費というティーエイチと、無料というティーディーが、同じ行に横並びになっています。

41
00:03:13.064 --> 00:03:21.315
ここで参加費には、スコープ、イコール、ローが付いていて、この行の見出しであることが分かります。

42
00:03:21.315 --> 00:03:26.757
項目と値が横に並ぶタイプの表では、この書き方がよく使われます。

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

44
00:03:37.290 --> 00:03:42.908
小さな表でも、見出しとデータの対応を意識して書く練習になります。

45
00:03:42.908 --> 00:03:45.713
セルを広げる属性も知っておきましょう。

46
00:03:45.713 --> 00:03:52.799
コルスパン、はセルが横方向に何列分を占めるか、ロースパンは縦方向に何行分を占めるかを指定します。

47
00:03:52.799 --> 00:04:00.032
たとえば、午前の予定という見出しを二列分の幅で大きく表示したいときは、コルスパンに二を指定します。

48
00:04:00.032 --> 00:04:06.528
その際、スコープにはコルグループを使うと、複数の列をまとめた見出しであることを示せます。

49
00:04:06.528 --> 00:04:10.661
ただし、セルを結合すると表の構造は一気に複雑になります。

50
00:04:10.661 --> 00:04:16.566
まずは結合のない表で基本を身に付けてから、必要な場面でだけ使うようにしましょう。

51
00:04:16.566 --> 00:04:22.176
結合したあとは、列数や行数の数え違いがないか、表全体を見直すことが大切です。

52
00:04:22.176 --> 00:04:24.684
複雑な表のための仕組みも紹介します。

53
00:04:24.684 --> 00:04:31.649
行と列の両方に見出しがあるような大きな表では、スコープだけでは対応が十分に伝わらないことがあります。

54
00:04:31.649 --> 00:04:35.550
そんなときは、見出しセルにアイディーを付け、データセルのヘッダーズ属性で、

55
00:04:35.550 --> 00:04:39.451
そのアイディーを指定して関連付けます。

56
00:04:39.451 --> 00:04:45.998
コード例では、行事と参加費という見出しにそれぞれアイディーを付け、データ側から参照しています。

57
00:04:45.998 --> 00:04:50.874
複数の見出しと関連付けたい場合は、空白で区切って並べることもできます。

58
00:04:50.874 --> 00:04:57.004
最初から使う必要はありませんが、表が複雑になったときの引き出しとして覚えておきましょう。

59
00:04:57.004 --> 00:04:59.011
そのほかの属性を確認します。

60
00:04:59.011 --> 00:05:03.095
エイビービーアール、は見出しセルの短い表現を示す属性で、長い見出しを短く伝える場面で、

61
00:05:03.095 --> 00:05:07.180
支援技術などに利用されます。

62
00:05:07.180 --> 00:05:10.190
また、ほかの要素と同じ共通属性も使えます。

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

64
00:05:14.705 --> 00:05:19.220
内容の言語を示すラングなどです。

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

66
00:05:25.096 --> 00:05:31.976
属性はたくさん付けることが目的ではなく、その表に必要なものを、正しい要素に付けることが大切です。

67
00:05:31.976 --> 00:05:34.412
よくある間違いを三つ紹介します。

68
00:05:34.412 --> 00:05:38.979
一つ目は、見出しのセルをティーディーで書いてしまうことです。

69
00:05:38.979 --> 00:05:46.134
見た目をシーエスエスで太字にしても、意味の上ではデータのままなので、見出しとして伝わりません。

70
00:05:46.134 --> 00:05:52.071
二つ目は逆に、太字や中央寄せの見た目が欲しいだけでティーエイチを使うことです。

71
00:05:52.071 --> 00:05:57.247
レイアウト目的の使用は避け、見出しでない場所には使わないでください。

72
00:05:57.247 --> 00:05:59.835
三つ目は、スコープの付け忘れです。

73
00:05:59.835 --> 00:06:06.076
特に行見出しと列見出しが混在する表では、対応が曖昧になりやすいため注意しましょう。

74
00:06:06.076 --> 00:06:13.992
書き終えたら、表の途中のデータを一つ指さして、その見出しがどれかを声に出して確認する習慣がおすすめです。

75
00:06:13.992 --> 00:06:17.874
三百二十ピクセル程度の狭い画面でも、見出しとデータが欠けずに読めるかどうかも、

76
00:06:17.874 --> 00:06:21.756
あわせて確認しましょう。

77
00:06:21.756 --> 00:06:23.914
ブラウザー互換性を確認します。

78
00:06:23.914 --> 00:06:29.380
記事が参照するエムディーエヌの記録では、ティーエイチはクロームが一以降、

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

80
00:06:34.845 --> 00:06:40.096
今回扱ったスコープ、コルスパン、ロースパン、ヘッダーズ、エイビービーアールといった属性も、

81
00:06:40.096 --> 00:06:45.346
同じく古いバージョンから対応していると記録されています。

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

83
00:06:50.524 --> 00:06:53.976
ただし、これは要素本体と主な属性の対応状況です。

84
00:06:53.976 --> 00:07:01.456
モバイル版では実装や配信条件が異なる場合もあるため、公開前には対象の実機でも表示を確認しておきましょう。

85
00:07:01.456 --> 00:07:03.333
最後に練習とまとめです。

86
00:07:03.333 --> 00:07:08.493
ティーエイチは、表の中でデータの見出しになるセルを作るタグでした。

87
00:07:08.493 --> 00:07:10.526
大切なポイントは三つです。

88
00:07:10.526 --> 00:07:16.625
一つ目は、見出しはティーエイチ、データはティーディーと、意味で使い分けること。

89
00:07:16.625 --> 00:07:21.942
二つ目は、スコープ属性で列の見出しか行の見出しかをはっきり示すこと。

90
00:07:21.942 --> 00:07:30.387
三つ目は、複雑な結合表では、スコープで足りるかを確認し、必要ならアイディーとヘッダーズで関連付けることです。

91
00:07:30.387 --> 00:07:37.267
練習として、自作ページの表で、見出しセルにスコープを付けるところから始めてみてください。

92
00:07:37.267 --> 00:07:38.675
お疲れさまでした。

93
00:07:38.675 --> 00:07:42.428
次回もHTMLタグを一つずつ学んでいきましょう。