object から iframe まで — その他の埋め込み技術 - ウェブ開発を学ぶ

object から iframe まで — その他の埋め込み技術
================================

* 前のページ
* Overview: Multimedia and embedding
* 次のページ

そろそろ、画像、動画、音声を含め、ウェブページに何かを埋め込むコツを実際に使用されていることでしょう。この点では、少し横道にそれて、様々な種類のコンテンツをウェブページに埋め込むことができる要素、`<iframe>`、`<embed>`、`<object>` を見てみたいと思います。 `<iframe>` は他のウェブページを埋め込むためのもので、他の 2 つの要素は PDF ファイルのような外部リソースを埋め込むことができます。

|  |  |
| --- | --- |
| 前提条件: |
 基本的なコンピューターリテラシー、
 インストール済みの基本的なソフトウェア、基本的な
 ファイル操作の知識、 HTML の基礎知識になじんでいること（HTML を始めようにあるような）、およびこのモジュールの前の記事。
  |
| 目的: | `<object>`, `<embed>`, `<iframe>` を使用して、ウェブページに PDF 文書や他のウェブページなどのアイテムを埋め込む方法を学ぶ。 |

埋め込みの略歴
-------

一昔前のウェブでは、ウェブサイトを作成する際に**フレーム**がよく使用されていました。これは、ウェブサイトの小さな部分を個々の HTML ページに格納したものです。フレームは**フレームセット**と呼ばれるマスター文書に埋め込まれており、表の列や行のサイズを指定するように、画面の内側へフレームを配置する領域を指定することができました。 90 年代半ばから後半にかけては、このフレームセットはクールなものの代表格で、ウェブページを小さな塊に分割して保有した方が、ダウンロード速度が向上するという証拠もありました（当時はネットワーク接続が非常に遅かったので特に顕著でした）。しかし、多くの問題があり、ネットワーク速度が速くなるにつれて、積極的な利点よりもはるかに大きくなったため、現在では使用されているのを見ることはありません。

少し後で（90 年代後半から 2000 年代前半）、Java アプレットや Flash のようなプラグイン技術がとても普及し、これらの技術によってウェブ開発者は、動画やアニメーションなどの HTML だけでは得られないリッチコンテンツをウェブページに組み込むことができるようになりました。これらの技術を埋め込むには、 `<object>` や、あまり使用されない `<embed>` といった要素があり、当時はとても有用なものでした。その後、アクセシビリティ、セキュリティ、ファイルサイズなど、多くの問題を保有したため、流行遅れになったのです。最近では、主要なブラウザーは Flash などのプラグインに対応していません。

最後に、 `<iframe>` 要素が（`<canvas>` や `<video>` などのコンテンツを埋め込む他の方法と一緒に）登場しました。これは、ウェブ文書全体を別の文書の中に、まるで `<img>` や他の要素のように埋め込む方法を提供しており、今日も定期的に使用されています。

歴史の勉強はここまでにして、次にこれらのいくつかを使用する方法を見ていきましょう。

アクティブラーニング: 従来の埋め込みを使う
----------------------

この記事では、埋め込み技術がどのような用途に使用されるかを実感していただくために、アクティブラーニングの節に直接飛び込んでいきます。ネットの世界では YouTube がとても有名ですが、その共有機能が利用できることを知らない人がたくさんいます。 YouTube では、 `<iframe>` を使用して、どのようなページにでも動画を埋め込むことができるのかを見てみましょう。

1. まず、YouTubeにアクセスして、気に入った動画を探します。
2. 動画の下に [共有] ボタンがあるので、これを選択すると共有オプションが表示されます。
3. [埋め込む] ボタンを選択すると、いくつかの `<iframe>` コードが指定されます - これをコピーしてください。
4. これを下の入力ボックスに挿入し、 *ライブ出力* に結果が表示されるのを確認してください。

ボーナスポイントとして、例の中に Google マップを埋め込むこともできます。

1. Google マップへ行き、好きな地図を見つけます。
2. UI の左上にあるハンバーガーメニュー（3 本の水平線）をクリックします。
3. [地図を共有または埋め込む] オプションを選択します。
4. [地図を埋め込む] オプションを選択します。これは、`<iframe>` コードをいくつか提供します。これをコピーします。
5. 下の入力ボックスにそれを挿入し、結果が出力にあるかどうかを確認します。

間違えた場合は、[リセット] ボタンを使用してリセットすることができます。あなたが本当に立ち往生したら、[答えを表示] ボタンを押して回答を見てください。
```

<h2>ライブ出力</h2>

<div class="output" style="min-height: 250px;"></div>

<h2>編集可能なコード</h2>
<p class="a11y-label">
  Esc を押すとコード領域からフォーカスを移動させることができます（Tab
  はタブ文字を挿入します）。
</p>

<textarea
 id="code"
 class="input"
 style="width: 95%;min-height: 100px;"></textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="リセット" />
  <input id="solution" type="button" value="答えを表示" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "答えを表示";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "答えを表示") {
    textarea.value = solutionEntry;
    solution.value = "答えを隠す";
  } else {
    textarea.value = userEntry;
    solution.value = "答えを表示";
  }
  updateCode();
});

const htmlSolution =
  '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>';
let solutionEntry = htmlSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "答えを表示") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

iframe の詳細
----------

簡単で楽しかったでしょう？ `<iframe>` 要素は、他のウェブ文書を現在の文書に埋め込むことができるように設計されています。これは、直接制御できない可能性のある第三者のコンテンツをウェブサイトに組み込むのに適していて、独自のバージョンを実装する必要はありません — オンライン動画プロバイダーの動画、 Disqus のようなコメントシステム、オンライン地図プロバイダーの地図、広告バナーなど。このコースで使用しているライブ編集可能な例も、`<iframe>` を使用して実装されています。

`<iframe>` 要素を使用する前に、いくつかのセキュリティ上の懸念があります。
 例えば、`<iframe>` 要素を使用して、MDN 用語集をウェブページに記載するために、次のコード例のようなことを試みるとします。
 下記のコードをページに追加した場合、用語集ページではなく、エラーメッセージが表示されることに驚くかもしれません。

```html
<head>
  <style>
 iframe {
 border: none;
 }
 </style>
</head>
<body>
  <iframe
 src="https://developer.mozilla.org/ja/docs/Glossary"
 width="100%"
 height="500"
 allowfullscreen
 sandbox>
    <p>
      <a href="/ja/docs/Glossary">
        iframe に対応していないブラウザーのための代替リンク
      </a>
    </p>
  </iframe>
</body>
```

ブラウザーでコンソールを見ると、次のようなエラーメッセージが表示されているはずです。
```

Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X-Frame-Options' to 'deny'.
```

後述のセキュリティの節では、このエラーが発生する原因について詳しく説明していますが、最初のうちは、このコードが何を行っているのかを見ていきましょう。

この例には、`<iframe>` の使用に必要な基本的な要素が含まれています。

`border: none`

使用した場合、`<iframe>` は周囲の境界線なしで表示されます。そうでない場合、既定では、ブラウザーは `<iframe>` を境界線付きで表示します（これは一般的に望ましくありません）。

`allowfullscreen`

設定されている場合、`<iframe>` は、全画面 API を使用して全画面モードにすることができます（この記事の範囲外です）。

`src`

この属性は、 `<video>` や `<img>` と同様に、埋め込む文書の URL を指すパスを含んでいます。

`width` と `height`

これらの属性は、 iframe の幅と高さを指定します。

`sandbox`

この属性は、他の `<iframe>` の機能よりも若干現代的なブラウザー(たとえば、IE 10 以上)で機能し、高度なセキュリティ設定を要求します。これについては、次のセクションで詳しく説明します。

**メモ:** 速度を向上させるためには、メインコンテンツの読み込みが完了した後に iframe の `src` 属性を JavaScript で設定することをお勧めします。これにより、ページがより早く使用できるようになり、公式ページの読み込み時間が短縮されます（重要な SEO の測定基準）。

### セキュリティ上の懸念

上記で、セキュリティに関する懸念について触れましたが、ここでもう少し詳しく説明します。私たちは、この内容を最初から完璧に理解してもらうことを期待しているわけではありません。ただ、この懸念に気づいてもらい、経験を積んで `<iframe>` を実験や業務で使用することを考え始めたときに、参考になるような情報を提供したいだけなのです。また、怖がって `<iframe>` を使用しないようにする必要はなく、ただ注意する必要があるだけです。続きを読んでください...

ブラウザーメーカーやウェブ開発者は、 iframe がウェブ上の悪意ある人物（しばしば**ハッカー**、またはより正確には**クラッカー**と呼ばれます）の共通のターゲット（公式の用語: **攻撃ベクター**）であるということを苦労して学びました。悪意ある人物は、あなたのウェブページを悪意を持って改ざんすることや、ユーザー名やパスワードなどの機密情報を明らかにするなど、人を騙し望んでいないことを行います。このため、仕様技術者とブラウザー開発者は、`<iframe>` をより安全にするためのさまざまなセキュリティメカニズムを開発しました。また、考慮すべき最善の措置もあります。これらのいくつかを以下で説明します。

**メモ:** クリックジャッキングは、ハッカーが目に見えない iframe を文書に埋め込んだり（文書を自分の悪意のあるウェブサイトに埋め込んだり）して、ユーザーの操作を乗っ取るための一般的な iframe 攻撃の一種です。これは、ユーザーを誤解させたり機密データを盗む一般的な方法です。

簡単な例ですが、先ほど紹介した例をブラウザーに読み込んでみましょう。Github にライブが公開されています（ソースコードも参照してください）。実際にページに何も表示されませんが、ブラウザーの開発者ツールのコンソールに、理由を示すメッセージが表示されます。 Firefox では、`The loading of "https://developer.mozilla.org/en-US/docs/Glossary" in a frame is denied by "X-Frame-Options" directive set to "DENY"` （フレーム内への `https://developer.mozilla.org/en-US/docs/Glossary` の読み込みは、 X-Frame-Options ディレクティブが "DENY" に設定されているため、拒否されました）というメッセージが表示されます。これは、MDN を作成した開発者が、`<iframe>` 内に埋め込まれないようにウェブサイトのページを提供する設定をサーバーに組み込んだためです（下記の CSP ディレクティブの設定を参照してください）。これは実に理にかなっています。MDN のページ全体を他のページに埋め込むことは、自分のサイトに埋め込んで自分自身で主張するようなことをしない限り、実に意味がありませんし、またクリックジャッキングによってデータを盗もうとすることも、どちらも本当に悪いことです。さらに、もしみんながこれをやり始めたら、必要な通信帯域が増え、 Mozilla にたくさん課金されてしまうでしょう。

#### 必要なときのみ埋め込む

第三者のコンテンツを埋め込むことが理にかなっている場合もあります。 — youtube 動画や地図のようなものですが、完全に必要なときに第三者のコンテンツだけを埋め込むのであれば、頭を悩ますことはありません。ウェブセキュリティのための良い経験則は、「慎重すぎることは決してありません。もしあなたがそれを作ったら、とにかくそれをもう一度チェックしてください。他の誰かがそれを作ったら、そうでないと証明されるまでそれは危険です。」ということです。

セキュリティのほかに、知的財産の問題にも注意する必要があります。ほとんどのコンテンツは著作権で保護されており、オフラインでもオンラインでも、予期していないコンテンツ(例えば、ウィキメディアコモンズのほとんどの画像)でさえもあります。あなたが所有しているか、または所有者があなたに書面による明白な許可を与えていない限り、ウェブページにコンテンツを表示しないでください。著作権侵害に対する罰則は厳しいものです。繰り返しますが、決して慎重すぎることはありません。

コンテンツにライセンスが付与されている場合は、ライセンス条項に従わなければなりません。たとえば、MDN のコンテンツは CC-BY-SA でライセンスされています。つまり、コンテンツを大幅に変更した場合でも、コンテンツを引用する際には、適切にクレジットを表示する(英語)必要があります。

#### HTTPS を使用する

HTTPS は HTTP の暗号化されたバージョンです。可能であれば、HTTPS を使用してウェブサイトを提供する必要があります。

1. HTTPS を使用すると、転送中にリモートコンテンツが改ざんされる可能性が減り、
2. HTTPS は、埋め込みコンテンツが親文書内のコンテンツにアクセスすることを防止し、逆も同様です。

サイトで HTTPS を有効にするには、特別なセキュリティ証明書をインストールする必要があります。多くのホスティングプロバイダーは、自分自身で資格情報を所有するための設定をすることなく、 HTTPS 対応のホスティングを提供しています。しかし、自分自身でサイトの HTTPS 対応を設定する必要がある場合、 Let's Encrypt は、必要な証明書を自動的に作成してインストールするためのツールや手順を、Apache web server、Nginx など、最も広く使用されているウェブサーバーの組み込み対応で使用する方法を提供しています。 Let's Encrypt のツールは、可能な限りプロセスを簡単にするように設計されているので、サイトを HTTPS 化するために、このツールまたは他に使用できる手段を避ける理由は、実に何もないのです。

**メモ:** GitHub ページでは、既定で HTTPS 経由でコンテンツを提供できるため、コンテンツのホスティングに便利です。異なるホスティングを使用していて、わからない場合は、ホスティングプロバイダーに問い合わせてください。

#### 常に `sandbox` 属性を使用する

攻撃者がウェブサイトで悪事を働く力をできるだけ小さくしたいので、埋め込みコンテンツには「その仕事をするために必要な権限」だけを与えるべきです。もちろん、これは自分自身のコンテンツにも当てはまります。コードが適切に使用できる、あるいはテストのために使用できる、しかしコードベースの残りの部分に（偶然であれ悪意であれ）害を発生させることができない、コードのためのコンテナーはサンドボックスと呼ばれています。

サンドボックス化されていないコンテンツは、JavaScript の実行、フォームの送信、ポップアップウィンドウの起動などを行うことができます。既定では、前の例で示したように、引数なしの `sandbox` 属性を使用して、利用可能なすべての制限を課す必要があります。

絶対に必要な場合は、権限を（`sandbox=""` 属性値内に） 1 つずつ追加することができます。使用可能なすべてのオプションについては、 `sandbox` のリファレンスの記事を参照してください。重要な注意点の 1 つは、 `sandbox` 属性に `allow-scripts` と `allow-same-origin` の両方を追加しないことです。この場合、埋め込みコンテンツは、サイトのスクリプトの実行を停止する同一オリジンセキュリティポリシーをバイパスし、 JavaScript を使用してサンドボックスを完全に無効にすることができます。

**メモ:** 攻撃者が欺いて悪意のあるコンテンツ（iframe 外にある）を直接訪問させることができれば、サンドボックスは保護を提供しません。特定のコンテンツが悪意のあるコンテンツ（ユーザー生成コンテンツなど）である可能性がある場合は、別のドメインからメインサイトへ配信してください。

#### CSP ディレクティブの設定

CSP は **コンテンツセキュリティポリシー** の略で、HTML 文書のセキュリティを強化するために設計された一連の HTTP ヘッダー（ウェブサーバーから配信されたときにウェブページとともに送信されるメタデータ）を提供します。`<iframe>` を保護する場合、適切な X-Frame-Options ヘッダーを送信するようにサーバーを構成できます。これにより、他のウェブサイトがそのウェブページにあなたのコンテンツを埋め込むのを防ぐことができます（クリックジャッキングや他の攻撃のホストを可能にする）。以前に見たように、これはまさに MDN 開発者が行ったことです。

**メモ:** Frederik Braun 氏の投稿 X-Frame-Options セキュリティヘッダーについて（英語）で、このトピックの背景情報を読むことができます。明らかに、これは、この記事の説明の範囲外です。

<embed> 要素と <object> 要素
-----------------------

`<embed>` と `<object>` 要素は `<iframe>` とは異なる機能を果たします。これらの要素は、 PDF などの外部コンテンツを埋め込むための汎用的な埋め込みツールです。

しかし、これらの要素を使用することはとても少ないでしょう。 PDF を表示する必要がある場合、通常はページに埋め込むのではなく、リンクする方がよいでしょう。

