WEBVTT

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

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

3
00:00:03.424 --> 00:00:07.483
エイチティーエムエルタグ編の九十七本目は、キャプションタグです。

4
00:00:07.483 --> 00:00:10.020
キャプションは、表の題名を表す要素です。

5
00:00:10.020 --> 00:00:13.127
料金表や予定表、成績表など、表だけを見ても何のデータなのかが分かるように、

6
00:00:13.127 --> 00:00:16.234
表のタイトルを付けます。

7
00:00:16.234 --> 00:00:21.244
今回は、キャプションの意味、テーブル要素の最初の子要素として置く決まり、

8
00:00:21.244 --> 00:00:26.254
基本の使い方、コード例、ブラウザー互換性、そしてよくある間違いまで、順番に確認します。

9
00:00:26.254 --> 00:00:30.820
身近な表を思い浮かべながら聞いていただくと、役割がつかみやすくなります。

10
00:00:30.820 --> 00:00:33.993
まず、キャプションの役割を整理します。

11
00:00:33.993 --> 00:00:40.841
キャプションは、この表は何についての一覧なのかを、短い題名で伝えるための要素です。

12
00:00:40.841 --> 00:00:45.685
表の数字だけが並んでいても、読み手には意味が伝わりません。

13
00:00:45.685 --> 00:00:49.777
題名が一つあることで、この数字はアクセス数なのか、料金なのか、開催日なのかが、

14
00:00:49.777 --> 00:00:53.869
すぐに理解できます。

15
00:00:53.869 --> 00:01:02.220
大切なのは、題名を本文の段落に紛れ込ませるのではなく、表そのものに属する情報として結びつける点です。

16
00:01:02.220 --> 00:01:08.733
読み上げソフトを使う方にも、表の目的が最初に伝わる、重要な役割を持っています。

17
00:01:08.733 --> 00:01:15.080
題名は検索や一覧表示でも目印になるため、省略せずに付ける習慣がおすすめです。

18
00:01:15.080 --> 00:01:19.173
キャプションには、置く場所に明確な決まりがあります。

19
00:01:19.173 --> 00:01:24.525
必ずテーブル要素の内側に書き、しかもその最初の子要素として置きます。

20
00:01:24.525 --> 00:01:30.821
つまり、テーブル開始タグのすぐ次がキャプションで、そのあとに行やセルが続きます。

21
00:01:30.821 --> 00:01:37.905
表の上や下に、普通の段落として題名を書くのとは違い、この順番自体が仕様で決められています。

22
00:01:37.905 --> 00:01:44.044
書き方としては、開始タグと終了タグをセットにし、その間に題名の文章を入れます。

23
00:01:44.044 --> 00:01:48.766
空要素ではないので、終了タグの書き忘れにも注意してください。

24
00:01:48.766 --> 00:01:55.692
ブラウザーはこの順番を前提に表を組み立てるため、正しい位置が表示の安定にもつながります。

25
00:01:55.692 --> 00:01:58.071
基本のコード例を見ていきます。

26
00:01:58.071 --> 00:02:01.719
画面の例は、記事の活用事例をもとにした形です。

27
00:02:01.719 --> 00:02:08.539
テーブル要素を開いて、最初にキャプションで、十月の開催予定、という題名を付けています。

28
00:02:08.539 --> 00:02:15.042
そのあとにティーボディで本体の行が続き、土曜日は十三時開始、という内容が入ります。

29
00:02:15.042 --> 00:02:21.069
題名があることで、表だけを切り取って別の場所に貼っても、内容が失われません。

30
00:02:21.069 --> 00:02:26.937
キャプションの文章は、表の中身を一言で表す、短く具体的な表現にしましょう。

31
00:02:26.937 --> 00:02:32.488
十月の予定、だけではなく、開催予定まで書くことで伝わりやすくなります。

