WEBVTT

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

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

3
00:00:04.092 --> 00:00:08.914
エイチティーエムエルタグ編の六十二本目は、アイエムジー、タグです。

4
00:00:08.914 --> 00:00:14.614
アイエムジーは、ウェブページの中に写真や図などの画像を表示するためのタグです。

5
00:00:14.614 --> 00:00:20.313
学習サイトのトップに置くイラストも、記事の中の説明図も、このタグで表示します。

6
00:00:20.313 --> 00:00:23.820
ただし、ただ画像を置けばよいわけではありません。

7
00:00:23.820 --> 00:00:31.712
画像が見られない人にも内容が伝わるようにオルトで説明を付け、幅と高さを伝えて表示の崩れを防ぐことが大切です。

8
00:00:31.712 --> 00:00:36.388
今回は基本の書き方から、レスポンシブ対応まで順番に学びましょう。

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

10
00:00:38.235 --> 00:00:45.198
アイエムジーは空要素と呼ばれる種類で、終了タグは書きませんし、内側に文章を入れることもありません。

11
00:00:45.198 --> 00:00:47.330
タグ一つで画像が表示されます。

12
00:00:47.330 --> 00:00:50.456
必須に近いのが、ソース属性とオルト属性です。

13
00:00:50.456 --> 00:00:56.850
ソースには表示したい画像ファイルへのパスを書き、オルトには画像の内容を短い文章で書きます。

14
00:00:56.850 --> 00:01:02.676
画面の例では、猫の写真のファイルを指定し、窓辺で眠る猫、という説明を付けています。

15
00:01:02.676 --> 00:01:07.934
画像は見出しや段落と同じように、ボディの中のふさわしい位置に置きましょう。

16
00:01:07.934 --> 00:01:13.760
パスが間違っていると画像は表示されないので、ファイルの場所をよく確認してください。

17
00:01:13.760 --> 00:01:16.652
中心になる二つの属性を詳しく見ます。

18
00:01:16.652 --> 00:01:21.312
ソースは、読み込む画像のユーアールエルやファイルパスです。

19
00:01:21.312 --> 00:01:26.455
存在しない場所を指定すると、壊れた画像のアイコンだけが残ります。

20
00:01:26.455 --> 00:01:31.918
オルトは代替テキストで、画像が読み込めないときや、音声でページを読むスクリーンリーダーを使っているときに、

21
00:01:31.918 --> 00:01:37.382
画像の代わりに伝わる文章です。

22
00:01:37.382 --> 00:01:44.452
画像自体がリンクになっている場合は、見た目ではなくリンク先が分かる文章にすると親切です。

23
00:01:44.452 --> 00:01:53.772
例えばロゴ画像なら、ロゴ、とだけ書くのではなく、サイト名とトップへのリンクであることが伝わる書き方を心がけましょう。

24
00:01:53.772 --> 00:01:57.991
オルトの書き分けは、実務で特に大切なポイントです。

25
00:01:57.991 --> 00:02:04.911
グラフや図のように情報を持つ画像には、その内容が文字だけでも分かる説明を書きます。

26
00:02:04.911 --> 00:02:11.324
一方、背景の模様や区切り線のような装飾だけの画像は、オルトを空文字にします。

27
00:02:11.324 --> 00:02:16.725
空にすると読み上げの対象から外れ、聞いている人の負担が減ります。

28
00:02:16.725 --> 00:02:23.645
また、オルトの文章に、画像、とか、写真、といった言葉を重ねて書く必要はありません。

29
00:02:23.645 --> 00:02:29.889
何が写っているか、何を伝える図なのか、その核心だけを簡潔にまとめましょう。

30
00:02:29.889 --> 00:02:36.640
判断に迷ったら、その画像が見えなくても内容が理解できるか、を基準にしてください。

31
00:02:36.640 --> 00:02:40.859
次に、幅と高さを表す、ウィドゥスとハイトです。

32
00:02:40.859 --> 00:02:50.765
この二つを書いておくと、ブラウザーは画像を読み込む前から、縦横比をもとに表示する場所の大きさを予測できます。

33
00:02:50.765 --> 00:02:56.544
場所が先に確保されていれば、画像が表示された瞬間に下の文章が押し下げられる、

34
00:02:56.544 --> 00:03:02.322
いわゆるレイアウトのガタつきが起きにくくなります。

35
00:03:02.322 --> 00:03:12.779
ここで書く数値は、画像本来の寸法や比率を伝えるもので、画面上の見た目の大きさはシーエスエスで調整するのが基本です。

36
00:03:12.779 --> 00:03:20.300
比率が実際と違うと画像がゆがむので、元の画像の縦横比に合わせて正しく書きましょう。

37
00:03:20.300 --> 00:03:23.504
読み込みを助ける属性も見ておきましょう。

38
00:03:23.504 --> 00:03:30.393
ローディングにレイジーを指定すると、画面に近づくまで画像の読み込みを後回しにできます。

39
00:03:30.393 --> 00:03:36.001
ページの下の方にある画像が多いときに有効で、最初の表示を軽くできます。

40
00:03:36.001 --> 00:03:39.846
反対にイーガーは、すぐに読み込むという指定です。

41
00:03:39.846 --> 00:03:43.370
注意したいのは、ページ冒頭の主要な画像です。

42
00:03:43.370 --> 00:03:49.138
そこにレイジーを付けると、肝心の画像の表示が遅れてしまうことがあります。