過去には、これらの要素は Adobe Flash のようなブラウザーのプラグインによって処理される内容を埋め込むためにも使用されましたが、この技術は現在では時代遅れであり、現代のブラウザーはこの技術に対応していません。

プラグインの内容を埋め込む必要が出てきた場合、最低限このような情報が必要になります。

|  | `<embed>` | `<object>` |
| --- | --- | --- |
| 埋め込みコンテンツの URL | `src` | `data` |
| 埋め込みコンテンツの*正確な*メディア種別 | `type` | `type` |
| プラグインで制御されるボックスの幅と高さ（CSS ピクセル単位） | `height``width` | `height``width` |
| プラグインに引数として供給するための名前と値 | その場限りの属性とその名前と値 | 単一タグの `<param>` 要素を `<object>` の中に書く |
| 利用不可能なリソースに対する代替として独立した HTML コンテンツ | 対応なし（`<noembed>` は廃止） | `<object>` 内の
 `<param>` 要素の後に入れる
  |

次に、PDF をページに埋め込む `<object>` の例を見てみましょう（ライブ例とソースコードを参照）。

```html
<object data="mypdf.pdf" type="application/pdf" width="800" height="1200">
  <p>
    PDF プラグインはありませんが、
    <a href="mypdf.pdf">PDF ファイルをダウンロードできます。</a>
  </p>
</object>
```

PDF は紙とデジタルの間の必要な足がかりでしたが、多くのアクセシビリティ上の課題（英語）があり、小さな画面では読みにくい場合があります。まだいくつかのサークルで人気がある傾向がありますが、ウェブページに埋め込むのではなく、ダウンロードしたり、別のページで読むことができるように、リンクする方がはるかに優れています。

スキルをテストしましょう
------------

この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストをいくつか見つけることができます — スキルテスト: マルチメディアと埋め込みを参照してください。

まとめ
---

ウェブ文書に他のコンテンツを埋め込むという話題は、すぐに複雑になりがちです。そこでこの記事では、関連する技術のより高度な機能のいくつかを示唆しつつ、すぐに関連性が感じられるような、シンプルで身近な方法でそれを紹介しようと試みました。はじめのうちは、地図や動画のようなサードパーティーのコンテンツをページに記載する以上の目的で、埋め込みを使用することはあまりないと思われます。しかし、経験を積むにつれて、より多くの使用方法を見つけることができるようになるはずです。

ここで説明したもの以外にも、外部コンテンツの埋め込みを含む他の多くの技術があります。以前の記事では `<video>`、`<audio>`、`<img>` などいくつかを見ましたが、JavaScript で生成された 2D および 3D グラフィックの場合は `<canvas>`、ベクターグラフィックス埋め込む場合は `<svg>` など、他にも見い出されるものがあります。モジュールの次の記事では SVG を見ていきます。

* 前のページ
* Overview: Multimedia and embedding
* 次のページ


Mozilla のスプラッシュページ - ウェブ開発を学ぶ

Mozilla のスプラッシュページ
==================

* 前のページ
* Overview: Multimedia and embedding

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

|  |  |
| --- | --- |
| 前提条件: | この評価に挑戦する前に、すでにこのモジュールのすべての記事を読み終えておいてください。 |
| 目的: | ウェブページに画像と動画を埋め込むこと、フレーム、および HTML レスポンシブ画像技術に関する知識をテストすること。 |

出発点
---

この評価試験を開始するには、GitHub の mdn-splash-page-start ディレクトリーにある HTML とすべての画像を取得する必要があります。 index.html の内容をローカルドライブの新しいディレクトリーの `index.html` というファイルに保存します。 それから、pattern.png を同じディレクトリーに保存します（画像を右クリックして保存するオプションを選びます）。

originals ディレクトリーの別の画像にアクセスし、同じ方法で保存します。 あなたはそれらを使用する準備が整う前に、グラフィックスエディターを使って（それらのいくつかを）操作する必要があるので、今は別のディレクトリーに保存する必要があります。

あるいは、 Glitch のようなオンラインツールを使用して、例を作成することもできます。このページの下にある 評価またはさらなる支援 セクションを参照してください。

**メモ:** 例の HTML ファイルには、ページのスタイルを設定するための CSS がかなり多く含まれています。 CSS に触れる必要はなく、 `<body>` 要素内の HTML を操作するだけです。正しいマークアップを挿入していれば、スタイルは正しく表示されます。

プロジェクトの概要
---------

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

### 画像の準備

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

* `firefox_logo-only_RGB.png`
* `firefox-addons.jpg`
* `mozilla-dinosaur-head.png`

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

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

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

**メモ:** JPG 画像と PNG 画像は最適化して、できるだけ小さくして、それでも見栄えを良くしてください。 tinypng.com は簡単にこれを行うための素晴らしいサービスです。

### ヘッダーにロゴを追加する

`<header>` 要素の中に、小さなバージョンの Firefox ロゴをヘッダーに埋め込む `<img>` 要素を追加してください。

### 主要記事のコンテンツに動画を追加する

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

### さらなる情報リンクにレスポンシブ画像を追加する

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

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

正しい画像と正しいリンクが一致していることを確認してください。

**メモ:** `srcset` と `sizes` の例を適切にテストするには、サイトをサーバーにアップロードする必要があります (GitHub ページを使用するのが簡単で無料の解決策です)。 そして、そこから Firefox のネットワークモニターなどのツールを使用して正しく動作しているかどうかをテストできます。

### アートディレクションされたレッサーパンダ

`red-panda` クラスを持つ `<div>` の中に、ビューポートの幅が 600px 以下の場合は小さな縦型ののパンダ画像を提供する `<picture>` 要素を挿入し、それ以外の場合は大きな横型の画像を挿入します。

ヒントとコツ
------

* W3C Nu HTML Checker を使用すると、 HTML の間違いを拾うことができます。
* この評価課題を行うには、 CSS の知識は必要ありません。必要なものは HTML ファイルだけです。 CSS の部分はすでに完成しています。
* 提供された HTML （CSS スタイル設定を含む）はすでにほとんどの作業を行っていますので、メディアの埋め込みにだけ集中してください。
例
-

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

![サンプルのスプラッシュページの広い画面のショット](/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page/wide-shot.png)

![サンプルのスプラッシュページの狭い画面のショット](/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page/narrow-shot.png)

評価とさらなる支援
---------

自分の作品を評価してほしい、あるいは行き詰まりを感じていて相談したい場合は次のようにしてください。

1. CodePen, jsFiddle, Glitch などのオンライン共有エディターに、自身の作品を入れてください。 Glitch は画像のようなアセットをアップロードできるので、この例では Glitch の方が良いかもしれませんが、他のツールはそうではありません。
2. MDN Discourse forum Learning category に、評価や助けを依頼する投稿を書きます。投稿には、以下を記載してください。（訳注: やりとりは英語になります。）
    * "Assessment wanted for Mozilla splash page" のような説明的なタイトル。
    * すでに保有されている内容や、私たちに希望されること。例えば、行き詰って助けが必要な場合や、評価を希望される場合は、その旨を指示してください。
    * 評価したい、あるいは助けが必要な例へのリンクを、オンライン共有エディターで表示します（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際のタスクまたは評価ページへのリンク。そうすると私たちがヘルプが必要な質問を探すことができます。
* 前のページ
* Overview: Multimedia and embedding


HTML の画像 - ウェブ開発を学ぶ

HTML の画像
========

* Overview: Multimedia and embedding
* 次のページ

当初、ウェブは単なるテキストであり、とてもつまらないものでした。幸運なことに、ウェブページ内に画像（および他のより面白い種類のコンテンツ）を埋め込む能力が追加されるまでにはあまり時間がかかりませんでした。考慮すべき他の種類のマルチメディアもありますが、単純な画像をウェブページに埋め込むために使用される、慎ましい`<img>` 要素から始めるのが理にかなっています。この記事では、基本的な使い方を含め、`<figure>` を使ったキャプションの注釈付け、CSS 背景画像との関連付けなど、詳細な使い方を見ていきます。

|  |  |
| --- | --- |
| 前提条件: |
 基本的なコンピューターリテラシー、
 インストール済みの基本的なソフトウェア、基本的な
 ファイル操作の知識、 HTML の基礎知識になじんでいること（HTML を始めようにあるような）。
  |
| 目的: | 単純な画像を HTML に埋め込み、キャプションで注釈を付ける方法、および HTML 画像と CSS 背景画像との関連を学ぶ。 |

ウェブページに画像を置くにはどうするのか
--------------------

単純な画像をウェブページに配置するには、 `<img>` 要素を使用します。これは空要素であり（すなわち子要素や終了タグを置くことができない）、役立つには 2 つの属性、 `src` と `alt` が必要です。`src` 属性には、ページに埋め込む画像を指す URL を指定します。`<a>` 要素の `href` 属性と同じように、`src` 属性は相対 URL または絶対 URL にすることができます。`src` 属性がないと、`img` 要素は画像を読み込みません。

`alt` 属性は後で説明します。

**メモ:** 続行する前に、URL とパスに関する簡単な入門を読んで、相対 URL と絶対 URL の記憶を更新してください。

例えば、画像が `dinosaur.jpg` というファイル名で、HTML ページと同じディレクトリーにある場合、画像を次のように埋め込むことができます。

```html
<img src="dinosaur.jpg" alt="Dinosaur" />
```

画像がこの HTML ページと同じディレクトリーの `images` サブディレクトリーにある場合は、次のように埋め込みます。

```html
<img src="images/dinosaur.jpg" alt="Dinosaur" />
```

他も同様です。

**メモ:** 検索エンジンは画像ファイル名も読み込み、SEO に向けてカウントします。したがって、画像にわかりやすいファイル名を付けてください。 `dinosaur.jpg` は `img835.png` よりも優れています。

例えば次のように、絶対 URL を使用して画像を埋め込むこともできます。

```html
<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
```

しかし、これは推奨されません。通常の設定では、自分の画像は自分でホスティングする必要があるため、HTML と同じサーバーに置いておくからです。より高度な設定では、画像を配信するために CDN (Content Delivery Network) を使用するかもしれません。

**警告:** 他人のウェブサイトでホスティングされている画像を、**許可なく** src 属性で指しては**いけません**。これは「ホットリンク」と呼ばれます。誰かがページにアクセスしたときに画像を配信するための帯域幅のコストを他の誰かが負担することになるため、一般に倫理的に問題があると考えられています。

一般に、自分のサイトで使用したい画像はホスティングする必要があります。画像をホスティングする前に、これらのいずれかが成立していることを確認する必要があります。

* その画像を所有している
* その画像の所有者からの書面による明示的な許可を得ている。
* その画像が実際にパブリックドメインであるという十分な証拠がある。

上のコードでは、次の結果が得られます。

![恐竜の基本的な画像が、ブラウザーに埋め込まれ、その上に "Images in HTML" が書かれています](/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/basic-image.png)

**メモ:** `<img>` や `<video>` のような要素は、**置換要素**と呼ばれることがあります。これは、要素の内容とサイズが、要素自体の内容ではなく、外部リソース（画像ファイルや動画ファイルなど）によって定義されているためです。詳しくは置換要素を参照してください。

**メモ:** この節で仕上げた例は、 Github で実行することができます（ソースコードも参照してください）。

### 代替テキスト

次に見ていくのは `alt` 属性です。この値は、画像が見えない/表示されない場合や、インターネット接続が遅いために描画に時間がかかる場合に使用する、画像のテキストによる説明文となるはずです。例えば、上記のコードはこのように変更することができます。

```html
<img
 src="images/dinosaur.jpg"
 alt="The head and torso of a dinosaur skeleton;
 it has a large head with long sharp teeth" />
```

`alt` テキストをテストする最も簡単な方法は、わざとファイル名のスペルミスをすることです。たとえば、画像名のスペルが `dinosooooor.jpg` の場合、ブラウザーは画像を表示せず、代わりに代替テキストを表示します。

![Images in HTML というタイトルですが、今回は恐竜の画像が表示されず、代替テキストが代わりに表示されます。](/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/alt-text.png)

では、なぜ代替テキストを見かけたり、必要としたりするのでしょうか？それは、さまざまな理由で決まります。

* 視覚障害のユーザーがおり、ウェブを読むのにスクリーンリーダーを使用している場合。実際、画像を記述するための代替テキストを用意することは、ほとんどのユーザーにとって有益です。
* 上記のように、ファイル名またはパス名のスペルが間違っている可能性があります。
* ブラウザーがその画像の種類に対応していないことがあります。人によっては Lynx などのテキストのみのブラウザーを使用している人もおり、その場合は代わりに画像の代替テキストを表示します。
* 検索エンジンにテキストを提供して利便性を図ることができます。たとえば、検索エンジンは検索クエリーで照合することがあります。
* ユーザーは画像をオフにして、データ転送量や目移りを減らすことがあります。。これは特に、携帯電話や帯域幅が限られて高価な国では一般的です。

`alt` 属性の中に正確に何を書けばいいのでしょうか？それは、最初に画像を置く理由に依存します。言い換えれば、画像が表示されないと何を失うかです。

* **装飾**。装飾的な画像には CSS 背景画像を使用すべきですが、 HTML を使用する必要がある場合は、空白の `alt=""` を追加してください。画像がコンテンツの一部でない場合、スクリーンリーダーは読んで時間を浪費すべきではありません。
* **コンテンツ**。画像が重要な情報を提供している場合は、簡単な代替テキストで同じ情報を提供してください。それよりもっと良いのは、誰もが見ることができる本文の中で提供することです。冗長な `alt` テキストを書かないでください。すべての段落がメインコンテンツに 2 重に書かれていると、目に見えるユーザーにとってはどれほど迷惑でしょうか？画像が主たる本文で十分に記述されている場合は、単に `alt=""` が使用できます。
* **リンク**。 `<a>` タグ内に画像を置いた場合、画像をリンクにすると、アクセス可能なリンクテキストを提供する必要があります。そのような場合は、同じ `<a>` 要素内に、または画像の `alt` 属性内に書き込むことができます。
* **テキスト**。テキストを画像に入れないでください。たとえば、メインの見出しにドロップシャドウが必要な場合は、テキストを画像に入れるのではなく、 CSS を使用してください。しかし、これが本当に避けられない場合は、 `alt` 属性でテキストを与える必要があります。

基本的には、画像が見えないときでも、実用的な使い勝手を提供することが鍵です。これにより、すべてのユーザーにコンテンツが欠落していないことが保証されます。ブラウザーの画像をオフにして、どのように見えるかを確認してください。画像が見えない場合に、すぐに役立つ代替テキストがどれほどあるかがすぐに理解できます。

**メモ:** 詳細については、代替テキストのガイドを参照してください。

### 幅と高さ

`width` 属性と `height` 属性を使用して、画像の幅と高さを指定することができます。画像の幅と高さはさまざまな方法で確認できます。たとえば Mac では、 `Cmd` + `I` を使用して画像ファイルの情報を表示することができます。例に戻ると、これをこのように行うことができます。

```html
<img
 src="images/dinosaur.jpg"
 alt="The head and torso of a dinosaur skeleton;
 it has a large head with long sharp teeth"
 width="400"
 height="341" />
```

これは、通常の状況下では表示が大きく異なるものではありません。しかし、画像が表示されていない場合、たとえば、ユーザーがページに移動して画像がまだ読み込まれていない場合、ブラウザーには画像が表示される空間が残ります。

![恐竜の代替テキストを含む Images in HTML タイトルは、幅と高さの設定の結果として大きなボックスの内側に表示されます](/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/alt-text-with-width-height.png)

これは良いことです。その結果、ページの読み込みがより迅速かつスムーズに行われます。

ただし、 HTML 属性を使用して画像のサイズを変更しないでください。画像のサイズを大きくしすぎると、ざらついて、ぼやけた画像になり、小さくしすぎると、帯域幅を無駄にしてユーザーのニーズに合わない画像をダウンロードすることになります。正しいアスペクト比を維持しないと、画像が歪んで見えることもあります。画像エディターを使用して画像を正しいサイズにしてから、ウェブページに配置する必要があります。

**メモ:** 画像のサイズを変更する必要がある場合は、代わりに CSS を使用してください。

### 画像のタイトル

