WEBVTT

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

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

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

4
00:00:09.961 --> 00:00:20.238
フィグキャプションは、前回学んだフィギュアの中に置いて、その図や画像、コード例が何を示しているのかを言葉で伝える説明文の要素です。

5
00:00:20.238 --> 00:00:28.143
写真の下に添えるキャプションや、図一、売上の推移、といった題名を思い浮かべると分かりやすいでしょう。

6
00:00:28.143 --> 00:00:32.412
今回は、置き場所のルールから、記事のコード例、エーエルティーやピーとの違いまで、

7
00:00:32.412 --> 00:00:36.681
順番に確認していきましょう。

8
00:00:36.681 --> 00:00:44.428
図に名前を付けることで、本文の中でその図へ触れるときの言葉もそろい、文章全体の流れが整理されます。

9
00:00:44.428 --> 00:00:46.450
基本の書き方を確認します。

10
00:00:46.450 --> 00:00:52.981
フィグキャプションは開始タグと終了タグを両方書き、必ずフィギュア要素の中に置きます。

11
00:00:52.981 --> 00:01:00.291
画面の例では、画像の下にフィグキャプションで、図一、来場者数の推移、という説明を付けています。

12
00:01:00.291 --> 00:01:08.844
位置のルールが大切で、置けるのはフィギュアの最初か最後のどちらか、そして一つのフィギュアに対して一つだけです。

13
00:01:08.844 --> 00:01:12.110
真ん中に置いたり、複数並べたりはしません。

14
00:01:12.110 --> 00:01:18.486
まずは、図と説明が同じフィギュアの中に収まっているかを確認する習慣を付けましょう。

15
00:01:18.486 --> 00:01:25.640
開始タグと終了タグの対応が取れているか、書き終わったあとにもう一度目で追って確認しましょう。

16
00:01:25.640 --> 00:01:27.796
記事の活用事例を読み解きます。

17
00:01:27.796 --> 00:01:31.246
例に使われているのは画像ではなく、コード例です。

18
00:01:31.246 --> 00:01:36.134
フィギュアの中に、プリーとコードで示した短いプログラムを置き、その下にフィグキャプションで、

19
00:01:36.134 --> 00:01:41.022
変数に値を代入する例、と説明を付けています。

20
00:01:41.022 --> 00:01:45.622
このように、フィグキャプションの相手は写真やグラフに限りません。

21
00:01:45.622 --> 00:01:49.359
試すときは練習用ファイルをコピーし、ボディの適切な位置にこの形を写して、

22
00:01:49.359 --> 00:01:53.097
保存後に再読み込みしてください。

23
00:01:53.097 --> 00:01:59.278
開発者ツールのエレメンツで、説明文がフィギュアの中に入っているかを確認すると安心です。

24
00:01:59.278 --> 00:02:05.172
コードとその説明がひとまとまりとして扱えることが、この書き方の大きなポイントです。

25
00:02:05.172 --> 00:02:07.585
置く位置について、もう少し詳しく見ます。

26
00:02:07.585 --> 00:02:11.686
フィグキャプションは、フィギュアの最後に置く書き方がよく使われます。

27
00:02:11.686 --> 00:02:15.063
図を先に見て、その直下で説明を読む流れが自然だからです。

28
00:02:15.063 --> 00:02:17.958
一方、画面の例のように最初に置くこともできます。

29
00:02:17.958 --> 00:02:21.215
題名を先に示してから図を見せたい場合に選ぶ書き方です。

30
00:02:21.215 --> 00:02:26.885
どちらの位置でも、フィグキャプションがそのフィギュア全体の説明であることに変わりはありません。

31
00:02:26.885 --> 00:02:32.675
選んだ位置で文書全体の書き方をそろえておくと、読み手にも書き手にも分かりやすいコードになります。

