WEBVTT

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

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

3
00:00:04.482 --> 00:00:09.445
エイチティーエムエルタグ編の七十八本目は、フィギュアタグです。

4
00:00:09.445 --> 00:00:17.288
フィギュアは、図や画像、コード例など、本文から参照できる内容をひとつのまとまりとして囲む要素です。

5
00:00:17.288 --> 00:00:23.531
たとえば、文章の中で、右の図をご覧ください、と紹介するような画像が典型例です。

6
00:00:23.531 --> 00:00:29.214
今回は、このフィギュアの役割と、説明文を付けるフィグキャプションとの組み合わせ、

7
00:00:29.214 --> 00:00:34.897
使う場面と使わない場面の見分け方を順番に確認していきましょう。

8
00:00:34.897 --> 00:00:41.620
画像をただ置くのではなく、本文と結び付けて伝えるための要素だとイメージしてください。

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

10
00:00:43.992 --> 00:00:51.475
フィギュアは開始タグと終了タグを両方書き、その間に図や画像といった内容を置きます。

11
00:00:51.475 --> 00:00:58.957
画面の例では、フィギュアの中に画像をひとつ置いた、最もシンプルな形を示しています。

12
00:00:58.957 --> 00:01:05.527
この教材では、開始タグと終了タグを省略せず、明示する書き方で統一します。

13
00:01:05.527 --> 00:01:14.287
フィギュアは、本文の流れの中に置ける要素で、段落などと同じようにボディの適切な位置に配置します。

14
00:01:14.287 --> 00:01:19.215
まずは、内容を正しく囲むという基本形を押さえましょう。

15
00:01:19.215 --> 00:01:24.872
タグの対応関係を目で追う確認が、表示崩れを防ぐ一番の近道です。

16
00:01:24.872 --> 00:01:29.636
フィギュアと最もよく組み合わせるのが、フィグキャプションです。

17
00:01:29.636 --> 00:01:34.093
これは、フィギュア全体に対する説明文や題名を表す要素です。

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

19
00:01:41.317 --> 00:01:49.616
フィグキャプションは、フィギュアの中にひとつだけ置くことができ、位置は最初か最後のどちらかと決まっています。

20
00:01:49.616 --> 00:01:54.765
説明文があることで、読み手はその図が何を示しているのかを一目で理解できますし、

21
00:01:54.765 --> 00:01:59.913
本文から、図一を見てください、と参照もしやすくなります。

22
00:01:59.913 --> 00:02:04.524
図と説明をセットで扱えることが、フィギュアの大きな利点です。

23
00:02:04.524 --> 00:02:09.008
フィギュアの中に入れられる内容は、画像だけではありません。

24
00:02:09.008 --> 00:02:17.511
イラストや写真、グラフといった図はもちろん、画面の例のように、コード例を説明文とセットで示す場合にも使えます。

25
00:02:17.511 --> 00:02:24.623
ほかにも、表や動画、まとまった引用などを、本文から参照するまとまりとして囲む場面があります。

26
00:02:24.623 --> 00:02:33.127
大切なのは、中身の種類ではなく、その内容が本文と関連しながらも、ひとつのまとまりとして取り出せるかどうかです。

27
00:02:33.127 --> 00:02:39.002
逆にいえば、本文そのものの段落を何でもフィギュアに入れるわけではありません。

28
00:02:39.002 --> 00:02:44.104
参照されるまとまり、という視点で中身を選ぶと判断しやすくなります。

29
00:02:44.104 --> 00:02:45.476
属性を確認します。

30
00:02:45.476 --> 00:02:49.441
フィギュアには、この要素専用の必須属性はありません。

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

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

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

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

35
00:03:16.124 --> 00:03:22.375
なお、画像のファイルを指定するエスアールシーなどは、中の画像要素に付ける属性です。

36
00:03:22.375 --> 00:03:26.492
フィギュア自身の属性と混同しないように注意しましょう。

37
00:03:26.492 --> 00:03:29.033
記事の活用事例を読み解きます。

38
00:03:29.033 --> 00:03:34.284
例では、学習の順番を示す図をフィギュアで囲み、その下に、ウェブ制作の学習順、

39
00:03:34.284 --> 00:03:39.535
という説明文をフィグキャプションで付けています。

40
00:03:39.535 --> 00:03:44.362
画像のエーエルティーには、図そのものが何を表しているかが書かれ、キャプションには、

41
00:03:44.362 --> 00:03:49.189
図の題名が簡潔に示されています。

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