リンクと同様に、画像に `title` 属性を追加して、必要に応じてさらに補足情報を提供することもできます。この例では、これを行うことができます。

```html
<img
 src="images/dinosaur.jpg"
 alt="The head and torso of a dinosaur skeleton;
 it has a large head with long sharp teeth"
 width="400"
 height="341"
 title="A T-Rex on display in the Manchester University Museum" />
```

これは、リンクのタイトルと同様に、マウスのホバーによるツールチップを提供します。

![恐竜の画像に、 A T-Rex on display at the Manchester University Museum というツールチップのタイトルが表示されています](/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/image-with-title.png)

しかし、これは推奨されていません。`title` には多くのアクセシビリティ上の問題があります。主に、スクリーンリーダーの対応予測不可能で、ほとんどのブラウザーではマウスを当てない限り表示されません（そのため、例えばキーボードのユーザーはアクセスできません）。このことについてもっと知りたい場合は、Scott O'Hara のタイトル属性の試行錯誤 （英語）をお読みください。

画像に添付するのではなく、メインの記事のテキストにそのような補足情報を含めた方がいいでしょう。

### アクティブラーニング: 画像の埋め込み

今度はあなたの番です。このアクティブラーニングの節では、簡単な埋め込み練習をさせていただきます。基本的な `<img>` タグが提供されています。次の URL の画像を埋め込むようにしてください。
```

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg
```

以前は他のサーバー上の画像に絶対にホットリンクしないように言っていましたが、これは単に学習目的のためのものです。

また、次のこともします。

* 代替テキストを追加し、画像 URL のスペルを間違えて機能することを確認します。
* 画像の正しい `width` と `height` （ヒント: 幅 200 ピクセル、高さ 171 ピクセル）を設定し、他の値を試してその効果を確認します。
* 画像に `title` を設定します。

間違えた場合は、[リセット] ボタンを使用してリセットすることができます。あなたが本当に立ち往生した場合は、[答えを表示] ボタンを押して答えを表示してください。
```

<h2>ライブ出力</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>編集可能なコード</h2>
<p class="a11y-label">
  Esc を押すとコード領域からフォーカスを移動させることができます（Tab
  はタブ文字を挿入します）。
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
<img>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="リセット" />
  <input id="solution" type="button" value="答えを表示" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur\_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "答えを表示";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "答えを表示") {
    textarea.value = solutionEntry;
    solution.value = "答えを隠す";
  } else {
    textarea.value = userEntry;
    solution.value = "答えを表示";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "答えを表示") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

図表と図表のキャプションで画像に注釈を付ける
----------------------

キャプションといえば、画像に付けるキャプションを追加する方法はいくつかあります。たとえば、こうするのをやめる理由は何もないでしょう。

```html
<div class="figure">
  <img
 src="images/dinosaur.jpg"
 alt="The head and torso of a dinosaur skeleton;
 it has a large head with long sharp teeth"
 width="400"
 height="341" />

  <p>マンチェスター大学博物館に展示されている T-Rex。</p>
</div>
```

これで結構です。それはあなたが必要とするコンテンツを含んでおり、CSS を使って素敵に書式設定できます。しかし、ここに問題があります。画像をキャプションに意味的にリンクするものは何もありません。スクリーンリーダーにとっては問題を引き起こす可能性があります。たとえば、50 個の画像とキャプションがある場合、どのキャプションにどの画像が表示されるのでしょうか？

より良い解決策は、HTML の `<figure>` と `<figcaption>` 要素を使用することです。図表のための意味的なコンテナーを提供し、図表をキャプションに明確にリンクさせること。これはまさにこの目的のために作成されたものです。上記の例は次のように書き直すことができます。

```html
<figure>
  <img
 src="images/dinosaur.jpg"
 alt="The head and torso of a dinosaur skeleton;
 it has a large head with long sharp teeth"
 width="400"
 height="341" />

  <figcaption>マンチェスター大学博物館に展示されている T-Rex。</figcaption>
</figure>
```

`<figcaption>` 要素は、キャプションが `<figure>` 要素の他のコンテンツを説明していることをブラウザーと支援技術に伝えます。

**メモ:** アクセシビリティの観点から、キャプションと `alt` テキストには明確な役割があります。キャプションは画像を見ることができる人にも利益をもたらしますが、`alt` テキストは欠けている画像と同じ機能を提供します。したがって、キャプションと `alt` テキストは、画像がなくなったときに両方が表示されるため、同じことを言うべきではありません。ブラウザーで画像をオフにして見た目を確認してみてください。

図表は画像である必要はありません。それは次のようにコンテンツの独立した単位です。

* 趣旨をコンパクトでわかりやすく表現したもの。
* ページの直線的な流れのいくつかの場所に入ることができること。
* メインテキストをサポートするための重要な情報を提供すること

図表は、いくつかの画像、コードスニペット、音声、動画、方程式、表、または何か他のものであってもよいのです。

### アクティブラーニング: 図表の作成

このアクティブラーニングの節では、以前のアクティブラーニングの節で完成したコードを図表にします。

* `<figure>` 要素で囲みます。
* テキストを `title` 属性からコピーし、 `title` 属性を削除し、テキストを画像の下の `<figcaption>` 要素の中に置きます。

間違えた場合は、[リセット] ボタンを使用してリセットすることができます。あなたが本当に立ち往生した場合は、[答えを表示] ボタンを押して答えを表示してください。
```

<h2>ライブ出力</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>編集可能なコード</h2>
<p class="a11y-label">
  Esc を押すとコード領域からフォーカスを移動させることができます（Tab
  はタブ文字を挿入します）。
</p>

<textarea
 id="code"
 class="input"
 style="min-height: 100px; width: 95%"></textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="リセット" />
  <input id="solution" type="button" value="答えを表示" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur\_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "答えを表示";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "答えを表示") {
    textarea.value = solutionEntry;
    solution.value = "答えを隠す";
  } else {
    textarea.value = userEntry;
    solution.value = "答えを表示";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "答えを表示") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

CSS 背景画像
--------

CSS を使用して画像をウェブページに埋め込むこともできます（JavaScript でもできますが、それはまったく別の話です）。CSS の `background-image` プロパティとその他の `background-*` プロパティは、背景画像の配置を制御するために使用されます。たとえば、ページ上の各段落に背景画像を配置するには、次のようにします。

```css
p {
  background-image: url("images/dinosaur.jpg");
}
```

その結果、埋め込み画像は、 HTML 画像よりも間違いなく位置決めや操作がしやすくなっています。では、なぜわざわざ HTML 画像なのでしょうか？先に述べたように、CSS の背景画像はあくまで装飾のためのものです。ページに何かきれいなものを追加してビジュアルを向上させたいだけなら、これでよいのです。しかし、このような画像には何の意味もありません。同等のテキストを保有することはできませんし、スクリーンリーダーからも見えない、などです。そこで、 HTML 画像が威力を発揮します。

要約: 画像に意味がある場合、すなわちコンテンツであれば、HTML 画像を使用してください。画像が純粋に装飾である場合は、 CSS 背景画像を使用してください。

**メモ:** CSS 背景画像については、CSS のトピックで詳しく説明します。

スキルをテストしましょう
------------

この記事の終わりまで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を取得したかのテストを見ることができます — スキルテスト: HTML 画像 を見てください。

まとめ
---

今回は以上です。ここまで画像とキャプションについて詳しく述べてきました。次の記事では、さらにギアを上げて、HTML を使用してウェブページに動画や音声コンテンツを埋め込む方法について見ていきたいと思います。

* Overview: Multimedia and embedding
* 次のページ


動画と音声のコンテンツ - ウェブ開発を学ぶ

動画と音声のコンテンツ
===========

* 前のページ
* Overview: Multimedia and embedding
* 次のページ

ウェブページに簡単な画像を追加するのができるようになったので、次のステップは HTML 文書に動画と音声のプレイヤーを追加することです。この記事では `<video>` と `<audio>` 要素を使って実現することを見ていきます。それから動画にキャプションや字幕を追加する方法を見て完了します。

|  |  |
| --- | --- |
| 前提条件: |
 基本的なコンピューターリテラシー、
 インストール済みの基本的なソフトウェア、基本的な
 ファイル操作の知識、 HTML の基礎知識になじんでいること（HTML を始めようにあるような）、および
 HTML の画像。
  |
| 目的: | 動画や音声のコンテンツをウェブページに埋め込み、動画にキャプションや字幕を追加する方法を学びます。 |

ウェブでの動画と音声
----------

オンラインの動画や音声の最初の登場は、 Flash や Silverlight といった独占的なプラグインベースの技術によって可能となりました。これらはどちらもセキュリティやアクセシビリティの問題があり、現在では廃れています。 HTML のネイティブのソリューションである `<video>` と `<audio>` 要素と JavaScript が利用できるようになったからです。それらを操作するための API があります。ここでは、 JavaScript については触れません。 HTML で実現できる基本的な基礎知識だけを紹介します。

音声/動画ファイルの作成方法は、完全に別のスキルが必要なため、ここでは教えません。私たちは、自分自身で実験するために、音声や動画のファイルの例とコード を提供しています。

**メモ:** ここで始める前に、 YouTube、Dailymotion、Vimeo のような OVP （オンライン動画プロバイダー）と Soundcloud のようなオンライン音声プロバイダーがあることも知っておく必要があります。そのような企業は、動画をホストして消費するための便利で簡単な方法を提供するので、莫大な帯域幅の消費を心配する必要はありません。 OVP は通常、ウェブページに動画や音声を埋め込むための既製コードを提供しています。その道を行くなら、この記事で取り上げるいくつかの困難を避けることができます。この種のサービスについては、次の記事でもう少し詳しく説明します。

### <video> 要素

`<video>` 要素を使用すると、動画をとても簡単に埋め込むことができます。本当に簡単な例は次のようになります。

```html
<video src="rabbit320.webm" controls>
  <p>
    お使いのブラウザーは HTML 動画をサポートしていません。その代わりに<a
 href="rabbit320.webm"
 >動画へのリンク</a
 >があります。
  </p>
</video>
```

機能は次のとおりです。

`src`

`<img>` 要素と同じように、`src` （ソース）属性には、埋め込みたい動画へのパスが含まれています。これは、まったく同じように動作します。

`controls`

ユーザーは、動画や音声の再生を制御できる必要があります（特にてんかんを患っている人にとっては重要です）。`controls` 属性を使用してブラウザー独自のコントロールインターフェイスを組み込むか、適切な JavaScript API を使用してインターフェイスを構築する必要があります。少なくとも、インターフェイスにはメディアの開始と停止、および音量の調整が含まれている必要があります。

`<video>` タグ内の段落

これは**代替コンテンツ**と呼ばれ、ページにアクセスしているブラウザーが `<video>` 要素に対応していない場合に表示され、古いブラウザーのための代替手段を提供することができるようになります。この場合、動画ファイルへの直接リンクを提供していますので、ユーザーは使用するブラウザーに関係なく、少なくとも何らかの方法で動画にアクセスすることができます。

埋め込み動画は次のようになります。

![小さな白いウサギの動画を表示するシンプルなビデオプレーヤー](/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/simple-video.png)

ここでサンプルをライブで試すことができます(ソースコードも参照してください)。

### 複数のソース形式を使用して互換性を向上させる

上記の例には問題があります。ブラウザーの対応する動画（音声）形式が様々であるため、動画が再生されない可能性があるのです。幸い、この問題を防ぐためにできることがあります。

#### メディアファイルの内容

まず、用語をすばやく見てみましょう。MP3、MP4、WebM などの形式は **コンテナー形式** と呼ばれています。それらは、音声トラック、映像トラック（動画の場合）、および提示されるメディアを記述するメタデータなど、歌または動画全体を構成する様々な部分を含みます。

ある WebM ファイルに、メイン映像トラックと別アングルのトラック、英語とスペイン語の音声、英語のコメンタリートラックの音声がある映画が含まれている場合、下図のような概念で考えることができます。また、長編映画の字幕、映画のスペイン語字幕、コメンタリーの英語字幕を含むテキストトラックも記載されています。

![メディアファイルの中身をトラック単位で概念化した図。](/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/containersandtracks.png)

コンテナー内の音声トラックと映像トラックは、そのメディアをエンコードするために使用されるコーデックに適した形式のデータを保持します。音声トラックと映像トラックでは、異なる形式が使用されます。それぞれの音声トラックは 音声コーデック (en-US) を使用してエンコードされ、一方映像トラックは、 （おそらく予想通り） 映像コーデックを使用してエンコードされます。前にお話ししたように、さまざまなブラウザーでは、多様な動画と音声の形式、および多様なコンテナー形式（MP3、MP4、WebM など、さまざまな種類の動画と音声を順番に入力することができる形式）に対応しています。

例えば、

* WebM コンテナーは、通常、 Vorbis または Opus の音声と VP8/VP9 映像をパッケージ化します。これはすべての現代のブラウザーが対応していますが、古いバージョンでは動作しません。
* MP4 コンテナーは、 AAC または MP3 音声を H.264 映像とパッケージ化することがよくあります。これはすべての現代のブラウザーが対応しています。
* Ogg コンテナーは、g Vorbis 音声と Theora 映像を使用する傾向があります。これは Firefox と Chrome が最もよく対応していますが、基本的により質の良い WebM 形式に取って代わられつつあります。

いくつかの特殊なケースもあります。例えば、音声の種類によっては、コーデックのデータはコンテナーなしで、または簡易的なコンテナーで格納されることがよくあります。そのような例の 1 つが FLAC コーデックで、最も一般的には、生の FLAC トラックだけの FLAC ファイルに格納されます。

もう1つは、常に人気のある MP3 ファイルです。「MP3 ファイル」とは、実際には、 MPEG-1 Audio Layer III (MP3) 音声トラックが MPEG または MPEG-2 コンテナーに格納されたものです。これは特に面白いことに、ほとんどのブラウザーが MPEG メディアを `<video>` および `<audio>` 要素で使用することに対応していませんが、 MP3 はその人気のために対応していることがあります。

オーディオプレーヤーは、 MP3 または Ogg ファイルの音声トラックを直接再生する傾向があります。これらはコンテナーを必要としません。

#### ブラウザーが対応しているメディアファイル

**メモ:** MP3 や MP4/H.264 などの一般的な形式は優れていますが、特許に阻まれています。つまり、ベースとなっている技術の一部または全部に応じた特許が存在するのです。米国では、 MP3 は 2017 年まで、 H.264 は少なくとも 2027 年までの特許が適用されています。

これらの特許のために、これらのコーデックに対応するために実装しようとするブラウザーは、通常、膨大なライセンス料を支払わなければなりません。さらに、制限のあるソフトウェアを避けて、オープンな形式だけを使用することを好む人々もいます。このような法的・選好的な理由から、ウェブ開発者は、視聴者全員を取り込むために複数の形式に対応しなければならないことが分かっています。

前節で説明したコーデックは、映像と音声を管理可能なファイルに圧縮するために存在します。生の映像と音声は非常に大きいからです。各ブラウザーには一連の **コーデック**、例えば Vorbis や H.264 などが含まれており、圧縮された音声や映像のデータをバイナリーデータに戻すために使用されます。各コーデックには利点と欠点があり、また各コンテナーにも長所と欠点があるため、どのコンテナーを使用するかの判断に影響を与えることがあります。

ブラウザーの対応するコンテナーファイル形式がそれぞれ異なるだけでなく、コーデックの選択もそれぞれ異なるため、事態は少し複雑になります。ウェブサイトや アプリがユーザーのブラウザで動作する可能性を最大限に高めるには、使用する それぞれのメディアファイルを複数の形式で提供する必要があるかもしれません。自分のサイトとユーザーのブラウザーで共通の形式がない場合、メディアは再生されません。

アプリのメディアを、リーチしたいブラウザー、プラットフォーム、機器のあらゆる組み合わせで表示できるようにすることは複雑なため、コーデックとコンテナーの最適な組み合わせを選ぶことは、複雑な作業になる可能性があります。ニーズに合ったコンテナーファイル形式の選択については、正しいコンテナーの選択を参照してください。同様に、コンテンツや対象となる視聴者に合わせて最初に使用するメディアコーデックの選択については、映像コーデックの選択や音声コーデックの選択 (en-US)が参考になります。

