ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2020.01.15  最終更新日:2021.01.04

HTML

レスポンシブで使える!pictureタグの使い方メモ

すぐ忘れてしまう、書き方と意味のメモです!

pictureタグの使い方

レスポンシブのの場合のpictureタグの書き方について以下に書いていきます。

pictureタグの書き方

タグの書き方は以下の通りです。

<picture>
  <source media="(min-width:768px)" srcset="img_pc.jpg">
  <source media="(min-width:500px)" srcset="img_tb.jpg">
  <img src="img_sp.jpg" alt="テキストが入ります">
</picture>

pictureタグの意味

上のpictureタグの中に書いているタグはそれぞれ以下のようになっています。

  • ・sourceタグのmedia属性に、メディアクエリを指定している。(media属性はその後のsrcsetを表示するための条件となっている)
  • ・sourceタグのmedia属性に指定したブラウザサイズの時に表示したい画像をsrcset属性に指定している。
  • ・img属性にデフォルトで表示したい画像を指定している。

上記のサンプルを以下に準備しましたので、ブラウザのサイズを変えながら、どんな動きをするのか見てみてください!

最新記事