32
00:02:32.488 --> 00:02:39.784
まずはこの最小の形を写して、ブラウザーで題名が表の上に表示されることを確認してみてください。

33
00:02:39.784 --> 00:02:43.155
ここで、段落や見出しとの違いを押さえます。

34
00:02:43.155 --> 00:02:49.737
表の直前に段落を置いて、見出しらしく太字に装飾しても、見た目は題名らしくなります。

35
00:02:49.737 --> 00:02:54.392
しかしプログラムから見れば、その段落と表は別々の存在です。

36
00:02:54.392 --> 00:02:59.127
キャプションを使えば、題名が表の一部として扱われ、並び替えや読み上げ、表だけの転載といった場面でも、

37
00:02:59.127 --> 00:03:03.863
関係が切れません。

38
00:03:03.863 --> 00:03:11.889
エイチティーエムエルでは、見た目が似ていることよりも、意味の関係が正しく結ばれていることが大切です。

39
00:03:11.889 --> 00:03:17.828
表の題名ならキャプション、章の見出しなら見出し要素、と使い分けてください。

40
00:03:17.828 --> 00:03:25.052
見た目を整える作業と、意味を伝える作業を分けて考えることが、読みやすいページへの近道です。

41
00:03:25.052 --> 00:03:26.715
属性について確認します。

42
00:03:26.715 --> 00:03:30.456
キャプションには、この要素専用の必須属性はありません。

43
00:03:30.456 --> 00:03:35.443
必要に応じて、アイディー、クラス、ラングなどのグローバル属性を使います。

44
00:03:35.443 --> 00:03:43.202
アイディーは文書内で一つだけの識別子として、クラスはシーエスエスやジャバスクリプトでまとめて選ぶときに使います。

45
00:03:43.202 --> 00:03:47.636
昔の書き方では、位置を決めるアライン属性などが使われた時代もありましたが、

46
00:03:47.636 --> 00:03:52.070
現在は見た目の指定はシーエスエスに任せるのが基本です。

47
00:03:52.070 --> 00:03:58.027
属性の有無よりも、題名の文章そのものが表の内容を正確に表しているかを優先してください。

48
00:03:58.027 --> 00:04:05.232
データスター属性に独自の情報を入れることもできますが、秘密情報を置く場所ではない点にも注意してください。

49
00:04:05.232 --> 00:04:07.354
見た目の整え方も見ておきます。

50
00:04:07.354 --> 00:04:13.719
キャプションの文字の大きさや太さ、余白や文字の揃え方は、通常のシーエスエスで指定できます。

51
00:04:13.719 --> 00:04:17.821
標準では表の上に表示されますが、シーエスエスのキャプションサイドというプロパティで、

52
00:04:17.821 --> 00:04:21.923
下側に表示させることもできます。

53
00:04:21.923 --> 00:04:28.713
ただし、コード上の順番はあくまでテーブルの最初であり、表示位置だけが変わる点に注意してください。

54
00:04:28.713 --> 00:04:33.805
デザインのためにキャプションを隠してしまうと、題名の意味まで失われます。

55
00:04:33.805 --> 00:04:38.190
読みやすさを保ちながら、表全体と調和する見た目に整えましょう。

56
00:04:38.190 --> 00:04:44.980
色だけで目立たせるのではなく、余白や行のまとまりと合わせて、落ち着いたデザインを目指しましょう。

57
00:04:44.980 --> 00:04:47.811
表を作る仲間の要素との関係も整理します。

58
00:04:47.811 --> 00:04:53.261
キャプションは表全体の題名、ティーヘッドは列の見出し行のまとまり、ティーボディはデータ行のまとまり、

59
00:04:53.261 --> 00:04:58.711
ティーフットは合計など表を締めくくる行のまとまりです。

60
00:04:58.711 --> 00:05:03.665
そして、見出しセルがティーエイチ、通常のデータセルがティーディーです。