32
00:02:32.675 --> 00:02:38.344
どちらにするか迷ったら、読み手の視線が図と説明のどちらに先に触れるべきかで考えてみてください。

33
00:02:38.344 --> 00:02:41.032
フィグキャプションの中身を確認します。

34
00:02:41.032 --> 00:02:44.426
基本は、図の題名や短い補足を文章で書く場所です。

35
00:02:44.426 --> 00:02:48.528
画面の例のように、ストロングで一部を目立たせたり、リンクを入れたりといった、

36
00:02:48.528 --> 00:02:52.630
文章の中で使う要素も組み合わせられます。

37
00:02:52.630 --> 00:02:56.167
ただし、キャプションはあくまで図への短い説明です。

38
00:02:56.167 --> 00:03:01.683
何行にもなる詳しい解説まで詰め込むと、図と本文の区別が曖昧になってしまいます。

39
00:03:01.683 --> 00:03:05.856
長い説明は本文の段落に書き、キャプションには、その図が何であるかが一目で分かる一文を残す、

40
00:03:05.856 --> 00:03:10.029
という分け方がおすすめです。

41
00:03:10.029 --> 00:03:15.404
写真の出典や撮影した場面などを短く補足したいときにも、この場所が役立ちます。

42
00:03:15.404 --> 00:03:16.789
属性を確認します。

43
00:03:16.789 --> 00:03:21.407
フィグキャプションには、この要素専用の必須属性はありません。

44
00:03:21.407 --> 00:03:28.332
必要に応じて、アイディーやクラス、ラングといった、多くの要素で使える共通属性を利用します。

45
00:03:28.332 --> 00:03:35.720
アイディーは文書の中で一つだけの識別子で、ページ内リンクやジャバスクリプトからの参照に使います。

46
00:03:35.720 --> 00:03:41.569
クラスは、シーエスエスやスクリプトで複数の要素をまとめて選ぶための名前です。

47
00:03:41.569 --> 00:03:48.341
データ属性でアプリ独自の値を保持することもできますが、秘密情報を置く場所ではありません。

48
00:03:48.341 --> 00:03:54.036
画像のエスアールシーなど、親や子に付ける属性と混同しないようにしましょう。

49
00:03:54.036 --> 00:04:00.192
属性は何も付けなくても成り立つ要素なので、必要な場面でだけ追加すれば大丈夫です。

50
00:04:00.192 --> 00:04:03.818
混同しやすいエーエルティーとの違いを整理します。

51
00:04:03.818 --> 00:04:11.372
エーエルティーは、画像が表示できないときや読み上げを利用するときに、画像の代わりとなるテキストです。

52
00:04:11.372 --> 00:04:17.264
一方、フィグキャプションは、すべての読者に画面上で見せる、図の説明や題名です。

53
00:04:17.264 --> 00:04:21.495
役割が違うため、まったく同じ文章を両方に書くと、読み上げでは同じ内容が二度続いて、

54
00:04:21.495 --> 00:04:25.725
かえって分かりにくくなります。

55
00:04:25.725 --> 00:04:30.711
画像の中身そのものはエーエルティーに、図全体の題名や補足はキャプションに、

56
00:04:30.711 --> 00:04:35.697
と書き分けることが、アクセシビリティを高めるポイントです。

57
00:04:35.697 --> 00:04:41.740
書く前に、その一文が誰に向けたものかを思い出すと、自然と役割を使い分けられます。

58
00:04:41.740 --> 00:04:44.575
ピー、段落との違いも押さえましょう。

59
00:04:44.575 --> 00:04:51.032
ピーは本文の一般的な段落を表す要素で、特定の図と結び付いているわけではありません。

60
00:04:51.032 --> 00:04:59.379
対してフィグキャプションは、親であるフィギュアの説明であることが、タグ自体に意味として組み込まれています。

61
00:04:59.379 --> 00:05:06.624
ですから、図の説明はフィグキャプションに、図とは独立した本文の説明はピーに書くのが基本です。

