画像・音声・動画をページに取り込む
Webページでは、テキストだけでなく画像や音声、動画を表示してより多くの情報を伝えることができます。
これらの要素はHTMLの中でも特に「外部ファイルを読み込むタグ」であり、構造を正しく理解することでデザインや表現の幅が大きく広がります。
また、これらのタグの多くはインライン要素やブロック要素ではなく、置換要素となります。
置換要素とは
置換要素とは要素の内容（表示データ）をHTMLではなく外部リソースが担当する要素のことです。
ブラウザはその外部データ（画像・音声・動画など）を要素内部の見た目として自動的に置き換えて表示します。
通常のインライン要素と異なり、ブラウザが内部的にサイズや表示方法を決める仕組みになっています。
かみ砕いて説明すると、画像や音声、動画のタグはHTMLやCSSで中身を作らなくても、ブラウザがファイルを読み込んで表示してくれる要素のことです。
画像を表示する（imgタグ）
Webページに画像を表示するには、imgタグを使用します。
構文
<img src="属性値" alt="属性値" width="属性値" height="属性値">
imgタグはインラインブロック要素であり、置換要素であり、空要素です。
必ずsrc属性で画像のパスを指定しますが、他の属性も重要です。
| 属性名 | 属性値 | 用途 |
|---|---|---|
| src | 任意のパス | 指定されたパスの画像を表示する。 |
| alt | 任意の文字列 | 万が一画像を読み込まなかった場合の代替テキストを書いておきます。 また、スクリーンリーダーはこの情報を読み上げます。 |
| width | 任意の数値 | 画像領域の予約幅です。 |
| height | 任意の数値 | 画像領域の予約高さです。 |
コード例
<img src="../img/officeView.jpeg" alt="オフィス外観" width="300" height="200">出力例
画像サイズはCSSで指定することも可能ですが、HTML側でもwidthとheightを設定しておくことで、ページ読み込み時にレイアウトのズレ（CLS）を防ぐことができるため、極力入力しておくことをお勧めします。
また、HTMLでのサイズ指定の単位はpxとなりますので、画像のプロパティの比率を合わさないと変倍で表示されます。
条件により画像を表示する（pictureタグ）
画面サイズやデバイスが違うとき、同じ画像をそのまま表示すると、スマートフォンでは重すぎたり見づらかったりすることがあります。
そんなときに便利なのがpictureタグです。
条件に応じて「最適な画像」を表示できるので、読み込み速度や表示崩れといった問題を解決できます。
構文
<picture>
<source 属性="属性値">
<img src="画像のパス" alt="説明">
</picture>
pictureタグはインライン要素でもブロック要素でもなく、画像を切り替えるコンテナです。
子要素のsourceタグで「この条件ならこの画像」を表示、どの条件にも当てはまらなかった場合はimgタグの画像を表示します。
そのため、最低限imgタグは必須になります。
コード例
<picture>
<source srcset="banner-02.png" media="(min-width: 769px) and (max-width: 1280px)">
<source srcset="banner-03.png" media="(max-width: 768px)">
<img src="banner-01.png" alt="サンプルトラベルならバナーから予約成立で30％OFF">出力動作例
上記のコード例で何が起こるか動画で簡易的にまとめましたが、ブラウザの幅によって3枚の別の画像に変化することが確認できたと思います。
デバイスによりバナーなどの画像を変えて見せたい場合に使うことが多いと思います。
音声を再生する（audioタグ）
Webページで音声を再生する場合は、audioタグを使います。
音楽、効果音、ナレーションなどをページ内で再生できるようにします。
構文
<audio 属性="属性値">
</audio>audioタグはインラインブロック要素であり置換要素で、独自の属性と属性値を持っています。
| 属性名 | 属性値 | 用途 |
|---|---|---|
| src | 任意のパス | 指定されたパスの音楽ファイルを使用する。 |
| controls | なし | ブラウザの操作UIを表示する。 |
| autoplay | なし | 読み込み後に自動再生します。 |
| loop | なし | 音声ファイルの再生を繰り返し再生します。 |
| muted | なし | 音声ファイルを初期状態でミュートします。 |
| preload | none | 再生ボタンを押すまで音楽ファイルを読み込まないようにします。 |
| metadata | 音声ファイルの長さ・形式などの情報だけ読み込み、音声ファイル自体は再生時に取得します。 | |
| auto | ブラウザが可能な範囲で音声データを事前に読み込み、すぐに再生できる状態にします。 |
コード例
<audio src="../music/Sample.mp3" controls></audio>出力例
controls属性を付けると、再生ボタンや音量調整バーが表示されます。
また、ブラウザによって対応する音声形式（MP3 / OGG / WAV）が異なるため、複数の形式を指定しておくのが安全です。
<audio controls>
<source src="sample.mp3" type="audio/mpeg">
<source src="sample.ogg" type="audio/ogg">
このブラウザはaudio要素をサポートしていません。
</audio>音声を自動で再生するにはautoplay属性を使いますが、ユーザー操作なしで再生されることを嫌うブラウザが多いため、controls属性の利用を推奨します。
動画を再生する（videoタグ）
動画を埋め込む場合は、videoタグを使用します。
プロモーション動画や紹介ムービーなどをページ内で再生できます。
構文
<video 属性="属性値">
</video>videoタグはインラインブロック要素であり置換要素で、audioタグとほぼ共通した属性と属性値を持っています。
| 属性名 | 属性値 | 用途 |
|---|---|---|
| src | 任意のパス | 指定されたパスの動画ファイルを使用する。 |
| controls | なし | ブラウザの操作UIを表示する。 |
| autoplay | なし | 読み込み後に自動再生します。 |
| loop | なし | 動画ファイルの再生を繰り返し再生します。 |
| muted | なし | 動画ファイルを初期状態でミュートします。 |
| preload | none | 再生ボタンを押すまで動画ファイルを読み込まないようにします。 |
| metadata | 動画ファイルの長さ・形式などの情報だけ読み込み、動画ファイル自体は再生時に取得します。 | |
| auto | ブラウザが可能な範囲で動画データを事前に読み込み、すぐに再生できる状態にします。 | |
| width | 任意の数値 | 動画ファイルの幅です。 |
| height | 任意の数値 | 動画ファイルの高さです。 |
| poster | 任意のパス | 再生前に表示するサムネイルです。 |
コード例
<video src="../video/Sample.mov" controls poster="night.jpg" width="400"></video>出力例
pictureタグで使った動画と同じですが、サイズを変えて表示しています。
widthやheightを指定しておくと、読み込み前のスペースを確保でき、レイアウトが安定しますがアスペクト比を計算する必要があるため、変倍しないように注意が必要です。
キャプションを付ける
figureタグを使うことでキャプションを付けることができます。
構文
<figure>
<※メディアタグ>
<figcaption>説明文</figcaption>
</figure>
figureタグはブロック要素で、figcaptionタグはimgやaudio、videoタグといったメディアタグに対する説明文を表示します。
figcaptionタグの配置はfigureタグの閉じタグの前に配置し、CSSを使用するとfigcaptionの位置を変更できます。
コード例
<figure>
<img src="../img/officeView.jpeg" alt="オフィス外観" width="300" />
<figcaption>オフィス外観はこじんまりとして見えると思います。</figcaption>
</figure>出力例
単なるデザイン要素ではなく、内容を伝える補足として意味を持たせられるため、アクセシビリティやSEOの観点からも重要です。
特に、複数のメディアを掲載するページでは、どの画像が何を示しているのかを明確にできます。
メディアの利用と管理
これらのタグを活用することで、視覚的にも聴覚的にも情報を伝えるWebページを作ることができます。
ただ、画像・音声・動画はファイルサイズが大きくなりやすいため、圧縮や最適化を行ってから使用します。
ファイルの格納場所を整理し、たとえば「img」「media」「video」などのフォルダを分けて管理すると保守性が向上します。
また、音声や動画を使用する際は、著作権やライセンスにも注意しましょう。
商用利用が可能な素材サイトや、自作メディアを利用するのが安全です。