<picture>タグを使ってHTMLだけで画面サイズで表示画像を変える方法【Web制作】

Web制作について学んでいると「レスポンシブ対応」という言葉をよく聞くと思います。PCで見た時やスマホで見た時、タブレットで見た時、どんな画面サイズのデバイスからみても問題なく画面が表示されるようにすることです。

今回はPCの時とスマホの時で別々の画像（縦横比が違う等）を表示させたい時に<picture>タグを使えばHTMLだけで実装することができますので、その方法について紹介します。

解説

<picture>
	 <source media="(min-width: 768px)" srcset="PCの時に表示させたい画像のパス" />
	 <img src="スマホの時に表示させたい画像のパス" alt="" />
</picture>

上記が実際のコード例になります。

上の<source>タグの方で「min-width: 768px」と指定していますので画面サイズが768px以上の時はその後に続く「srcset = “”」で指定されている画像を表示します。

それ以外の画面サイズの時（今回の場合は画面サイズが767px以下の時）は<img>タグの「src = “”」で指定されている画像を表示します。

この「768px」という数字はよくスマホとタブレット端末との切り替えの際に使われる数字になりますので、よければ覚えていってください。

なので今回のこのコードではスマホサイズの時は<img>タグで指定されている画像が表示され、タブレットやPCサイズの時には<source>タグで指定されている画像が表示されるということになります。

まとめ

今回紹介したように、画面サイズによる画像の切り替えだけならCSSを使わなくてもHTMLの<picture>タグを使うだけで簡単にレスポンシブ対応できますので、是非試してみてください。