recursal/MDN huggingface dataset:
CSS のパフォーマンス最適化
===============

* 前のページ
* Overview: Performance
* 次のページ

スタイル設定されていないページを描画し、スタイルが解釈できたら再描画するというのは、ユーザーにとって使い勝手が悪いものです。このため、CSS は、ブラウザーがその CSS が現在必要でないことを知っていない限り、描画ブロックされます。ブラウザーは、CSS をダウンロードし、CSS オブジェクトモデルを構築した時点で、ページを描画することができます。ブラウザは固有のレンダリングパスに従います。描画はレイアウトの後にのみ行われ、レイアウトはレンダーツリーが作成された後に行われ、そのためには DOM と CSSOM のツリーの両方が必要です。CSSOM 構築を最適化するには、不要なスタイルを削除し、ミニファイ、圧縮、キャッシュを行い、ページ読み込み時に不要な CSS は追加ファイルに分割して CSS の描画ブロックを縮小する必要があります。

### 描画ブロックの最適化

CSS では、メディアクエリーによって、具体的な条件に合わせてスタイル設定を行うことができます。メディアクエリーはレスポンシブウェブデザインにとって重要であり、重要なレンダリングパスを最適化することを支援します。ブラウザーはこれらのスタイルをすべて解釈するまでレンダリングをブロックしますが、印刷スタイルシートのように使用しないことがわかっているスタイルについてはレンダリングをブロックしません。メディアクエリーに基づいて CSS を複数のファイルに分割することで、使用しない CSS をダウンロードする際の描画ブロックを防ぐことができます。ブロックされない CSS リンクを作成するには、印刷スタイルのようなすぐに使用しないスタイルを別個のファイルに移動し、HTML マークアップに `<link>` を追加し、この場合、印刷スタイルであることを示すメディアクエリーを追加してください。


```html
<!-- styles.css の読み込みと解釈は描画ブロック -->
<link rel="stylesheet" href="styles.css" />

<!-- print.css の読み込みと解釈は描画ブロックされない -->
<link rel="stylesheet" href="print.css" media="print" />

<!-- mobile.css の読み込みと解釈は、広い画面では描画ブロックされない -->
<link
 rel="stylesheet"
 href="mobile.css"
 media="screen and (max-width: 480px)" />
```


既定では、ブラウザーは指定されたスタイルシートが描画ブロックされることを想定しています。スタイルシートが適用されるタイミングは、メディアクエリーを使って `media` 属性を追加してブラウザーに指示します。ブラウザーはスタイルシートを見ると、特定のシナリオにのみ適用する必要があることを認識し、スタイルシートをダウンロードしますが、描画はブロックしません。CSS を複数のファイルに区切ることで、描画をブロックするメインのファイル（この場合は "styles.css"）をより小さくし、描画がブロックされる時間を短縮しています。

### GPU でのアニメーション

ブラウザーは CSS アニメーションを処理するように最適化されており、再フロー（つまり再描画）を発生させないプロパティのアニメーションはとてもうまく処理します。パフォーマンスを向上させるために、アニメーションさせるノードをメインスレッドから GPU に移すことができます。合成をもたらすプロパティには、3D 座標変換（`transform: translateZ()` や `rotate3d()` など）、アニメーション座標変換、`opacity`、`position: fixed`、`will-change`、`filter` などがあります。また、`<video>`、`<canvas>`、 `<iframe>` など、いくつかの要素がレイヤーになることもあります。要素をレイヤーとして昇格させることは、合成とも呼ばれますが、座標変換プロパティのアニメーションを GPU で行うことで、特にモバイルでのパフォーマンスが向上します。

### `will-change` プロパティ

CSS の `will-change` プロパティは、要素がどのように変化することが予想されるかをブラウザーに示唆します。ブラウザーは、要素が実際に変更される前に最適化を設定することがあります。この種の最適化は、実際に必要とされる前に高価な可能性のある作業を行うことで、ページのレスポンスを向上させることができます。

**メモ:** `will-change`は、既存のパフォーマンス問題に対処するための最後の手段として使用することを意図しています。パフォーマンス上の問題を予測するために使用するべきではありません。


```css
.element {
  will-change: opacity, transform;
}
```

### `font-display` プロパティ

@font-face ルールに適用される font-display プロパティは、フォントファイルがどのようにブラウザーで読み込まれて表示されているのか、フォントの読み込み中、または読み込みが失敗した時に代替フォントでテキストを表示できるようにするかを定義します。これにより、空白の画面を表示することなくテキストを表示することができ、パフォーマンスを向上させることができます。


```css
@font-face {
  font-family: someFont;
  src: url(/path/to/fonts/someFont.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
```

### `contain` プロパティ

