WEBVTT

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

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

3
00:00:03.725 --> 00:00:07.051
HTMLタグ編の十五本目は、ティーディータグです。

4
00:00:07.051 --> 00:00:11.176
これは、表の中で通常のデータを入れるセルを作るためのタグです。

5
00:00:11.176 --> 00:00:16.364
たとえば料金表なら、講座名や金額といった実際の値がティーディーの中に入ります。

6
00:00:16.364 --> 00:00:19.823
見出しのセルにはティーエイチを使い、データのセルにはティーディーを使う、

7
00:00:19.823 --> 00:00:23.282
この役割分担が表作りの基本です。

8
00:00:23.282 --> 00:00:27.207
今回は、基本の書き方、置く場所のルール、セルを結合する属性、見出しと関連付ける方法まで、

9
00:00:27.207 --> 00:00:31.132
初心者向けに順番に解説します。

10
00:00:31.132 --> 00:00:35.033
まず、よく似たティーエイチとの違いを押さえましょう。

11
00:00:35.033 --> 00:00:37.284
ティーエイチは見出しセルです。

12
00:00:37.284 --> 00:00:44.336
何の列か、何の行かを示すラベルの役割を持ち、多くのブラウザーでは太字で中央寄せに表示されます。

13
00:00:44.336 --> 00:00:50.037
一方、ティーディーはデータセルで、見出しに対応する実際の値や文章を入れます。

14
00:00:50.037 --> 00:00:53.938
たとえば、講座という見出しの下にエイチティーエムエル、料金という見出しの下に無料、

15
00:00:53.938 --> 00:00:57.839
と入れるイメージです。

16
00:00:57.839 --> 00:01:02.491
太く見せたいからティーエイチを使う、という選び方は間違いです。

17
00:01:02.491 --> 00:01:06.992
見た目はシーエスエスで整え、タグは意味で選ぶことが大切です。

18
00:01:06.992 --> 00:01:08.308
基本の書き方です。

19
00:01:08.308 --> 00:01:14.009
ティーディーは開始タグと終了タグを明示し、その間に表示したいデータを書きます。

20
00:01:14.009 --> 00:01:18.175
コード例では、テーブル の中にティーアールで二行を作り、一行目に見出しセル、

21
00:01:18.175 --> 00:01:22.341
二行目以降にデータセルを並べています。

22
00:01:22.341 --> 00:01:27.750
一つのティーアールが表の一行に当たり、その中のセルの数が列の数になります。

23
00:01:27.750 --> 00:01:32.427
行ごとにセルの数がばらばらだと、表が崩れて見える原因になります。

24
00:01:32.427 --> 00:01:37.690
まずは見出し行一列分と、データ行を二、三行書く形から慣れていきましょう。

25
00:01:37.690 --> 00:01:42.660
保存して再読み込みすれば、罫線のないシンプルな表として表示されます。

26
00:01:42.660 --> 00:01:44.382
置く場所のルールも重要です。

27
00:01:44.382 --> 00:01:49.546
ティーディーをテーブルの直下に書くことはできず、必ずティーアール要素の中に置きます。

28
00:01:49.546 --> 00:01:53.543
さらに行のまとまりは、見出し部分のティーヘッド、本文部分のティーボディ、

29
00:01:53.543 --> 00:01:57.539
合計などのフッター部分のティーフットでグループ化できます。

30
00:01:57.539 --> 00:02:02.274
コード例のように構造を整えると、読み上げソフトにも表の意味が伝わりやすくなり、

31
00:02:02.274 --> 00:02:07.008
あとからシーエスエスで見出し行だけ色を付ける、といった指定も簡単になります。

32
00:02:07.008 --> 00:02:11.189
入れ子の順番は、テーブル、グループ、行、セル、と覚えておきましょう。

33
00:02:11.189 --> 00:02:16.600
不正な入れ子はブラウザーが自動で直してしまい、思った構造と違う表示になることがあります。

34
00:02:16.600 --> 00:02:19.015
記事の活用事例を見てみましょう。

35
00:02:19.015 --> 00:02:22.788
テーマは、データセルと見出しを関連付けることです。

36
00:02:22.788 --> 00:02:28.523
見出しセルのティーエイチには、コースとフィーというアイディーを付けています。

37
00:02:28.523 --> 00:02:35.767
そしてデータセルのティーディーには、ヘッダーズ属性で対応する見出しのアイディーを指定しています。

38
00:02:35.767 --> 00:02:42.106
こう書くと、このセルはどの見出しのデータなのかが、プログラムにもはっきり伝わります。

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

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

41
00:02:57.500 --> 00:03:00.405
ここからはティーディーの主な属性です。

42
00:03:00.405 --> 00:03:01.933
まずコルスパンです。

43
00:03:01.933 --> 00:03:05.908
これはセルが横方向に何列ぶんを占めるかを指定します。

