WEBVTT

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

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

3
00:00:04.339 --> 00:00:07.903
HTMLタグ編の十七本目は、テーブルタグです。

4
00:00:07.903 --> 00:00:12.706
これは、行と列の関係を持つデータを表として表すためのタグです。

5
00:00:12.706 --> 00:00:20.919
たとえば講座の名前と時間、商品の名前と料金のように、項目を縦と横で比べて読む情報がテーブルに向いています。

6
00:00:20.919 --> 00:00:24.793
逆に、ページ全体の配置を整える目的では使いません。

7
00:00:24.793 --> 00:00:29.209
今回は、表を形作る仲間のタグとの関係、基本の書き方、コード例、使うときの注意点まで、

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

9
00:00:33.625 --> 00:00:36.880
表の全体像をつかむ回として聞いてください。

10
00:00:36.880 --> 00:00:42.303
身近な時刻表や価格表を思い浮かべると、イメージがつかみやすくなります。

11
00:00:42.303 --> 00:00:45.515
まず、どんな場面で使うかを整理しましょう。

12
00:00:45.515 --> 00:00:51.481
テーブルが向いているのは、行と列で照らし合わせることで意味が分かるデータです。

13
00:00:51.481 --> 00:00:59.435
時間割なら、曜日と時間帯が交わる場所に授業が入り、料金表なら、プランと項目が交わる場所に金額が入ります。

14
00:00:59.435 --> 00:01:04.636
一方、昔はページの配置にテーブルが使われたこともありましたが、今はレイアウトにはシーエスエスを使い、

15
00:01:04.636 --> 00:01:09.837
テーブルはデータの表だけに使います。

16
00:01:09.837 --> 00:01:16.568
書く前に、その情報に行と列の関係があるかを一度自問すると、タグ選びで迷いにくくなります。

17
00:01:16.568 --> 00:01:20.851
たとえば出席簿や在庫一覧も、行と列で読む典型的な例です。

18
00:01:20.851 --> 00:01:22.191
基本の書き方です。

19
00:01:22.191 --> 00:01:27.253
テーブルは開始タグと終了タグを明示し、その内側に表の中身を置きます。

20
00:01:27.253 --> 00:01:32.985
コード例では、まずキャプションで表の題名を示し、次にティーアールで行を作り、

21
00:01:32.985 --> 00:01:38.718
その行の中にティーエイチの見出しセルとティーディーのデータセルを置いています。

22
00:01:38.718 --> 00:01:41.249
ここで大切なのは入れ子の順番です。

23
00:01:41.249 --> 00:01:45.418
テーブルの直下にティーディーを直接書くことはできません。

24
00:01:45.418 --> 00:01:48.395
テーブル、行、セルという順番を守ります。

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

26
00:01:54.053 --> 00:01:59.711
ファイル名や置く場所に迷ったら、入門編で作った練習ファイルを使うと安心です。

27
00:01:59.711 --> 00:02:04.866
テーブルは一つのタグで完結せず、仲間のタグと役割を分けます。

28
00:02:04.866 --> 00:02:07.271
キャプションは表の題名です。

29
00:02:07.271 --> 00:02:11.653
ティーヘッド、ティーボディ、ティーフットは、それぞれ見出し行、データ行、

30
00:02:11.653 --> 00:02:16.034
合計行をまとめるグループです。

31
00:02:16.034 --> 00:02:24.453
ティーアールが一行を作り、その中に見出しセルのティーエイチと、データセルのティーディーを置きます。

32
00:02:24.453 --> 00:02:31.326
テーブルタグ自身は、いわば表全体を囲む枠の役割で、実際の文字が入るのはセルです。

33
00:02:31.326 --> 00:02:37.168
これまでの回で学んだグループのタグも、ここで一つに組み合わさります。

34
00:02:37.168 --> 00:02:41.979
名前が似ているタグが多いので、役割で覚えるのが近道です。

35
00:02:41.979 --> 00:02:44.242
記事の活用事例を見てみましょう。

36
00:02:44.242 --> 00:02:47.212
テーマは、項目を行と列で比較することです。

37
00:02:47.212 --> 00:02:51.737
キャプションに講座と時間と書いて、表全体の内容を一目で伝えます。

38
00:02:51.737 --> 00:02:57.324
見出し行はティーヘッドに入れ、講座と時間という列見出しをティーエイチで書き、

39
00:02:57.324 --> 00:03:02.910
データ行はティーボディに入れ、エイチティーエムエルが九十分という一行にしています。

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

41
00:03:10.264 --> 00:03:13.800
開発者ツールのエレメンツで入れ子も確かめましょう。

42
00:03:13.800 --> 00:03:18.891
一行だけの小さな表でも、グループ分けをしておくと後で直しやすくなります。

43
00:03:18.891 --> 00:03:21.987
見出しセルの書き方をもう少し掘り下げます。

44
00:03:21.987 --> 00:03:28.915
ティーエイチにはスコープ属性を付けると、その見出しがどの範囲の見出しなのかをはっきり示せます。

