---
title: Mozilla のスプラッシュページ
slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
tags:
  - Assessment
  - Beginner
  - CodingScripting
  - Embedding
  - HTML
  - Multimedia
  - Video
  - iframe
  - picture
  - responsive
  - sizes
  - srcset
  - マルチメディア
  - レスポンシブ
  - 初心者
  - 動画
  - 埋め込み
  - 評価試験
translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>

<p class="summary">今回の評価試験では、このモジュールの記事で説明したいくつかの技術の知識をテストするために、Mozilla のすべてついてのファンキーなスプラッシュページに、いくつかの画像と動画を追加してもらいます！</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件:</th>
   <td>この評価試験を試す前に、残りの<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアとその埋め込み方</a>のモジュールに既に取り組んでいる必要があります。</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>ウェブページに画像と動画を埋め込むこと、フレーム、および HTML レスポンシブ画像技術に関する知識をテストすること。</td>
  </tr>
 </tbody>
</table>

<h2 id="Starting_point" name="Starting_point">出発点</h2>

<p>この評価試験を開始するには、github の <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a> ディレクトリにある HTML とすべての画像を取得する必要があります。 <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> の内容をローカルドライブの新しいディレクトリの <code>index.html</code> というファイルに保存します。 それから、<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> を同じディレクトリに保存します（画像を右クリックして保存するオプションを選びます）。</p>

<p><a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> ディレクトリの別の画像にアクセスし、同じ方法で保存します。 あなたはそれらを使用する準備が整う前に、グラフィックスエディタを使って（それらのいくつかを）操作する必要があるので、今は別のディレクトリに保存する必要があります。</p>

<div class="note">
<p><strong>メモ</strong>: 例の HTML ファイルには、ページのスタイルを設定するための CSS がかなり多く含まれています。 {{htmlelement("body")}} 要素内の HTML だけで、CSS に触れる必要はありません — 正しいマークアップを挿入する限り、スタイリングは正しく表示されます。</p>
</div>

<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2>

<p>今回の評価試験では、ほとんど完成した Mozilla のスプラッシュページを紹介しています。 これは、Mozilla が何を意味しているかについて、何か素敵で興味深いことを言い、さらなるリソースへのリンクを提供することを目的としています。 残念ながら、画像や動画はまだ追加されていません — これがあなたの仕事です！ ページの見栄えを良くし、もっと理にかなったものにするために、いくつかのメディアを追加する必要があります。 次のサブセクションでは、実行する必要があることを詳しく説明します。</p>

<h3 id="Preparing_images" name="Preparing_images">画像の準備</h3>

<p>お気に入りの画像エディタを使用して、次のものから 400px 幅と 120px 幅のバージョンを作成します。</p>

<ul>
 <li><code>firefox_logo-only_RGB.png</code></li>
 <li><code>firefox-addons.jpg</code></li>
 <li><code>mozilla-dinosaur-head.png</code></li>
</ul>

<p>たとえば、<code>firefoxlogo400.png</code> と <code>firefoxlogo120.png</code> のように、それらを判りやすい名前にしてください。</p>

<p><code>mdn.svg</code> に加えて、これらの画像は、<code>further-info</code> 領域内のさらなるリソースにリンクするアイコンになります。 また、サイトヘッダーの firefox ロゴにもリンクします。 これらすべてのコピーを <code>index.html</code> と同じディレクトリに保存します。</p>

<p>次に、<code>red-panda.jpg</code> の 1200 ピクセル幅のランドスケープバージョンと、パンダをより近くに見せてくれる 600 ピクセル幅のポートレートバージョンを作成します。 繰り返しますが、それらを簡単に識別できるように、判りやすい名前にしてください。 これらの両方のコピーを <code>index.html</code> と同じディレクトリに保存します。</p>

<div class="note">
<p><strong>メモ</strong>: JPG 画像と PNG 画像を最適化して、できるだけ小さくして、それでも見栄えを良くしてください。 <a href="https://tinypng.com/">tinypng.com</a> は簡単にこれを行うための素晴らしいサービスです。</p>
</div>

