【htmlコーディング】レスポンシブに画像を切り替えられるpictureタグが便利！

今回は、レスポンシブに画像を切り替えられるpictureタグをご紹介します。

pictureタグとは？

pictureタグとは、html5から登場したタグで、cssやjavascriptを使わなくてもレスポンシブに画像を切り替えられることができるタグです。

パソコンとスマホ用の2つの画像だけではなく、複数画像を指定することができるので、タブレット用など、細かく画像切り替えることができます。

さらに、画像の拡張子によってブラウザが対応していない場合もあり、対応していないブラウザの場合はこの画像を表示、というような使い方もできます。

pictureタグの使い方

pictureタグは以下のように書きます。

<picture>
    <source srcset="画像のパス1" media="(min-width: 1000px)"> <!-- 幅1000px以上なら表示 -->
    <source srcset="画像のパス2" media="(min-width: 700px)"> <!-- 幅700px以上なら表示 -->
    <img src="画像のパス3" alt="" /> <!-- 上記以外なら表示 -->
</picture>

子要素に、複数の<source>と、1つの<img>を入れて書きます。

コメントアウトの通り、上からウインドウの幅が1000px以上なら1番目の画像を表示させ、700px〜999pxなら2番目の画像、それ以外なら3番目の画像が表示されるという仕組みです。

コードを書いてウインドウを縮めてみると、画像が切り替わると思います。

主な使い方としては、1番目がパソコン用、2番目がタブレット用、3番目がスマホ用と、画像を切り替える形が多いです。

最後に

以上、レスポンシブに画像を切り替えられるpictureタグをご紹介しました。

pictureタグ以外にも画像を切り替える方法はいくつかありますが、htmlのコードだけで出来るのでおすすめです。

他にも便利なタグがたくさんあるので、またご紹介できればと思います。