新着！私の44ページの電子書籍「CSS in 44 minutes」が発売されました！ 😃

今すぐ入手 →

# source

<audio>、<video>、または<picture>要素のソースを定義します。

例: コピー

Picture of a Ha Long Bay sunset 
<picture>
 <source
  media="(min-width: 800px)"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w"
  sizes="33.3vw">
 <source
  srcset="/images/sunset-720.jpg 2x,
          /images/sunset-360.jpg 1x">
 <img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">
</picture>

src

メディアがホストされているURL。

"/images/tiramisu.jpg"

相対URLを使用できます。

"https://htmlreference.dokyumento.jp/images/traffic.jpg"

絶対URLを使用できます。

srcset

同じメディアに対する異なるソースのリストを定義します。ブラウザは最適なソースを選択します。

"/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"

360wのような幅記述子を使用できます。この値は、ソースサイズ（`sizes`属性で定義）のいずれかで割って、ピクセル密度を取得します。

@html

sizes

異なるソースのサイズのリストを定義します。それぞれをメディアクエリと組み合わせることができます。

"(min-width: 800px) 1440px, 720px"

ビューポートが800pxより大きい場合、ブラウザは1440pxの画像（`srcset`で定義）を使用します。
それ以外の場合は、720pxを使用します。

@html

type

ソースのMIMEタイプを定義します。

"image/jpg"

オーディオ、ビデオ、または画像のMIMEタイプのみを使用できます。

media

<picture>ソースのメディアクエリを定義します。

"(min-width: 800px)"

メディアは、800pxより大きいビューポートでのみ使用されます。