メディア関連のタグ

この記事ではメディア関連のタグについて説明します。

画像や動画、音声などのHTMLでの記述方法や、折りたたみ可能な要素やインラインフレームについて説明しています。

YouTube Video

メディア関連のタグ

<img>タグ

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• <img>タグは、画像を埋め込むためのタグです。src属性で画像のパスを指定し、alt属性で画像が表示できない場合に説明文を提供します。

<figure>タグと<figcaption>タグ

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• <figure>タグは、画像やイラストなどのメディアコンテンツを<figcaption>タグとともにキャプション付きでグループ化します。

<picture>タグ

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• <picture>タグは、異なる表示条件に応じて適切な画像を選択できるレスポンシブ画像をサポートするために使用されます。

• media属性には、CSSのメディアクエリと同じ形式の条件を記述します。

  • 画面の最小幅(min-width)や最大幅(max-width)、画面の向き(orientation)などの条件を指定できます。

• この例では、画面幅に応じて以下の画像が表示されます。

  • 画面幅が800px以上の場合、large.jpgが表示されます。
  • 画面幅が400px以上かつ800px未満の場合、medium.jpgが表示されます。
  • 画面幅が400px未満の場合、small.jpg（<img>タグの画像）が表示されます。

<canvas>タグ

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• <canvas>タグは、JavaScriptを使って動的なグラフィックスを描画できる領域を提供します。

<map>タグ

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

• <map>タグは、画像マップを定義するためのタグです。マップ内のクリック可能なエリアは、<area>タグを使って定義します。これにより、画像の特定の部分をクリックするとリンクに飛べるように設定できます。
• <img>タグのusemap属性に、紐づけるマップ要素（<map>タグ）の名前を#を付けて指定します。
• <area>タグのalt属性を適切に指定することで、視覚障害者向けのアクセシビリティを向上できます。

<embed>タグ

1<embed src="movie.mp4" width="300" height="200">

• <embed>タグは、外部コンテンツ（PDF、ビデオ、オーディオなど）を埋め込むために使用されます。

<video>タグ

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• <video>タグは、ビデオコンテンツを埋め込むためのタグです。<source>タグを使って複数のフォーマットを指定することができます。

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• preload 属性を使用して、ブラウザが再生前にどの程度まで動画をロードすべきかを指定できます。
  • autoは、メディア全体を事前にロードするようブラウザに指示します。再生開始時の遅延を減らせますが、ユーザーがメディアを再生しない場合でもデータがダウンロードされる可能性があります。
  • metadataは、メディアのメタデータ（例: 長さ、トラック情報など）だけをロードします。ユーザーが再生を開始するまでメディアデータ自体はロードされません。メディアの概要情報が必要な場合に適しています。
  • noneは、メディアファイルを事前にロードしません。メディアは再生が始まるまでリソースをダウンロードしません。データ使用量を最小限に抑えたい場合に適しています。

<audio>タグ

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• <audio>タグは、オーディオコンテンツを埋め込むためのタグです。<source>タグで複数のフォーマットをサポートします。
• <video>タグと同様にpreload 属性を使用して、ブラウザが再生前にどの程度まで音声をロードすべきかを指定できます。

<track>タグ

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• <track>タグは、字幕やキャプションなどのテキストトラックを指定するためのタグです。<audio>タグまたは<video>タグ内で使用できます。
• kind属性を使うことで、トラックの目的（例: 字幕、キャプション、チャプターなど）を指定できます。次の値を指定できます。
  • subtitlesは、映像や音声の内容を翻訳したり、視聴者にわかりやすくするための字幕を提供します。音声の直接翻訳が主目的です。
  • captionsは、聞こえない人や難聴の人向けに、音声に加えて音楽や効果音などの追加情報を提供します。
  • descriptionsは、視覚障害のある人のために、映像の視覚的な内容（動作や風景など）を説明するトラックです。
  • chaptersは、動画内の特定のポイントを示すためのチャプターマーカー（章タイトル）を提供します。
  • metadataは、メディアの解析や処理のための追加情報を提供しますが、ユーザーには表示されません。

<iframe>タグ

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• <iframe>タグは、他のHTMLページや外部コンテンツ（ウェブサイト、動画、ドキュメントなど）を現在のページに埋め込むためのタグです。よくYouTubeの動画をページに埋め込む際などに使用されます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video