レスポンシブ対応もできるpictureタグ 。HTML5から追加されたpictureタグの使い方をまとめました。
pictureタグの役割
さて、画像を挿入するのにはimg要素のイメージが強いかと思います。picture要素はブラウザやスマホなどの様々な環境に応じた画像を表示してくれる役割をします。picture要素は子要素にsourceタグとimgタグを用いて使用します。
<picture>
<source media="(min-width: 768px;)" srcset="images/image_0.jpg">
<source media="(max-width: 769px;)" srcset="images/image_1.jpg">
<img src="images/image_3.jpg" alt="#">
</picture>ポイント
pictureタグ はsourceタグとimgタグとセットで使います。
sourceタグ
次に sourceタグ はメディアや画像のソースを示すものになります。ブラウザやスマホのそれぞれの画面幅に合った画像を指定するために設定します。
src属性…メディアや画像のURL(パス)の位置を表す。
media属性…PC、スマホ、プリンタ、TVなど、どのメディアに適用するかを指定する。(メディアクエリーと同様)
type属性…要素によって意味や設定値が異なり、その要素の中で、あるひとつの種類を指定する。
例えば、input要素やol要素など。
src属性に似ているものでsrcset属性があります。src属性はおもにimg要素に多く使用されていますが、src属性には1つのファイルしか指定することができません。反対にsrcset属性は複数のファイルを指定することができます。
sourceタグは子要素を持つことができず、これを空要素といいます。空要素には開始タグしかなく、終了タグは必要ありません。
<picture>
<source media="(min-width: 768px;)" srcset="images/image_0.jpg">
<source media="(max-width: 769px;)" srcset="images/image_1.jpg">
<img src="images/image_3.jpg" alt="#">
</picture>
ポイント
さらに、media属性を設定しておくことでcssを使用していなくても、レスポンシブ対応ができる ようになります。
imgタグ
pictureタグ 内で使用されるときの imgタグ の役割は、sourceタグ でブラウザーに適切なものがない場合、img要素で指定されたURL(パス)が選択されるという役割があります。つまりsourceタグで対応していないときは、imgタグのファイルを読み込みます。
<picture>
<source media="(min-width: 768px;)" srcset="images/image_0.jpg">
<source media="(max-width: 769px;)" srcset="images/image_1.jpg">
<img src="images/image_3.jpg" alt="#">
</picture>さらに、レイアウトシフトが起こらなくなる設定もできます。
レイアウシフト…ブラウザが画像を読み込むまで、画像のスペースはゼロ。読み込まれた画像の大きさの分レイアウトがずれてしまうこと。
imgタグに width と height を指定するとレイアウトシフトすることなく画像を表示することができる。
<img src="img/images/image_3.jpg" width="480" height="480" alt="画像の説明">width と height を設定しておくことでブラウザが画像スペースを確保することができ、レイアウトシフトがなくなります。
pictureタグ まとめ
pictureタグはブラウザやスマホなどのデバイスの環境に応じてそれぞれの環境にあった画像を表示することができます。
MDNのpictureタグのページも確認してみましょう。
