HTMLの主な要素〜初心者だった自分に向けて〜 その⑤メディアと埋め込みコンテンツ

#HTML・メディア、埋め込みコンテンツ
###はじめに
今回の記事にはHTMLの中の主な要素の中でメディアと、埋め込みコンテンツについてまとめてあります。
その他のHTMLに関する記事はこちら

##img要素 <img>
画像を読み込むための要素です。
src属性を指定して画像を読み込みます。
####指定できる主な属性

• src = "画像のURL"
  
  必須の要素です。表示させる画像のURLを指定して読み込みます。
• alt = "代替テキスト"
  なんらかのエラーによって画像が表示できない場合に、その代わりとして表示するテキストを指定します。必須ではありませんが、指定すべき属性です。
• height = "高さ（単位は付けない）"
  表示させる画像の高さをピクセル数で指定します。ピクセル数で固定されているため単位"px"はつけずに数字のみで入力します。
• width = "幅（単位は付けない）"<br>表示させる画像の幅をピクセル数で指定します。height`と同じでピクセル数で固定されているため単位"px"はつけずに数字のみで入力します。

使用例

HTML

<img src = "https://1.bp.blogspot.com/-ocRr0y766IA/XwkxkrnOvXI/AAAAAAABaCo/ux6-J7WXx58L5Ou7da9cT7pps1X2poxPwCNcBGAsYHQ/s1600/pan_pizza_toast.png" width = "100" alt = "いらすとや さんの、ピザトーストのイラストです">
~~~

>
<img src = "https://1.bp.blogspot.com/-ocRr0y766IA/XwkxkrnOvXI/AAAAAAABaCo/ux6-J7WXx58L5Ou7da9cT7pps1X2poxPwCNcBGAsYHQ/s1600/pan_pizza_toast.png" width = "100" alt = "いらすとや さんの、ピザトーストのイラストです">

##video要素 `<video>`
この要素は、ページ内に映像再生できるメディアプレーヤーを埋め込みます。<br>この要素で指定できる属性の中には、「属性名 ="属性値"」の形式を取らず、「属性名」だけで指定できるものがあり、このような属性を「**論理属性**」と呼びます。<br>ちなみに、音声のみのコンテンツであればこの要素よりも`<audio>`要素を使用するほうがユーザーにとって使い勝手がよくなります。この`<audio>`要素は、`<video>`要素と共通する属性を多く持つ音声コンテンツ再生のためのものです。
####`video`要素に指定できる主な属性
- `src = "動画のURL"`
- `height = "高さ（単位は付けない）"`<br>表示させるメディアプレーヤーの高さをピクセル数で指定します。ピクセル数で固定されているため単位"px"はつけずに数字のみで入力します。
- `width = "幅（単位は付けない）"`<br>表示させるメディアプレーヤーの幅をピクセル数で指定します。ピクセル数で固定されているため単位"px"はつけずに数字のみで入力します。
- `controls`<br>論理属性。動画の再生・ポーズ・ボリューム調整を行うコントローラー部分を表示します。
- `autoplay`<br>論理属性。途中でとまらずに再生を続けられる程度のデータを読み込んだ段階で、自動的に再生を開始します。


_記述例_

```html:HTML
<video src = "../video/flower_video" height = "400" controls>動画が表示されない場合の代替テキスト</video>
~~~

##iframe要素 `<iframe>`
`<iframe>`はInline Frame（インラインフレーム）の略で、現在のWebページに別のWebページをインラインの状態で表示させることのできる要素です。<br>YouTubeの動画やGoogleMapをページに埋め込むときによく使用されます。
####`<iframe>`要素に指定できる主な属性
- `src = "インラインフレームの中に表示させるページのURL"`
- `height = "高さ（単位は付けない）"`<br>インラインフレームの高さをピクセル数で指定します。ピクセル数で固定されているため単位"px"はつけずに数字のみで入力します。
- `width = "幅（単位は付けない）"`<br>インラインフレームの幅をピクセル数で指定します。ピクセル数で固定されているため単位"px"はつけずに数字のみで入力します。