もう一つ覚えておいていただきたいのは、モバイル用のブラウザーは、デスクトップ版と同じ形式をすべて対応しているわけではない場合があるのと同様、デスクトップ版で対応していない形式にも追加で対応している場合があるということです。さらに、デスクトップとモバイルのブラウザーは、メディア再生の処理をオフロードするように設計されている場合があります（すべてのメディアに対して、または内部で処理できない特定の型に対してのみ、オフロードする）。つまり、メディアへの対応は、ユーザーがインストールしているソフトウェアに部分的に依存しているのです。

だから私たちはこれをどうやってやるのか? 以下の更新された例を見てください（それをここでライブで試してみてください）。

```html
<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    お使いのブラウザーはこの動画に対応していません。こちらは代わりの<a
 href="rabbit320.mp4"
 >動画へのリンク</a
 >です。
  </p>
</video>
```

ここでは実際の `<video>` タグから `src` 属性を取り出し、独自のソースを指す別々の `<source>` 要素を追加しました。この場合、ブラウザーは `<source>` 要素を走査し、対応するコーデックがある最初の要素を再生します。 WebM や MP4 のソースを含めれば、最近のほとんどのプラットフォームやブラウザーで動画を再生できるはずです。

それぞれの `<source>` 要素には `type` 属性もあります。これはオプションですが、記載しておくことをお勧めします。 `type` 属性には `<source>` で指定したファイルの MIME タイプが含まれており、ブラウザーは `type` を使用して、理解できない動画をすぐにスキップすることができます。もし `type` が記載されていなければ、ブラウザーは各ファイルを読み込んで、動作するものが見つかるまで再生しようとしますが、これは明らかに時間がかかり、リソースを不必要に使用することになります。

対応しているメディア形式のガイドを参照すると、必要とする最適なコンテナーやコーデックの選択に役に立ち、それぞれを指定するための MIME タイプを調べることができます。

### その他の <video> 機能

HTML 動画に含めることができる他の多くの機能があります。以下の 3 番目の例を見てください。

```html
<video
 controls
 width="400"
 height="400"
 autoplay
 loop
 muted
 preload="auto"
 poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    お使いのブラウザーはこの動画に対応していません。代わりに<a
 href="rabbit320.mp4"
 >動画へのリンク</a
 >をお使いください。
  </p>
</video>
```

これにより、次のような出力が得られます。

![再生する前にポスター画像を表示する動画プレーヤー。 ポスター画像には "HTML video example, OMG hell yeah!" と書いてあります。](/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/poster_screenshot_updated.png)

新しい機能は次のとおりです。

`width` と `height`

これらの属性または CSS を使用して動画サイズを制御することができます。どちらの場合も、動画は元の縦横比 (**アスペクト比**) を維持します。アスペクト比が設定したサイズによって維持されない場合、動画は水平方向にスペースを埋めるように拡大し、デフォルトでは満たされていないスペースには無地の背景色が与えられます。

`autoplay`

この属性は、ページの残りの部分がロードされている間に音声または動画の再生をすぐに開始します。ユーザーに実際に迷惑をかけることがあるので、サイトで動画 (または音声) を自動再生することはお勧めしません。

`loop`

この属性は、動画 (または音声) が終了するたびに再生を開始させます。これは迷惑になることもありますので、本当に必要な場合にのみ使用してください。

`muted`

この属性を使用すると、デフォルトで音声をオフにしてメディアを再生します。

`poster`

この属性は、動画の再生前に表示される画像の URL を値としてとります。これは、スプラッシュ画面または広告画面に使用するためのものです。

`preload`

この属性は、大きなファイルをバッファリングする要素で使用されます。3 つの値のいずれかを取ることができます。

* `"none"` はファイルをバッファリングしません
* `"auto"` はメディアファイルをバッファリングする
* `"metadata"` はファイルのメタデータのみをバッファリングする

上記の例は Github でライブで再生することができます (ソースコードも参照してください)。ライブバージョンには `autoplay` 属性は含まれていません — ページが読み込まれるとすぐに動画が再生され始めると、ポスターを見ることはできません!

### <audio> 要素

`<audio>` 要素は、`<video>` 要素とまったく同じように動作しますが、以下に説明するように若干の違いがあります。典型的な例は次のようになります。

```html
<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>
    お使いのブラウザーはこの音声ファイルに対応していません。代わりに<a
 href="viper.mp3"
 >音声へのリンク</a
 >をお使いください。
  </p>
</audio>
```

これはブラウザーで次のようなものを生成します。

![再生ボタン、タイマー、音量コントロール、および進行状況バーを備えたシンプルなオーディオプレーヤー](/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/audio-player.png)

**メモ:** Github で音声デモをライブで実行することもできます (オーディオプレーヤーのソースコードも参照してください)。

ビジュアルコンポーネントがないため、動画プレーヤーよりもスペースが小さくなります。音声を再生するコントロールを表示するだけで済みます。 HTML 動画とのその他の相違点は次のとおりです。

* `<audio>` 要素は `width` 属性や `height` 属性に対応していません。ビジュアルコンポーネントがないため、幅や高さを割り当てることはありません。
* また、`poster` 属性にも対応していません。これも、ビジュアルコンポーネントがないからです。

これ以外について `<audio>` は、`<video>` と同じ機能にすべて対応しています。詳細については、上記の節を参照してください。

動画のテキストトラックの表示
--------------

さて、今回は知っておくと実に有用な、少し高度な概念について説明します。多くの人は、ウェブで見つけた音声や動画の内容を、少なくともある時間帯は聞くことができない、あるいは聞きたくないと思っています。例えば、

* 多くの人は聴覚障害（難聴や聴覚障害など）を持っているため、音声をはっきり聞くことができません（全く聞こえない場合もあります）。
* 他にも、騒がしい環境（スポーツ観戦中の混雑したバーなど）にいるため、音声が聞こえない人もいます。
* 同様に、音声を保有すると気が散ってしまうような環境（図書館やパートナーが眠ろうとしているときなど）では、字幕を使用することはとても有用です。
* 動画の言語の話者ではない人は、メディアの内容を理解するために、文字起こしや翻訳が必要になることもあります。

音声や動画の中で話されている言葉を文字起こししたものを、このような人たちに提供できたらいいと思いませんか？ HTML 動画のおかげで、それが可能になりました。そのためには、 WebVTT ファイル形式と `<track>` 要素を使用します。

**メモ:** 「文字起こし」とは、「話し言葉をテキストとして書き留める」という意味です。出来上がったテキストが「文字起こししたもの」です。

WebVTT は、複数の文字列と、それぞれの文字列が動画の中で表示されるべき時間、さらには限定的なスタイル設定/位置情報などのメタデータを含むテキストファイルを書くための形式です。これらの文字列は**キュー**と呼ばれ、異なる目的で使用されるいくつかの種類のキューがあります。最も一般的なキューは以下の通りです。

字幕 (subtitles)

音声で話された言葉がわからない人のための、外国語の素材の翻訳。

キャプション (captions)

音声が聞こえない人にも何が起こっているのかを理解してもらうために、台詞や重要な音の説明を同期して文字起こししたものです。

音声ガイド (timed descriptions)

目の不自由なユーザーに重要な映像を説明するために、メディアプレーヤーが読み上げるテキスト。

典型的な WebVTT ファイルは次のようになります。
```

WEBVTT

1
00:00:22.230 --> 00:00:24.606
これが最初の字幕です。

2
00:00:30.739 --> 00:00:34.074
これは二番目です。

…
```

これを HTML メディアの再生と一緒に表示するには、以下を行う必要があります。

1. 適切な場所に `.vtt` ファイルとして保存します。
2. `<track>` 要素で `.vtt` ファイルにリンクします。`<track>` は `<audio>` または `<video>` 内に配置する必要がありますが、すべての `<source>` 要素の後に配置する必要があります。`kind` 属性を使用して、キューが `subtitles`、`captions`、または `descriptions` のいずれであるかを指定します。さらに、`srclang` 属性を使用して、字幕が書かれた言語をブラウザーに伝えます。最後に、`label` を追加して、読み手が検索している言語を識別しやすくします。

ここに例があります。

```html
<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles\_es.vtt" srclang="es" label="Spanish" />
</video>
```

これにより、字幕が表示された動画になります。これは次のようなものです。

![再生、停止、音量、キャプションのオン/オフなどのスタンドコントロールを備えたビデオプレーヤー。 動画の再生には、槍のような武器を持つ男のシーンが表示され、キャプションには "Esta hoja tiene pasado oscuro." と表示されます。](/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/video-player-with-captions.png)

詳しくは、HTML 動画にキャプションと字幕を追加するをご覧ください。Github には Ian Devlin によって書かれたこの記事の例があります (ソースコードも参照してください)。この例では、JavaScript を使用してさまざまな字幕を選択できるようにしています。字幕をオンにするには、[CC] ボタンを押して、英語、ドイツ語、スペイン語のオプションを選択する必要があります。

**メモ:** テキストトラックは検索エンジンが特にテキスト上で成功するため、 SEO にも役立ちます。テキストトラックを使用すると、検索エンジンは動画の途中地点に直接リンクすることもできます。

### アクティブラーニング: 自分の音声と動画を埋め込む

このアクティブラーニングでは、（理想的には）世界に出て行って、自分自身で動画や音声を録音してほしいと思います。最近のほとんどの携帯電話では、とても簡単に音声や動画を録音でき、それをコンピューターに転送できれば、それを使用することができます。動画の場合は WebM や MP4、音声の場合は MP3 や Ogg に変換する必要がありますが、 Miro Video Converter や Audacity など、手間をかけずにできるプログラムが十分に用意されています。ぜひ、一度やってみてください。

動画や音声を入手できない場合は、このサンプルを自由に使用してこの演習を行うことができます。サンプルコードを参照のために使用することもできます。

次のことをしましょう。

1. 音声と動画のファイルをコンピュータの新しいディレクトリーに保存します。
2. 同じディレクトリーに `index.html` と呼ばれる新しい HTML ファイルを作成します。
3. ページに `<audio>` 要素と `<video>` 要素を追加します。それらにデフォルトのブラウザーコントロールを表示させます。
4. 両方の要素に `<source>` 要素を付けて、ブラウザーが最もよくサポートするフォーマットを見つけて読み込むようにします。これらは `type` 属性を含むべきです。
5. `<video>` 要素に、動画が再生される前に表示されるポスターを指定します。自分のポスターのグラフィックを作成して楽しんでください。

さらに、テキストトラックを研究し、動画にキャプションを追加する方法をうまくいくようにすることもできます。

スキルをテストしましょう
------------

この記事の終わりまで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を取得したかのテストを見ることができます — スキルテスト: マルチメディアと埋め込み を見てください。 なお、このテストの 3 番目の評価問題は、次の記事で取り上げられるいくつかの技術の知識を前提としますので、挑戦する前にそれを読んでおくとよいでしょう。

まとめ
---

以上、ウェブページに動画や音声を保有する楽しさを味わっていただけたでしょうか？次の記事では、`<iframe>` や `<object>` といった技術を使用して、ウェブ上のコンテンツを埋め込む他の方法について見ていきましょう。

関連情報
----

* HTML メディア要素: `<audio>`, `<video>`, `<source>`, `<track>`
* HTML5 の動画へのキャプションと字幕の追加
* 音声と動画の配信: HTML と JavaScript を使用して音声と動画を Web ページに配置することに関する詳細。
* 音声と動画の加工: JavaScript を使用して音声や動画を操作する方法について詳しく説明します（たとえばフィルターを追加するなど）。
* ウェブメディア技術
* ウェブ上のメディア種別とファイル形式のガイド
* イベントリファレンス > メディア
* 前のページ
* Overview: Multimedia and embedding
* 次のページ


スキルテスト: HTML 画像 - ウェブ開発を学ぶ

スキルテスト: HTML 画像
===============

このスキルテストの目的は、あなたが画像と HTML への埋め込みを行う方法を理解しているかどうかを評価することです。

**メモ:** 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業することが便利な場合もあります。

行き詰まったら、助けを求めましょう。このページの最下部の評価またはさらなるヘルプの節をご覧ください。

課題 1
----

このタスクでは、いくつかのブルーベリーの単純な画像をページに埋め込んでいただきます。必要なことは次の通りです。

* 画像へのパスを適切な属性に追加して、ページに埋め込みましょう。画像は `blueberries.jpg` という名前で、カレントフォルダー内の `images` というフォルダーに入っています。
* 画像を見ることができない人のために、適切な属性に代替テキストを追加して記述してください。
* `<img>` 要素に適切な `width` と `height` を与え、正しい縦横比で表示されるようにし、ページ上に表示するための十分な空間を確保しましょう。画像の内在サイズは 615 × 419 ピクセルです。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 2
----

この課題では、すでに完全な形の画像が用意されていますが、画像にマウスを乗せたときに現れるツールチップを追加していただきたいと思います。ツールチップに適切な情報を入れましょう。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 3
----

この課題では、すでに完全な形の画像とキャプションのテキストが用意されています。ここで必要なのは、画像とキャプションを関連付ける要素を追加することです。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

評価またはさらなるヘルプ
------------

この例は、上記のインタラクティブエディターで練習することができます。

この作品を評価してほしい、行き詰まっているので相談に乗ってほしいという方は次のようにしてください。

1. 作品をオンラインの共有可能なエディター、例えば CodePen、jsFiddle、Glitch に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    * 「HTML 画像、スキルテスト 1 のための評価希望」のような説明的なタイトル。
    * すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    * 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。


スキルテスト: マルチメディアと埋め込み - ウェブ開発を学ぶ

スキルテスト: マルチメディアと埋め込み
====================

このスキルテストの目的は、あなたが HTML への動画および音声コンテンツの埋め込みを行う方法、および object、iframe およびその他の埋め込み技術の使い方を理解しているかどうかを評価することです。

**メモ:** 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業することが便利な場合もあります。

行き詰まったら、助けを求めましょう。このページの最下部の評価またはさらなるヘルプの節をご覧ください。

課題 1
----

この課題では、単純な音声ファイルをページに埋め込んでいただきます。必要なことは次の通りです。

* 音声ファイルのパスを適切な属性に追加して、ページに埋め込みましょう。音声は `audio.mp3` という名前で、カレントフォルダー内の `media` というフォルダーの中に入っています。
* ブラウザーにいくつかの既定のコントロールを表示させるための属性を追加しましょう。
* `<audio>` に対応していないブラウザーのために、適切な代替テキストを追加しましょう。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 2
----

この課題では、複数のソース、字幕、他にも機能を備えた、少し複雑な動画プレーヤーをマークアップしていただきます。必要なことは次の通りです。

* ブラウザーにいくつかの既定のコントロールを表示させるための属性を追加しましょう。
* `<video>` に対応していないブラウザーのために、適切な代替テキストを追加しましょう。
* 動画ファイルへのパスを含む、複数のソースを追加しましょう。ファイルは `video.mp4` と `video.webm` という名前で、現在のフォルダー内の `media` というフォルダーに収められています。
* ブラウザーは、元の動画形式がどのような点であるかをあらかじめ知っておくことで、前もってダウンロードする動画形式を選択することができます。
* `<video>` の幅と高さは、その内在サイズ（320 × 240 ピクセル）と同じにしましょう。
* 動画は既定でミュート状態にしましょう。
* 動画再生時に `media` フォルダー内の `subtitles_en.vtt` というファイルに格納されたテキストトラックを表示するようにしましょう。入力する種類を字幕に、字幕言語を英語に明示的に設定する必要があります。
* 読み手が既定のコントロールを使用する際に、字幕の言語を識別できるようにしましょう。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 3
----

このタスクでは、次のことをやっていただきます。

* PDF をページに埋め込みましょう。PDF は `mypdf.pdf` という名前で、`media` フォルダーの中にあります。
* YouTube や Google Maps 等の共有サイトへ行き、動画などのメディアアイテムをページへ埋め込みましょう。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

評価またはさらなるヘルプ
------------

この例は、上記のインタラクティブエディターで練習することができます。

この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方は次のようにしてください。