`contain` は CSS のプロパティで、作成者がある要素とその内容が、できるだけ、文書ツリーの残りの部分から独立指せることを示します。これにより、ブラウザーはページ全体ではなく、DOM の限られた領域に対してレイアウト、スタイル、描画、サイズ、またはそれらの任意の組み合わせを再計算することができるようになります。

まとめ
---

* 前のページ
* Overview: Performance
* 次のページ
関連情報
----

* CSS アニメーションのパフォーマンス (en-US)
JavaScript のパフォーマンス
===================

* 前のページ
* Overview: Performance
* 次のページ

平均的なウェブサイトでダウンロードされるバイト数のうち、画像や動画がバイト単位で70％以上を占めているのに対し、JavaScript はパフォーマンスに与える悪影響が大きいと言われています。この記事では、スクリプトに起因するパフォーマンスの問題を紹介し、JavaScript をウェブパフォーマンスのために最適化するためのヒントとコツを紹介します。

|  |  |
| --- | --- |
| 前提条件: | 
 基本的なコンピューターリテラシー、
 基本的なソフトウェアのインストール、
 クライアント側のウェブ技術の基本的な知識
  |
| 目標: | JavaScript がパフォーマンス最適化に与える影響について、また、JavaScript のファイルサイズだけがウェブパフォーマンスに与える影響ではないことを学ぶ。 |

画像や動画と同様に、パフォーマンスを向上させる最善の方法は、実際には必要でないものを除外することです。しかし、ダウンロードするすべてのバイトが同じ影響を与えるわけではありません。JavaScript のバイトは、ダウンロードし、解釈し、実行する必要があります。JavaScript はダウンロードのパフォーマンスに影響を与えます。そのダウンロードする際の影響を最小限にするためのヒントやトリックに応じたものを紹介します。しかし、JavaScript はメインスレッド、CPU、バッテリーを消費することもあります。そのため、UI が反応しなくなったり、ジャンキーに感じられたりすることがあります。それを処理するための概念も紹介します。

ダウンロードのインパクト
------------

ウェブアプリケーションには、たくさんの JavaScript が含まれています。多くのアプリケーションは、JavaScript フレームワーク、または複数のフレームワークで構築され、さらにいくつかの依存関係があります。A/B テスト、トラッキングピクセル、地図や対応する機能など、サードパーティーのスクリプトや API が追加されることもよくあります。この JavaScript はすべてダウンロードする必要があります。いずれは。

パフォーマンスの最適化には、次のようなことを行う必要があります。

* **必要な JavaScript の量を縮小する。** 複雑な JavaScript を必要とするいくつかの機能は、数行の JavaScript で実行することができます。他にもライブラリーを必要とする機能は開発者の使い勝手を向上させるかもしれませんが、その JavaScript はすべて必要なのでしょうか？もっと軽量なものや自前で開発できるものはないのでしょうか？ある機能は必要ないかもしれませんし、追加することで華やかさは増すかもしれませんが、性能の面でその機能のコストは見合うものでしょうか？
* **使用しないコードを削除する。**
* **JavaScript を小さなファイルに分割する。** JavaScript を重要な部分とそうでない部分にコード分割します。webpack のようなモジュールバンドルはコード分割に対応しています。
* **これらの小さなファイルを最適化する。** Minification は、ファイルの文字数を縮小し、JavaScript のバイト数や重さを軽減します。Gzipping は、さらにファイルを圧縮するもので、Minification を行わない場合でも使用する必要があります。Brotli は Gzip に似ていて、一般的に Gzip の圧縮より優れています。
レンダリングの影響
---------

ウェブアプリケーションには、たくさんの JavaScript が含まれています。多くのアプリケーションは、JavaScript フレームワーク、または複数のフレームワークで構築され、さらにいくつかの依存関係があります。A/B テスト、トラッキングピクセル、地図や対応する機能など、サードパーティーのスクリプトや API が追加されることもよくあります。

バッテリーの影響
--------

まとめ
---

メディアファイルや スクリプトを最適化することで、ウェブパフォーマンスの最適化という点ではとても有利になりますが、ウェブページに触れるものすべてがパフォーマンスに影響します。次の記事では、パフォーマンスに影響を与える可能性のある HTML の機能（パフォーマンスを向上させるために特別に作成された属性を含む）を見ていきます。

* 前のページ
* Overview: Performance
* 次のページ
ウェブパフォーマンスのビジネスケース
==================

* 前のページ
* Overview: Performance
* 次のページ

ここまで、ウェブパフォーマンスの重要性についてお話してきました。ウェブパフォーマンスを最適化するために何をすべきかを学びました。しかし、クライアントや経営陣にパフォーマンスに優先順位をつけて投資するように説得するにはどうすればよいのでしょうか？このセクションでは、意思決定者に投資をするように説得するための明確なビジネスケースの作成について説明します。

|  |  |
| --- | --- |
| 前提条件: | 
 基本的なコンピューターリテラシー、
 クライアント側のウェブ技術の基本的な知識、
 ウェブパフォーマンス最適化の基本的な知識。
  |
