HTML5のEmbedded Content~picture要素とsource要素~
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
Embedded Content関連
picture要素
img要素と同様に候補画像を指定し、条件に合致した画像だけロードして表示する。
複数のsource要素とimg要素を含むコンテナ。
source要素に未対応ブラウザの場合はimg要素の画像を表示する。
HTMLの例はsource要素に記載。
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
コンテンツモデル
・0個以上のsource要素とそれに続くimg要素を持つことができる。
・オプションでscript要素とtemplate要素を持つことができる。
コンテンツ属性
・グローバル属性
タグの記載場所
・エンベディッドコンテンツを配置できる場所
source要素
img要素の複数の代替ソースセット、または、audio要素・video要素の複数の代替メディアリソースを指定する。
<picture> <source media="(max-width: 500px)" srcset="500_ice.JPG 1x, 1000_ice.JPG 2x"> <source media="(min-width: 501px)" srcset="500_kinoko.JPG 1x, 1000_kinoko.JPG 2x"> <img src="500_kinoko.JPG" style="max-width:500px;width:100%;" alt=""> </picture>
iPhone6/7/8(PCのemulator)で表示したとき
PCのビューポート494pxで表示したとき
PCのビューポート580pxで表示したとき
カテゴリ
・なし
コンテンツモデル
・なし
コンテンツ属性
・グローバル属性
・src - リソースのアドレス(親要素がaudio要素・video要素の時のみ)
・type - 埋め込むリソースの種類
・srcset - 異なる環境で使用する画像のリスト(親要素がpicture要素の時のみ)
例:高解像度のディスプレイ用の画像、画面幅の小さいディスプレイ用の画像)
・sizes - ブレークポイントごとの画像幅を指定(親要素がpicture要素の時のみ)
・media - メディアクエリの形式で指定(親要素がpicture要素の時のみ)
タグの記載場所
・picture要素の子要素としてimg要素の前に配置
・audio要素またはvideo要素の子要素としてフローコンテンツまたはtrack要素の前に配置