Oimo のお勉強ノート

勉強したことのメモを残す

【HTML5プロフェッショナル認定試験レベル1】試験勉強まとめ（画像・動画・音声）

HTML

HTML5プロフェッショナル認定試験レベル1の試験勉強まとめ（画像・動画・音声）です。

img要素

画像。

f:id:nachumo:20200913144059p:plain

img要素に指定できる属性

属性 用途 補足説明
src データのアドレス 必須, 空文字不可
alt 画像表示不可の際に表示する代替テキスト 省略可能（でも省略しないのが一般的）
srcset 候補画像のアドレスと記述子
sizes 条件（メディアクエリ）と表示幅 表示幅のみもOK
width 幅（ピクセル） 単位なし正の整数
height 高さ（ピクセル） 単位なし正の整数
crossorigin 元文書とは異なるオリジンからデータを取得する場合の認証設定 crossorigin="anonymous" または "use-credentials"
usemap 使用するmap要素の名前 #に続く文字列
ismap 画像がサーバーサイドのイメージマップである 論理属性

srcset属性の値

２種類の書き方がある。一緒には使えないので注意。

  • 画像URL + ピクセル密度記述子
    • ピクセル密度に応じた代替画像の指定時に使用（例：ピクセル密度が２倍→ x2 ）
    • 省略可能
      • 省略によりカンマとURLが隣接する場合は空白文字をいれる（例： URL , ）
  • 画像URL + 幅記述子
    • 幅やピクセル密度に応じた代替画像の指定時に使用（例：幅が400ピクセルの画像→ 400w ）
    • 省略不可
    • srcset属性対応の場合、幅記述子が指定できないのでsrc属性は無視される
    • srcset属性未対応の場合、src属性が表示される

sizes属性

条件ごとの表示幅を以下の内容で記載し、カンマ区切りで複数指定することができる。

  • sizes属性を指定したらsrcset属性を幅記述子で設定が必須
  • ()内にCSSの条件式（メディアクエリ）
  • 空白文字
  • 表示幅

利用例）

<!-- 普通に画像を表示する -->
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nachumo/20200913/20200913144059.png" alt="takano_walk"><br>
<!-- デバイスのピクセル密度によって表示する画像を変える -->
<img src="takano_walk_x1.png" srcset="takano_walk_x2.png 2x, takano_walk_x3.png 3x" alt="takano_warlk" width="50" height="50"><br>
<!-- ビューポート幅の100%に対して適切な物だけがロードされ表示される -->
<img sizes="100vw" src="takano_walk_small.png" srcset="takano_walk_small.png 400w, takano_walk_medium.png 800w, takano_walk_large.png 1600w" alt="takano_warlk"><br>
<!-- sizesに表示幅の設定条件（メディアクエリ）を指定する -->
<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw-60px)" src="takano_walk_small.png" srcset="takano_walk_small.png 400w, takano_walk_medium.png 800w, takano_walk_large.png 1600w" alt="takano_warlk">

出力結果）

takano_walk
takano_warlk
takano_warlk
takano_warlk

※ vw はビューポート幅に対するパーセンテージを表す単位です。

source要素

代替データを指定する要素。picture, video, audioの内部で使用する。

source要素に指定できる属性

属性 用途 補足説明
media 画像の使用条件 メディアクエリ
※pictureのみ
sizes 条件（メディアクエリ）と表示幅 表示幅のみもOK
※pictureのみ
srcset 候補画像のアドレスと記述子 ※pictureのみ、必須
src データのアドレス ※video, audioのみ、必須
type データの種類（MIMEタイプ） ※唯一picture, video, audioで共通して使用できる属性

picture要素

補完画像を示す要素。任意の数のsource要素とimg要素を1ついれる。（source要素未対応の場合にも対応できるようにimg要素を入れておく）

利用例）

<picture>
    <source media="(max-width: 50em)" srcset="takano_walk_large.png">
    <source media="(max-width: 30em)" srcset="takano_walk_medium.png">
    <img src="takano_walk_small.png" alt="">
</picture>

出力結果）

video要素/audio要素

映像/音声の再生。

video要素/audio要素に指定できる属性

属性 用途 補足説明
src データのアドレス
controls 再生・停止ボタンなどの表示する 論理属性
autoplay ページが読み込まれたら自動再生する 論理属性
loop 繰り返し再生する 論理属性
muted デフォルト音量を０にする 論理属性
preload バッファリングに関する指示 preload="none" または preload="auto"
または preload="metadata"
crossorigin 元文書とは異なるオリジンからデータを取得する場合の認証設定 crossorigin="anonymous" または "use-credentials"
poster 再生可能になる前に表示しておく画像のアドレス ※video要素のみ
width 表示範囲の幅 ※video要素のみ
height 表示範囲の高さ ※video要素のみ

利用例）

<!-- video要素 -->
<video src="takano.mp4" controls width="320" height="180" poster="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nachumo/20200913/20200913144059.png">
    要素の内容は表示されない
</video>
<!-- audio要素 -->
<audio src="takano.mp3" controls>
    要素の内容は表示されない
</audio>

出力結果）

track要素

