pictureの概要
picutureは0個以上のsourceと1つのimg要素を含み、様々な画面や端末の条件に応じた画像を表示させる要素です。レスポンシブイメージを実現されるための要素でimgで表示する画像の代わりに、ブラウザの横幅などの条件に準じて、他の画像を指定するsource要素をグルーピングするために用いられます。
pictureに使える属性
属性とは<picture> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。
よく使うグローバル属性
| id | 概要 | 要素に対してID固有の識別名を付けることができます。 |
|---|---|---|
| 属性の値 | 英字から始まる英数字 | |
| class | 概要 | 要素に対して分類名を付けることができます。 |
| 属性の値 | 英字から始まる英数字 | |
| style | 概要 | 要素に対して直接スタイルを指定することができます。 |
| 属性の値 | スタイルシートのコード |
スポンサードサーチ
<picture>の使い方
画像の表示
<picture>
<source srcset="/wp-content/uploads/2019/06/glossary-hero.png" media="(max-width:1300px)">
<!-- max-widthを1200にすると画像が切り替わります -->
<img src="/wp-content/uploads/2019/03/logo_01.png">
</picture>
x
1
2
<picture>3
<source srcset="/wp-content/uploads/2019/06/glossary-hero.png" media="(max-width:1300px)">4
<!-- max-widthを1200にすると画像が切り替わります -->5
<img src="/wp-content/uploads/2019/03/logo_01.png">6
</picture>7
ブラウザ対応状況
| ブラウザの対応（PC) | |
|---|---|
| Chrome | あり |
| Safari | あり |
| Internet Explorer | なし |
| Edge | あり |
| Firefox | あり |
| Opera | あり |
| ブラウザの対応（SP) | |
| Chrome | あり |
| Safari | あり |
| Samsung Internet | あり |