| 目標: | クライアントや経営者に ウェブパフォーマンスを優先してもらい、自信を持って仕事ができるようになること。 |

パフォーマンスをビジネスの優先事項にする
--------------------

パフォーマンスを優先することで、ユーザーの使い勝手が向上し、その結果、収益が向上することは、これまでにも説明してきたとおりです。ウェブパフォーマンスを優先しない場合、事業収益が失われる可能性があることも知っています。この記事では、特定のビジネス指標がユーザーのウェブパフォーマンス体験にどのように直接関連しているか、また、ユーザーのウェブパフォーマンス体験を向上させるためにサービスデザインをどのように適用するかについて説明します。累積的な体験がコンバージョン率やリテンション率にどのような影響を与えるかを理解することの重要性を強調しています。

### パフォーマンス予算

ウェブパフォーマンス予算を設定することで、チームがサイトを維持するための軌道に乗っているかどうかを確認し、回帰を防ぐのに役立ちます。パフォーマンスバジェットとは、維持しなければならない最大の http リクエスト数、すべてのアセットを合わせた最大の合計サイズ、特定のデバイスでの最小許容 FPS などの制限を指定するために設定される制限のセットです。予算は、単一のファイル、ファイルタイプ、ページに読み込まれたすべてのファイル、特定のメトリック、または一定期間のしきい値に適用することができます。

予算を定義して推進することで、マーケティング、セールス、さらにはビデオやサードパーティスクリプト、フレームワークを追加したいと考えている他の開発者など、競合する利害関係者に対抗して、優れたユーザーエクスペリエンスを提供するためのパフォーマンス推進者を支援することができます。パフォーマンス予算 (en-US)は、開発者チームがユーザーのために最適なパフォーマンスを保護し、ビジネスが新しい市場に参入してカスタム体験を提供できるようにするのに役立ちます。

### Key Performance Indicators

目標として主要業績評価指標 (KPI) を設定することで、ビジネスの目標でもある業績目標を明確にすることができます。KPI は、ユーザーエクスペリエンスとパフォーマンスがビジネスのトップラインに与える影響を測定する上で重要なビジネス指標のセットであると同時に、パフォーマンスに優先順位をつけることのメリットを示す方法でもあります。ここでは、検討すべき KPI をいくつか紹介します。

**コンバージョン率 (CR)**

購入の完了やニュースレターへの登録など、意図した行動をとったトラフィックの割合。ビジネスサイトの表示速度が遅いと、ユーザーが意図したタスクを完了できないことがあります。これは、コンバージョン率の低下につながる可能性があります。

**Time on Site**

集計したユーザーがサイトに費やす平均時間。サイトのパフォーマンスが低下すると、ユーザーはサイトを早期に放棄する可能性が高くなり、サイトの計測にかかる時間が短くなる可能性があります。

**ネットプロモーションスコア (NPS)**

ネットプロモーションスコア (NPS) は、企業のブランド、製品、サービスに対する顧客の忠誠心を評価するための指標です。ユーザーのパフォーマンスが悪いと、ブランドの評判が悪くなります。

KPI としてコンバージョン率、サイト上の時間、および/またはネットプロモーションのスコアを設定すると、ウェブパフォーマンスの努力に財務および他のビジネス目標の価値を与え、努力の価値を証明するための指標を使用して、購入を後押しするのに役立ちます。

* 前のページ
* Overview: Performance
HTML のパフォーマンス機能
===============

* 前のページ
* Overview: Performance
* 次のページ

HTML は既定で高速でアクセシビリティに優れています。開発者としての私たちの仕事は、HTML コードを作成・編集する際に、この 2 つのプロパティを確実に保持することです。例えば、`<video>` の埋め込みファイルのサイズが大きすぎる場合や、ウェブページがモバイル端末に最適化されていない場合など、複雑な問題が発生することがあります。このモジュールでは、ウェブページの品質を劇的に向上させることができる、主要な HTML パフォーマンス機能を説明します。

|  |  |
| --- | --- |
| 前提条件: | 
 基本的なコンピューターリテラシー、
 基本的なソフトウェアのインストール、
 クライアント側のウェブ技術の基本的な知識
  |
| 目標: | HTML 要素や属性がウェブのパフォーマンス最適化に与える影響について学ぶ。 |

パフォーマンスに影響を与える要素と属性
-------------------

* `<picture>` 要素
* `<video>` 要素
* `<source>` 要素
* `<img> srcset` 属性
    + レスポンシブ画像