45
00:03:28.915 --> 00:03:35.549
スコープ、イコール、コルは列の見出し、スコープ、イコール、ロウは行の見出しという意味です。

46
00:03:35.549 --> 00:03:43.657
たとえば九十分というデータは、列見出しの時間と、行見出しのエイチティーエムエルが交わる場所にあると分かります。

47
00:03:43.657 --> 00:03:51.175
見た目が同じでも、この対応付けがあることで、読み上げソフトでもどのセルの説明かが伝わりやすくなります。

48
00:03:51.175 --> 00:03:55.303
表が大きくなるほど、この対応付けの効果は大きくなります。

49
00:03:55.303 --> 00:03:57.389
テーブルの属性についてです。

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

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

52
00:04:06.033 --> 00:04:11.025
アイディーは文書内で一意な識別子、クラスはシーエスエスやジャバスクリプトで複数の要素をまとめて選ぶ目印、

53
00:04:11.025 --> 00:04:16.017
ラングは内容の言語の指定です。

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

55
00:04:21.978 --> 00:04:28.237
枠線や余白といった見た目は属性ではなく、シーエスエスで指定するのが現在の書き方です。

56
00:04:28.237 --> 00:04:33.155
迷った属性は無理に付けず、必要になったときに足すくらいで十分です。

57
00:04:33.155 --> 00:04:35.490
見た目と使いやすさの工夫です。

58
00:04:35.490 --> 00:04:43.117
枠線を引く、セルに余白を付ける、見出し行に色を付ける、といった装飾はすべてシーエスエスで行います。

59
00:04:43.117 --> 00:04:46.930
意味はエイチティーエムエルの構造で表し、見た目はシーエスエスで整える分担は、

60
00:04:46.930 --> 00:04:50.744
ほかのタグと同じです。

61
00:04:50.744 --> 00:04:54.012
もう一つ大切なのが小さい画面への配慮です。

62
00:04:54.012 --> 00:04:58.682
列が多い表はスマートフォンでは入りきらないため、表のラッパーに横スクロールを付けて、

63
00:04:58.682 --> 00:05:03.351
表自体は崩さずに読めるようにします。

64
00:05:03.351 --> 00:05:08.955
そのときも、見出しセルとデータセルの対応が保たれるように確認しましょう。

65
00:05:08.955 --> 00:05:14.247
色だけで区別せず、文字の意味でも区別が伝わるようにしておきましょう。

66
00:05:14.247 --> 00:05:16.344
よくある間違いを確認します。

67
00:05:16.344 --> 00:05:20.988
一つ目は、文章や画像を並べるためだけにテーブルを使うことです。

68
00:05:20.988 --> 00:05:24.583
それはレイアウトであり、シーエスエスの仕事です。

69
00:05:24.583 --> 00:05:26.680
二つ目は入れ子の間違いです。

70
00:05:26.680 --> 00:05:35.218
セルを行の外に書くなど不正な構造を書くと、ブラウザーが自動で補正して、書いたソースと実際の構造がずれてしまいます。

71
00:05:35.218 --> 00:05:37.166
三つ目は題名のない表です。

72
00:05:37.166 --> 00:05:43.457
キャプションを付けると、何の表なのかが利用者にもプログラムにも伝わりやすくなります。

73
00:05:43.457 --> 00:05:48.250
保存後は、開発者ツールで実際の構造を確認する習慣を付けましょう。

74
00:05:48.250 --> 00:05:52.894
公開前に一度、自分の表を声に出して読み上げてみるのも有効です。

75
00:05:52.894 --> 00:05:55.320
ブラウザー互換性を確認します。

76
00:05:55.320 --> 00:06:01.547
記事が参照するエムディーエヌの記録では、テーブル本体は、クロームが一以降、

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

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

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

80
00:06:23.949 --> 00:06:31.066
三百二十ピクセル程度の狭い画面や文字拡大時にも、内容が欠けないかを実機で確認しましょう。

81
00:06:31.066 --> 00:06:36.242
身近なスマートフォンでも一度開いて、崩れがないか見てみましょう。

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

83
00:06:38.225 --> 00:06:42.852
テーブルは、行と列の関係を持つデータの表そのものでした。

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

85
00:06:45.000 --> 00:06:50.454
一つ目は、比べるデータにだけ使い、レイアウト目的では使わないこと。

86
00:06:50.454 --> 00:06:56.403
二つ目は、キャプション、グループ、行、セルという入れ子を守って書くこと。

87
00:06:56.403 --> 00:07:03.013
三つ目は、見出しセルにスコープを付けて、データとの対応をはっきりさせることです。

88
00:07:03.013 --> 00:07:11.275
練習として、講座と時間の二列で、見出し一行とデータ三行の表を作り、キャプションも付けてみてください。

89
00:07:11.275 --> 00:07:12.763
お疲れさまでした。

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

91
00:07:16.729 --> 00:07:21.356
小さな表を一つ完成させることが、次に進む一番の近道です。