マルチメディアとその埋め込み
このコースではこれまでたくさんのテキストを見てきましたが、テキストを使用するだけではウェブは実に退屈なものになってしまいます。もっと興味深い内容でウェブを生き生きとさせるために、検討を始めましょう! このモジュールでは、HTML を使用してウェブページにマルチメディアを入れる方法を探ります。画像を入れるさまざまな方法、動画や音声、さらにはウェブページ全体を埋め込む方法などを説明します。
前提条件
ガイド
このモジュールには以下の記事があり、ウェブページにマルチメディアを埋め込むための基本的な事柄をすべて説明しています。
- HTML の画像
-
考慮すべき他の種類のマルチメディアもありますが、単純な画像をウェブページに埋め込むために使用される、慎ましい
<img>要素から始めるのが理にかなっています。 この記事では、基本的な使い方を含め、<figure>を使ったキャプションによる注釈付け、CSS 背景画像との関連の仕方など、画像をより深く使用する方法を見ていきます。 - 動画と音声のコンテンツ
-
次に、 HTML の
<video>要素と<audio>要素を使用して、動画や音声をページに埋め込む方法を見ていきます。 それには、基本的な使い方を含め、さまざまなファイル形式へのアクセスをさまざまなブラウザーに提供したり、キャプションや字幕の追加、古いブラウザーへの代替手段の追加などが含まれています。 - <object> から <iframe> まで — その他の埋め込み技術
-
この時点では、
<iframe>、<embed>、<object>要素のような幅広い種類のコンテンツをウェブページに埋め込むことができる要素をいくつか見ていきたいと考えています。<iframe>は他のウェブページを埋め込むためのもので、他の 2 つは PDF ファイルなどの外部リソースを埋め込むことができるものです。 - ウェブにベクターグラフィックを追加する
-
ベクターグラフィックは、特定の状況で非常に便利です。 PNG や JPG のような通常のフォーマットとは異なり、ズームインしてもゆがんだりピクセル化したりしません。縮尺を変えても滑らかな状態を保つことができます。 この記事では、ベクターグラフィックの概要と、ポピュラーな SVG フォーマットをウェブページに含める方法を紹介します。
- レスポンシブ画像
-
この記事では、画面の内側や解像度などが大きく異なる機器でもうまく動作する画像、つまりレスポンシブ画像の概念について学び、それを実装するために HTML が提供するツールについて見ていきます。これにより、異なる端末間でのパフォーマンスを向上させることができます。レスポンシブ画像は、今後学んでいただく CSS のトピックであるレスポンシブデザインの一部に過ぎないのです。
評価試験
上記のガイドで説明されている HTML の基本について、以下の評価試験を行います。
- Mozilla のスプラッシュページ
-
今回の評価試験では、このモジュールの記事で説明したいくつかの技術の知識をテストするために、Mozilla のすべてついてのファンキーなスプラッシュページに、いくつかの画像と動画を追加してもらいます！
関連情報
- 画像の上にヒットマップを追加する
-
イメージマップは、画像のさまざまな部分を別の場所にリンクするためのメカニズムを提供します(あなたがクリックしたそれぞれの国についての詳細情報にリンクしている地図を考えてみてください)。 この手法は時には便利なことがあります。
- ウェブリテラシーの基礎 2 (英語)
-
優れた Mozilla の基礎コースで、マルチメディアと埋め込みモジュールで説明されているスキルのいくつかを調べてテストします。ウェブページの作成、アクセシビリティの設計、リソースの共有、オンラインメディアの使用、オープンな作業（コンテンツは自由に利用可能で、他の人が共有できることを意味します）の基礎を深く理解してください。