* `rel="preload"` によるコンテンツの先読み
* (https://w3c.github.io/preload/)
* `async` / `defer` 属性
* `<iframe>`
* `<object>`
* `<script>`
* `rel` 属性
まとめ
---

* 前のページ
* Overview: Performance
* 次のページ
関連情報
----

* `<picture>` 要素
* `<video>` 要素
* `<source>` 要素
* `<img> srcset` 属性
    + レスポンシブ画像
* `rel="preload"` によるコンテンツの先読み
* (https://w3c.github.io/preload/)
HTML 入門
=======

本来、HTML は、要素で構成される言語です。 HTML は、テキストの断片に、文書の中で様々な意味（段落なのか、箇条書きなのか、表の一部なのか）を与え、文書を論理的なセクションに構成し（ヘッダーを持つのか、コンテンツを 3 段組にするのか、ナビゲーションメニューを持つのか）、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の 2 つについて紹介し、 HTML を理解する上で知る必要がある基本的な概念や文法について紹介します。

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

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

**始めましょう**

前提条件
----

このモジュールを始めるにあたり、 HTML の知識は一切必要ありません。しかし、最低でもコンピューターを利用したり、ウェブを受動的に利用する (つまり、ただ見てコンテンツを消費する) ための基本的な知識を持っている必要があります。基本的なソフトウェアをインストールするに挙がっている基本的な作業環境を整えておき、ファイルを扱うにあるような、ファイルを作成して管理する方法についても理解するべきです。これらの記事は両方共に、完全な初心者用のモジュール「ウェブ入門」の一部です。

**メモ:** 独自のファイルを作成する能力のないコンピューター/タブレット/その他の端末で作業している場合は、JSBin や Glitch などのオンラインコーディングプログラムで（ほとんどの）コード例を試してみることができます。

ガイド
---

このモジュールには、以下の記事が含まれています。これらの記事では、 HTML の基本的な理論をすべて説明し、いくつかのスキルを試すための十分な機会を提供しています。

HTML を始めよう

始めに、 HTML の絶対的な基本を網羅します。 — 要素、属性、その他の重要な用語を定義し、それらが言語のどこに当てはまるかを示しています。また、典型的な HTML ページがどのように構成されているか、 HTML 要素がどのように構成されているかを示し、その他の重要な基本的言語機能を説明します。また、 HTML に興味を持ってもらうために、いくつかの HTML で遊んでみましょう。

head とは? HTML のメタデータ

HTML 文書の head は、ページが読み込まれたときにウェブブラウザーに表示されない部分です。ここには、ページのタイトル (`<title>`)、 CSS へのリンク (HTML コンテンツを CSS でスタイル付けしたい場合)、独自のファビコンへのリンク、メタデータ (誰が書いたか、文書を説明する重要なキーワードなど、 HTML に関するデータ) などの情報が含まれています。

HTML テキストの基礎

HTML の主な役割の 1 つは、テキストの意味付け（**セマンティクス** とも呼ばれています）で、それによってブラウザーは正しくテキストを表示する方法がわかります。この記事では HTML を使ってテキストブロックを見出しとパラグラフに分けたり、単語を強調/重要にしたり、リストを作成したりする方法を見て行きます。

ハイパーリンクの作成

ハイパーリンクは本当に重要です — これはウェブをウェブにしているものです。この記事ではリンクを作成するのに必要な文法を表して、リンクの最も良いやり方を考察します。

高度なテキスト整形

HTML ではテキスト整形用として、HTML テキストの基礎 の記事で扱ってきてない多くの要素があります。ここでの要素はあまり知られてないですが、知っておくと役立ちます。ここでは引用や、説明リストや、コンピューターのコードや関連するテキスト、下付き上付きや、連絡先情報などのマークアップを学習します。

文書とウェブサイトの構造

ページの個々の部分（例えば「段落」や「画像」）を定義するのと同様に、ウェブサイトの領域（例えば「ヘッダー」、「ナビゲーションメニュー」、「本文のカラム」）も HTML で定義されます。この記事では基本的なウェブサイトの構造を計画する方法と、構造を表現する HTML を書く方法を見て行きます。

HTML のデバッグ

HTML を書くのは良いですが、うまくいかなくて、コードのエラーが収まらない場合はどうでしょうか？この記事では手助けとなるいくつかのツールを紹介します。

評価課題
----

以下の評価課題で、上記のガイドにある HTML 基礎の理解度を試してみることができます。

手紙のマークアップ

早かれ遅かれ、手紙を書くことを学びます。これはテキストフォーマットの技術をテストするのにも役立ちます！この評価課題では、マークアップすべき手紙が与えられます。

コンテンツのページの構造化

この評価では、ヘッダー・フッター・ナビゲーションメニュー・メインコンテンツ・サイドバーを含む、簡単なコンテンツのページの構造化 HTML の能力をテストします。
HTML テーブル
=========

HTML でのとてもよくある仕事はテーブルデータの構造化で、数々の要素と属性がこの目的のためにあります。スタイリング用の CSS と組み合わせて、HTML は Web 上に、学校の授業の計画や、水泳の時間割や、好きな恐竜やフットボールチームの統計情報といった、情報のテーブルを簡単に表示できます。このモジュールでは HTML を使ってテーブルデータを構造化するのに必要な知識を一通り案内します。

必要となる知識
-------

このモジュールを学習する前に、HTML の基本について既に理解している必要があります。もしまだ理解が足りていないと感じているならば HTML 入門を参照してください。

**メモ:** もしあなたが自分のファイルを作成することのできないコンピュータ・タブレット端末そのほかのデバイスで作業をしているならば、 インターネット上の JSBin や Thimbleといったコーディングプログラムを用いてほとんどのコードの例を試してみることができます。

ガイド
---

このモジュールは以下の話題を含んでいます。:

HTML テーブルの基本

この記事を読めば、HTML のテーブルについてのイロハを知ることができます。行や列、見出しやカラムと行を複数に分割するセルの作成を扱い、またいかにしてカラムにあるセルをまとめて見栄えを整えるかについて扱います。

HTML テーブルの高度な機能とアクセシビリティ

このモジュールの 2 つ目の記事では、 HTML のもう少し発展的な機能について扱います。 たとえば、見出しや要約、そして行をまとめて表の head,body そしてフッターの section にすることです。同時に視覚にハンディキャップを有する人びとのために表のアクセシビリティについても記事で扱います。

評価
--

惑星データの構造化

テーブルについての記事を理解できたかの評価として、太陽系の星についてのいくつかのデータを提供し、あなたに HTML を用いて表にしてもらいます。
マルチメディアとその埋め込み
==============

このコースではこれまでたくさんのテキストを見てきましたが、テキストを使用するだけではウェブは実に退屈なものになってしまいます。もっと興味深い内容でウェブを生き生きとさせるために、検討を始めましょう! このモジュールでは、HTML を使用してウェブページにマルチメディアを入れる方法を探ります。画像を入れるさまざまな方法、動画や音声、さらにはウェブページ全体を埋め込む方法などを説明します。

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

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

**始めましょう**

前提条件
----

このモジュールを開始する前に、HTML 入門で述べられてきた、HTML の基本についてのある程度の知識が求められます。このモジュール（や似たようなもの）を一通り終えていない場合、まずそちらを一通り終えてから戻ってきてください。

**メモ:** 自分自身のファイルを作れないコンピューター/タブレット/その他の端末で作業している場合、JSBin や Glitch のようなオンラインコーティングプログラムにてコードの実例（の大半）を試すことができます。

ガイド
---

このモジュールには以下の記事があり、ウェブページにマルチメディアを埋め込むための基本的な事柄をすべて説明しています。

HTML の画像

考慮すべき他の種類のマルチメディアもありますが、単純な画像をウェブページに埋め込むために使用される、慎ましい `<img>` 要素から始めるのが理にかなっています。 この記事では、基本的な使い方を含め、 `<figure>` を使ったキャプションによる注釈付け、CSS 背景画像との関連の仕方など、画像をより深く使用する方法を見ていきます。

動画と音声のコンテンツ

次に、 HTML の `<video>` 要素と `<audio>` 要素を使用して、動画や音声をページに埋め込む方法を見ていきます。 それには、基本的な使い方を含め、さまざまなファイル形式へのアクセスをさまざまなブラウザーに提供したり、キャプションや字幕の追加、古いブラウザーへの代替手段の追加などが含まれています。

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

この時点では、`<iframe>`、`<embed>`、`<object>` 要素のような幅広い種類のコンテンツをウェブページに埋め込むことができる要素をいくつか見ていきたいと考えています。 `<iframe>` は他のウェブページを埋め込むためのもので、他の 2 つは PDF ファイルなどの外部リソースを埋め込むことができるものです。

ウェブにベクターグラフィックを追加する

ベクターグラフィックは、特定の状況で非常に便利です。 PNG や JPG のような通常のフォーマットとは異なり、ズームインしてもゆがんだりピクセル化したりしません。縮尺を変えても滑らかな状態を保つことができます。 この記事では、ベクターグラフィックの概要と、ポピュラーな SVG フォーマットをウェブページに含める方法を紹介します。

レスポンシブ画像

この記事では、画面の内側や解像度などが大きく異なる機器でもうまく動作する画像、つまりレスポンシブ画像の概念について学び、それを実装するために HTML が提供するツールについて見ていきます。これにより、異なる端末間でのパフォーマンスを向上させることができます。レスポンシブ画像は、今後学んでいただく CSS のトピックであるレスポンシブデザインの一部に過ぎないのです。

評価試験
----

上記のガイドで説明されている HTML の基本について、以下の評価試験を行います。

Mozilla のスプラッシュページ

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

関連情報
----

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

イメージマップは、画像のさまざまな部分を別の場所にリンクするためのメカニズムを提供します(あなたがクリックしたそれぞれの国についての詳細情報にリンクしている地図を考えてみてください)。 この手法は時には便利なことがあります。

ウェブリテラシーの基礎 2 (英語)

優れた Mozilla の基礎コースで、マルチメディアと埋め込みモジュールで説明されているスキルのいくつかを調べてテストします。ウェブページの作成、アクセシビリティの設計、リソースの共有、オンラインメディアの使用、オープンな作業（コンテンツは自由に利用可能で、他の人が共有できることを意味します）の基礎を深く理解してください。
一般的な問題解決に HTML を使う
==================

下記のリンクは、日常の解決すべき問題を HTML を使って解決する解決法を指しています。

### 基本構造

HTML の最も基本的な適用は文書の構造化です。HTML に慣れていないならここから始めるべきです。

* 基本的な HTML 文書を作成する方法
* Web ページを論理的なセクションに分割する方法
* 見出しと段落の適切な構成を設定する方法
### 基本的なテキストレベルのセマンティクス

HTML は文書の意味的な情報を提供することに特化しているので、HTML 文書内でメッセージをうまく伝える方法についてあなたが抱えるかもしれない多くの質問に答えます。

* HTML を使ってリスト項目を作成する方法
* コンテンツを強調する方法
* テキストが重要だと示す方法
* HTML でコンピュータコードを表示する方法
* 画像やグラフィックに注釈を付ける方法
* 略語をマークして理解しやすくする方法
* Web ページに引用を追加する方法
* HTML で用語を定義する方法
### ハイパーリンク

HTML のための主な理由は ハイパーリンク, を使ってナビゲーションを簡単にすることで、それは色々な方法で使われます:

* ハイパーリンクを作成する方法
* HTML を使って目次を作成する方法
### 画像とマルチメディア

* Web ページに画像を追加する方法
* Web ページにビデオコンテンツを追加する方法
### スクリプトとスタイリング

HTML は文書の構造だけを解決します。表現の問題は CSS を使うか、ページをインタラクティブにしたいならスクリプトを使います。

* Web ページで CSS を使用する方法
* Web ページで JavaScript を使用する方法
### 埋め込みコンテンツ

* Web ページに他の Web ページを埋め込む方法
* Web ページに Flash コンテンツを追加する方法
あまりない、または上級の問題
--------------

基本を超えると、HTML はとてもリッチで複雑な問題を解決する高度な機能を提供します。この記事は直面するかもしれないあまりないユースケースに取り組むのに役立ちます。

### フォーム

フォームは、Web ページから Web サーバにデータを送信するために作成された複雑な HTML 構造です。完全な専用ガイドに目を通すことをお勧めします。ここから始めましょう。

* 簡単な Web フォームを作成する方法
* Web フォームを構築化する方法
### 表の情報

表形式データという情報は、行と列のある表で整理する必要があります。これは最も複雑な HTML 構造の 1 つで、習得するのは簡単ではありません。

* データテーブルの作り方
* HTML テーブルをアクセシブルにする方法
### データ表現

* 数値とコード値を HTML で表現する方法 - 上付き文字と下付き文字、およびコンピュータコードの表現を参照してください
* データ属性の使い方
### 上級テキストセマンティクス

* HTML の改行をコントロールする方法
* 変更をマークする方法 (追加および削除されたテキスト) - `<ins>` と `<del>` 要素を参照してください
### 上級の画像やマルチメディア

* レスポンシブ画像を Web ページに追加する方法
* Web ページにベクター画像を追加する方法
* 画像の上にヒットマップを追加する方法
### 国際化

HTML は単一言語ではありません。一般的な国際化の問題を処理するためのツールを提供します。

* 単一の Web ページに複数の言語を追加する方法
* HTML で日時を表示する方法
### パフォーマンス

* 高速ロードの HTML ページを作成する方法 (en-US)
評価: 太陽系の惑星のデータを構造化する
====================

* 前のページ
* Overview: Tables

テーブルの評価では、太陽系の惑星に関するいくつかのデータを提供し、それを HTML テーブルに構造化しましょう。

| 前提知識: | この評価を行う前に、このモジュールのすべての記事について学んでいるべきです。 |
| --- | --- |
| 目標: | HTML の表やそれに付随する機能に関する理解を確認する。 |

はじめに
----

この評価を開始するには、ローカルコンピュータの新しいディレクトリーに、blank-template.html、minimal-table.css、および planets-data.txt のローカルコピーを作成します。

**メモ:** 代わりとして、JSBin や Thimble のようなサイトを使って評価することもできます。HTML、CSS、および JavaScript をこれらのオンラインエディタのいずれかに貼り付けることができます。使用しているオンラインエディタに個別の JavaScript/CSS パネルがない場合は、それらを HTML ページ内に `<script>`/`<style>` 要素をインラインで配置してください。

やることの概要
-------

あなたは学校で働いています。現在生徒たちは私たちの太陽系の惑星を研究しています、そしてあなたは彼らに惑星についての事実と数字を調べるために分かりやすいデータのセットを提供したいです。HTML データテーブルが理想的です — 利用可能な生データを取得し、それをテーブルに変換する必要があります。以下の手順に従ってください。

完成した表は次のような外観を備えているはずです:

![](/ja/docs/Learn/HTML/Tables/Structuring_planet_data/assessment-table.png)

また、ここに掲載されている例を見ることもできます (ソースコードを見ないでください — チートしないでください)。

手順
--

次の手順では、表の例を完成させるために必要な作業について説明します。必要なすべてのデータは `planets-data.txt` ファイルに含まれています。データをうまく視覚化できない場合は、上記の実際の例を見てみるか、図を描いてみてください。

1. `blank-template.html` のコピーを開き、外部コンテナ、テーブルヘッダー、およびテーブル本体を指定してテーブルを作成します。この例ではテーブルフッターは必要ありません。
2. 提供されたキャプションを自分のテーブルに追加します。
3. すべての列ヘッダーを含む行をテーブルヘッダーに追加します。
4. すべての行見出しを意味的に見出しにすることを忘れずに、テーブル本体内にすべてのコンテンツ行を作成します。
5. すべてのコンテンツが正しいセルに挿入されていることを確認してください — 生データでは、惑星データの各行が関連する惑星の隣に表示されます。
6. 行ヘッダーと列ヘッダーを、それらが見出しとして機能する行、列、または行グループと明確に関連付けられるように属性を追加します。
7. すべての惑星名行ヘッダーを含む列のすぐ周りに黒い枠線を追加します。
ヒントと TIPS
---------

* ヘッダー行の最初のセルは空白で、2 列にまたがる必要があります。
* 惑星名の行見出し (例: *土星*) の左側にあるグループの行見出し (例: *木星型惑星*) は、整理するのが少し面倒です。それぞれが正しい行数と列数にまたがるようにする必要があります。
* ヘッダーを行/列に関連付ける 1 つの方法は、他の方法よりもはるかに簡単です。
評価
--

あなたが組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もし自己学習しているのであれば、この練習問題についてのディスカッションスレッド、または Mozilla IRC の #mdn IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください。不正をすることによって得られるものは何もありません！

* 前のページ
* Overview: Tables
スキルテスト: リンク
===========

このスキルテストの目的は、あなたが HTML でのハイパーリンクの実装を行う方法を理解しているかどうかを評価することです。

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

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

課題 1
----

このタスクでは、クジラの情報ページのリンクを埋めるのを手伝っていただきます。

* 最初のリンクは、現在のページと同じディレクトリーにある `whales.html` というページにリンクされるようにします。
* また、マウスオーバーしたときに、このページにはシロナガスクジラやマッコウクジラの情報が含まれていることをユーザーに指示するツールチップを付けましょう。
* 2 つ目のリンクは、ユーザーの既定のメールアプリケーションで、受信者を "whales@example.com" に設定してメールを開くためのリンクに変更しましょう。
* メールの件名が「クジラについての質問」と自動的に記入されるように設定すると、ボーナスポイントも得られます。

**メモ:** この例の 2 つのリンクには `target="_blank"` 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた `<iframe>` で開かないようにし、その過程で例のコードを削除するようにしています。

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

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

課題 2
----

この課題では、4 つのリンクが適切な場所にリンクするように記入していただきます。

* 最初のリンクは、カレントディレクトリーの中の `blue` というディレクトリーにある `blue-whale.jpg` という画像にリンクするようにしましょう。
* 2 つ目のリンクは、カレントディレクトリーの 1 つ上のディレクトリーである `narwhal` というディレクトリーにある `narwhal.jpg` という画像にリンクするようにしましょう。
* 3 つ目のリンクは、UK の Google 画像検索にリンクしてください。ベース URL は `https://www.google.co.uk` で、画像検索は `imghp` というサブディレクトリーに配置されています。
* 4 つ目のリンクは、現在のページの一番下にある段落にリンクしましょう。これは `bottom` という ID が付いています。

**メモ:** この例で最初の 3 つのリンクには `target="_blank"` 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた `<iframe>` で開かないようにし、その過程で例のコードを削除するようにしています。

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

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

課題 3
----

以下のリンクは、一角獣に関する情報ページ、対応するメールアドレス、および 4MB の PDF ファクトファイルへのリンクです。この課題では、次のことを行ってください。

* リンクテキストの書き方が悪い既存の段落を選び、良いリンクテキストがあるように書き直しましょう。
* 警告を追加する必要があるリンクには、警告を追加しましょう。

**メモ:** この例における最初と 3 つ目のリンクには `target="_blank"` 属性が設定されています。これは厳密には最善の手法ではありませんが、ここではリンクが埋め込まれた `<iframe>` で開かないようにし、その過程で例のコードを削除するようにしています。

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

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

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

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

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

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

このスキルテストの目的は、あなたが高度な意味的特徴をマークアップする有名ではない HTML 要素を使用する方法を理解しているかどうかを評価することです。

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

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

課題 1
----

この課題では、指定された動物とその定義を、説明リストに変換していただきます。

完成例はこのようになるはずです。

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

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

課題 2
----

この課題では、与えられた HTML に以下のような意味づけを追加していただきます。

* 2 つ目の段落をブロックレベルの引用にし、その引用がアクセシビリティから引用されたものであることを意味づけしましょう。
* "HTML" と "CSS" を頭字語として意味づけし、その展開形をツールチップとして提供しましょう。
* 化学式や日付に正しい意味づけを行い、正しく表示させるように、添字や上付き文字を使用しましょう。
* 機械読み取り可能な日付とテキストの日付を意味づけしましょう。

完成例はこのようになります。

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

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

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

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

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

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

* 前のページ
* Overview: Introduction to HTML
* 次のページ

私たちはみんな遅かれ早かれ手紙を書くことを学びます。テキストの書式設定のスキルを試すのも便利な例です。この課題では手紙をマークアップして、ハイパーリンクや HTML の `<head>` 要素の適切な使用と同様に、 HTML テキスト整形のスキルをテストしてみます。

|  |  |
| --- | --- |
| 前提条件: | 
 この評価課題をやってみる前に、
 HTML を始めよう、
 ヘッド部には何が入る? HTML のメタデータ、
 HTML テキストの基礎、
 ハイパーリンクの作成、
 高度なテキスト整形を既に終えているのが望ましい。
  |
| Objective: | 基本的な HTML テキストの書式設定とハイパーリンクのスキル、および HTML の <head> に関する知識をテストします。 |

開始地点
----

この課題を開始するには、マークアップする必要がある生のテキストと、HTML に含める必要がある CSS を入手します。テキストエディターを使用して新しい `.html` ファイルを作成し、作業を行います（または、 CodePen, jsFiddle, or Glitch などのサイトを使用して課題を行います）。

**メモ:** もし行き詰まったら、私たちに助けを求めてください。このページの下にある評価またはさらなるヘルプの節をご覧ください。

簡単なプロジェクト
---------

このプロジェクトでは、あなたのタスクは、大学のイントラネットでホストする必要がある手紙をマークアップすることです。この手紙は、大学への申請に関して、研究員から博士課程の学生候補に返信するものです。

### ブロック/構造的な意味づけ

* 文書全体を文書型定義、`<html>`、`<head>`、`<body>` 要素を含む適切な構造で構成する必要があります。
* 一般的な手紙は、以下の点を除いて、段落と見出しの構造でマークアップしてください。最上位の見出し（"Re:" の行）が 1 つと、第 2 レベルの見出しが 3 つあります。
* 学期の開始日、研究科目、そしてエキゾチックな踊りは適切なリストタイプを使ってマークアップしてください。
* 2 つの住所は `<address>` 要素に入れてください。住所のそれぞれの行は個別の行にしますが、新しい段落にはしないでください。
### インラインの意味づけ

* 送信者と受信者の名前（および "Tel" と "Email"）は、とても重要なものとしてマークアップしてください。
* 文書内の 4 つの日付には、機械が読める日付を含む適切な要素を指定する必要があります。
* 手紙の最初のアドレスと最初の日付には、"sender-column" のクラス属性値を指定する必要があります。後で追加する CSS では、従来の手紙のレイアウトの場合と同様に、これらが正しく配置されます。
* 文字の本文中の 5 つの頭字語/略語は、それぞれの頭字語/略語を拡張するためにマークアップする必要があります。
* 6 つの下付き/上付き文字は適切にマークアップする必要があります — 化学式、および 103 と 104 の数字 (それぞれ 10 のべき乗または 3 と 4 にする必要があります)。
* テキストの中で少なくとも 2 つの適切な単語に強い重要性と強調を設定するようにしてください。
* ハイパーリンクを追加する場所は 2 か所あります。タイトル付きの適切なリンクを追加してください。リンクが指す場所には `http://example.com` を使用してください。
* 大学のモットーのクォートと引用は適切な要素でマークアップするべきです。
### 文書のヘッド部

* 適切なメタタグを使用して、文書の文字コードを utf-8 として指定する必要があります。
* 手紙の作者は適切なメタタグで指定してください。
* 提供された CSS は適切なタグの中に置いてください。
ヒントとコツ
------

* HTML を検証するために W3C HTML validator を使用してください。検証すればボーナスポイントを得られるでしょう。
* この課題をするために CSS を知る必要はありません。 提供された CSS を HTML 要素の中に入れるだけです。
例
-

次のスクリーンショットは、マークアップ後の文字の表示例を示しています。

![例](/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter/letter-update.png)

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

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

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