61
00:05:03.665 --> 00:05:09.611
それぞれが担当する範囲が決まっているため、大きな表でも構造が読み取りやすくなります。

62
00:05:09.611 --> 00:05:14.565
キャプションは、その中でも表全体を代表する、唯一の題名という立場です。

63
00:05:14.565 --> 00:05:18.245
一つの表にキャプションは一つまで、と覚えてください。

64
00:05:18.245 --> 00:05:25.040
これらの要素を役割ごとに使うことで、保守するときにも、どこを直せばよいかが分かりやすくなります。

65
00:05:25.040 --> 00:05:27.751
アクセシビリティの視点も大切です。

66
00:05:27.751 --> 00:05:32.616
支援技術を使う場合、キャプションは表の内容に入る前に読み上げられるため、

67
00:05:32.616 --> 00:05:37.480
このあと何の表が始まるのかを、最初に把握できます。

68
00:05:37.480 --> 00:05:43.701
目で表全体を眺められない利用者にとって、この一言の題名は大きな助けになります。

69
00:05:43.701 --> 00:05:49.761
一方で、複雑な表の読み方の説明までキャプションに詰め込むのは向いていません。

70
00:05:49.761 --> 00:05:54.706
詳しい補足は、表の前後の本文に分けて書くのが読みやすい形です。

71
00:05:54.706 --> 00:06:01.404
また、小さな画面幅や文字を拡大したときにも、題名が欠けずに読めるかを確認しましょう。

72
00:06:01.404 --> 00:06:09.060
作ったあとは、キーボード操作や読み上げ順も含めて、実際の利用場面を想像しながら確認してください。

73
00:06:09.060 --> 00:06:11.328
ブラウザー互換性を確認します。

74
00:06:11.328 --> 00:06:17.753
記事が紹介するエムディーエヌのデータでは、キャプション要素本体は、クロームが一以降、

75
00:06:17.753 --> 00:06:24.178
エッジが十二以降、ファイアフォックスが一以降、サファリが四以前の版から対応しています。

76
00:06:24.178 --> 00:06:31.888
かなり古くから使われてきた基本要素なので、現在の主要ブラウザーでは安心して使えると考えてよいでしょう。

77
00:06:31.888 --> 00:06:39.296
ただし、この表は要素本体の対応を示すもので、組み合わせる追加機能までを保証するものではありません。

78
00:06:39.296 --> 00:06:44.285
モバイル環境を含め、実際に使う環境でも表示を試しておくと確実です。

79
00:06:44.285 --> 00:06:47.158
対応表は要素本体の確認時点の記録です。

80
00:06:47.158 --> 00:06:52.600
仕様が変わることもあるため、新しい案件では最新情報も併せて見てください。

81
00:06:52.600 --> 00:06:56.153
まとめとして、よくある間違いを三つ挙げます。

82
00:06:56.153 --> 00:07:02.775
一つ目は、キャプションをテーブルの外側や、行のあとなど途中に置いてしまうことです。

83
00:07:02.775 --> 00:07:05.843
必ず最初の子要素として置いてください。

84
00:07:05.843 --> 00:07:10.688
二つ目は、一つの表にキャプションを複数置いてしまうことです。

85
00:07:10.688 --> 00:07:12.465
題名は一つに絞ります。

86
00:07:12.465 --> 00:07:19.086
三つ目は、題名を見出しや段落で済ませてしまい、表との関係が伝わらなくなることです。

87
00:07:19.086 --> 00:07:22.478
キャプションは、表の題名を付ける要素です。

88
00:07:22.478 --> 00:07:25.869
これでキャプションタグの解説を終わります。

89
00:07:25.869 --> 00:07:30.714
ぜひ、自分の表に短い題名を付ける練習から始めてみてください。

90
00:07:30.714 --> 00:07:37.820
小さな表でも題名を付ける習慣を付けておくと、ページ全体の分かりやすさが大きく向上します。