ITコース HTML基礎 014_マルチメディアと埋め込みコンテンツ
マルチメディアと埋め込みコンテンツ HTML5 でのオーディオとビデオタグの使用 マップ、埋め込みウェブページなどの埋め込みコンテンツの応用
画像
画像は非常に重要なメディアタイプで、ユーザー体験を向上させ、情報伝達をより直感的で生き生きとしたものにできます。HTML では、<img> タグを使用して画像を挿入します。<img> タグは自己閉鎖の空タグで、つまり終了タグがありません。画像のアドレスは <img> タグの src（source）属性で指定します。
例：
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="画像の説明">効果：
画像要素には以下の属性も含めることができます：
width：画像の幅を指定します。height：画像の高さを指定します。align：画像の配置を指定します。border：画像の境界線を指定します。hspace：画像と周囲の要素との水平方向の間隔を指定します。vspace：画像と周囲の要素との垂直方向の間隔を指定します。ismap：画像がマップ画像かどうかを指定します。
画像サイズの設定
<img> タグの width と height 属性を使用して、画像の幅と高さを設定できます。これらの属性の値は、具体的なピクセル値またはパーセンテージで指定できます。
例：
<img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="画像の説明" width="100" height="100" align="center" border="1">効果：
代替テキストの設定
代替テキスト（alt text）は、画像が読み込めない場合に表示するために使用され、スクリーンリーダーが画像の内容を読み上げるためにも使用され、視覚障害のあるユーザーが画像を理解するのに役立ちます。<img> タグの alt 属性を使用して代替テキストを設定します。
例：
<img src="https://www.zhaojian.net/images/zhaojian-avatar1.png" alt="画像が見つからない場合にこのテキストが表示されます">効果：
画像リンク
画像はハイパーリンクとしても使用できます。<img> タグを <a> タグの中に配置するだけで、画像リンクを作成できます。
例：
<a href="https://www.zhaojian.net/"> <img src="https://www.zhaojian.net/images/zhaojian-avatar.png" alt="画像の説明" width="100" height="100" align="center" border="5"></a>効果：
[!まとめ]
widthとheight属性を使用して画像の幅と高さを設定します。これらの属性の値は、具体的なピクセル値またはパーセンテージで指定できます。- 画像の幅と高さの両方を設定し、これら2つの値の比率が画像自体の比率と一致しない場合、画像は引き伸ばされたり圧縮されたりして変形する可能性があります。
- 画像リンクに境界線を設定した場合、境界線はデフォルトでハイパーリンクと同じ色になります。
ビデオ
HTML ビデオ要素は、ウェブページにビデオを埋め込むために使用されます。ビデオ要素のタグは <video> です。
例：
<video src="https://www.zhaojian.net/images/mp4.mp4" controls> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"></video>効果：
ビデオ要素には以下の属性も含めることができます：
width：ビデオの幅を指定します。height：ビデオの高さを指定します。poster：ビデオのポスターフレームを指定します。autoplay：ビデオが読み込み時に自動再生するかどうかを指定します。loop：ビデオをループ再生するかどうかを指定します。muted：ビデオをミュートにするかどうかを指定します。preload：ビデオを読み込み時にプリロードするかどうかを指定します。
例：
<video src="https://www.zhaojian.net/images/mp4.mp4" controls width="400" height="300" poster="https://www.zhaojian.net/images/zhaojian-avatar.png" autoplay loop muted preload="auto"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"></video>この例にはビデオ要素が含まれています。ビデオファイルの URL は mp4.mp4 に設定、幅は 400 ピクセル、高さは 300 ピクセル、ポスターフレームは zhaojian-avatar.png、自動再生は true、ループ再生は true、ミュートは true、プリロードは auto に設定されています。
効果：
非常に包括的な HTML ビデオソリューション（非推奨）
以下の例では、4種類の異なるビデオ形式を使用しています。HTML5 <video> 要素は、mp4、ogg、または webm 形式のいずれかでビデオを再生しようとします。すべて失敗した場合、<embed> 要素にフォールバックします。
例：
<video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <source src="video.webm" type="video/webm"> <object data="video.mp4" width="320" height="240"> <embed src="video.swf" width="320" height="240"> </object></video>[!まとめ]
<source>要素はフォールバックオプションを提供します。ブラウザがその形式をサポートしていない場合、2番目の<source>要素で指定されたビデオファイルを再生しようとします。
オーディオ
HTML の <audio> 要素は、ウェブページにオーディオコンテンツを埋め込むために使用されます。
例：
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls></audio>効果：
オーディオ要素には以下の属性も含めることができます：
controls：オーディオコントロールを表示するかどうかを指定します。デフォルト値はtrueです。autoplay：オーディオが読み込み時に自動再生するかどうかを指定します。loop：オーディオをループ再生するかどうかを指定します。muted：オーディオをミュートにするかどうかを指定します。preload：オーディオを読み込み時にプリロードするかどうかを指定します。
例：
<audio src="https://www.zhaojian.net/images/mp3.mp3" controls autoplay loop muted preload="auto"></audio>この例には <audio> 要素が含まれています。オーディオファイルの URL は mp3.mp3 に設定、コントロールは true、自動再生は true、ループ再生は true、ミュートは true、プリロードは auto に設定されています。
効果：
embed 要素
embed 要素は HTML 4.01 で導入された要素です。ビデオ、オーディオ、画像、Flash など、あらゆるタイプのリソースを埋め込むことができます。embed 要素は、ブラウザが特定のプラグインをサポートしている必要があります。
例：
<embed src="リソース URL" type="リソースタイプ">[!まとめ]
- HTML5 は
<embed>要素を置き換えるために<video>と<audio>要素を導入しました。embed要素はあらゆるタイプのリソースを埋め込むことができますが、<video>要素と<audio>要素はビデオとオーディオリソースのみを埋め込むことができます。embed要素は表示するためにブラウザの特定のプラグインサポートが必要ですが、<video>要素と<audio>要素は必要ありません。<embed>要素はまだ使用できますが、もはや推奨されていません。
object 要素
object 要素は HTML 4.01 で導入された要素です。ビデオ、オーディオ、画像、Flash など、あらゆるタイプのリソースを埋め込むことができます。object 要素は <param> 要素を使用して、リソースの幅、高さ、背景色などのリソース属性を指定します。
例：
<object data="リソース URL" type="リソースタイプ"> <param name="属性名" value="属性値"> ...</object>object と embed 要素の具体的な違い：
| 属性 | object | embed |
|---|---|---|
| パラメータ | <param> 要素を使用 | type 属性を使用 |
| リソースタイプ | あらゆるタイプ | 特定のタイプ |
| プラグイン | 必要 | 不要 |
| 機能 | 豊富 | 基本 |
[!まとめ]
- あらゆるタイプのリソースを埋め込む必要があり、ブラウザが特定のプラグインをサポートしている場合は、
object要素を使用できます。- 特定のタイプのリソースのみを埋め込む必要があり、ブラウザの特定のプラグインサポートが不要な場合は、
embed要素を使用できます。- ビデオまたはオーディオリソースのみを埋め込む必要がある場合は、
<video>または<audio>要素を使用することをお勧めします。<video>と<audio>要素はブラウザの特定のプラグインサポートを必要とせず、より豊富な機能を提供します。
フレーム
<iframe> 要素は、HTML でドキュメント内に別のドキュメントをネストするために使用されるタグです。1つのドキュメントを別のドキュメント内に埋め込み、ネストされたドキュメントのコンテンツを表示することができます。これは通常、他のウェブページ、ビデオ、マップなどのコンテンツを埋め込むために使用されます。
<iframe> 要素には以下の属性があります：
- src 属性は、埋め込むウェブページまたはドキュメントの URL を定義します。
- width 属性は、
<iframe>要素の幅を定義します。 - height 属性は、
<iframe>要素の高さを定義します。 - frameborder 属性は、
<iframe>要素の境界線が表示されるかどうかを定義します。 - border 属性は、
<iframe>要素の境界線の幅を定義します。 - framespacing 属性は、
<iframe>要素と周囲のコンテンツとの間隔を定義します。 - marginwidth 属性は、
<iframe>要素の左右のマージンを定義します。 - marginheight 属性は、
<iframe>要素の上下のマージンを定義します。 - scrolling 属性は、
<iframe>要素がスクロールを許可するかどうかを定義します。 - name 属性は、
<iframe>要素の名前を定義します。 - id 属性は、
<iframe>要素の ID を定義します。 - class 属性は、
<iframe>要素のクラスを定義します。
例：
<!DOCTYPE html><html lang="en"><head> <title>HTML iframe 要素</title></head><body> <iframe src="https://www.zhaojian.net"> <p>これは zhaojian.net ウェブサイトのコンテンツを表示する iframe です。</p> </iframe></body></html>効果：