字幕などの外部テキストやリソース。

track要素に指定できる属性

track要素は、video要素/audio要素の内容として

  • source要素より後
  • source要素以外の要素より前

に配置する必要がある。

属性 用途 補足説明
src データのアドレス
srclang 言語の種類 言語コード
kind テキスト・トラックの種類 ※詳細は以下参照
label トラック選択時のラベル
defoult デフォルトの指定 論理属性

kind属性に指定できるキーワード

全部複数形。

キーワード 用途 補足説明
subtitles 音は聞こえるけど理解できない場合向けの字幕 映像に重ねて表示
captions 音が聞こえない場合向けの字幕 映像に重ねて表示
descriptions 映像が見えない場合向けの音声解説 合成音声での読み上げ
chapters 映像チャプターのタイトル 操作により一覧を表示
metadata スクリプトから利用することを想定したメタデータ 非表示

利用例）

<video src="takano.mp4" controls width="320" height="180" poster="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nachumo/20200913/20200913144059.png">
    <track kind="subtitles" src="takano.ja.vtt" srclang="ja" label="日本語" defoult>
    <track kind="subtitles" src="takano.en.vtt" srclang="en" label="English">
</video>

出力結果）

embed要素

外部アプリケーションやコンテンツをプラグインで組み込む要素。空要素。

embed要素に指定できる属性

属性 用途 補足説明
src 組み込む外部コンテンツのアドレス
type 組み込むデータの種類（MIMEタイプ）
width 表示範囲の幅
height 表示範囲の高さ

map要素/area要素

イメージマップ。とリンクする領域の定義。
１枚の画像の中に複数のリンクを設定するための要素。area要素はmap要素用のa要素みたいな感じ。

map要素に指定できる属性

img要素のusemap属性に usemap="#[map要素のname属性の値]" として関連付けする。

属性 用途 補足説明
name イメージマップの名前

area要素に指定できる属性

属性 用途 補足説明
alt 画像が利用できない場合の代替表示テキスト
href リンク先のアドレス URL
hreflang リンク先の言語 言語コード
rel 元文書から見たリンク先との関係 キーワード
type リンク先のMIMEタイプ MIMEタイプ
download リンク先がダウンロード用のファイルであることを示す ファイル名
target ブラウジングコンテキストの指定 ブラウジングコンテキスト名、キーワード
coords 操作に反応する領域の座標 ※詳細は以下
shape 操作に反応する領域の形状の種類 ※詳細は以下

shape属性/coords属性の値の関係

shape属性を省略した場合は rectを指定したことになる。

shape属性の値 用途 coords属性の値
rect 長方形 カンマ区切りで４つ指定
左上のx座標、左上のy座標、右下のx座標、右下のy座標
circle 円 カンマ区切りで３つ指定
中心のx座標、中心のy座標、半径
poly 多角形 カンマ区切りで必要数指定
各頂点の座標をx座標、y座標の順に
default 画像全体 -

利用例）

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nachumo/20200913/20200913144059.png" usemap="#sample" alt="サンプル" width="200" height="200">
<map name="sample">
    <area href="sample1.htm" shape="rect" alt="顔" coords="55,19,146,84">
    <area href="sample2.htm" shape="circle" alt="右手" coords="50,120,35">
    <area href="sample3.htm" shape="poly" alt="左足" coords="140,140,175,155,150,195,120,198">
</map>

出力結果）

サンプル 顔 右手 左足

object要素/param要素

object要素は、様々な形式の外部データの組み込み要素。
param要素は、object要素にプラグインデータを埋め込んだ場合に呼び出されるプラグインのパラメータを設定する要素。param要素は空要素で単独使用に意味を持たない。また、object要素の中で他の要素よりも前に配置が必須。

object要素に指定できる属性

属性 用途 補足説明
data 組み込むデータのアドレス 画像の場合＞img要素のsrc属性に相当
type リンク先のMIMEタイプ MIMEタイプ
typemustmatch data属性に指定されたリソースのMIMEタイプがtype属性の値に適合する場合にのみリソースを使用する 論理属性
name ブラウジングコンテキストの名前（表示領域の名前） ブラウジングコンテキスト名またはキーワード
form form要素との紐付け form要素のidを指定
width 表示範囲の幅
height 表示範囲の高さ

param要素に指定できる属性

属性 用途 補足説明
name パラメータの名前
value パラメータの値

利用例）

<!-- 画像を貼る -->
<object data="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nachumo/20200913/20200913144059.png" type="image/png" width="100" height="100"></object>
<!-- pngがサポートされていればpng、されていなければgifを表示 -->
<object data="takano.png" type="image/png" height="100" width="100">
    <object data="takano.gif" type="image/gif" height="100" width="100">
    </object>
</object>
<!-- param要素の設定イメージ -->
<object width="400" height="300">
    <param name="movie" value="takano.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
    <!-- object要素がサポートされていない環境向けにembed要素でも指定 -->
    <embed src="takano.swf" width="400" height="300" type="application/x-shockwave-flash">
</object>

出力結果）

nachumo 読者になる

広告を非表示にする
読者になる
コメントを書く