1. 作品をオンラインの共有可能なエディター、例えば CodePen、jsFiddle、Glitch に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    * 「マルチメディアと埋め込み、スキルテスト 1 のための評価希望」のような説明的なタイトル。
    * すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    * 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。


ウェブページで JavaScript を使う方法 - ウェブ開発を学ぶ

ウェブページで JavaScript を使う方法
========================

Take your webpages to the next level by harnessing JavaScript. Learn in this article how to trigger JavaScript right from your HTML documents.

| 前提条件: | 基本的な HTML 文書の作成方法を習熟している必要があります。 |
| --- | --- |
| 目的: | HTML ファイルから JavaScript を起動する方法と、JavaScript にアクセスできるようにする最も良い習慣を学ぶ。 |

JavaScript について
---------------

JavaScript はウェブページをインタラクティブにするための、主にクライアントサイドで使われるプログラミング言語です。 JavaScript を使わなくてもすばらしいウェブページを作ることが*できます*が、JavaScript は全く新しいレベルの可能性を開きます。

**メモ:** In this article we're going over the HTML code you need to make JavaScript take effect. If you want to learn JavaScript itself, you can start with our JavaScript basics article. If you already know something about JavaScript or if you have a background with other プログラミング言語 s, we suggest you jump directly into our JavaScript Guide.

HTML から JavaScript を起動する方法
--------------------------

Within a browser, JavaScript doesn't do anything by itself. You run JavaScript from inside your HTML webpages. To call JavaScript code from within HTML, you need the `<script>` element. There are two ways to use `script`, depending on whether you're linking to an external script or embedding a script right in your webpage.

### Linking an external script

Usually, you'll be writing scripts in their own .js files. If you want to execute a .js script from your webpage, just use `<script>` with an `src` attribute pointing to the script file, using its URL:

```html
<script src="path/to/my/script.js"></script>
```

**メモ:** **Pro tip:** In many cases it's a good idea to put your `<script>` elements at the end of your HTML document (right before the `</body>` closing tag).

Loading and running scripts is blocking and immediate. That means, every time the browser comes across a `<script>` element, the browser stops reading the HTML and instead loads and runs the script. The browser continues reading and rendering the HTML code after running the script.

When you put `<script>` elements at the end, you don't run the risk of manipulating DOM nodes that are not yet initialized. In addition, your webpages will finish displaying faster.

### Writing JavaScript within HTML

You may also add JavaScript code between `<script>` tags rather than providing an `src` attribute.

```html
<script>
 window.addEventListener("load", function () {
 console.log("This function is executed once the page is fully loaded");
 });
</script>
```

That's convenient when you just need a small bit of JavaScript, but if you keep JavaScript in separate files you'll find it easier to

* focus on your work
* write self-sufficient HTML
* write structured JavaScript applications
Use scripting accessibly
------------------------

Accessibility is a major issue in any software development. JavaScript can make your website more accessible if you use it wisely, or it can become a disaster if you use scripting without care. To make JavaScript work in your favor, it's worth knowing about certain best practices for adding JavaScript:

* **Make all content available as (structured) text.** Rely on HTML for your content as much as possible. 例えば、 if you've implemented a nice JavaScript progress bar, make sure to supplement it with matching text percentages inside the HTML. Likewise, your drop-down menus should be structured as unordered lists of links.
* **Make all functionality accessible from the keyboard.**
    + Let users Tab through all controls (e.g., links and form input) in a logical order.
    + If you use pointer events (like mouse events or touch events), duplicate the functionality with keyboard events.
    + Test your site using a keyboard only.
* **Don't set nor even guess time limits.** It takes extra time to navigate with the keyboard or hear content read out. You can hardly ever predict just how long it will take for users or browsers to complete an process (especially asynchronous actions such as loading resources).
* **Keep animations subtle and brief with no flashing.** Flashing is annoying and can cause seizures. Additionally, if an animation lasts more than a couple seconds, give the user a way to cancel it.
* **Let users initiate interactions.** That means, don't update content, redirect, or refresh automatically. Don't use carousels or display popups without warning.
* **Have a plan B for users without JavaScript.** People may have JavaScript turned off to improve speed and security, and users often face network issues that prevent loading scripts. Moreover, third-party scripts (ads, tracking scripts, browser extensions) might break your scripts.
    + At a minimum, leave a short message with `<noscript>` like this: `<noscript>To use this site, please enable JavaScript.</noscript>`
    + Ideally, replicate the JavaScript functionality with HTML and server-side scripting when possible.
    + If you're only looking for simple visual effects, CSS can often get the job done even more intuitively.
    + *Since almost everybody **does** have JavaScript enabled, `<noscript>` is no excuse for writing inaccessible scripts.*
Learn more
----------

* `<script>`
* `<noscript>`
* James Edwards' introduction to using JavaScript accessibly
* Accessibility guidelines from W3C


データ属性の使用 - ウェブ開発を学ぶ

データ属性の使用
========

HTML5 (en-US) は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 `data-*` 属性により、標準外の属性やDOM の追加プロパティなどの特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。

HTML の構文
--------

構文は単純です。あらゆる要素上で、名前が `data-` で始まるあらゆる属性がデータ属性です。例えば、記事 (article) があり、視覚表現を行わない追加情報を格納したいとします。 `data` 属性を使用するとこれだけです。

```html
<article
 id="electric-cars"
 data-columns="3"
 data-index-number="12314"
 data-parent="cars">
  ...
</article>
```

JavaScript からのアクセス
------------------

JavaScript でこれらの属性の値を読み出すことも、とても簡単です。 `getAttribute()` で完全な HTML での名前を使用して読むこともできますが、もっと簡単な方法が標準で定義されています。 `dataset` プロパティを通して `DOMStringMap` で読み出すことができます。

`dataset` オブジェクトを通して `data` 属性を取得するには、属性名の `data-` より後の部分を使用して取得します (なお、ダッシュは camelCase に変換されます)。

```js
const article = document.getElementById("electric-cars");

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
```

それぞれのプロパティは文字列であり、読み書きができます。上記の場合、 `article.dataset.columns = 5` を設定すると、その属性が `"5"` に変わります。

CSS からのアクセス
-----------

データ属性はプレーンな HTML 属性であるため、CSS からもアクセスできることに注意してください。 例えば、記事の親データを表示するには、次のように `attr()` 関数を使用して CSS で生成したコンテンツを使用できます。

```css
article::before {
  content: attr(data-parent);
}
```

CSS の属性セレクタを使用して、次のようにデータに応じてスタイルを変更することもできます。

```css
article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}
```

この JSBin の例では、これらすべてが一緒に機能していることがわかります。

データ属性を保存して、ゲームのスコアなど、絶えず変化する情報を含めることもできます。 ここで CSS セレクタと JavaScript アクセスを使用すると、独自の表示ルーチンを作成することなく、気の利いたエフェクトを作成できます。 生成したコンテンツと CSS トランジション（transition、遷移）を使用した例については、このスクリーンキャストを参照してください（JSBin の例）。

データ値は文字列です。 スタイリングを有効にするには、セレクタで数値を引用符で囲む必要があります。

問題
--

支援技術がアクセスできない可能性があるため、データ属性に表示およびアクセス可能なコンテンツを保存しないでください。 さらに、検索クローラーはデータ属性の値にインデックスを付けない場合があります。

考慮すべき主な問題は、Internet Explorer のサポートとパフォーマンスです。 Internet Explorer 11 以降は標準のサポートを提供しますが、以前のバージョンはすべて `dataset` をサポートしていません（英語）。 IE 10 以下をサポートするには、代わりに `getAttribute()` を使用してデータ属性にアクセスする必要があります。 また、通常の JS オブジェクトにこのデータを保存する場合と比較して、データ属性の読み取りパフォーマンス（英語）が低下します。

ただし、カスタム要素に関連付けられたメタデータの場合、それらは優れたソリューションです。

Firefox 49.0.2（およびおそらくそれに前後したバージョン）では、1022 文字を超えるデータ属性は Javascript（EcmaScript 4）によって読み取られません。

関連情報
----

* この記事は、hacks.mozilla.org の JavaScript および CSS でのデータ属性の使用（英語）から改編されました。
* カスタム属性は SVG 2 でもサポートされています。 詳細については、`SVGElement.dataset` および `data-\* (en-US)` を参照してください。
* HTML5 データ属性の使用方法（Sitepoint、英語）


読み込みが速い HTML ページを作成するための豆知識 - ウェブ開発を学ぶ

読み込みが速い HTML ページを作成するための豆知識
===========================

これらの豆知識は、一般の知識や実験に基づくものです。

ウェブページを最適化すると、訪問者に対して応答性のよいサイトを提供するだけでなく、ウェブサーバーやインターネット接続の負荷を低減する効果もあります。これは大規模なサイトや、緊急事態で通信量が急増するニュース速報のようなサイトでは重要でしょう。

ページの読み込みパフォーマンスの最適化は、低速なダイヤルアップ接続やモバイルデバイスの利用者向けコンテンツのためだけではありません。ブロードバンド向けコンテンツでも重要であり、高速接続の利用者であっても劇的な改善につながるでしょう。

豆知識
---

### ページの量の削減

ページの量は、ページ読み込みパフォーマンスにおいて断然重要な要素です。

最小化として知られる不要なホワイトスペースやコメントの削除、インラインのスクリプトや CSS の外部ファイルへの移動によりページの量を削減することで、ページの構造変更を最小限にしてダウンロードの性能を向上できるでしょう。

HTML Tidy のようなツールを利用すると、妥当な HTML ソースから行頭のホワイトスペースや過剰な空行を自動的に取り除くことができます。他に JavaScript ソースを、書式変更や難読化および長い識別子を短いものに置き換えることで 「圧縮」するツールもあります。

### ファイル数の最少化

ウェブページが参照するファイル数を削減することで、ページのダウンロードに必要な HTTP コネクションの数が減り、それによってリクエストを送信したり、レスポンスを受け取ったりする時間が短縮できます。

ブラウザーのキャッシュ設定によっては、ブラウザーが各ファイルの `If-Modified-Since` ヘッダーで、ファイルが最後にダウンロードされてから変更されているかどうかを確認するリクエストを送信することがあります。ページをレンダリングする前に、ブラウザーがこれらの各ファイルの変更時刻をチェックする必要があるため、参照されたファイルの最終変更時刻をチェックするのに時間がかかり過ぎると、ウェブページの初期表示が遅くなることがあります。

CSS で多数の背景画像を使用している場合は、画像スプライトと呼ばれる方法でで画像を 1 つに結合することで必要な HTTP による参照の数を減らすことができます。すなわち、背景として用いる画像ファイルは毎回同じものを適用し、それを適切な x/y 座標に調整します。これは寸法が限られている要素について最善の方法ですが、適用できない場合もあるでしょう。しかし、HTTP リクエストを少なくしてキャッシュする画像を単一にすることで、ページの読み込み時間を削減できます。

### コンテンツ配信ネットワーク (CDN) を使用する

この記事の目的のために、CDN はサーバーと訪問者の間の物理的な距離を縮めるための手段です。サーバーの起点と訪問者の間の距離が長くなると、読み込み時間が長くなります。ウェブサイトのサーバーがアメリカにあり、インドからの訪問者がいるとします。米国からの訪問者と比較して、ページの読み込み時間はインドの訪問者の方がはるかに長くなります。

CDN は地理的に分散したサーバーネットワークで、ユーザーとウェブサイトの距離を縮めるために連携して機能します。CDN はキャッシュされたウェブサイトのバージョンを保存し、それらをユーザーに最も近いネットワークノードを介して訪問者に提供するので、待ち時間が短縮されます。

参考文献:

* Understanding CDNs
### ドメイン検索の削減

ドメインが分かれていると DNS の参照に時間がかかるため、CSS の link や JavaScript や画像の src に多数のドメインが現れるほど、ページの読み込み時間が長くなるでしょう。

現実的でない場合があるかもしれませんが、ページがあるドメインと異なるドメインの使用数は必要最低限にするよう注意すべきです。

### 再利用されるコンテンツのキャッシュ

どんなコンテンツでも、キャッシュできるか、キャッシュされているか、キャッシュ期限が適切であるかを確認してください。

特に、`Last-Modified` ヘッダーに注意してください。これは、効率のよいページのキャッシュができるようにします。このヘッダーは、ファイルを読み込もうとしているユーザーエージェントに、ファイルがいつ更新されたかなどの情報を伝えます。多くのウェブサーバーは、静的なページ (`.html`、`.css` など) にはファイルシステムに格納されている最終更新日に基づいて、自動的に `Last-Modified` ヘッダーを追加します。もちろん、動的なページ (`.php`、`.aspx` など) については取得できないので、ヘッダーを送信しません。

そのため、特に動的に生成されるページについては、この件について調べてみると有益です。少し厄介ですが、通常キャッシュできないページのリクエストを大幅に節約できるでしょう。

詳細情報:

1. HTTP Conditional Get for RSS Hackers
2. HTTP 304: Not Modified
3. Wikipedia の HTTP ETag の記事
4. Caching in HTTP
### ページのコンポーネントの最適な順序

最初の表示に必要な CSS または JavaScript と共に、ページコンテンツをまずダウンロードすると、ページの読み込み中にユーザーに最もすばやくページを表示させることができます。このコンテンツは通常テキストであるため、転送中のテキスト圧縮の効率が良く、ユーザーへの反応がもっと早くなります。

使用される前にページの読み込みが完了する必要がある動的機能は、最初は無効にしておき、ページの読み込みが完了した後でのみ有効にするようにしましょう。これにより、JavaScript がページコンテンツの後に読み込まれるようになり、ページ読み込み時に全体が表示されるまでの時間が短縮されます。

### インラインスクリプト数の削減

インラインスクリプトがあると、インラインスクリプトのパース中にページの構造が変わる可能性があるとパーサーが想定しなければならないため、ページの読み込みにおいて重荷になることがあります。一般的にはインラインスクリプトの使用を減らし、また特に `document.write()` を用いたコンテンツの出力を減らすことで、ページ読み込みのパフォーマンスが向上するでしょう。 `document.write()` に基づく旧来のコンテンツ操作方法ではなく、最新のブラウザー向けの方法である AJAX を使用してください。

### 最新の CSS と正しいマークアップの使用

最新の CSS を用いるとマークアップの量を削減し、レイアウトの点で (スペーサーの) 画像使用を減らし、また多くの場合スタイル付けした文字列の画像を置き換えることが可能です。画像は CSS と文字列の組み合わせに比べ、多大なコストがかかります。

正しいマークアップを使用することは、ほかにも利点があります。第一に、ブラウザーが HTML を解釈する際にエラー訂正を行う必要がなくなります (ユーザーの記述法の多様性を認めるかどうかという哲学的な問題とは別です。厳密な、許容範囲のない書式を強制するというより、プログラム的に「正しく」または正規化しましょう)

さらに、正しいマークアップをすることによって、ウェブページを*プリプロセス*ができる他のツールが自由に利用できるようになります。例えば、HTML Tidy はホワイトスペースや省略可能な終了タグを除去することができます。しかし、重大なマークアップの誤りがあるページではツールを実行できません。

### コンテンツをまとめる

テーブルをレイアウトのために使うのは陳腐化した方法であり、もはや使うべきではありません。レイアウトを行うには、代わりに浮動要素、位置指定、フレックスボックス、グリッドを使用してください。

テーブルは現在でも妥当なマークアップと考えられていますが、表形式のデータを表示するために用いるべきです。ブラウザーがページを迅速に表示するためには、テーブルを入れ子にしないようにしてください。

以下のように深い入れ子のテーブルを使用する代わりに、
```

<table>
  <table>
    <table>
          ...
    </table>
  </table>
</table>
```

以下のように入れ子にしないテーブルや div を用いてください。
```

<table>...</table>
<table>...</table>
<table>...</table>
```

CSS Flexible Box Layout と CSS Grid Layout の仕様書も参照してください。

### SVG の資産を最小化し圧縮する

多くの描画アプリケーションで作成された SVG は、不必要なメタデータを含んでいることが多く、削除することができます。サーバーで SVG 資産を gzip で圧縮するよう設定しましょう。

### 画像を縮小して圧縮する