44
00:03:05.908 --> 00:03:12.023
たとえばコルスパン、イコール、二と書くと、そのセルは二列ぶんの幅で表示されます。

45
00:03:12.023 --> 00:03:18.597
コード例の最後の行では、二列を一つのセルにまとめ、全講座無料という補足を入れています。

46
00:03:18.597 --> 00:03:22.877
注意点は、広げた行ではセルの数をそのぶん減らすことです。

47
00:03:22.877 --> 00:03:27.311
列の合計がほかの行と合わないと、表の形がずれてしまいます。

48
00:03:27.311 --> 00:03:33.120
合計行や注意書きの行など、行全体に一つの内容を入れたい場面で使うと便利です。

49
00:03:33.120 --> 00:03:34.826
次はロースパンです。

50
00:03:34.826 --> 00:03:39.263
これはセルが縦方向に何行ぶんを占めるかを指定します。

51
00:03:39.263 --> 00:03:44.893
ロースパン、イコール、二と書くと、セルは二行ぶんの高さになります。

52
00:03:44.893 --> 00:03:54.790
コード例では、入門という分類のセルを二行にまたがらせ、その横にエイチティーエムエルとシーエスエスの行を並べています。

53
00:03:54.790 --> 00:03:59.397
ロースパンを使った行の次の行では、またがっている列のセルは書かなくてよい点が、

54
00:03:59.397 --> 00:04:04.004
コルスパンと共通の注意点です。

55
00:04:04.004 --> 00:04:12.194
ただし記事でも触れられているように、結合を増やすほど読み上げの順番や視線の動きは複雑になります。

56
00:04:12.194 --> 00:04:16.972
本当に必要か、表を分けられないかもあわせて考えましょう。

57
00:04:16.972 --> 00:04:20.274
ヘッダーズ属性について、もう少し補足します。

58
00:04:20.274 --> 00:04:28.378
単純な表なら、ティーエイチにスコープ属性を付けて、列の見出しか行の見出しかを示すだけで十分な場合が多いです。

59
00:04:28.378 --> 00:04:36.483
一方、コルスパンやロースパンで結合した複雑な表では、どのセルがどの見出しに対応するかが分かりにくくなります。

60
00:04:36.483 --> 00:04:42.036
そのときにヘッダーズ属性で、対応する見出しのアイディーを空白区切りで並べて明示すると、

61
00:04:42.036 --> 00:04:47.589
読み上げソフトがセルを読むときに見出しも一緒に伝えてくれます。

62
00:04:47.589 --> 00:04:56.744
結合を重ねて分かりにくくなる前に、表自体を二つに分ける方法も含めて、読み手にとって一番分かりやすい形を選ぶことが大切です。

63
00:04:56.744 --> 00:04:58.721
属性をまとめて整理します。

64
00:04:58.721 --> 00:05:01.914
ティーディーで主に使う専用属性は三つです。

65
00:05:01.914 --> 00:05:08.299
横に広げるコルスパン、縦に広げるロースパン、そして見出しと結び付けるヘッダーズです。

66
00:05:08.299 --> 00:05:10.732
それに加えて共通属性も使えます。

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

68
00:05:17.194 --> 00:05:23.656
ラングは内容の言語の指定、データ属性はアプリ独自の値を保持するために使います。

69
00:05:23.656 --> 00:05:30.194
コード例のように組み合わせて書けますが、データ属性に秘密情報を置く場所ではありません。

70
00:05:30.194 --> 00:05:36.732
また、幅や配置などの見た目は属性ではなく、シーエスエスで指定するのが現在の書き方です。

71
00:05:36.732 --> 00:05:38.720
ブラウザー互換性を確認します。

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

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

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

75
00:05:55.818 --> 00:06:01.783
今回扱ったコルスパン、ロースパン、ヘッダーズも、同じく初期のバージョンから対応しています。

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

77
00:06:08.012 --> 00:06:12.784
スマホなど実際の利用環境でも一度表示を確認する習慣は付けておきましょう。

78
00:06:12.784 --> 00:06:14.594
最後に練習とまとめです。

79
00:06:14.594 --> 00:06:18.517
ティーディーは、表の通常のデータを入れるセルでした。

80
00:06:18.517 --> 00:06:20.478
大切なポイントは三つです。

81
00:06:20.478 --> 00:06:26.362
一つ目は、見出しはティーエイチ、データはティーディーと、意味で使い分けること。

82
00:06:26.362 --> 00:06:32.850
二つ目は、ティーディーは必ずティーアールの中に置き、テーブル全体の構造を守ることです。

83
00:06:32.850 --> 00:06:40.997
三つ目は、コルスパンとロースパンによる結合は控えめにし、複雑な表ではヘッダーズで見出しと関連付けることです。

84
00:06:40.997 --> 00:06:48.993
練習として、講座と料金の二列で、三行ほどの小さな料金表を作り、最後の行をコルスパンでまとめてみてください。

85
00:06:48.993 --> 00:06:50.351
お疲れさまでした。

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