VIDEO LESSON

HTMLのpictureタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:51動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の四十本目は、ピクチャータグです。
0:08ピクチャーは、画面の幅や対応している画像形式といった条件に合わせて、表示する画像をブラウザーに選ばせるためのタグです。
0:17スマートフォンでは小さく軽い画像、パソコンでは大きく鮮明な画像、といった出し分けができます。
0:24仕組みの中心は、中に入れるソース要素と、最後に必ず置くアイエムジー要素です。
0:30今回は基本の書き方から、形式の切り替え、画面幅での切り替えまでを順に確認していきます。
0:37読み込みの速さと見やすさを両立できる点が、現代のサイト作りで重視される理由です。
0:43どんな場面で使うのか、代表例を三つ挙げます。
0:47一つ目は画像形式の出し分けです。
0:49軽くて高画質な新しい形式を用意し、対応するブラウザーではそちらを、対応しない場合は従来の形式を表示します。
0:57二つ目は画面幅による出し分けで、狭い画面では被写体を大きく切り取った専用画像を見せる、
1:01といった工夫ができます。
1:05三つ目のポイントは、シーエスエスの背景画像とは違い、ピクチャーは本文中の画像として扱われることです。
1:13そのため代替テキストで画像の意味を伝えられます。
1:16表示の都合だけでなく、読み手への伝わり方まで考えて選ぶタグです。
1:21基本の書き方を確認します。
1:23ピクチャーには開始タグと終了タグがあり、その内側に候補を示すソース要素と、
1:27実際に画像を表示するアイエムジー要素を並べます。
1:32順番が大切で、ソースを先に書き、アイエムジーは必ず最後に置きます。
1:37ブラウザーはソースの条件を上から順に確かめ、条件に合うものがあればその画像を選び、
1:42どれにも合わなければ最後のアイエムジーの画像を表示します。
1:47つまりピクチャー自体が画像を見せるのではなく、どの画像をアイエムジーで見せるかを切り替える入れ物だと理解してください。
1:56書く順番を守るだけで、複雑なプログラムなしに出し分けが完成します。
2:01記事の活用例を、自分の言葉でたどってみましょう。
2:05この例では、まずソース要素でウェブピー形式の画像を候補に挙げ、タイプ属性で形式を示しています。
2:13ブラウザーがウェブピーに対応していればその画像が選ばれ、対応していなければ候補は飛ばされ、
2:20最後のアイエムジーにあるジェイペグ画像が表示されます。
2:26画像ファイル自体は自分で用意する必要がある点にも注意してください。
2:31また、代替テキストのオルトや、幅と高さの寸法は、ピクチャーやソースではなくアイエムジーに書きます。
2:40ここを間違えると、意味も寸法も伝わりません。
2:44候補を決めるソース要素の指定を整理します。
2:47中心になるのがソースセットで、候補となる画像ファイルを指定します。
2:53タイプは画像形式の条件で、この形式に対応するブラウザーだけが候補を選べます。
2:59メディアは画面幅などの条件で、たとえば画面が狭いときだけこの候補を選ぶ、
3:03といった指定ができます。
3:07ピクチャーの中のソースは、ビデオやオーディオで使うソースとは役割が少し違い、
3:12常にアイエムジーとセットで働きます。
3:17条件は上から順に評価され、最初に合った候補で決定します。
3:22並べる順番まで含めて設計するのが、このタグの肝です。
3:26条件を書きすぎず、必要な出し分けだけに絞ることも読みやすさのコツです。
3:32次に、画面幅で切り替える例です。
3:34ソースのメディア属性に、最大幅六百ピクセルという条件を書くと、画面が六百ピクセル以下のときだけ、
3:39そのソースの画像が選ばれます。
3:44画面が広い場合は条件に合わないため、最後のアイエムジーの横長の画像が表示されます。
3:51この仕組みを使えば、スマホでは主要な被写体が大きく写った縦寄りの画像を見せる、
3:55といった見せ方の調整ができます。
4:00単に縮小するのと違い、構図そのものを変えられるのが強みです。
4:05条件の書き方は、シーエスエスのメディアクエリとよく似ています。
4:10なぜ最後のアイエムジーが必須なのかを押さえましょう。
4:14ピクチャーとソースは、あくまで候補と条件を示すだけの存在で、画像を画面に表示する実体はアイエムジーです。
4:24アイエムジーを書き忘れると、候補だけがあって表示する本体がない状態になり、
4:28画像は表示されません。
4:33代替テキスト、幅、高さといった大切な情報も、すべてアイエムジーに集まります。
4:40さらに、万が一ピクチャーの仕組みが働かない環境でも、アイエムジー単体としては画像が表示されます。
4:48最後のアイエムジーは、手続き上の決まりではなく、表示を保証する保険だと考えてください。
4:56属性の置き場所を整理します。
4:58ピクチャー自体には、専用の属性はありません。
5:02使えるのは、アイディーやクラス、ラングといった、どの要素でも使える共通属性だけです。
5:09条件に関わるソースセット、タイプ、メディアはソース要素の属性ですし、画像の場所を示すソースや、
5:15代替テキストのオルトはアイエムジーの属性です。
5:21同じソースセットという名前でも、置く要素によって意味合いが変わるため、混同しないようにしてください。
5:29迷ったら、入れ物には共通属性、候補には条件、本体には画像情報、と役割で覚えると整理できます。
5:36使うときの注意点を三つ挙げます。
5:39一つ目、候補は上から順に評価され、最初に条件へ合ったもので決まります。
5:45優先したい候補ほど上に書く、という順番の意識が欠かせません。
5:50二つ目、タグを書いただけでは画像ファイルは自動で作られません。
5:55形式違いや大きさ違いのファイルは、あらかじめ自分で用意しておく必要があります。
6:02三つ目、表示確認です。
6:04三百二十ピクセル程度の狭い画面や文字を拡大した状態でも画像が欠けないか、
6:09開発者ツールと実機の両方で確かめてください。
6:14切り替え条件は、境界の幅の前後で特に念入りに見るのがおすすめです。
6:19候補のファイル名の打ち間違いも、表示されない原因としてよくあります。
6:25ブラウザー互換性を確認します。
6:28記事が参照するエムディーエヌの記録では、ピクチャー要素はクロームが三十八以降、
6:34エッジが十三以降、ファイアフォックスが三十八以降、サファリが九点一以降で対応しています。
6:41現在の主要ブラウザーであれば、基本的に安心して使える要素です。
6:46ただし注意したいのは、要素自体の対応と、画像形式の対応は別問題だという点です。
6:52たとえば新しい画像形式に対応するかどうかはブラウザーごとに異なるため、必ずアイエムジーの保険を残し、
6:58対象の実機でも表示を確かめる習慣を付けてください。
7:04最後にまとめです。
7:06ピクチャータグは、画面条件や画像形式に応じて、表示する画像をブラウザーに選ばせるための入れ物でした。
7:14ポイントは三つです。
7:15一つ目、候補と条件はソースに書き、タイプで形式、メディアで画面条件を指定すること。
7:22二つ目、候補は上から順に評価されるため、優先順位どおりに並べること。
7:27三つ目、最後には必ずアイエムジーを置き、代替テキストや寸法もそこに書き、
7:31表示と意味の保険にすることです。
7:36条件で選ぶ、という発想は、後のレスポンシブ対応の学習にもつながります。
7:41練習として、手元の画像でウェブピーとジェイペグの出し分けを書いてみてください。
7:47お疲れさまでした。
7:49次回もお楽しみに。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

pictureタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。画面条件や画像形式に応じて画像を選択。最後に必ず img を置きます。

解説記事・サンプルコードを読む：HTMLのpictureタグとは？属性・使い方・ブラウザー互換性と活用例 →