62
00:05:06.624 --> 00:05:11.349
逆に、フィギュアを使わず画像だけを置く場面では、無理にキャプションを作らず、

63
00:05:11.349 --> 00:05:16.074
通常の段落で説明すれば十分な場合もあります。

64
00:05:16.074 --> 00:05:19.066
意味に合った使い分けを心がけましょう。

65
00:05:19.066 --> 00:05:27.728
なお、表の題名にはキャプションというよく似た名前の別の要素があるので、使う場面を取り違えないようにしましょう。

66
00:05:27.728 --> 00:05:29.868
見た目との関係を確認します。

67
00:05:29.868 --> 00:05:34.760
フィグキャプションは、そのままでは本文と同じような文字で表示されることが多く、

68
00:05:34.760 --> 00:05:39.651
キャプションらしい見た目はシーエスエスで整えます。

69
00:05:39.651 --> 00:05:44.849
画面の例では、文字を少し小さくし、色を薄くして、中央に寄せています。

70
00:05:44.849 --> 00:05:49.588
図の下に小さめの文字が添えられている、あの見覚えのある形です。

71
00:05:49.588 --> 00:05:55.855
ただし、文字を小さくしたいだけなら、フィグキャプション以外の要素でも指定できます。

72
00:05:55.855 --> 00:06:03.804
フィグキャプションを選ぶ理由は見た目ではなく、図の説明という意味のほうだということを忘れないでください。

73
00:06:03.804 --> 00:06:10.836
余白の付け方は、親であるフィギュア側の指定と合わせて考えると、配置全体が整えやすくなります。

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

75
00:06:12.919 --> 00:06:19.723
記事が参照するエムディーエヌのデータでは、フィグキャプション要素は、クロームが八以降、

76
00:06:19.723 --> 00:06:26.528
エッジが十二以降、ファイアフォックスが四以降、サファリが五点一以降と、主要ブラウザーで古くから対応しています。

77
00:06:26.528 --> 00:06:34.582
親のフィギュアと対応の歩みがそろっているため、基本的な使い方であれば、対応を心配せず安心して使える要素だといえます。

78
00:06:34.582 --> 00:06:37.776
ただし、この表は要素本体の対応開始の目安です。

79
00:06:37.776 --> 00:06:43.469
新しい機能と組み合わせる場合は別途確認し、利用対象の実機でも試しておくと安心です。

80
00:06:43.469 --> 00:06:50.968
スマートフォンなどモバイル環境のブラウザーでも、図と説明が一緒に表示されるかをあわせて確認しておきましょう。

81
00:06:50.968 --> 00:06:53.623
最後に、よくある間違いとまとめです。

82
00:06:53.623 --> 00:06:58.639
一つ目は、フィグキャプションをフィギュアの外に置いてしまうことです。

83
00:06:58.639 --> 00:07:02.770
キャプションは必ずフィギュアの中、最初か最後に置きます。

84
00:07:02.770 --> 00:07:07.196
二つ目は、一つのフィギュアにキャプションを複数置くことです。

85
00:07:07.196 --> 00:07:09.261
説明は一つにまとめましょう。

86
00:07:09.261 --> 00:07:14.129
三つ目は、エーエルティーとキャプションに同じ文章を重ねることです。

87
00:07:14.129 --> 00:07:16.342
役割に応じて書き分けましょう。

88
00:07:16.342 --> 00:07:23.128
公開前には、三百二十ピクセル程度の狭い画面でも、図と説明が欠けていないかを確認してください。

89
00:07:23.128 --> 00:07:26.964
図に説明を添えたい場面で、ぜひ活用してみてください。

90
00:07:26.964 --> 00:07:33.012
意味に合った使い方をひとつずつ積み重ねることが、読みやすいページ作りへの近道です。

91
00:07:33.012 --> 00:07:34.340
お疲れさまでした。