画像が大きいと、ページの読み込みに時間がかかります。画像をページに追加する前に、圧縮することを検討してください。 Compress Jpeg、Tiny PNG、その他多くのツールがオンラインで利用可能です。photoshop などのオフラインツールも使用できます。

### 画像やテーブルのサイズ指定

ブラウザーが直ちに画像やテーブルの高さや幅を決めることができれば、ブラウザーはコンテンツの再配置を行うことなくウェブページを表示できます。これはページの表示を高速化するだけでなく、ページの読み込みが完了するまでにレイアウトが不安定に変化することを防ぎます。よって、可能な限り画像には `height` と `width` を指定するべきです。

テーブルは以下のセレクターとプロパティの組み合わせを用いるべきです:
```

  table-layout: fixed;
```

そして、 `<col>` 要素および `<colgroup>` 要素を用いて列の幅を指定しましょう。

### 画像の遅延読み込みを使用する

既定では、画像は**熱心に**読み込まれます。つまり、 HTML で処理されると同時に画像が読み込まれ、表示されます。熱心に読み込まれた画像は、文書の `load` イベントが送られる前に表示されます。画像の遅延読み込みに切り替えるとブラウザーは、視覚的ビューポートの描画に必要になるまで、画像の読み込みを保留します。

画像に遅延読み込みのマークを付けるには、 `loading` 属性に `lazy` という値を指定してください。この設定により、画像は必要なときにのみ読み込まれます。

```html
<img href="./images/footerlogo.jpg" loading="lazy" />
```

ただし、遅延読み込みされた画像は、 `load` イベントが発生した時点では利用できない場合があります。画像がロードされているかどうかは、論理的プロパティの `complete` の値が `true` であるかどうかを確認することで判断できます。

### ユーザーエージェント要件の賢い選択

ページデザインを最大限に改善するには、プロジェクトのユーザーエージェントの要件を合理的なものにしましょう。すべてのブラウザー、特に古いバージョンのブラウザーでコンテンツがピクセル単位で正確に見えるように要求しないでください。

理想的には、適切な標準仕様に対応している最新のブラウザーを最低要件にするよう考慮するべきです。これには、最近のバージョンの Firefox、Internet Explorer、Google Chrome、Opera、Safari が含まれます。

ただし、この記事に記載している秘訣の多くはあらゆるユーザーエージェントに適用できる汎用的なテクニックであり、かつブラウザーの対応要件にかかわらずどのようなウェブページにでも適用できます。

### 可能なら async や defer を使用する

async と defer 属性の両方と互換性のある JavaScript を使用し、特に、複数の script 要素がある場合、可能ならば async をいつでも使用してください。

これにより、ページで JavaScript が読み込み中である間はレンダリングを中断できます。さもなければ、ブラウザーはこれらの属性を持たない script 要素の後にあるコンテンツをレンダリングしないでしょう。

注意: これらの属性が初回のページ読み込みに大きな効果があるとしても、属性は使用するべきですがすべてのブラウザーで動作するとは考えないようにしてください。よい JavaScript コードを作るためのガイドラインすべてに従っていれば、コードを変更する必要はありません。

ページ構造の例
-------

* ``<html>``
* ``<head>``
    + :

    ``<link>`` ...

    ページの外観に必要な CSS ファイルです。管理しやすくするため、関連性のない CSS は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。

    ``<script>`` ...

     ページの読み込み中に**必要な**機能の JavaScript ファイルですが、ページの読み込み後にしか実行しない対話操作に関するものは含めないようにしてください。
     管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
* ``<body>``
    + : ユーザーが閲覧可能なページコンテンツを小さな塊 ( ``<header>``/ ``<main>`/` ``<table>``) にまとめると、ページ全体のダウンロードを待たずに表示できるようにすることができる。

    ``<script>`` ...

     対話操作を実行するのに用いるスクリプトです。対話操作のスクリプトはたいてい、ページが完全に読み込まれて必要なオブジェクトがすべて初期化された後にのみ実行されます。よって、ページのコンテンツより先に読み込む必要はありません。先に読み込むと、ページが最初に表示されるのが遅くなります。
     管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
     ロールオーバー効果で用いる画像がある場合は、ページのコンテンツをダウンロードした後に画像の先読みをしておきましょう。
関連リンク
-----

* 書籍: "Speed Up Your Site" by Andy King (英語)
* Yahoo! によるすばらしい完成された ウェブサイト高速化のためのベストプラクティス (英語)
* パフォーマンス解析・最適化向けツール: Google PageSpeed Tools
* Paint Flashing Tool


画像にヒットマップを追加する - ウェブ開発を学ぶ

画像にヒットマップを追加する
==============

ここでは、イメージマップを設定する方法と、最初に検討すべきいくつかの欠点を説明します。

| 前提条件: | 基本的な HTML 文書の作成方法と、アクセス可能な画像をウェブページに追加する方法について、理解している必要があります。 |
| --- | --- |
| 目的: | 1 つの画像の異なる領域を異なるページにリンクする方法を学びます。 |

**警告:** この記事では、クライアント側のイメージマップについてのみ説明します。 ユーザーにマウスが必要なサーバー側のイメージマップは使用しないでください。

イメージマップとその欠点
------------

`<a>` 内に画像をネストすると、画像全体が 1 つのウェブページにリンクします。 一方、イメージマップは、それぞれが異なるリソースにリンクするいくつかのアクティブな領域（「ホットスポット」と呼ばれます）を含みます。

以前は、イメージマップは一般的なナビゲーションデバイスでしたが、そのパフォーマンスとアクセシビリティの影響を徹底的に検討することが重要です。

いくつかの理由からテキストリンク（CSS でスタイル付けされたもの）がイメージマップよりも好ましい。 テキストリンクは軽量でメンテナンス可能で、多くの場合 SEO に優しく、アクセシビリティのニーズをサポートしています（スクリーンリーダー、テキストのみのブラウザー、翻訳サービスなど）。

イメージマップを正しく挿入する方法
-----------------

### ステップ 1: 画像

どんな画像でも受け入れられるわけではありません。

* 画像は、人々が画像のリンクをたどったときに何が起こるかを明確にする必要があります。 `alt` テキストはもちろん必須ですが、多くの人々は決してそれを見ません。
* 画像には、ホットスポットの始まりと終わりを明示する必要があります。
* ホットスポットは、どのビューポートサイズでも快適にタップするのに十分な大きさでなければなりません。 どれくらいの大きさか？ 72 × 72 CSS ピクセルは良好な最小値（英語）で、タッチターゲット間の間隔に余裕もあります。 50languages.com の世界地図（執筆時点）は、問題を完全に示しています。 アルバニアやエストニアよりもロシアや北米をタップする方がはるかに簡単です。

`<img>` 要素と `img` テキストを使用して、常に同じ方法で画像を挿入します。 画像がナビゲーションデバイスとしてのみ存在する場合、後で `<area>` 要素に適切な `area` テキストを指定すると `alt=""` と書くことができます。

特殊な `usemap` 属性が必要です。 イメージマップには、スペースを含まない一意の名前を考えてください。 次に、`usemap` 属性の値としてその名前（# が先行する）を割り当てます。

```html
<img src="image-map.png" alt="" usemap="#example-map-1" />
```

### ステップ 2: ホットスポットを有効にする

このステップでは、すべてのコードを `<map>` 要素内に配置します。 `<map>` には、上の `usemap` 属性で使用したのと同じマップ名の `name` 属性だけが必要です。

```html
<map name="example-map-1"></map>
```

`<map>` 要素の中に `<area>` 要素が必要です。 `<area>` 要素はそれぞれが 1 つのホットスポットに対応します。 キーボードでのナビゲーションを直観的に保つには、`<area>` 要素のソースでの順序がホットスポットの視覚的順序に対応していることを確認してください。

`<area>` 要素は空要素ですが、次の 4 つの属性が必要です。

`shape`

`coords`

`shape` は、`circle`（円）、`rect`（四角形）、`poly`（ポリゴン）、`default`（デフォルト）の 4 つの値のいずれかをとります。 （`default` の `<area>` は画像全体から、あなたが定義した他のホットスポットを除いたものです。） 選択した `shape` によって、`coords` で指定する必要がある座標情報が決まります。

* 円の場合は、中心の x 座標と y 座標を指定し、その後に半径の長さを指定します。
* 四角形の場合は、左上角と右下角の x/y 座標を指定します。
* ポリゴンの場合は、各角の x/y 座標を指定します（したがって、少なくとも 6 つの値）。

座標は CSS ピクセルで与えます。

重なり合っている場合、ソースでの順序で選ばれます。

`href`

リンク先のリソースの URL。 現在の領域をどこにもリンクさせたくない場合は、この属性を空白のままにしておくことができます（空白の円を描いている場合など）。

`alt`

リンクがどこにあるのか、それが何をするのかを人に伝える必須の属性。 `alt` テキストは、画像が利用できない場合にのみ表示されます。 アクセス可能なリンクテキストを書くためのガイドラインを参照してください。

`href` 属性が空白で、画像全体に既に `alt` 属性がある場合、`alt=""` と書くことができます。

```html
<map name="example-map-1">
  <area
 shape="circle"
 coords="200,250,25"
 href="page-2.html"
 alt="circle example" />

  <area
 shape="rect"
 coords="10, 5, 20, 15"
 href="page-3.html"
 alt="rectangle example" />
</map>
```

### ステップ 3: 誰にとっても効果があることを確認する

多くのブラウザーやデバイスでイメージマップを厳密にテストするまで、あなたは完了していません。 キーボードだけでリンクをたどってみてください。 画像をオフにしてみてください。

イメージマップが約 240 px より広い場合は、ウェブサイトをレスポンシブにするためにさらに調整する必要があります。 座標が同じままでは、もはや画像と一致しないので、小さな画面の場合は画像のサイズを変更するだけでは不十分です。

イメージマップを使用する必要がある場合は、Matt Stow の jQuery プラグイン（英語）を調べることができます。 また、Dudley Storey は、イメージマップエフェクトとして SVG を使用する方法（英語）と、その後にビットマップ画像用に SVG とラスターを組み合わせる方法（英語）を示しています。

より詳しく知る
-------

* `<img>`
* `<map>`
* `<area>`
* オンラインイメージマップエディター（英語）
* Advice on handling email clients（リンク切れ）


HTML で用語を定義する - ウェブ開発を学ぶ

HTML で用語を定義する
=============

HTML は、インラインであろうと構造化された用語集であろうと、記述の意味を伝達するいくつかの方法を提供します。 この記事では、キーワードを定義する際に適切にマークアップする方法について説明します。

|  |  |
| --- | --- |
| 前提条件: | 基本的な HTML 文書の作成方法に精通している必要があります。 |
| 目的: | 新しいキーワードを導入する方法と説明リストを作成する方法を学びます。 |

用語の意味が必要なときは、おそらくまっすぐに辞書や用語集に行くでしょう。 辞書や用語集は、キーワードを 1 つ以上の説明と正式に関連付けます。 この場合は次のようになります。

>
>
> Blue (*Adjective*)
>
>
>  Of a color like the sky in a sunny day.
>  *"The clear blue sky"*
>
>
>
>
>  Of a subtle sadness, melancholy.
>  *"I'm feeling blue"*
>
>
>
>
>
>

しかし、私たちは常に次のように非公式にキーワードを定義しています。

>
> ***Firefox*** は、Mozilla Foundation によって作成されたウェブブラウザーです。
>
>
>

これらのユースケースに対処するために、HTML には説明と説明された単語をマークするためのタグが用意されているので、読者に意味が適切に伝わるようになります。

非公式の説明をマークする方法
--------------

教科書では、キーワードが初めて出てきたときに、キーワードを太字にしてすぐに定義するのが一般的です。

私たちは HTML でもそうしていますが、HTML は視覚的なメディアではないので太字を使いません。 `<dfn>` は、初めて出現するキーワードをマークするための特別な要素です。 `<dfn>` タグは、定義ではなく定義される単語の周りにあり、定義は段落全体で構成されています。

```html
<p>
  <dfn>Firefox</dfn> は、Mozilla Foundation
  によって作成されたウェブブラウザーです。
</p>
```

**メモ:** 太字のもう 1 つの用途はコンテンツを強調することです。 太字自体は HTML の概念ではありませんが、強調を示すタグがあります。

### 特別な場合: 略語

`<abbr>` で略語を特別にマークすることが最適です。 これにより、スクリーンリーダーが適切に読むことができ、すべての略語を統一的に操作できるようになります。 新しいキーワードの場合と同様に、初めて出現したときに略語を定義する必要があります。

```html
<p>
  <dfn
 ><abbr>HTML</abbr> (hypertext markup
    language、ハイパーテキストマークアップ言語)</dfn
 >
  は、ウェブ上のドキュメントを構造化するために使用される記述言語です。
</p>
```

**メモ:** HTML 仕様は実際には略語を拡張するために `title` 属性を用意しています（英語）。 ただし、これはインライン展開を提供するための許容可能な代替方法ではありません。 `title` の内容は、マウスを使用していない限り、ユーザーには完全に隠されています。 この仕様も同様にこれを認めています（英語）。

### アクセシビリティの向上

`<dfn>` は定義されたキーワードをマークし、現在の段落がキーワードを定義していることを示します。 言い換えれば、`<dfn>` 要素とそのコンテナの間に暗黙の関係があります。 より正式な関係を望む場合、または定義が段落全体ではなく 1 つの文で構成されている場合は、`aria-describedby` 属性を使用して、より正式に定義に関連付けることができます。

```html
<p>
  <span id="ff">
    <dfn aria-describedby="ff">Firefox</dfn>
    は、Mozilla Foundation によって作成されたウェブブラウザーです。
  </span>
  <a href="http://www.mozilla.org">mozilla.org</a> からダウンロードできます。
</p>
```

支援技術は、この属性を使用して、指定された用語の代替テキストを見つけることができます。 `<dfn>` 要素だけでなく、キーワードを囲む任意のタグで `aria-describedby` を使用して定義できます。 `aria-describedby` は、説明を含む要素の `id` を参照します。

説明リストを作成する方法
------------

説明リストは、用語とそれに対応する説明のリスト（例: 定義リスト、辞書エントリ、よくある質問、およびキーと値のペア）です。

**メモ:** 説明リストは、対話が話し手を直接記述しないため、対話をマークアップするのには適していません（英語）。 ここには、対話をマークアップするための推奨事項（英語）があります。

説明された用語は、`<dt>` 要素内にあります。 対応する説明は直ちに続き、1 つ以上の `<dd>` 要素に含まれています。 説明リスト全体を `<dl>` 要素で囲みます。

### 簡単な例

ここでは簡単な例として、食べ物と飲み物の種類を説明します。

```html
<dl>
  <dt>jambalaya</dt>
  <dd>
    rice-based entree typically containing chicken, sausage, seafood, and spices
  </dd>

  <dt>sukiyaki</dt>
  <dd>
    Japanese specialty consisting of thinly sliced meat, vegetables, and
    noodles, cooked in sake and soy sauce
  </dd>

  <dt>chianti</dt>
  <dd>dry Italian red wine originating in Tuscany</dd>
</dl>
```

**メモ:** ご覧のとおり、基本パターンは `<dt>` の用語を `<dd>` の説明で置き換えることです。 行内に 2 つ以上の用語が存在する場合は、以下の説明はそれらのすべてに適用されます。 行内に 2 つ以上の説明が存在する場合、それらはすべて最後に指定された用語に適用されます。

### 視覚的な出力を改善する

グラフィカルブラウザーに前述のリストが表示される方法は次のとおりです。

キーワードをより際立たせたい場合は、それらを強調することができます。 HTML は視覚的な媒体ではないことを忘れないでください。 すべての視覚効果に対して CSS が必要です。 CSS の `font-weight` プロパティは、ここで必要なものです。

```css
dt {
  font-weight: bold;
}
```

これにより、以下のわずかに読みやすい結果が生成されます。

より詳しく知る
-------

* `<dfn>`
* `<dl>`
* `<dt>`
* `<dd>`
* aria-describedby 属性の使用方法


CSS レイアウト - ウェブ開発を学ぶ

