ブログ投稿日時：
ブログ更新日時：
画面幅によって画像を切り替えるpictureタグについて解説
1.
pictureタグとは
pictureタグは条件に応じて画像を切り替えて表示させたいときに使用するタグです。
2.
pictureタグの書き方
pictureタグの書き方について確認したいと思います。
pictureタグを書くときは、下記のようにpictureタグの子要素にsourceタグとimgタグを書きます。
<picture>
<source srcset="画像のパス">
<img src="画像のパス" alt=”代替テキスト”>
</picture>3.
sourceタグで使用できる属性
sourceタグで使用できる属性は下記の5つになります。
| 属性 | 内容 |
|---|---|
| srcset | 条件に一致したときに表示する画像のパス (URL) |
| media | ブラウザ幅に応じて表示する画像を切り替える 使用できる値は min-width や max-width |
| type | jpg, png, webpなど画像の形式を記述 |
| width | 画像の横幅を記述 |
| height | 画像の高さを記述 |
4.
media属性を使用したレスポンシブ対応
media属性はブラウザ幅に応じて表示する画像を切り替えることができます。
ここでは、media属性に max-width と min-width を設定し、ブラウザ幅によって画像が切り替えてみたいと思います。
<picture>
<!-- 画面幅が768px以上の場合、この画像が表示される -->
<source srcset="https://soya-blog.com/wp-content/uploads/2024/11/picture-tag-summer.png" media="(min-width: 768px)">
<!-- 画面幅が767px以下の場合、この画像が表示される -->
<source srcset="https://soya-blog.com/wp-content/uploads/2024/11/picture-tag-winter.png" media="(max-width: 767px)">
<!-- 上記条件に当てはまらない場合、この画像が表示される -->
<img src="https://soya-blog.com/wp-content/uploads/2024/11/picture-tag-summer.png" alt="夏と冬の景色">
</picture>HTMLの表示
上記のように media=”(min-width: 768px)” と書くと最小の横幅768pxまでという意味になり、768px以上の横幅に対して画像が適用されます。
media=”(max-width: 767px)” と書くと最大の横幅は767pxまでという意味になり、0〜767pxの横幅に対して画像が適用されます。
5.
CSSの適用について
pictureタグを使用したとき、どこにCSSを適用したら良いか確認したいと思います。
<picture class="使えない">
<source class="使えない">
<img class="使える">
</picture>上記のようにpictureタグを使用するときはimgタグのみクラスを付けてCSSを適用することができます。
6.
今回のまとめ
この記事ではpictureタグについて解説しました。
pictureタグで重要なのは下記の3点です。
- pictureタグは条件に応じて画像を切り替えて表示させたいときに使用する
- media属性を使用することでレスポンシブに対応できる
- スタイルを調整するときはimgタグにクラスを付けてCSSを適用する
この3点をしっかり抑えておきましょう。
最後までお読みいただきありがとうございます。