<h3 id="Adding_a_logo_to_the_header" name="Adding_a_logo_to_the_header">ヘッダーにロゴを追加する</h3>

<p>{{htmlelement("header")}} 要素の中に、小さなバージョンの Firefox ロゴをヘッダーに埋め込む {{htmlelement("img")}} 要素を追加します。</p>

<h3 id="Adding_a_video_to_the_main_article_content" name="Adding_a_video_to_the_main_article_content">主要記事のコンテンツに動画を追加する</h3>

<p>{{htmlelement("article")}} 要素の内側（開始タグのすぐ下）に、 <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a> にある YouTube 動画を適切な YouTube ツールを使用してコードを生成して埋め込みます。 動画の幅は 400 ピクセルです。</p>

<h3 id="Adding_responsive_images_to_the_further_info_links" name="Adding_responsive_images_to_the_further_info_links">さらなる情報リンクにレスポンシブ画像を追加する</h3>

<p><code>further-info</code> クラスを持つ {{htmlelement("div")}} の中には、それぞれが興味深い Mozilla 関連のページにリンクする4つの {{htmlelement("a")}} 要素があります。 このセクションを完成させるには、適切な {{htmlattrxref("src", "img")}}、{{htmlattrxref("alt", "img")}}、{{htmlattrxref("srcset", "img")}}、{{htmlattrxref("sizes", "img")}} の各属性を含む {{htmlelement("img")}} 要素をそれぞれの内部に挿入する必要があります。</p>

<p>いずれの場合でも (1つを除く — どれが本質的にレスポンシブですか？)、ブラウザーにビューポートの幅が 500px 以下の場合は 120px 幅のバージョン、それ以外の場合は 400px 幅のバージョンを提供したい。</p>

<p>正しい画像と正しいリンクが一致していることを確認してください！</p>

<div class="note">
<p><strong>メモ</strong>: <code>srcset</code> と <code>sizes</code> の例を適切にテストするには、サイトをサーバーにアップロードする必要があります (<a href="/ja/docs/Learn/Common_questions/Using_Github_pages">Github ページ</a>を使用するのが簡単で無料の解決策です)。 そして、そこから Firefox の <a href="/ja/docs/Tools/Network_Monitor">Network Monitor</a> などのツールを使用して正しく動作しているかどうかをテストできます。</p>
</div>

<h3 id="An_art_directed_red_panda" name="An_art_directed_red_panda">アートディレクションされたレッサーパンダ</h3>

<p><code>red-panda</code> クラスを持つ {{htmlelement("div")}} の中に、ビューポートの幅が 600px 以下の場合は小さなポートレートのパンダ画像を提供する {{htmlelement("picture")}} 要素を挿入し、それ以外の場合は大きなランドスケープ画像を挿入します。</p>

<h2 id="Example" name="Example">例</h2>

<p>以下のスクリーンショットは、広い画面と狭い画面で、スプラッシュページが正しくマークアップされた後にどのように見えるかを示しています。</p>

<p><img alt="サンプルのスプラッシュページの広い画面のショット" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>

<p><img alt="サンプルのスプラッシュページの狭い画面のショット" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>

<h2 id="Assessment" name="Assessment">評価</h2>

<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p>

<div class="blockIndicator note">
<p><strong>メモ</strong>: 評価試験を Chrome ブラウザーのデベロッパーツールで行った場合、「レスポンシブビュー」でどんなに幅を狭く設定しても正しい画像が読み込めないことがあります。これは Chrome の特性のようです。 Firefox ブラウザーは (HTML が正しければ) 正しい画像を読み込みます。</p>
</div>

<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>

<ul>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTMLの画像</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">&lt;object&gt; から &lt;iframe&gt; へ — その他の埋め込み技術</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ウェブにベクターグラフィックスを追加する</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li>
 <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozillaのスプラッシュページ</a></li>
</ul>