CSS レイアウト
=========

現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな `display` の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、 CSS レイアウトについて深く掘り下げることができます。

#### フロントエンドのウェブ開発者を目指している方へ

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

**始めましょう**

前提知識
----

このモジュールを始める前に、次のことを理解しているべきです。

1. HTML 入門で説明したように、HTML についての基本的な知識があること。
2. CSS 入門で説明したように、CSS の基本を容易にこなせること。
3. ボックスの装飾の方法を理解していること。

**メモ:** 使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、JSBin や Glitch などのオンラインコーディングプログラムで (ほとんどの) コードサンプルを試すことができます。

ガイド
---

これらの記事では、CSS で利用可能な基本的なレイアウトのツールとテクニックについての教育を提供します。 レッスンの最後には、ウェブページをレイアウトすることによって、レイアウト方法の理解を確認するのに役立つ評価試験があります。

CSS レイアウト入門

この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな `display` の値など）を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。

通常フロー

ウェブページ上の要素は、通常フローを変えるために何かをするまで、通常フローに従ってレイアウトされます。 この記事では、通常フローを変える方法を学ぶための基礎として、通常フローの基本について説明します。

フレックスボックス

フレックスボックスは、項目を行または列にレイアウトするための 1 次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。このガイドを学習した後は、フレックスボックスのスキルをテスト (en-US)して、理解度を確認してから次のステップに進むことができます。

グリッド

CSS グリッドレイアウトは、ウェブ用の 2 次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できる多くの機能を備えています。 この記事では、ページレイアウトを始めるために必要な情報を提供し、次に進む前にグリッドのスキルをテスト (en-US)しましょう。

浮動レイアウト

`float` プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの 1 つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。

位置指定

位置指定を使用すると、通常の文書のｐレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな `position` の値とその使い方について説明します。

段組みレイアウト

段組みレイアウトの仕様では、新聞に見られるような、コンテンツを複数の段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。

レスポンシブデザイン

ウェブ対応端末の画面サイズが多様化するにつれ、レスポンシブウェブデザイン (RWD) という概念が登場しました。これは、異なる画面幅や解像度などに合わせて、ウェブページのレイアウトや外観を変更できるようにする一連の手法です。この記事では、レスポンシブウェブデザインを使いこなすために必要な主なテクニックをご紹介します。

メディアクエリーの初心者向けガイド

**CSS メディアクエリー**は、ブラウザーや端末の環境が、「ビューポートの幅が 480 ピクセル以上」などの指定したルールに合致した場合にのみ、 CSS を適用する方法です。メディアクエリーは、ビューポートの大きさに応じて異なるレイアウトを作成することができるため、レスポンシブウェブデザインの重要な要素となっていますが、ユーザーがマウスではなくタッチパネルを使用しているかどうかなど、サイトが実行されている環境に関する他の事柄を検出するためにも使用できます。このレッスンでは、まずメディアクエリーで使用される構文について学び、次にメディアクエリーを使用して、シンプルなデザインをどのようにレスポンシブにするかを示す実例を見ていきます。

古いレイアウト方法

グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前は浮動レイアウトや他のレイアウト機能を使用して実装される傾向がありました。 レイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。

古いブラウザーの対応

このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法に対応していないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブ技術を使用する方法について説明します。

評価試験: 基礎的なレイアウトの理解

ウェブページをレイアウトすることによって、さまざまなレイアウト方法に関する知識をテストするための評価試験です。

関連情報
----

実用的な位置指定の例

この記事では、位置指定でどのようなことができるかを説明するために、実際に使用されるいくつかの例を作成する方法を示します。


CSS の構成要素 - ウェブ開発を学ぶ

CSS の構成要素
=========

このモジュールは CSS の第一歩から派生しています。CSS の言語や文法に慣れてきて、それを使う上での基本的な経験を得てきたという前提で、もう少し掘り下げてみましょう。カスケードと継承・セレクターの全種類・単位・サイズ設定・背景と枠線・デバッグなどを見ていきます。

ここでの目的は、テキストの装飾や CSS レイアウトなどのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。

#### フロントエンドのウェブ開発者を目指している方へ

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

**始めましょう**

前提知識
----

このモジュールを始める前に、次のものを身につけておいてください。

1. コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった) ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。
2. 基本的なソフトウェアのインストールで説明されている基本的な作業環境と、ファイルの扱い方で説明されているファイルの作り方や管理の仕方について理解していること。
3. HTML 入門で説明されている HTML についての基礎知識に慣れ親しんでいること。
4. CSS の第一歩で説明されている CSS の基本について理解していること。

**メモ:** 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは JSBin や Glitch といったオンラインコーディングプログラムで試すことが可能です

ガイド
---

このモジュールは、 CSS 言語のもっとも重要な部分をカバーする以下の記事で構成されています。各記事には理解度を試す練習問題も含まれています。

カスケードと継承

このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念 (カスケード・詳細度・継承) の理解を深めていくことです。

CSS セレクター

CSS セレクターにはさまざまな種類があり、スタイルを設定する要素を厳密に指定することができます。この記事と以下のサブ記事では、それらがどのように機能するかを詳しく見ていきます。サブ記事は以下の通りです。

* 要素・クラス・ID によるセレクター
* 属性によるセレクター
* 擬似クラスおよび疑似要素
* 結合子

ボックスモデル

CSS のすべてにはボックスの概念があり、これを理解することは CSS でレイアウトを作成したりアイテム同士を揃えたりするためのコツとなります。このレッスンでは CSS ボックスモデルを詳しく解説し、その仕組みと関連する用語を理解することで、より複雑なレイアウトに進んでいけるようにします。

背景と枠線

このレッスンでは、CSS の背景と枠線を使ってできるクリエイティブなことをいくつか見ていきます。グラデーションや背景画像や角丸について、背景と枠線は CSS のスタイリングに関する多くの疑問の解決策です。

テキスト方向の操作

近年では、右から左へだけでなく上から下へのコンテンツ（日本語など）を含むコンテンツのさまざまな向きをより適切にサポートするために CSS サポートが進化しています。これらのさまざまな向きの考え方については "**writing modes"** と呼ばれます。レイアウトの学習を進めて進めていくと "writing modes" の理解がとても役に立っていきますので、この記事ではそれらを紹介していきます。

コンテンツのはみ出し (オーバーフロー)

このレッスンでは、CSS のもう 1 つの重要な概念である **オーバーフロー** (**overflow**) を見ていきます。オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。このガイドでは、その詳細とそれらについてどのように対処するかを学びます。

CSS の値と単位

CSS で使用されるすべてのプロパティには、特定の値または値の組み合わせのみが許可されます。このレッスンでは、もっともよく使用される値と単位について見ていきます。

CSS によるサイズ設定

これまでのさまざまなレッスンで、CSS を使用してウェブページ上の項目のサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大きく異なっているのかを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。

画像・メディア・フォーム要素

このレッスンでは、特定の要素が CSS でどのように扱われるかを見ていきます。画像・メディア・フォーム要素では、CSS でスタイルを設定するにあたって通常のボックスとは少し異なる動作をします。何が可能で何が不可能であるのかを理解することで、フラストレーションを軽減することができます。このレッスンでは、知っておくべきことをいくつか取り上げます。

表のスタイリング

HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。この記事では、表をスタイリングするテクニックとともに、HTML 表を見栄え良くするためのガイドを提供します。

CSS のデバッグ

CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに、すべてのモダンブラウザーに入っている開発者ツールがどう役立つかを示します。

CSS の整理

スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、保守しやすい CSS を書くためのベストプラクティスと、他の人が保守性を向上させるための解決策の一部を紹介します。

評価テスト
-----

CSS スキルをテストしたいですか？以下の各評価では上記のガイドで説明されている CSS の理解度をテストできます。

基本的な CSS の理解

この評価では基本的な構文・セレクター・詳細度・ボックスモデル・その他の理解度をテストします。

装飾的なレターヘッド付きの便箋の作成

好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。

かっこいいボックス

ここでは背景と枠線のスタイリングを使った人目を引くボックスの作り方を実践します。

関連情報
----

ボックスの高度な効果

この記事はトリックの箱として機能し、ボックスの影・ブレンドモード・フィルターのような、ボックスの装飾に使用できる高度な機能のいくつかを紹介します。


CSS を使ってよくある問題を解決する - ウェブ開発を学ぶ

CSS を使ってよくある問題を解決する
===================

このページでは、CSS の一般的な問題を解決するのに役立つ質問と回答、MDN サイトで公開されている他の素材について扱っています。

ボックスのスタイル付け
-----------

要素にドロップシャドウを付けるには

ボックスに影を追加するには、`box-shadow` プロパティを使用します。このチュートリアルでは、その作業方法を説明し、例を示します。

画像を歪ませずに枠内に収めるには

縦横比の異なるボックスに画像を収める異なる方法が `object-fit` プロパティによって提供されており、その使用方法はこのチュートリアルで確認することができます。

ボックスを装飾するのに使える方法

CSS を使用してボックスをスタイル設定する際に有益な、さまざまなプロパティを紹介します。

要素を半透明にするには

`opacity` プロパティや、アルファチャンネルのついたカラー値を使うと実現できます。いつどちらを使うかについて確認しましょう。

### ボックス装飾のレッスンとガイド

* ボックスモデル
* 背景と境界の装飾
CSS とテキスト
---------

テキストにドロップシャドウを付けるには

テキストに影を追加するには、`text-shadow` プロパティを使用します。このチュートリアルでは、その作業方法を説明し、例を示します。

段落の最初の行を強調するには

`::first-line` 擬似要素で段落の最初の行を対象とする方法を確認しましょう。

記事の最初の段落を強調するには

`:first-child` 擬似クラスで最初の段落を対象とする方法を確認しましょう。

見出しの直後に来た段落だけを強調するには

結合子は、文書内のどこにある要素を正確に対象とするのに役立ちます。このチュートリアルでは、見出しの直後に続く段落に対して CSS を適用する方法について説明します。

### テキスト装飾のレッスンとガイド

* テキストを装飾するには
* 要素のリストをカスタマイズするには
* リンクを装飾するには
* CSS セレクター
CSS レイアウト
---------

アイテムを中央揃えするには

ボックスの中にあるアイテムを水平方向と垂直方向にセンタリングするのは厄介なことでしたが、フレックスボックスなら簡単にできるようになりました。

### レイアウトガイド

* フレックスボックスの基本概念
* CSS 段組みレイアウトの使用
* グリッドレイアウトの基本概念
* CSS 生成コンテンツ

**メモ:** CSS レイアウトの問題解決に向けた料理帳があり、良くあるレイアウトのタスクの完全に動作する例と説明が付いています。


CSS の第一歩 - ウェブ開発を学ぶ

CSS の第一歩
========

CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。

#### フロントエンドのウェブ開発者になりたいですか？

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

**始めましょう**

前提条件
----

このモジュールを始める前に、次の状態になっておくべきです。

1. コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった)ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。
2. 基本的なソフトウェアのインストールで説明されている基本的な作業環境と、ファイルの扱い方で説明されているファイルの作り方や管理の仕方について理解していること。
3. HTML 入門で説明されている HTML についての基礎知識に慣れ親しんでいること。

**メモ:** 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは JSBin や Glitch といったオンラインコーディングプログラムで試すことが可能です。

ガイド
---

このモジュールには、CSS についてすべての基本的なことがらと、いくつかのスキルをテストできる次の記事が含まれています。

CSS とは何か？

**CSS** (Cascading Style Sheets; カスケーティングスタイルシート) は見栄えのよいウェブページを作ることができますが、背後ではどのように動いているのでしょうか？この記事では CSS について、簡単なコードの例とこの言語の主要な項目を説明します。

CSS 入門

この記事では、簡単な HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。

CSS の全体像

CSS の概要と使用方法の基本について理解できたので、今度は言語自体の構造をもう少し詳しく見てみましょう。ここで説明した概念の多くはすでに目にしています。あとに出てくる概念がわかりにくい場合は、ここに戻って見直してしてください。

CSS はどう働くか？

CSS の基本とその目的、そして簡単なスタイルシートの書き方を学びました。このレッスンでは CSS と HTML がブラウザーにどう働いてウェブページにするかを見ていきます。

新しい知識を使う

過去数回のレッスンで学んだことから、CSS で単純なテキスト文書をフォーマットし、独自のスタイルを追加できることがわかります。この記事ではそれを行う機会を提供します。

関連情報
----

Intermediate Web Literacy 1: Intro to CSS

本記事で説明した *CSS 入門* スキルを確認およびテストするのにちょうどいい Mozilla 基礎コース。セレクター、属性、値などを使った HTML 要素のスタイリングを学べます。


テキストの装飾 - ウェブ開発を学ぶ

テキストの装飾
=======

CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。

前提知識
----

このモジュールを始める前に、HTML 入門のモジュールで説明したようにすでに HTML についての基本的な知識があり、CSS 入門で説明したように CSS の基本に慣れている必要があります。

**メモ:** 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、JSBin、CodePen、Thimble のようなオンラインコーディングプログラムで (ほとんどの) サンプルコードを試せます。

ガイド
---

このモジュールには以下の記事が含まれていて、HTML のテキストコンテンツの装飾の背後にあるすべての重要事項を説明しています。

基本的なテキストとフォントの装飾

この記事では、フォントの太さ、ファミリーとスタイル、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔の設定など、テキストとフォントの装飾のすべての基本について詳しく説明します。

リストの装飾

リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。この記事はすべてを説明しています。

リンクの装飾

リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。この記事では、これらすべてのトピックを見ていきます。

ウェブフォント

ここでは、ウェブフォントを詳しく探ります — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様でカスタムなテキストの装飾を可能にします。

評価
--

以下の評価では、上記のガイドで説明されているテキストの装飾のテクニックについての理解をテストします。

コミュニティスクールのホームページの組版

この評価では、コミュニティスクールのホームページのテキストを装飾してもらい、テキストの装飾についての理解をテストします。


スキルテスト: 位置指定 - ウェブ開発を学ぶ

スキルテスト: 位置指定
============

このスキルテストの目的は、CSS の `position` プロパティと値を使用した CSS の位置指定を理解しているかどうかを評価することです。今までに学んだ素材の様々な要素を使用する、2 つの小さな課題を行っていただきます。

**メモ:** 以下の対話型エディターで取り組むことができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業したほうが便利な場合もあります。

行き詰まったら、助けを求めましょう。このページの最下部の評価またはさらなるヘルプの節をご覧ください。

課題 1
----

この課題では、5px のグレーの境界線があるコンテナーの上と右に、`target` というクラスを持つアイテムを配置します。

最終的には下記画像のようになっているはずです。

![緑色のボックスが灰色の枠で囲まれたコンテナーの右上にあります。](/ja/docs/Learn/CSS/CSS_layout/Position_skills/position-task1.png)

下記のライブコードを更新して、完成例を再現してみてください。

追加の課題です。

* 追加課題として、 target をテキストの下に表示するように変更できますか？

自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。

課題 2
----

このタスクでは、下記の例でボックスをスクロールすると、サイドバーがコンテンツと一緒にスクロールします。サイドバーが配置されたまま、コンテンツだけがスクロールするように変更してください。

![コンテンツはスクロールしていますが、サイドバーはその場に留まります。](/ja/docs/Learn/CSS/CSS_layout/Position_skills/position-task2.png)

下記のライブコードを更新して、完成例を再現してみてください。

自分自身のエディターやオンラインエディターで作業する場合は、このタスクの開始点をダウンロードしましょう。

評価またはさらなるヘルプ
------------

この例は、上記のインタラクティブエディターで練習することができます。

この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方は次のようにしてください。

1. 作品をオンラインの共有可能なエディター、例えば CodePen、jsFiddle、Glitch に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。
2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
    * 「位置指定のスキルテスト 1 のための評価希望」のような説明的なタイトル。
    * すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    * 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    * 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。


位置指定 - ウェブ開発を学ぶ

位置指定
====

* 前のページ
* Overview: CSS layout
* 次のページ

位置指定を使用すると、文書の通常のレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな `position` の値とその使い方について説明します。

