source  new : リソース

カテゴリ
  • なし

説明

画像/音声/動画など、メディアリソースの情報とリソースが利用可能なシーンを記述。

属性 属性値の見方

media[メディアクエリ]
親がpictureの場合にのみ指定可能。
sizes([メディアクエリ] [CSSの長さ],)*[CSSの長さ]safari
親がpictureの場合に必須。このメディアクエリに合致する場合はこの幅で、このメディアクエリに合致する場合はこの幅で、どれにも合致しない場合は最後の幅で表示、という感じで指定する。

ここの[CSSの長さ]にはパーセンテージは使えない制限があり、代わりにvwを使う。
media属性を利用する場合は機能的に衝突するので、ここではメディアクエリは使用できない。

src[URL]
リソースのURL。親要素がaudio/videoの場合は必須。親要素がpictureの場合はsrcset属性を利用。
srcset([URL] ([正の整数]w|([正の数値]|0)x)?)(,([URL] ([正の整数]w|([正の数値]|0)x)?)*edgechromeoperasafari
親要素がpictureの場合にのみ利用。
[正の整数]wでは画像幅(この幅で表示したいという値ではなく、実際の画像の幅)を指定、[正の数値]xではピクセル密度を指定。幅指定があるものが1つでもある場合、sizes属性の指定も必須。
つまり、Retinaではこの画像、非Retinaではこの画像という場合は2xとかx付きの値、画面サイズに応じて画像と表示サイズを出し分けたい等メディアクエリで細かく制御したい場合は120wとかw付きの値を使う。
type[MIMEタイプ]
親がvideo/audioの場合は、; codecs=に続けてコーデックを指定可能。例: video/mp4; codecs="avc1.42E01E, mp4a.40.2。詳しくはRFC6381を参照。