EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

HTMLメディア

ウェブページはテキストだけではありません ― 画像、音声、動画がコンテンツをより豊かにします。<img>、<audio>、<video> は、マルチメディアリソースを埋め込むためのHTML5の3つのコアタグです。

画像タグ

<img> は空タグです ― src で画像パスを指定し、alt で代替テキストを提供します。

サポートされている画像フォーマット

フォーマット 特徴 用途
JPG/JPEG 非可逆圧縮、ファイルサイズ小、透明度非サポート 写真、複雑な画像
PNG 非可逆圧縮、透明背景サポート アイコン、スクリーンショット、透明度が必要な画像
GIF アニメーション対応、最大256色 シンプルなアニメーション、アイコン
WebP 次世代フォーマット、より高い圧縮率、透明度サポート モダンブラウザ向け
SVG ベクトル形式、無限拡大で劣化なし アイコン、ロゴ、グラフ
💡 推奨：WebP（サイズ小、品質良）を優先し、古いブラウザにはJPG/PNGをフォールバックとして使用。SVGはアイコンやロゴに最適で、拡大してもぼやけない。

サンプル

HTML 
<img src="/assets/images/tutorials/html-landscape-photo.webp" alt="風景写真" width="400" height="300">
<img src="/assets/images/tutorials/html-company-logo.webp" alt="会社ロゴ" title="クリックでホームに戻る">
▶ 試してみよう
📌 alt属性：画像の読み込みに失敗したときに表示されます。スクリーンリーダーが読み上げて視覚障害のあるユーザーを支援します。検索エンジンが画像コンテンツを理解するのにも役立ちます。省略しないでください。

音声タグ

<audio> タグは音楽、ポッドキャスト、効果音を埋め込みます。controls 属性を追加すると再生コントロールが表示されます。

サポートされている音声フォーマット

フォーマット 特徴 ブラウザサポート
MP3 非可逆圧縮、ファイルサイズ小、互換性最高 すべてのブラウザ
OGG オープンソース、圧縮率良 Chrome、Firefox、Edge
WAV 非圧縮、最高品質、ファイルサイズ大 すべてのブラウザ
AAC MP3より高い圧縮率 モダンブラウザ
💡 互換性戦略：MP3が最も互換性が高いですが、すべてのブラウザで再生できるように、<source>でMP3とOGGの両方のフォーマットを提供することをお勧めします。

<source> タグ：マルチフォーマットフォールバック

異なるブラウザは異なるメディアフォーマットをサポートしています。<source> タグを使用すると、複数のフォーマットソースを提供でき、ブラウザがサポートする最初のフォーマットを自動的に選択します。

HTML 
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  お使いのブラウザは音声再生をサポートしていません。
</audio>

構文の説明：

一般的なMIMEタイプ：

フォーマット MIMEタイプ
MP3 audio/mpeg
OGG音声 audio/ogg
MP4 video/mp4
WebM video/webm

サンプル

HTML 
<audio src="/assets/images/tutorials/music.mp3" controls>
お使いのブラウザは音声再生をサポートしていません。
</audio>

<!-- マルチフォーマット互換 -->
<audio controls>
<source src="/assets/images/tutorials/music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
お使いのブラウザは音声再生をサポートしていません。
</audio>
▶ 試してみよう

動画タグ

<video> タグは動画を埋め込み、controls や width/height サイズもサポートします。

サポートされている動画フォーマット

フォーマット 特徴 ブラウザサポート
MP4 最も一般的なフォーマット、圧縮率良 すべてのブラウザ
WebM Googleのオープンソースフォーマット、ファイルサイズ小 Chrome、Firefox、Edge
OGG オープンソースフォーマット Chrome、Firefox
💡 互換性戦略：MP4が最も互換性が高いです。<source>でMP4とWebMの両方のフォーマットを提供することをお勧めします。

サンプル

HTML 
<video src="/assets/images/tutorials/video.mp4" controls width="400">
お使いのブラウザは動画再生をサポートしていません。
</video>

<!-- マルチフォーマット + ポスター画像 -->
<video controls width="400" poster="/assets/images/tutorials/cover.jpg">
<source src="/assets/images/tutorials/video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
お使いのブラウザは動画再生をサポートしていません。
</video>
▶ 試してみよう
💡 メディアフォーマットのヒント：MP3とMP4は互換性が最も高く、ほぼすべてのブラウザがサポートしています。WebMはGoogleのオープンフォーマットで、ファイルサイズが小さくなります。複数のフォーマットで <source> を使うと、ブラウザが自動的にサポートしているものを選択します。

❓ よくある質問

Q alt属性は必須ですか？省略できますか？
A altは常に含めるべきです。3つの目的を果たします：1）画像の読み込みに失敗したときにフォールバックテキストを表示し、ユーザーエクスペリエンスを向上させる；2）スクリーンリーダーが視覚障害のあるユーザーに画像を説明するのに役立つ；3）検索エンジンが画像のコンテキストを理解し、SEOを向上させる。装飾的な画像には、スクリーンリーダーに無視させるための空のalt=""を使用します。
Q どの画像フォーマットを使うべきですか？JPG、PNG、WebPの違いは何ですか？
A 用途に基づいて選択します：1）JPGは写真に適しており、非可逆圧縮でファイルサイズが小さく、透明度をサポートしません；2）PNGはアイコンやスクリーンショットに適しており、非可逆圧縮で透明な背景をサポートしますが、ファイルサイズが大きくなります；3）WebPは次世代フォーマットで、JPGとPNGの両方よりも優れた圧縮率を持ち、透明度をサポートし、すべてのモダンブラウザがサポートしています。WebPを優先し、古いブラウザにはJPG/PNGをフォールバックとして使用します。
Q 画像にwidthとheight属性を設定する必要があるのはなぜですか？
A 2つの利点があります：1）ブラウザは読み込み前に画像の寸法を知ることができ、正しいスペースを予約し、レイアウトシフトを防ぐ；2）Core Web Vitalsスコア（CLS指標）の向上に役立ちます。注意：1つの属性のみを設定した場合、もう1つは比例して自動的に計算されます。レスポンシブ画像は通常、widthのみを設定し、heightは自動的に適応させます。
Q MP3とMP4は互換性が高いのに、他のフォーマットを提供する必要があるのはなぜですか？
A MP3/MP4が最も互換性が高いですが、他のフォーマットにはそれぞれ利点があります：WebMはより小さく、OGGはオープンソースで無料、WAVは最高品質です。マルチフォーマットのフォールバックにより：1）異なるブラウザが最高のエクスペリエンスを得られる；2）ネットワークが悪い場合により小さなファイルを選択できる；3）新しいフォーマットがサポートされた際のスムーズなアップグレードが可能になります。最低限、MP3/MP4をフォールバックとして提供し、最適化オプションとしてWebM/OGGを追加することをお勧めします。

📖 まとめ

📝 練習問題

  1. 画像の練習： alt 属性と title 属性を持つ画像を挿入し、src を無効なパスに変更して、ブラウザがどのように処理するか観察してください。
  2. メディアプレーヤーの埋め込み： <audio> と <video> を使って音声ファイルと動画ファイルを埋め込んでください（公開されているオンラインリソースを使用できます）。
100%