|  |  |
| --- | --- |
| 前提知識: | HTML の基本（HTML 入門で学ぶ）、および CSS の機能の考え方（CSS 入門で学ぶ）。 |
| 目的: | CSS 位置指定がどのように機能するのかを学ぶこと。 |

可能であれば、あなたのローカルコンピューターで演習することをお勧めします。GitHub リポジトリーから `0_basic-flow.html` のコピーを入手し（ソースコードはここ）、それを出発点として使用します。

位置指定の紹介
-------

位置指定（Positioning、ポジショニング）の本来の趣旨は、興味深い効果を生み出すために、上記の基本的な文書フローのふるまいを上書きできるようにすることです。 レイアウト内のいくつかのボックスの位置をデフォルトのレイアウトフローの位置からわずかに変更して、ちょっと風変わりでアンティーク調の感じにしたらどうでしょうか？ 位置指定はあなたのツールです。 あるいは、ページの他の部分の上に浮かぶ UI 要素を作成したり、ページをいくらスクロールしても常にブラウザーウィンドウ内の同じ場所に配置したいですか？ 位置指定はそのようなレイアウト作業を可能にします。

HTML 要素に適用できるさまざまな種類の位置指定があります。 特定の種類の位置指定を要素でアクティブにするには、`position` プロパティを使用します。

静的位置指定
------

静的位置指定（Static positioning）は、すべての要素が取得するデフォルトです。 これは、「要素を文書レイアウトフロー内の通常の位置に配置する — ここで見るべき特別なことは何もありません」を意味します。

これを実演し、例をこれからのセクションのために準備するために、最初に HTML の 2 番目の `<p>` に `positioned` の `class` を次のように追加します。

```html
<p class="positioned">…</p>
```

それでは、CSS の最後に次のルールを追加してください。

```css
.positioned {
  position: static;
  background: yellow;
}
```

保存してリフレッシュしても、2 段落目の背景色が更新されていることを除けば、まったく違いはありません。 これは問題ありません。 前にも述べたように、静的位置指定は既定のふるまいです！

**メモ:** この時点でのライブ例は `1_static-positioning.html` にあります（ソースコードを見る）。

相対位置指定
------

相対位置指定（Relative positioning）は、最初に見ていく位置指定の種類です。 これは静的位置指定と非常によく似ていますが、位置指定要素（positioned element）が通常のレイアウトフローで配置されたら、ページ上の他の要素と重なることも含んで最終的な位置を変更できるという点が異なります。 先に進んで、次のようにコード内の `position` の宣言を更新してください。

```css
position: relative;
```

この段階で保存してリフレッシュしても、結果にまったく変化はありません。 それでは、どうやって要素の位置を変更するのでしょうか？ `top`、`bottom`、`left`、`right` の各プロパティを使用する必要があります。 これについては次のセクションで説明します。

### top、bottom、left、right の紹介

`top`（上）、`bottom`（下）、`left`（左）、`right`（右）は `position` と一緒に使用され、位置指定要素の移動先を正確に指定します。 これを試すには、CSS の `.positioned` ルールに次の宣言を追加してください。

```css
top: 30px;
left: 30px;
```

**メモ:** これらのプロパティの値は、論理的に想定される任意の単位（ピクセル、mm、rem、% など）をとることができます。

保存して再読み込みすると、次のような結果になります。
```

<h1>Relative positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  Inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

かっこいいですよね？はい、おそらくこれはあなたが期待していたものではなかったでしょう。上と左を指定したのに、なぜ下と右に移動したのでしょうか？ 最初は非論理的に聞こえるかもしれませんが、これは相対的位置指定が機能する方法です。位置指定したボックスの指定した側を反対方向に押す見えない力を考える必要があります。 例えば、`top: 30px;` と指定した場合、力がボックスの上側を押して、箱の上側が 30px 下向きに移動します。

**メモ:** この時点でのライブ例は `2_relative-positioning.html` にあります（ソースコードを見る）。

絶対位置指定
------

絶対位置指定（Absolute positioning）はまったく異なる結果をもたらします。

### position: absolute の設定

コード内の `position` 宣言を次のように変更してみましょう。

```css
position: absolute;
```

保存して再読み込みすると、次のようになります。
```

<h1>Absolute positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

まず最初に、文書フロー内にあるべき位置指定要素のギャップが存在しないことに注意してください。 1 番目と 3 番目の要素はそれが存在しないので一緒になっています。ある意味、これは正しいです。 絶対位置指定要素は、通常の文書レイアウトフローには存在しません。 他のすべてのものとは異なる独自のレイヤー上にあります。これはとても便利です。つまり、ページ上の他の要素のレイアウトを妨げない独立した UI 機能を作成できるということです。例えば、ポップアップ情報ボックスやコントロールメニュー、ロールオーバーパネル、ページ上の任意の場所にドラッグアンドドロップできる UI 機能、等々です。

次に、要素の位置が変更されたことに注意してください。 これは、`top`、`bottom`、`left`、`right` の絶対位置指定でのふるまいが異なるためです。 通常の文書レイアウトフロー内での相対的な位置に基づいて要素を配置するのではなく, 要素がそれぞれの包含要素の側からあるべき距離を指定します。 したがって、この場合は、絶対位置指定要素は「包含要素」の上側から 30 ピクセル、左側から 30 ピクセルとなるようにします。（この場合、「包含要素」とは、**最初の包含ブロック** (initial containing block) のことです。詳細については、以下のセクションを参照してください。）

**メモ:** 必要に応じて、 `top`、`bottom`、`left`、`right` を使用して要素のサイズを変更することができます。 位置指定要素に `top: 0; bottom: 0; left: 0; right: 0; margin: 0;` を設定して、何が起こるか見てみてください。後で元に戻しましょう。

**メモ:** そう、マージンはなお位置指定要素に影響します。 しかしながら、マージンの相殺はそうではありません。

**メモ:** この時点でのライブ例は `3_absolute-positioning.html` にあります（ソースコードを見る）。

### 位置指定コンテキスト

絶対位置指定要素の「包含要素」はどの要素でしょうか？ これは、位置指定要素の先祖の `position` プロパティに大きく依存します（包含ブロックの識別を参照）。

明示的に定義された `position` プロパティを持つ祖先要素がない場合、デフォルトではすべての祖先要素は静的位置を持ちます。 この結果、絶対位置指定要素は**最初の包含ブロック**（initial containing block）に含まれます。 最初の包含ブロックはビューポートの大きさを持ち、`<html>` 要素を含むブロックでもあります。 簡単に言うと、絶対位置指定要素は `<html>` 要素の外側に表示され、最初のビューポートを基準にして配置されます。

位置指定要素は HTML ソースの `<body>` 内にネストされていますが、最終的なレイアウトでは、ページの端の左上から 30 ピクセル離れています。 **位置指定コンテキスト** (positioning context) — 絶対位置指定要素がどの要素を基準にして配置されているか — を変更することができます。 これは、要素の先祖の 1 つに位置指定を設定することによって行われます — それを内部にネストしている要素の 1 つにです（内部にネストしていない要素を基準にしての配置はできません）。 これを実証するために、次の宣言を `body` ルールに追加してください。

```css
position: relative;
```

これにより、次の結果が得られます。
```

<h1>Positioning context</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  Now I'm absolutely positioned relative to the
  <code><body></code> element, not the <code><html></code> element!
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

位置指定要素は、`<body>` 要素を基準にして配置されます。

**メモ:** この時点でのライブ例は `4_positioning-context.html` にあります（ソースコードを見る）。

### z-index の紹介

この絶対位置指定はすべて楽しいですが、まだ検討していないことがもう 1 つあります。 要素が重なり合ったときに、どの要素が他のどの要素の上に表われるかを決定するのは何でしょうか？ これまで見てきた例では、位置指定コンテキスト内には位置指定要素が 1 つしかなく、位置指定要素は位置指定されていない要素よりも優先されるため、一番上に表われます。 複数あるときはどうでしょうか？

最初の段落も絶対位置指定にするために、CSS に次を追加してみてください。

```css
p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}
```

この時点で、最初の段落がライム色に着色され、文書フローの外に移動し、元の位置よりも少し上に配置されていることがわかります。 また、2 つが重なったところでは、元の `.positioned` 段落の下にも重なっています。 これは、`.positioned` 段落がソース順の 2 番目の段落であり、ソース順の後ろに配置された要素がソース順の前に配置された要素よりも優先されるためです。

重ね合わせ順を変更できるでしょうか？ はい、 `z-index` プロパティを使うことでできます。 "z-index" は z 軸への参照です。 背景画像やドロップシャドウのオフセットなどを位置指定するために、水平（x 軸）座標と垂直（y 軸）座標を使用してウェブページについて説明したコースの前のポイントから思い出すことができます。 (0,0) はページ（または要素）の左上にあり、x 軸と y 軸はページの右下を横切っています（左から右の言語ならば）。

ウェブページには、z 軸もあります。 画面の表面から自分の顔に向かって走る想像上の線（または、画面の前に持ってきたい他の何か）です。 `z-index` の値は、位置指定要素がその軸のどこにあるかに影響します。 正の値はそれらを重ね合わせの上に移動し、負の値はそれらを重ね合わせの下に移動します。 既定では、位置指定要素はすべて `auto` の `z-index` を持ち、これは事実上 0 です。

重ね合わせ順を変更するには、`p:nth-of-type(1)` ルールに次の宣言を追加してみてください。

```css
z-index: 1;
```

これで完成した例が表示され、ライム色の段落が一番上になります。
```

<h1>z-index</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  Now I'm absolutely positioned relative to the
  <code><body></code> element, not the <code><html></code> element!
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
  z-index: 1;
}
```

`z-index` は、単位のないインデックス値のみを受け入れることに注意してください。 1 つの要素を z 軸の 23 ピクセル上に配置するように指定することはできません。そのようには機能しません。 より大きい値はより小さい値より上になり、どんな値を使うかはあなた次第です。 2 と 3 を使用するのと、300 と 40000 では同じ効果が得られます。

**メモ:** この時点でのライブ例は `5_z-index.html` にあります（ソースコードを見る）。

固定位置指定
------

固定位置指定 (Fixed positioning) を見てみましょう。これは絶対位置指定とまったく同じように機能しますが、1 つの重要な違いがあります。 絶対位置指定では、要素をその最も近くで位置指定された祖先 (the initial containing block if there isn't one) に対して固定しますが、**固定位置指定**では、ふつう、ビューポートの見えている部分に対して固定します。（要素の祖先の 1 つが固定されたコンテナーブロックであり、その transform プロパティ に *none* 以外の値が設定されている場合は例外となります）。つまり、ページのスクロール量に関係なく常に表示される持続的なナビゲーションメニューのような、固定された便利な UI アイテムを作成できることを意味します。

簡単な例をまとめて、意味を説明しましょう。 まず最初に、CSS から既存の `p:nth-of-type(1)` ルールと `.positioned` ルールを削除します。

それでは、次のように `body` ルールを更新して `position: relative;` 宣言を削除して、固定の高さを追加します。

```css
body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}
```

それでは、h1 要素に `position: fixed;` を与え、ビューポートの中央上部に配置します。 CSS に次のルールを追加してください。

```css
h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin-top: 0;
  background: white;
  padding: 10px;
}
```

`top: 0;` は、画面の上部に貼り付けるために必要です。 見出しにコンテンツ列と同じ幅を指定し、それからそれに白い背景といくらかのパディングとマージンを与えるので、コンテンツはその下に見えないでしょう。

保存して再読み込みすると、見出しが固定されたまま、コンテンツがスクロールしてその下に現れるという、ちょっとした楽しい効果が見られます。しかし、最初はコンテンツの一部が見出しの下で切り取られていることに注意してください。これは、配置された見出しが文書内のフローに現れなくなったため、残りのコンテンツが上へ移動しているためです。段落をすべて少し下に移動させることで、これを改善できます。これを行うには、最初の段落に上マージンを設定します。今回はこれを追加しましょう。

```css
p:nth-of-type(1) {
  margin-top: 60px;
}
```

完成した例を見てください。
```

<h1>Fixed positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">I'm not positioned any more.</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  Inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" alt="snippet of cloth" />
</p>
```

```
body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

h1 {
  position: fixed;
  top: 0px;
  width: 500px;
  background: white;
  padding: 10px;
}

p:nth-of-type(1) {
  margin-top: 60px;
}
```

**メモ:** この時点でのライブ例は `6_fixed-positioning.html` にあります（ソースコードを見る）。

粘着位置指定
------

他にも `position: sticky` と呼ばれる位置指定の値が利用可能です。 これは他よりもやや新しいものです。 これは基本的に相対位置指定と固定位置指定のハイブリッドです。位置指定要素は、特定のしきい値の位置（例えば、ビューポートの上部から 10px）までスクロールされるまで相対位置指定されたように動作し、その後固定されます。

### 基本的な例

これは、ナビゲーションバーを特定の位置までページと共にスクロールさせ、その後ページの上部に固定するなどの目的で使用できます。
```

<h1>Sticky positioning</h1>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<div class="positioned">Sticky</div>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

.positioned {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

```css
.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}
```

### スクロールする索引

`position:sticky` の興味深く一般的な使用法は、スクロールする索引ページを作成し、異なる見出しが到達するにつれてページの上部にくっつくようにすることです。そのような例のマークアップは次のようになります。

```html
<h1>Sticky positioning</h1>

<dl>
  <dt>A</dt>
  <dd>Apple</dd>
  <dd>Ant</dd>
  <dd>Altimeter</dd>
  <dd>Airplane</dd>
  <dt>B</dt>
  <dd>Bird</dd>
  <dd>Buzzard</dd>
  <dd>Bee</dd>
  <dd>Banana</dd>
  <dd>Beanstalk</dd>
  <dt>C</dt>
  <dd>Calculator</dd>
  <dd>Cane</dd>
  <dd>Camera</dd>
  <dd>Camel</dd>
  <dt>D</dt>
  <dd>Duck</dd>
  <dd>Dime</dd>
  <dd>Dipstick</dd>
  <dd>Drone</dd>
  <dt>E</dt>
  <dd>Egg</dd>
  <dd>Elephant</dd>
  <dd>Egret</dd>
</dl>
```

CSS は次のようになります。 通常フローでは、`<dt>` 要素はコンテンツとともにスクロールします。 `<dt>` 要素に `position: sticky` を 0 の `top` の値と共に追加すると、サポートするブラウザーでは、その位置に達すると、見出しをビューポートの一番上に固定します。 それ以降の各見出しは、その位置までスクロールアップするときに、前の見出しを置き換えます。

```css
dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}
```

```
body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}
```

```
<h1>Sticky positioning</h1>

<dl>
  <dt>A</dt>
  <dd>Apple</dd>
  <dd>Ant</dd>
  <dd>Altimeter</dd>
  <dd>Airplane</dd>
  <dt>B</dt>
  <dd>Bird</dd>
  <dd>Buzzard</dd>
  <dd>Bee</dd>
  <dd>Banana</dd>
  <dd>Beanstalk</dd>
  <dt>C</dt>
  <dd>Calculator</dd>
  <dd>Cane</dd>
  <dd>Camera</dd>
  <dd>Camel</dd>
  <dt>D</dt>
  <dd>Duck</dd>
  <dd>Dime</dd>
  <dd>Dipstick</dd>
  <dd>Drone</dd>
  <dt>E</dt>
  <dd>Egg</dd>
  <dd>Elephant</dd>
  <dd>Egret</dd>
</dl>
```

粘着要素は「スクロール機構」を持つ最も近い祖先（position プロパティによって決定する）に相対的に「粘着」します。

**メモ:** このライブ例は `7_sticky-positioning.html` にあります（ソースコードを見る）。

スキルテスト
------

この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。Test your skills: Positioning を参照してください。

まとめ
---

私はあなたが基本的な位置指定と一緒に遊ぶことができて楽しかったと確信しています。 これは、レイアウト全体に使用する方法ではありませんが、ご覧のとおり、それが適しているタスクはたくさんあります。

関連情報
----

* `position` プロパティのリファレンス。
* いくつかのより有用なアイデアのための実用的な位置指定の例。
* 前のページ
* Overview: CSS layout
* 次のページ