43
00:03:53.678 --> 00:03:58.167
保存後に再読み込みしてください。

44
00:03:58.167 --> 00:04:06.467
開発者ツールのエレメンツで、画像と説明文がフィギュアの中に正しく入っているかを確認すると安心です。

45
00:04:06.467 --> 00:04:11.040
図と題名がセットになった、フィギュアらしい基本形です。

46
00:04:11.040 --> 00:04:17.375
ここで、混同しやすいエーエルティーとフィグキャプションの違いを整理します。

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

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

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

50
00:04:38.008 --> 00:04:43.231
かえって分かりにくくなります。

51
00:04:43.231 --> 00:04:47.597
画像の内容そのものはエーエルティーに、図全体の題名や補足はキャプションに、

52
00:04:47.597 --> 00:04:51.963
と書き分けることが大切です。

53
00:04:51.963 --> 00:04:57.100
この書き分けが、アクセシビリティを高めるポイントになります。

54
00:04:57.100 --> 00:05:00.142
使う場面と使わない場面を見分けましょう。

55
00:05:00.142 --> 00:05:07.745
フィギュアが向いているのは、説明文を付けたい図や、本文から独立したまとまりとして参照される内容です。

56
00:05:07.745 --> 00:05:12.004
反対に、すべての画像をフィギュアで囲む必要はありません。

57
00:05:12.004 --> 00:05:20.064
サイトのロゴや、文章の流れの中に直接属する画像、装飾だけの画像は、そのまま画像要素として置く方が自然です。

58
00:05:20.064 --> 00:05:26.451
判断の目安は、その内容に説明文を付けたいか、本文から図として参照したいかどうかです。

59
00:05:26.451 --> 00:05:31.470
意味のない囲みを増やすと、かえって文書構造が伝わりにくくなります。

60
00:05:31.470 --> 00:05:36.032
必要な場所にだけ使うことが、読みやすいコードにつながります。

61
00:05:36.032 --> 00:05:38.061
見た目との関係を確認します。

62
00:05:38.061 --> 00:05:42.480
フィギュアには、ブラウザーの標準スタイルで少し余白が付くことがありますが、

63
00:05:42.480 --> 00:05:46.899
それ以上の見た目は自分でシーエスエスで整えます。

64
00:05:46.899 --> 00:05:50.812
画面の例では、フィギュアに上下の余白と中央寄せを指定し、キャプションの文字を少し小さく、

65
00:05:50.812 --> 00:05:54.724
色を薄くしています。

66
00:05:54.724 --> 00:05:59.216
このように、キャプションらしい見た目もシーエスエスの担当です。

67
00:05:59.216 --> 00:06:03.997
フィギュアはあくまで、図と説明のまとまりという意味を表す要素です。

68
00:06:03.997 --> 00:06:07.765
意味を持つタグの選択と、見た目の指定は分けて考える。

69
00:06:07.765 --> 00:06:11.532
この原則は、ほかの要素でも共通する大切な考え方です。

70
00:06:11.532 --> 00:06:13.734
ブラウザー互換性を確認します。

71
00:06:13.734 --> 00:06:20.635
記事が参照するエムディーエヌのデータでは、フィギュア要素は、クロームが八以降、

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

73
00:06:27.536 --> 00:06:32.675
基本的な使い方であれば、対応を心配せず安心して使える要素だといえます。

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

75
00:06:36.052 --> 00:06:43.981
新しい属性や機能を組み合わせる場合は、本体とは別に対応状況を確認し、利用対象の実機でも試しておくと安心です。

76
00:06:43.981 --> 00:06:49.120
モバイル環境は実装条件が異なる場合もあるため、あわせて確認しましょう。

77
00:06:49.120 --> 00:06:51.674
最後に、よくある間違いとまとめです。

78
00:06:51.674 --> 00:06:55.790
一つ目は、すべての画像をフィギュアで囲んでしまうことです。

79
00:06:55.790 --> 00:06:58.344
説明や参照が必要な図に絞りましょう。

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

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

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

83
00:07:11.825 --> 00:07:13.954
役割に応じて書き分けましょう。

84
00:07:13.954 --> 00:07:20.482
公開前には、目的に合ったまとまりか、狭い画面でも図と説明が欠けていないかを確認してください。

85
00:07:20.482 --> 00:07:25.023
図に説明を添えたい場面で、ぜひフィギュアを活用してみてください。

86
00:07:25.023 --> 00:07:26.300
お疲れさまでした。