WEBVTT

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

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

3
00:00:04.409 --> 00:00:08.189
HTMLタグ編の四十本目は、ピクチャータグです。

4
00:00:08.189 --> 00:00:17.481
ピクチャーは、画面の幅や対応している画像形式といった条件に合わせて、表示する画像をブラウザーに選ばせるためのタグです。

5
00:00:17.481 --> 00:00:24.725
スマートフォンでは小さく軽い画像、パソコンでは大きく鮮明な画像、といった出し分けができます。

6
00:00:24.725 --> 00:00:30.709
仕組みの中心は、中に入れるソース要素と、最後に必ず置くアイエムジー要素です。

7
00:00:30.709 --> 00:00:37.481
今回は基本の書き方から、形式の切り替え、画面幅での切り替えまでを順に確認していきます。

8
00:00:37.481 --> 00:00:43.780
読み込みの速さと見やすさを両立できる点が、現代のサイト作りで重視される理由です。

9
00:00:43.780 --> 00:00:47.064
どんな場面で使うのか、代表例を三つ挙げます。

10
00:00:47.064 --> 00:00:49.452
一つ目は画像形式の出し分けです。

11
00:00:49.452 --> 00:00:57.362
軽くて高画質な新しい形式を用意し、対応するブラウザーではそちらを、対応しない場合は従来の形式を表示します。

12
00:00:57.362 --> 00:01:01.467
二つ目は画面幅による出し分けで、狭い画面では被写体を大きく切り取った専用画像を見せる、

13
00:01:01.467 --> 00:01:05.571
といった工夫ができます。

14
00:01:05.571 --> 00:01:13.034
三つ目のポイントは、シーエスエスの背景画像とは違い、ピクチャーは本文中の画像として扱われることです。

15
00:01:13.034 --> 00:01:16.616
そのため代替テキストで画像の意味を伝えられます。

16
00:01:16.616 --> 00:01:21.392
表示の都合だけでなく、読み手への伝わり方まで考えて選ぶタグです。

17
00:01:21.392 --> 00:01:23.334
基本の書き方を確認します。

18
00:01:23.334 --> 00:01:27.890
ピクチャーには開始タグと終了タグがあり、その内側に候補を示すソース要素と、

19
00:01:27.890 --> 00:01:32.445
実際に画像を表示するアイエムジー要素を並べます。

20
00:01:32.445 --> 00:01:37.374
順番が大切で、ソースを先に書き、アイエムジーは必ず最後に置きます。

21
00:01:37.374 --> 00:01:42.602
ブラウザーはソースの条件を上から順に確かめ、条件に合うものがあればその画像を選び、

22
00:01:42.602 --> 00:01:47.830
どれにも合わなければ最後のアイエムジーの画像を表示します。

23
00:01:47.830 --> 00:01:56.643
つまりピクチャー自体が画像を見せるのではなく、どの画像をアイエムジーで見せるかを切り替える入れ物だと理解してください。

24
00:01:56.643 --> 00:02:01.572
書く順番を守るだけで、複雑なプログラムなしに出し分けが完成します。

25
00:02:01.572 --> 00:02:05.709
記事の活用例を、自分の言葉でたどってみましょう。

26
00:02:05.709 --> 00:02:13.812
この例では、まずソース要素でウェブピー形式の画像を候補に挙げ、タイプ属性で形式を示しています。

27
00:02:13.812 --> 00:02:20.018
ブラウザーがウェブピーに対応していればその画像が選ばれ、対応していなければ候補は飛ばされ、

28
00:02:20.018 --> 00:02:26.224
最後のアイエムジーにあるジェイペグ画像が表示されます。

29
00:02:26.224 --> 00:02:31.912
画像ファイル自体は自分で用意する必要がある点にも注意してください。

30
00:02:31.912 --> 00:02:40.359
また、代替テキストのオルトや、幅と高さの寸法は、ピクチャーやソースではなくアイエムジーに書きます。

31
00:02:40.359 --> 00:02:44.152
ここを間違えると、意味も寸法も伝わりません。

32
00:02:44.152 --> 00:02:47.702
候補を決めるソース要素の指定を整理します。

33
00:02:47.702 --> 00:02:53.279
中心になるのがソースセットで、候補となる画像ファイルを指定します。

34
00:02:53.279 --> 00:02:59.702
タイプは画像形式の条件で、この形式に対応するブラウザーだけが候補を選べます。

35
00:02:59.702 --> 00:03:03.759
メディアは画面幅などの条件で、たとえば画面が狭いときだけこの候補を選ぶ、

36
00:03:03.759 --> 00:03:07.815
といった指定ができます。

37
00:03:07.815 --> 00:03:12.548
ピクチャーの中のソースは、ビデオやオーディオで使うソースとは役割が少し違い、

38
00:03:12.548 --> 00:03:17.281
常にアイエムジーとセットで働きます。

39
00:03:17.281 --> 00:03:22.014
条件は上から順に評価され、最初に合った候補で決定します。

40
00:03:22.014 --> 00:03:26.408
並べる順番まで含めて設計するのが、このタグの肝です。

41
00:03:26.408 --> 00:03:32.324
条件を書きすぎず、必要な出し分けだけに絞ることも読みやすさのコツです。

42
00:03:32.324 --> 00:03:34.880
次に、画面幅で切り替える例です。

43
00:03:34.880 --> 00:03:39.914
ソースのメディア属性に、最大幅六百ピクセルという条件を書くと、画面が六百ピクセル以下のときだけ、

44
00:03:39.914 --> 00:03:44.947
そのソースの画像が選ばれます。

45
00:03:44.947 --> 00:03:51.498
画面が広い場合は条件に合わないため、最後のアイエムジーの横長の画像が表示されます。