_使用例_

```html:HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/zb09rw21pbQ?start=8" frameborder="0" allow="accelerometer; autoplay; picture-in-picture" allowfullscreen></iframe>
~~~

>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zb09rw21pbQ?start=8" frameborder="0" allow="accelerometer; autoplay; picture-in-picture" allowfullscreen></iframe>

##picture要素 `<picture>`
この要素を表示する様々な画面や端末の条件に適した画像を提供する要素です。<br>要素内に０個以上の`<source>`要素と、１つ以上の`<img>`要素を含みます。<br>`<source>`要素はいくつでも配置することができます。基本的に`<source>`要素で指定された画像の中で条件に合う画像が表示されます。
反対に`<img>`要素は、`<picture>`要素の最後に必ずひとつだけ配置する決まりになっています。そうすることで、`<source>`要素の画像たちがどの条件にも合致しなかったときに表示させる画像として機能させることができます。

_記述例_

```html:HTML
<picture>
    <source srcset="https://1.bp.blogspot.com/-cT-3wp1oE8E/X9lJoOcpbnI/AAAAAAABc7U/l27LG4wgsoc-D9AhUwDuYfF70r6-A2ccQCNcBGAsYHQ/s872/sori_snow_boy.png" 
     media="(min-width: 800px)"> <!-- 画面幅が800ピクセル以上の時表示される画像です。 --> 
    <img src="https://1.bp.blogspot.com/-yNEMpyTyX3o/X7zMjPLJdjI/AAAAAAABcdE/ZjQGxrQ2yQU5CATJhEOXrqr4cU8r7GRbwCNcBGAsYHQ/s726/shibasuberi_danbo-ru_boy.png" alt="" /> <!-- <source>でしていされた画像が条件に合わない時に表示される画像です -->
</picture>
~~~

`<source>`要素と`<img>`要素には属性`srcset`で画像のURLを指定します。<br>そして、`<media>`属性によって表示する条件を指定します。<br>脚注：`<source>`要素について次項で紹介します。

##source要素 `<source>`
`<picture>`、`<audio>`、`<video>`の`src = ""`属性を使用するとメディアのリソースを一つまでしか指定できないのに対し、`<source>`要素を組み込むことによって、メディアのリソースをいくつでも指定できるようになります。

_記述例_

```html:HTML
<p>北海道の風景です。</p>
<picture>
   <source srcset="hurano.png" media="(min-width: 800px)">
   <source srcset="abasiri.png" media="(min-width: 600px)">
   <img src="mdn-sapporo.png" alt="北海道の写真">
</picture>
~~~

####`<source>`要素に指定できる主な属性
- `src = "データのURL"`（`<audio>`,`<video>`では必須）
- `media = "メディアクエリ"`<br>この属性は、`<picture>`要素で指定します。`src`で指定したデータが表示される条件を指定します。
- `srcset = "画像のURL,〜w（幅を数値で）,〜x（画素密度を数値で）"`<br>`<picture>`要素で使用します。

####これまでの記事
HTMLの主な要素〜初心者だった自分に向けて〜　[その①メタデータ系](https://qiita.com/syun02051/items/013bb352bec614123b23)<br>HTMLの主な要素〜初心者だった自分に向けて〜　[その②セクショニングと、主な区分化要素](https://qiita.com/syun02051/items/7650b11e991feacf0356)<br>HTMLの主な要素〜初心者だった自分に向けて〜　[その③テキストコンテンツ](https://qiita.com/syun02051/items/d58710bfaacb327b0dc4)<br>HTMLの主な要素〜初心者だった自分に向けて〜　[その④インライン要素](https://qiita.com/syun02051/items/bd77a3844c28eb7e66ec)