チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

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)で表示したとき
f:id:chooringo:20190511214337p:plain

PCのビューポート494pxで表示したとき
f:id:chooringo:20190511214351p:plain

PCのビューポート580pxで表示したとき
f:id:chooringo:20190511214406p:plain


カテゴリ
・なし

コンテンツモデル
・なし

コンテンツ属性
・グローバル属性
・src - リソースのアドレス(親要素がaudio要素・video要素の時のみ)
・type - 埋め込むリソースの種類
・srcset - 異なる環境で使用する画像のリスト(親要素がpicture要素の時のみ)
 例:高解像度のディスプレイ用の画像、画面幅の小さいディスプレイ用の画像)
・sizes - ブレークポイントごとの画像幅を指定(親要素がpicture要素の時のみ)
・media - メディアクエリの形式で指定(親要素がpicture要素の時のみ)

タグの記載場所
・picture要素の子要素としてimg要素の前に配置
・audio要素またはvideo要素の子要素としてフローコンテンツまたはtrack要素の前に配置