46
00:03:51.498 --> 00:03:55.892
この仕組みを使えば、スマホでは主要な被写体が大きく写った縦寄りの画像を見せる、

47
00:03:55.892 --> 00:04:00.285
といった見せ方の調整ができます。

48
00:04:00.285 --> 00:04:05.079
単に縮小するのと違い、構図そのものを変えられるのが強みです。

49
00:04:05.079 --> 00:04:10.032
条件の書き方は、シーエスエスのメディアクエリとよく似ています。

50
00:04:10.032 --> 00:04:14.789
なぜ最後のアイエムジーが必須なのかを押さえましょう。

51
00:04:14.789 --> 00:04:24.304
ピクチャーとソースは、あくまで候補と条件を示すだけの存在で、画像を画面に表示する実体はアイエムジーです。

52
00:04:24.304 --> 00:04:28.696
アイエムジーを書き忘れると、候補だけがあって表示する本体がない状態になり、

53
00:04:28.696 --> 00:04:33.088
画像は表示されません。

54
00:04:33.088 --> 00:04:40.041
代替テキスト、幅、高さといった大切な情報も、すべてアイエムジーに集まります。

55
00:04:40.041 --> 00:04:48.824
さらに、万が一ピクチャーの仕組みが働かない環境でも、アイエムジー単体としては画像が表示されます。

56
00:04:48.824 --> 00:04:56.692
最後のアイエムジーは、手続き上の決まりではなく、表示を保証する保険だと考えてください。

57
00:04:56.692 --> 00:04:58.993
属性の置き場所を整理します。

58
00:04:58.993 --> 00:05:02.610
ピクチャー自体には、専用の属性はありません。

59
00:05:02.610 --> 00:05:09.513
使えるのは、アイディーやクラス、ラングといった、どの要素でも使える共通属性だけです。

60
00:05:09.513 --> 00:05:15.267
条件に関わるソースセット、タイプ、メディアはソース要素の属性ですし、画像の場所を示すソースや、

61
00:05:15.267 --> 00:05:21.020
代替テキストのオルトはアイエムジーの属性です。

62
00:05:21.020 --> 00:05:29.239
同じソースセットという名前でも、置く要素によって意味合いが変わるため、混同しないようにしてください。

63
00:05:29.239 --> 00:05:36.800
迷ったら、入れ物には共通属性、候補には条件、本体には画像情報、と役割で覚えると整理できます。

64
00:05:36.800 --> 00:05:39.527
使うときの注意点を三つ挙げます。

65
00:05:39.527 --> 00:05:45.492
一つ目、候補は上から順に評価され、最初に条件へ合ったもので決まります。

66
00:05:45.492 --> 00:05:50.606
優先したい候補ほど上に書く、という順番の意識が欠かせません。

67
00:05:50.606 --> 00:05:55.889
二つ目、タグを書いただけでは画像ファイルは自動で作られません。

68
00:05:55.889 --> 00:06:02.536
形式違いや大きさ違いのファイルは、あらかじめ自分で用意しておく必要があります。

69
00:06:02.536 --> 00:06:04.411
三つ目、表示確認です。

70
00:06:04.411 --> 00:06:09.354
三百二十ピクセル程度の狭い画面や文字を拡大した状態でも画像が欠けないか、

71
00:06:09.354 --> 00:06:14.297
開発者ツールと実機の両方で確かめてください。

72
00:06:14.297 --> 00:06:19.921
切り替え条件は、境界の幅の前後で特に念入りに見るのがおすすめです。

73
00:06:19.921 --> 00:06:25.716
候補のファイル名の打ち間違いも、表示されない原因としてよくあります。

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

75
00:06:28.130 --> 00:06:34.807
記事が参照するエムディーエヌの記録では、ピクチャー要素はクロームが三十八以降、

76
00:06:34.807 --> 00:06:41.485
エッジが十三以降、ファイアフォックスが三十八以降、サファリが九点一以降で対応しています。

77
00:06:41.485 --> 00:06:46.473
現在の主要ブラウザーであれば、基本的に安心して使える要素です。

78
00:06:46.473 --> 00:06:52.748
ただし注意したいのは、要素自体の対応と、画像形式の対応は別問題だという点です。

79
00:06:52.748 --> 00:06:58.782
たとえば新しい画像形式に対応するかどうかはブラウザーごとに異なるため、必ずアイエムジーの保険を残し、

80
00:06:58.782 --> 00:07:04.816
対象の実機でも表示を確かめる習慣を付けてください。

81
00:07:04.816 --> 00:07:06.253
最後にまとめです。

82
00:07:06.253 --> 00:07:14.237
ピクチャータグは、画面条件や画像形式に応じて、表示する画像をブラウザーに選ばせるための入れ物でした。

83
00:07:14.237 --> 00:07:15.834
ポイントは三つです。

84
00:07:15.834 --> 00:07:22.381
一つ目、候補と条件はソースに書き、タイプで形式、メディアで画面条件を指定すること。

85
00:07:22.381 --> 00:07:27.810
二つ目、候補は上から順に評価されるため、優先順位どおりに並べること。

86
00:07:27.810 --> 00:07:31.962
三つ目、最後には必ずアイエムジーを置き、代替テキストや寸法もそこに書き、

87
00:07:31.962 --> 00:07:36.113
表示と意味の保険にすることです。

88
00:07:36.113 --> 00:07:41.702
条件で選ぶ、という発想は、後のレスポンシブ対応の学習にもつながります。

89
00:07:41.702 --> 00:07:47.930
練習として、手元の画像でウェブピーとジェイペグの出し分けを書いてみてください。

90
00:07:47.930 --> 00:07:49.367
お疲れさまでした。

91
00:07:49.367 --> 00:07:50.804
次回もお楽しみに。