43
00:03:49.138 --> 00:03:57.149
デコーディングのアシンクは、画像の解析を非同期にするヒントですが、表示を保証する命令ではありません。

44
00:03:57.149 --> 00:03:59.712
役割を理解して使い分けましょう。

45
00:03:59.712 --> 00:04:05.919
スマートフォンとパソコンで同じ大きな画像を使うと、通信量が無駄になりがちです。

46
00:04:05.919 --> 00:04:09.421
そこで使うのが、ソースセットとサイズズです。

47
00:04:09.421 --> 00:04:15.628
ソースセットには、小さい画像と大きい画像など、複数の候補を幅と一緒に並べます。

48
00:04:15.628 --> 00:04:22.472
サイズズには、その画像が画面上でおよそどれくらいの幅で表示されるかの見込みを書きます。

49
00:04:22.472 --> 00:04:28.997
ブラウザーはこの二つと画面の幅や解像度を比べて、ちょうどよい候補を自動で選びます。

50
00:04:28.997 --> 00:04:34.568
書き方は少し複雑ですが、表示が速くなり、画質も保てる便利な仕組みです。

51
00:04:34.568 --> 00:04:39.820
実際のシーエスエスのレイアウトと見込みが合っていることが大切です。

52
00:04:39.820 --> 00:04:42.200
ほかの属性も簡単に押さえます。

53
00:04:42.200 --> 00:04:46.642
クロスオリジンは、別のサイトから画像を取得するときのシーオーアールエスの設定で、

54
00:04:46.642 --> 00:04:51.083
配信側の許可と合わせて使います。

55
00:04:51.083 --> 00:04:58.064
リファラーポリシーは、画像を取得するときに参照元の情報をどこまで送るかを決めるものです。

56
00:04:58.064 --> 00:05:01.554
どちらも必要な場面でだけ指定すれば十分です。

57
00:05:01.554 --> 00:05:11.072
また、画像に説明文を付けたいときは、フィギュアタグで画像を囲み、フィグキャプションで説明を添える書き方がよく使われます。

58
00:05:11.072 --> 00:05:15.752
オルトが画像そのものの代替であるのに対し、キャプションは全員に見える補足説明だ、

59
00:05:15.752 --> 00:05:20.432
と役割を分けると分かりやすいでしょう。

60
00:05:20.432 --> 00:05:24.698
活用例として、学習の順番を示す図を表示してみましょう。

61
00:05:24.698 --> 00:05:30.702
ソースには図のファイルを指定し、オルトには、エイチティーエムエルからシーエスエス、

62
00:05:30.702 --> 00:05:36.706
ジャバスクリプトへ進む学習順、と、図の意味が伝わる文章を書いています。

63
00:05:36.706 --> 00:05:44.448
ウィドゥスとハイトで縦横比を伝え、ページの下の方に置く画像なのでローディングはレイジーにしました。

64
00:05:44.448 --> 00:05:52.190
これで、画像が見える人にも、音声で聞く人にも、読み込み中のレイアウトにも配慮した書き方になります。

65
00:05:52.190 --> 00:06:00.564
練習では、ファイルを保存して再読み込みし、開発者ツールで要素が正しく表示されているか確認してみてください。

66
00:06:00.564 --> 00:06:02.618
ブラウザー互換性を確認します。

67
00:06:02.618 --> 00:06:08.573
記事が参照するエムディーエヌの記録では、アイエムジー要素本体はクロームが一以降、

68
00:06:08.573 --> 00:06:14.528
エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、ごく初期から対応しています。

69
00:06:14.528 --> 00:06:19.183
ソースやオルト、幅と高さといった基本の属性も同様に古くから使えます。

70
00:06:19.183 --> 00:06:23.974
一方で、ローディングはクローム七十七以降やサファリ十五点四以降、ソースセットはクローム三十四以降など、

71
00:06:23.974 --> 00:06:28.766
新しい属性ほど対応開始が遅くなります。

72
00:06:28.766 --> 00:06:35.611
要素が使えることと、すべての属性が使えることは別なので、新しい指定を使うときは個別に確認しましょう。

73
00:06:35.611 --> 00:06:41.224
三百二十ピクセル程度の狭い画面でも画像がはみ出さないか、実機で試すことも大切です。

74
00:06:41.224 --> 00:06:42.650
最後にまとめです。

75
00:06:42.650 --> 00:06:47.880
アイエムジータグは、画像を表示する空要素で、ポイントは三つでした。

76
00:06:47.880 --> 00:06:53.426
一つ目、ソースでファイルを指定し、オルトで画像の意味を必ず伝えること。

77
00:06:53.426 --> 00:07:00.240
二つ目、情報を持つ画像には内容に合う説明を書き、装飾だけの画像はオルトを空にすること。

78
00:07:00.240 --> 00:07:10.382
三つ目、ウィドゥスとハイトで縦横比を伝えて表示を安定させ、必要に応じてローディングやソースセットで読み込みを最適化することです。

79
00:07:10.382 --> 00:07:18.463
練習として、手元の写真を一枚選び、意味の伝わるオルトと正しい寸法を付けてページに表示してみてください。

80
00:07:18.463 --> 00:07:19.890
お疲れさまでした。

81
00:07:19.890 --> 00:07:25.436
次に画像を置くときは、見た目だけでなく伝わり方まで意識してみましょう。