From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../add_a_hit_map_on_top_of_an_image/index.html | 126 ++++ .../html/howto/define_terms_with_html/index.html | 151 ++++ files/ja/learn/html/howto/index.html | 141 ++++ .../html/howto/use_data_attributes/index.html | 82 +++ .../use_javascript_within_a_webpage/index.html | 107 +++ files/ja/learn/html/index.html | 61 ++ .../advanced_text_formatting/index.html | 674 ++++++++++++++++++ .../creating_hyperlinks/index.html | 338 +++++++++ .../introduction_to_html/debugging_html/index.html | 185 +++++ .../document_and_website_structure/index.html | 293 ++++++++ .../getting_started/index.html | 786 +++++++++++++++++++++ .../html_text_fundamentals/index.html | 717 +++++++++++++++++++ .../ja/learn/html/introduction_to_html/index.html | 65 ++ .../marking_up_a_letter/index.html | 105 +++ .../structuring_a_page_of_content/index.html | 107 +++ .../the_head_metadata_in_html/index.html | 292 ++++++++ .../adding_vector_graphics_to_the_web/index.html | 370 ++++++++++ .../images_in_html/index.html | 521 ++++++++++++++ .../learn/html/multimedia_and_embedding/index.html | 78 ++ .../mozilla_splash_page/index.html | 129 ++++ .../other_embedding_technologies/index.html | 399 +++++++++++ .../responsive_images/index.html | 282 ++++++++ .../video_and_audio_content/index.html | 307 ++++++++ files/ja/learn/html/tables/advanced/index.html | 475 +++++++++++++ files/ja/learn/html/tables/basics/index.html | 569 +++++++++++++++ files/ja/learn/html/tables/index.html | 43 ++ .../html/tables/structuring_planet_data/index.html | 87 +++ 27 files changed, 7490 insertions(+) create mode 100644 files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html create mode 100644 files/ja/learn/html/howto/define_terms_with_html/index.html create mode 100644 files/ja/learn/html/howto/index.html create mode 100644 files/ja/learn/html/howto/use_data_attributes/index.html create mode 100644 files/ja/learn/html/howto/use_javascript_within_a_webpage/index.html create mode 100644 files/ja/learn/html/index.html create mode 100644 files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/ja/learn/html/introduction_to_html/debugging_html/index.html create mode 100644 files/ja/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/ja/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/ja/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/ja/learn/html/introduction_to_html/index.html create mode 100644 files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html create mode 100644 files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html create mode 100644 files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html create mode 100644 files/ja/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/ja/learn/html/multimedia_and_embedding/index.html create mode 100644 files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html create mode 100644 files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html create mode 100644 files/ja/learn/html/multimedia_and_embedding/responsive_images/index.html create mode 100644 files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html create mode 100644 files/ja/learn/html/tables/advanced/index.html create mode 100644 files/ja/learn/html/tables/basics/index.html create mode 100644 files/ja/learn/html/tables/index.html create mode 100644 files/ja/learn/html/tables/structuring_planet_data/index.html (limited to 'files/ja/learn/html') diff --git a/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html new file mode 100644 index 0000000000..b53798c7d6 --- /dev/null +++ b/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html @@ -0,0 +1,126 @@ +--- +title: 画像にヒットマップを追加する +slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +tags: + - Graphics + - Guide + - HTML + - Intermediate + - Navigation +translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +--- +
+

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

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

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

+
+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

ステップ 1: 画像

+ +

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

+ + + +

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

+ +

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

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

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

+ +

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

+ +
<map name="example-map-1">
+
+</map>
+ +

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

+ +

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

+ +
+
{{htmlattrxref('shape','area')}}
+
{{htmlattrxref('coords','area')}}
+
+

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

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

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

+ +

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

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

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

+ +

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

+
+
+ +
<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 とラスターを組み合わせる方法（英語）を示しています。

+ +

より詳しく知る

+ + diff --git a/files/ja/learn/html/howto/define_terms_with_html/index.html b/files/ja/learn/html/howto/define_terms_with_html/index.html new file mode 100644 index 0000000000..4c2f87f8a2 --- /dev/null +++ b/files/ja/learn/html/howto/define_terms_with_html/index.html @@ -0,0 +1,151 @@ +--- +title: HTML で用語を定義する +slug: Learn/HTML/Howto/Define_terms_with_HTML +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: Learn/HTML/Howto/Define_terms_with_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 によって作成されたウェブブラウザです。

+
+ +

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

+ +

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

+ +

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

+ +

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

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

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

+
+ +

特別な場合: 略語

+ +

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

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

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

+
+ +

アクセシビリティの向上

+ +

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

+ +
<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 は、説明を含む要素の {{htmlattrxref('id')}} を参照します。

+ +

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

+ +

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

+ +
+

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

+
+ +

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

+ +

簡単な例

+ +

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

+ +
<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つ以上の説明が存在する場合、それらはすべて最後に指定された用語に適用されます。

+
+ +

視覚的な出力を改善する

+ +

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

+ +

{{EmbedLiveSample("A_simple_example", 600, 180)}}

+ +

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

+ +
dt {
+  font-weight: bold;
+}
+
+ +

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

+ +

{{EmbedLiveSample("How_to_build_a_description_list", 600, 180)}}

+ +

より詳しく知る

+ + diff --git a/files/ja/learn/html/howto/index.html b/files/ja/learn/html/howto/index.html new file mode 100644 index 0000000000..a7e7f54478 --- /dev/null +++ b/files/ja/learn/html/howto/index.html @@ -0,0 +1,141 @@ +--- +title: 一般的な問題解決に HTML を使う +slug: Learn/HTML/Howto +tags: + - CodingScripting + - HTML +translation_of: Learn/HTML/Howto +--- +
{{LearnSidebar}}
+ +

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

+ +
+
+

基本構造

+ +

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

+ + + +

基本的なテキストレベルのセマンティクス

+ +

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

+ + +
+ +
+ + +

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

+ + + +

画像とマルチメディア

+ + + +

スクリプトとスタイリング

+ +

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

+ + + +

埋め込みコンテンツ

+ + +
+
+ +

あまりない、または上級の問題

+ +

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

+ +
+
+

フォーム

+ +

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

+ + + +

表の情報

+ +

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

+ + + +

データ表現

+ + +
+ +
+

上級テキストセマンティクス

+ + + +

上級の画像やマルチメディア

+ + + +

国際化

+ +

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

+ + + +

パフォーマンス

+ + +
+
+ +

  

diff --git a/files/ja/learn/html/howto/use_data_attributes/index.html b/files/ja/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..fdcaf2ade1 --- /dev/null +++ b/files/ja/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,82 @@ +--- +title: データ属性の使用 +slug: Learn/HTML/Howto/Use_data_attributes +tags: + - HTML + - HTML5 + - ウェブ + - ガイド + - 例 + - 独自データ属性 +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +
{{LearnSidebar}}
+ +

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

+ +

HTML の構文

+ +

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

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

JavaScript からのアクセス

+ +

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

+ +

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

+ +
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 からもアクセスできることに注意してください。 例えば、記事の親データを表示するには、次のように {{cssxref("attr")}} 関数を使用して CSS で生成したコンテンツを使用できます。

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

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 以下をサポートするには、代わりに {{domxref("Element.getAttribute", "getAttribute()")}} を使用してデータ属性にアクセスする必要があります。 また、通常の JS オブジェクトにこのデータを保存する場合と比較して、データ属性の読み取りパフォーマンス（英語）が低下します。

+ +

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

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.html b/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.html new file mode 100644 index 0000000000..598818ab3d --- /dev/null +++ b/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.html @@ -0,0 +1,107 @@ +--- +title: ウェブページで JavaScript を使う方法 +slug: Learn/HTML/Howto/Use_JavaScript_within_a_webpage +tags: + - Beginner + - HTML + - JavaScript + - OpenPractices +translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage +--- +
+

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 について

+ +

{{Glossary("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 {{htmlelement("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 {{HTMLElement ('script')}} with an src attribute pointing to the script file, using its URL:

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

Pro tip: In many cases it's a good idea to put your {{HTMLElement('script')}} elements at the end of your HTML document (right before the </body> closing {{Glossary("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 {{htmlelement("script")}} elements at the end, you don't run the risk of manipulating {{Glossary("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.

+ +
<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

+ + + +

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:

+ + + +

Learn more

+ + diff --git a/files/ja/learn/html/index.html b/files/ja/learn/html/index.html new file mode 100644 index 0000000000..fa11f9e2b9 --- /dev/null +++ b/files/ja/learn/html/index.html @@ -0,0 +1,61 @@ +--- +title: 'HTML の学習: ガイドとチュートリアル' +slug: Learn/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - Topic + - ガイド + - トピック + - 初心者 + - 学習 + - 導入 +translation_of: Learn/HTML +--- +
{{LearnSidebar}}
+ +

ウェブサイトを構築するためには、ウェブページの構造を定義するための基本的な技術である {{Glossary('HTML')}} 言語を知っておくべきでしょう。 HTML はウェブコンテンツをどのよう解釈するべきかを特定するために使用します。段落、リスト、見出し、リンク、画像、マルチメディアプレーヤー、フォーム、又は他の数多くの要素の一つ、又はユーザーが定義した新しい要素などです。

+ +

学習経路

+ +

HTML 学習を学びの旅の起点にすることが理想的です。HTML 概論を読んでみましょう。さらに学びたいと思ったなら、次は以下のような内容に移ることになるでしょう。

+ + + +

このトピックを開始する前に、最低限コンピュータを利用することに慣れておくべきでしょう。また、ウェブを受け手の側から、利用すること（つまり、ただ見たり、コンテンツを消費したりすること）にも慣れておくべきでしょう。また基本的な作業環境のセットアップもしておくべきでしょう。細かい話は、 基本的なソフトウェアをインストールするや、 ファイルを扱うに書かれています。今あげた二つの内容は、Web 入門という初心者向けの章に含まれています。

+ +

今回のトピックに入る前に、 ウェブ入門を一読しておくことをお薦めします。けれども、絶対にそうしておく必要があるというわけではありません。 HTML の基礎の記事でカバーされている大体の内容は、 HTML 概論の記事でもカバーされています。ただこちらのほうが、より詳細な記事になっています。

+ +

モジュール

+ +

このトピックは、以下の内容を含んでいます。そして、それらは、学んでいくのに好ましい順番で並んでいます。上から順番に学んでいくのが望ましいでしょう。

+ +
+
HTML 概論
+
この章では、土台作りをします。ここで、あなたはHTMLの重要な概念や構文に慣れたり、HTML を文章に適用していくのを見たり、どうやってハイパーリンクができるのか、HTML がウェブページを作るためにどのように利用されるのかを学ぶことになります。
+
マルチメディアと埋め込み
+
この章では、 HTML を使ってどうやったら、あなたのウェブページにマルチメディアを導入できるかを学びます。画像を取り込むためのいくつかのやり方、ビデオや音声、さらに、ウェブページそのものを埋め込む方法もここで学びます。
+
HTML 表
+
ウェブページ上の表形式のデータを理解しやすく{{glossary("Accessibility", "アクセスしやすい")}}方法で表現することは難しいことです。このモジュールでは、基本的な表のマークアップと、キャプションやサマリーの実装などのより複雑な機能をカバーしています。
+
HTML フォーム
+
フォームはウェブのとても重要な部分です。これらはウェブサイトとのやりとりに必要な多くの機能を提供します。登録とログイン、フィードバックの送信、商品の購入などが含まれます。このモジュールでは、フォームのクライアント側部分の作成を始めます。
+
+ +

よくある HTML の問題の解決

+ +

共通の問題解決に HTML を使う 「基本的な問題を解決するために HTML を使う」では、ウェブページを作った時に出てくる一般的な問題をどうやって解決するかを説明するためのコンテンツのセクションへのリンクを提示します。タイトルの扱い方や、画像やビデオを加えたり、コンテンツを強調したり、基本的なフォームを作ったりします。

+ +

関連情報

+ +
+
+
MDN 上の HTML (HyperText Markup Language) .
+
MDN における HTML に関する文書の入口で、詳細な要素と属性のリファレンスがあります。例えば、要素がが持っている属性は何か、属性の持つ値は何かなどを知りたかったら、これは最適な場所です。
+
+
diff --git a/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..0ceb370e9e --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,674 @@ +--- +title: 高度なテキスト処理 +slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Text + - abbreviation + - description list + - quote + - semantic +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+ +

テキストの書式設定のための HTML には他にも多くの要素がありますが、これは HTML テキストの基礎 には書かれていません。この記事で説明されている要素はあまり知られていませんが、知っていると役に立ちます。（これはまだいかなる意味でも完全なリストではありません）。ここでは、注釈、説明リスト、コンピューターコードとその他の関連テキスト、下付き文字と上付き文字、連絡先情報などのマーキングについて学習します。

+ + + + + + + + + + + + +
前提条件:HTML入門に載っている、基本的なHTMLに精通していること。HTML テキストの基礎に載っている、HTMLテキストフォーマット。
目的:高度な意味付け機能をマークアップするための、あまり知られていないHTML要素を学ぶ。
+ +

説明リスト

+ +

HTML テキストの基礎では、HTMLで 基本的なリストをマークアップする方法を見てきました、しかしたまに出てくる第3のリスト — 説明リスト — については触れていませんでした。このリストの目的は、項目とそれに関連する説明を一緒にマークアップすることで、用語の定義や、質問と回答などに使います。用語の定義の例を見てみましょう:

+ +
soliloquy
+In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
+monologue
+In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
+aside
+In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information
+ +

説明リストは他の種類のリストと違うラッパーを使います — {{htmlelement("dl")}} です; それぞれの用語が {{htmlelement("dt")}} (description term; 説明用語) 要素で囲まれて、それぞれの説明は {{htmlelement("dd")}} (description definition; 説明定義) 要素で囲まれます。例のマークアップを完了しましょう:

+ +
<dl>
+  <dt>独白( soliloquy )</dt>
+  <dd>ドラマでは、登場人物が自分自身にしゃべりかけ、内なる考えや感情や、そうなった過程を(他の登場人物ではなく)観客に対して表現します。</dd>
+  <dt>独白( monologue)</dt>
+  <dd>ドラマで、登場人物が自分の考えを観客や他の登場人物に伝わるように喋ります。</dd>
+  <dt>ひそひそ話</dt>
+  <dd>ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。</dd>
+</dl>
+ +

ブラウザーデフォルトのスタイルでは、説明を用語からいくらかインデントします。MDN のスタイルはこの慣習にほぼ従いますが、用語を太字にします。

+ +
+
独白 (soliloquy)
+
ドラマでは、登場人物が自分自身にしゃべりかけ、内なる考えや感情や、そうなった過程を(他の登場人物ではなく)観客に対して表現します。
+
独白 (monologue)
+
ドラマで、登場人物が自分の考えを観客や他の登場人物に伝わるように喋ります。
+
ひそひそ話
+
ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。
+
+ +

注意として、単独の用語に複数の説明をつけるのも許されます、例えば:

+ +
+
余談
+
ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。
+
文章では、現在のトピックに関連するが、主な流れには直接くっつけずに脇に置かれるコンテンツの節 (しばしば脇の囲みの中に置かれる)。
+
+ +

アクティブ学習: 定義をマークアップする

+ +

では実際に説明リストを使ってみましょう。ここでは以下の入力フィールドの生テキストをマークアップし、説明リストとして表示されるようにします。あなたがお好きな用語と説明を使って試してみることもできます。

+ +

もし何かミスをしても、リセットボタンでいつでも元に戻すことができます。詰まってしまったら「Show solution」ボタンを押して解答を見ましょう。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

引用

+ +

HTML には引用をマークアップするための機能もあります。どちらの要素を使用するかは、ブロックとインラインのどちらの引用をマークアップするかによって異なります。

+ +

ブロッククォート

+ +

ブロックレベルのコンテンツのセクション (段落、複数段落、リストなど) が他の場所から引用されている場合は、それを表すために {{htmlelement("blockquote")}} 要素で囲む必要があります。{{htmlattrxref("cite","blockquote")}} 属性内に引用のソースを指す URL を含めます。たとえば、次のマークアップは MDN の <blockquote> 要素ページから取得されます。

+ +
<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+ +

これをブロッククォートにするには、次のようにします。

+ +
<blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+ +

ブラウザのデフォルトのスタイル設定では、これがインデントされた段落として、それが引用であることを示すインジケータとして表示されます。MDN はこれを行いますが、さらにいくつかのスタイルを追加します。

+ +
+

HTML <blockquote> 要素 (または HTML Block Quotation 要素) は、囲まれたテキストが拡張引用符であることを示します。

+
+ +

インラインクォート

+ +

インラインの引用は、{{htmlelement("q")}} 要素を使用することを除いて、まったく同じ方法で機能します。例えば、以下のマークアップには MDN の <q> ページからの引用が含まれています。

+ +
<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q></p>
+ +
ブラウザーのデフォルトのスタイル設定では、これは引用符で囲まれた通常のテキストとしてレンダリングされ、次のようになります。
+ +
+ +

quote 要素 — <q> — は "段落区切りを必要としない短い引用のためのもの" です。

+ +

引用元

+ +

{{htmlattrxref("cite","blockquote")}} 属性の内容は役に立ちそうに見えますが、残念ながらブラウザ、スクリーンリーダーなどはこれについてあまり機能しません。 JavaScript または CSS を使用して独自のソリューションを作成しない限り、ブラウザに引用元の内容を表示させる方法はありません。引用元のソースをページ上で利用可能にしたい場合は、それをマークアップするためのより良い方法は、{{htmlelement("cite")}} 要素を quote 要素の隣 (または内側) に置くことです。これはまさに引用したリソースのタイトル — 例えば本の名前 — を含むことを意味しますが、とにかく、 <cite> 内のテキストを何らかの方法で引用ソースにリンクできない理由はありません。

+ +
<p>According to the <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote">
+<cite>MDN blockquote page</cite></a>:
+</p>
+
+<blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote">
+  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
+  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+
+<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/q">intended
+for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/q">
+<cite>MDN q page</cite></a>.</p>
+ +

引用は、デフォルトではイタリック体で表示されています。あなたは quotations.html の例で動作しているこのコードを見ることができます。

+ +

アクティブラーニング: 誰がそう言ったの？

+ +

もう一つのアクティブラーニングの時間です！ この例では、あなたにお願いします。

+ +
    +
  1. 中央の段落を cite 属性を含むブロッククォートにします。
    2. +
  2. 3番目の段落の一部を、cite 属性を含むインライン引用に変換します。
    3. +
  3. 各リンクに <cite> 要素を含めます。
    4. +
+ +

必要な引用元は以下のとおりです。

+ + + +

間違えた場合は、リセットボタンを使用していつでもリセットできます。本当に動けなくなったら、Show solution ボタンを押して答えを見てください。

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}

+ +

略語

+ +

Web を見回すときに見かけるもう1つのかなり一般的な要素は {{htmlelement("abbr")}} です — これは略語や頭字語を囲み、その用語の完全な展開 (これは{{htmlattrxref("title")}} 属性内に含まれる) を提供するために使用されます。例をいくつか見てみましょう。

+ +
<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
+
+<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
+ +

これらは次のようなものに見えます (用語が上に置かれると展開はツールチップに表示されます)。

+ +

We use HTML to structure our web documents.

+ +

I think Rev. Green did it in the kitchen with the chainsaw.

+ +
+

注: 別の要素だと、{{htmlelement("acronym")}} があります。これは基本的に <abbr> と同じことを行い、特に省略語ではなく頭字語を対象としていました。しかしこれは廃止され、ブラウザでは <abbr> ほどにはサポートされていませんでしたし、同じような機能を備えているため、両方を使用するのは無意味です。 代わりに <abbr> を使用してください。

+
+ +

アクティブラーニング: 略語をマークアップする

+ +

このシンプルなアクティブラーニング課題では、単に略語をマークアップしてください。以下のサンプルを使用するか、またはあなた自身のものと交換することができます。

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +

詳細な連絡先をマークアップする

+ +

HTML には連絡先の詳細をマークアップするための要素 — {{htmlelement("address")}} があります。これは単に連絡先の詳細を囲むだけです。例えば：

+ +
<address>
+  <p>Chris Mills, Manchester, The Grim North, UK</p>
+</address>
+ +

ただし {{htmlelement("address")}} 要素は、HTML 文書を作成した人の連絡先の詳細をマークアップするためのものであり、住所ではありません。マークアップが書かれている文書を書いたのがクリスならば、上記は大丈夫でしょう。このようなものでも大丈夫でしょう：

+ +
<address>
+  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

上付きと下付き

+ +

日付、化学式、数式などの項目をマークアップするときには、上付き文字と下付き文字を使用する必要がある場合があります。{{htmlelement("sup")}} と {{htmlelement("sub")}} 要素がこの仕事を処理します。例えば：

+ +
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
+<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
+ +

このコードの出力は次のようになります。

+ +

My birthday is on the 25th of May 2001.

+ +

Caffeine's chemical formula is C8H10N4O2.

+ +

If x2 is 9, x must equal 3 or -3.

+ +

コンピューターコードを表現する

+ +

HTML を使用してコンピュータコードをマークアップするために利用可能な要素がいくつかあります。

+ + + +

いくつか例を見てみましょう。これら (other-semantics.html サンプルファイルのコピーを入手してください) を試してみるべきです：

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, stop poking me!');
+}</code></pre>
+
+<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
+
+<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
+
+
+<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
+ +

上記のコードは次のようになります。

+ +

{{EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}

+ +

日付と時刻をマークアップする

+ +

HTML には、時間と日付を機械可読形式でマークアップするための {{htmlelement("time")}} 要素もあります。例えば：

+ +
<time datetime="2016-01-20">20 January 2016</time>
+ +

これはなぜ便利でしょうか？ 人間が日付を書き留める方法はたくさんあります。上記の日付は次のように書くことができます。

+ + + +

しかしこれらの異なる形式はコンピュータでは容易には認識できません。ページ内のすべてのイベントの日付を自動的に取得してカレンダーに挿入する場合はどうなりますか。{{htmlelement("time")}} 要素を使用すると、この目的のために、明確で機械可読な日時を付けることができます。

+ +

上記の基本的な例は単純な機械可読な日付を提供するだけですが、可能な他の多くのオプションがあります。例えば：

+ +
<!-- Standard simple date -->
+<time datetime="2016-01-20">20 January 2016</time>
+<!-- Just year and month -->
+<time datetime="2016-01">January 2016</time>
+<!-- Just month and day -->
+<time datetime="01-20">20 January</time>
+<!-- Just time, hours and minutes -->
+<time datetime="19:30">19:30</time>
+<!-- You can do seconds and milliseconds too! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Date and time -->
+<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
+<!-- Date and time with timezone offset-->
+<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
+<!-- Calling out a specific week number-->
+<time datetime="2016-W04">The fourth week of 2016</time>
+ +

まとめ

+ +

これで HTML テキストのセマンティクスに関する学習が終わりました。このコースで見たことが HTML テキスト要素の完全なリストではないことに注意してください — 私たちは必要不可欠なもの、そしてあなたがどこかで見るであろう、あるいは少なくとも面白いと思うかもしれないより一般的なものの一部をカバーしたいと思いました。もっと多くの HTML 要素を見つけるために、HTML 要素のリファレンス (インラインテキストセマンティクスセクションは始めるのに素晴らしい場所でしょう) を参照することができます。次回の記事では、HTML 文書のさまざまな部分を構造化するために使用する HTML 要素について説明します。

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..34d846cd4c --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,338 @@ +--- +title: ハイパーリンクの作成 +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Links + - Title + - absolute + - hyperlinks + - relative + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+ +

ハイパーリンクとは本当に重要なものです— ウェブが網状組織を構成しているのもハイパーリンクのおかげです。この記事ではリンクを作るために必要な構文を示し、リンクに関するベストプラクティスについて議論します。

+ + + + + + + + + + + + +
前提知識:HTML 入門に載っている、基本的な HTML に精通していること。HTML テキストの基礎に載っている、HTML テキストフォーマット。
目的:ハイパーリンクを効率的に実装する方法、複数のファイルを互いにリンクする方法を学ぶ。
+ + + +

ハイパーリンクは Web が提供する最も刺激的なイノベーションです。Web の始まりから機能していましたが、Web を Web たるものにするものです — 文書から別の文書 (やリソース) へとリンクできたり、文書の特定の部分にリンクできたり、簡単な Web アドレスからアプリを利用できるようになります (ネイティブアプリと比較して、そちらはインストールが必要なだけです)。あらゆる Web コンテンツはリンクに変換できて、クリック (またはその他の有効化) した時に Web ブラウザーは別の Web アドレス ({{glossary("URL")}}) に移動します。

+ +
+

メモ: URL は HTML ファイルや、テキストファイル、画像、テキスト文書、動画やオーディオファイルや、その他 Web に載せられるものを指すことができます。Web ブラウザーにそのファイルの扱い方・表示法がわからない場合、それを本当に開きたいのか聞く (この場合ファイルを開いたり扱ったりする義務は適切な端末上のネイティブアプリに渡されます) か、ファイルをダウンロードします (この場合あとで処理することができます)。

+
+ +

例えば、BBC のホームページでは、複数のニュース記事だけでなく、色々なサイトのエリアを指すリンク (ナビゲーション機能) や、ログイン/登録ページ (ユーザーツール) その他多数のリンクがあります。

+ +

bbc.co.uk のフロントページで、たくさんのニュース項目と、ナビゲーションメニューの機能を表示しています

+ + + +

基本的なリンクは、リンクにしたいテキスト (またはその他のコンテンツ、{{anch("Block level links")}} を参照) を {{htmlelement("a")}} 要素の中に囲むことで作成し、{{htmlattrxref("href", "a")}} (ハイパーテキスト参照またはターゲットとも) にリンク先にしたい Web アドレスを入れます。

+ +
<p>I'm creating a link to
+<a href="https://www.mozilla.org/ja/">the Mozilla homepage</a>.
+</p>
+ +

これは以下のような結果をもたらします。

+ +

I'm creating a link to the Mozilla homepage.

+ +

title 属性による補足情報の追加

+ +

あなたのリンクに追加したいかもしれない別の属性は title です。これには、ページに含まれる情報の種類や注意すべき事項など、リンクに関する補足的な有用な情報が含まれています。 例えば、

+ +
<p>I'm creating a link to
+<a href="https://www.mozilla.org/ja/"
+   title="The best place to find more information about Mozilla's
+          mission and how to contribute">the Mozilla homepage</a>.
+</p>
+ +

これにより、次のような結果が得られます (リンクがホバーされるとタイトルがツールチップとして表示されます)。

+ +

I'm creating a link to the Mozilla homepage.

+ +
+

メモ: リンクのタイトルはマウスのホバーでのみ表示されます。つまり、Web ページをナビゲートするためにキーボードコントロールに頼る人々はタイトル情報にアクセスするのが困難になります。タイトルの情報がページの使いやすさにとって本当に重要な場合は、通常のテキストに入れるなどして、すべてのユーザーがアクセスできる方法で表示する必要があります。

+
+ + + +

アクティブラーニングタイム：ローカルのコードエディタを使用して HTML ドキュメントを作成してください (私たちの入門用テンプレートでうまくいくでしょう)。

+ + + + + +

前述したように、ブロックレベル要素であっても、あらゆるコンテンツをリンクに変えることができます。リンクに変換したい画像がある場合は、その画像を <a></a> タグの間に配置することで実現できます。

+ +
<a href="https://www.mozilla.org/ja/">
+  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
+</a>
+ +
+

メモ: 今後の記事では Web 上での画像の使用についてさらに多くのことがわかります。

+
+ +

URL とパスに関する簡単な入門

+ +

リンク先を完全に理解するには、URL とファイルパスを理解する必要があります。このセクションでは、これを達成するために必要な情報を提供します。

+ +

URL (Uniform Resource Locator) は、Web 上のどこにあるのかを定義するテキストの文字列です。たとえば、Mozilla の日本語のホームページは https://www.mozilla.org/ja/ にあります。

+ +

URL はファイルを見つけるためにパスを使います。パスはファイルシステム内の目的のファイルが存在する場所を指定します。ディレクトリー構造の簡単な例を見てみましょう (creating-hyperlinks ディレクトリーを参照してください)。

+ +

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

+ +

このディレクトリー構造の root は creating-hyperlinks と呼ばれます。Web サイトを使用してローカルで作業する場合は、サイト全体が入る 1 つのディレクトリーがあります。ルート内には、index.html ファイルと contacts.html があります。実際の Web サイトでは、index.html が私たちのホームページまたはランディングページ (Web サイトまたは Web サイトの特定のセクションのエントリポイントとして機能する Web ページ) になります。

+ +

私たちのルートの中にも二つのディレクトリー — pdfs と projects  があります。これらはそれぞれ中に PDF (project-brief.pdf) と index.html ファイルというファイルがあります。ファイルシステム内の別の場所にある限り、1 つのプロジェクトに 2 つの index.html ファイルを非常にうまく入れることができることに注意してください。多くの Web サイトはそうします。2番目の index.html は、おそらくプロジェクト関連の情報のメインランディングページになります。

+ + + +
+

メモ: 例えば ../../../complex/path/to/my/file.html のように、必要に応じて、これらの機能の複数のインスタンスを複雑な URL に組み合わせることができます。

+
+ +

ドキュメントフラグメント

+ +

HTML 文書の上部だけでなく、HTML 文書の特定の部分 (ドキュメントフラグメントと呼ばれる) にリンクすることもできます。これを行うには、まずリンク先の要素に {{htmlattrxref("id")}} 属性を割り当てる必要があります。通常は特定の見出しにリンクするのが理にかなっているので、次のようになります。

+ +
<h2 id="Mailing_address">Mailing address</h2>
+ +

次にその特定の id にリンクするには、URL の最後にハッシュ/ポンド記号を付けてそれを含めます。次に例を示します。

+ +
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
+ +

同じドキュメントの別の部分にリンクするために、ドキュメントフラグメント参照を単独で使用することさえできます。

+ +
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>
+ +

絶対 URL vs 相対 URL

+ +

Web 上で見かける 2 つの用語は絶対 URL と相対 URL です。

+ +

絶対 URL: {{glossary("protocol")}} と {{glossary("domain name")}} を含む、Web 上の絶対位置で定義された位置を指します。たとえば、index.html ページが Web サーバーのルート内にある projects というディレクトリーにアップロードされ、その Web サイトのドメインが http://www.example.com の場合、そのページは http://www.example.com/projects/index.html (あるいは http://www.example.com/projects/ だけでも、URL で指定されていない場合、Web サーバーは index.html のようなランディングページを探してロードします) で入手可能です。

+ +

絶対 URL は、使用されている場所に関係なく、常に同じ場所を指します。

+ +

相対 URL: あなたがリンクしているファイルからの相対的な場所を指しています。たとえば、http://www.example.com/projects/index.html にあるサンプルファイルから同じディレクトリー内の PDF ファイルにリンクする場合、URL は単にファイル名 — 例えば project-brief.pdf — となり、追加情報は不要です。PDF が projects 内の pdfs という名前のサブディレクトリーにある場合、相対リンクは pdfs/project-brief.pdf (同等の絶対 URL は http://www.example.com/projects/pdfs/project-brief.pdf) になります。

+ +

相対 URL は内部で使用されているファイルの実際の場所によって、異なる場所を指します。たとえば、index.html ファイルを projects ディレクトリーから Web サイトのルート (最上位レベル、どのディレクトリーの中でもありません) に移動した場合、pdfs/project-brief.pdf 相対 URL リンクの内部は、http://www.example.com/pdfs/project-brief.pdf にあるファイルを指し、http://www.example.com/projects/pdfs/project-brief.pdf にあるファイルではありません。

+ +

もちろん、index.html ファイルを移動しても project-brief.pdf ファイルと pdfs フォルダーの場所が突然変わることはありません — これはリンクが間違った場所を指しているため、クリックしても機能しません。注意する必要があります。

+ + + +

リンクを書くときに従うべきベストプラクティスがいくつかあります。今これらを見てみましょう。

+ + + + + +

ページにリンクを張るのは簡単です。それだと十分じゃありません。現在の状況やツールの好みに関係なく、リンクをすべての読者がアクセスできるようにする必要があります。例えば：

+ + + +

具体的な例を見てみましょう。

+ +

良い リンクテキスト: Download Firefox

+ +
<p><a href="https://firefox.com/">
+  Download Firefox
+</a></p>
+ +

悪い リンクテキスト: Click here to download Firefox

+ +
<p><a href="https://firefox.com/">
+  Click here
+</a>
+to download Firefox</p>
+
+ +

その他のヒント

+ + + + + +

上記の説明から、絶対リンクを常に使用することが賢明だと思うかもしれません。結局のところ、ページが相対リンクのように移動されても壊れません。ただし、同じ Web サイト内の他の場所にリンクする場合は、できるだけ相対リンクを使用する必要があります (他の Web サイトにリンクする場合は、絶対リンクを使用する必要があります)。

+ + + +

HTML 以外のリソースへのリンク - 明確な道標を残す

+ +

(PDF や Word 文書のように) ダウンロードされたり (ビデオやオーディオのように) ストリーミングされたり、ポップアップウィンドウを開いたり、Flash ムービーを読み込んだりするなど、予期せぬ効果をもたらすリソースにリンクする場合は、混乱を避けるために明確な表現を追加します。例えば、それはかなりいらいらさせることができます。

+ + + +

ここではどのような種類のテキストを使用できるかを見るために、いくつかの例を見てみましょう。

+ +
<p><a href="http://www.example.com/large-report.pdf">
+  Download the sales report (PDF, 10MB)
+</a></p>
+
+<p><a href="http://www.example.com/video-stream/" target="_blank">
+  Watch the video (stream opens in separate tab, HD quality)
+</a></p>
+
+<p><a href="http://www.example.com/car-game">
+  Play the car game (requires Flash)
+</a></p>
+ +

ダウンロードへのリンクは download 属性を使う

+ +

ブラウザーで開くのではなくダウンロードするリソースにリンクしている場合は、download 属性を使用してデフォルトの保存ファイル名を指定できます。これは最新の Windows 版 Firefox へのダウンロードリンクの例です。

+ +
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
+   download="firefox-latest-64bit-installer.exe">
+  Download Latest Firefox for Windows (64-bit) (English, US)
+</a>
+ +

アクティブラーニング: ナビゲーションメニューの作成

+ +

この演習では、ナビゲーションメニューを使用していくつかのページをリンクして、複数ページの Web サイトを作成してください。これは Web サイトが作成される一般的な方法の 1 つです。同じナビゲーションメニューを含め、すべてのページで同じページ構造が使用されます。リンクをクリックすると、同じ場所に留まっているという印象が与えられ、異なるコンテンツが表示されます。

+ +

次の 4 ページのローカルコピーをすべて同じディレクトリーに作成する必要があります (完全なファイルリストについては navigation-menu-start ディレクトリーも参照してください)。

+ + + +

あなたがすべきことは：

+ +
    +
  1. リンク先のページの名前を含む、順序なしリストを 1 ページの指示された場所に追加します。ナビゲーションメニューは通常単なるリンクのリストなので、意味的には問題ありません。
    2. +
  2. 各ページ名をそのページへのリンクにします。
    3. +
  3. ナビゲーションメニューを各ページにコピーします。
    4. +
  4. 各ページで、その同じページへのリンクだけを削除します - ページに自分自身へのリンクを含めることは混乱を招き、無意味です。また、リンクがないことは、現在表示しているページを視覚的に思い出させるものです。
    5. +
+ +

完成した例では、次のようになります。

+ +

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

+ +
+

メモ: 動けなくなったり、正しいかどうかわからない場合は、ナビゲーションメニューのマークアップディレクトリーをチェックして正しい答えを確認できます。

+
+ + + +

クリックすると、リソースまたはページにリンクするのではなく、新しい送信メールメッセージを開くリンクまたはボタンを作成することができます。これは {{HTMLElement("a")}} 要素と mailto: URL スキームを使って行われます。

+ +

最も基本的で一般的に使用されている形式では、mailto: リンクは単に意図した受信者のメールアドレスを示します。例えば：

+ +
<a href="mailto:nowhere@mozilla.org">メールをどこにも送信しません</a>
+
+ +

この結果、次のようなリンクが表示されます。メールをどこにも送信しません。

+ +

実際、メールアドレスはオプションです。省略した場合 (つまり、{{htmlattrxref("href", "a")}} は単に "mailto:" です)、宛先アドレスがまだ指定されていないユーザーのメールクライアントによって、新しい送信メールウィンドウが開かれます。これは、ユーザーがクリックして自分が選択したアドレスに E メールを送信できる「共有」リンクとして役立つことがよくあります。

+ +

詳細の指定

+ +

メールアドレスに加えて、他の情報を提供することができます。実際、提供する mailto URL には標準のメールヘッダフィールドを追加できます。最も一般的に使用されるのは "subject"、"cc"、および  "body" です (これは本当のヘッダーフィールドではありませんが、新しいメールのための短い内容のメッセージを指定することを可能にします)。各フィールドとその値は、クエリ用語として指定されています。

+ +

これは cc、bcc、件名、本文を含む例です。

+ +
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
+  Send mail with cc, bcc, subject and body
+</a>
+ +
+

メモ: 各フィールドの値は URL エンコードされている必要があります。つまり、非印刷文字 (タブ、キャリッジリターン、改ページなどの不可視文字) とスペースのパーセントエスケープが含まれています。また、疑問符 (?) を使用してメイン URL とフィールド値を区別し、アンパサンド (＆) を使用して mailto: URL 内の各フィールドを区別します。これは標準の URL クエリ表記です。GET メソッドを読んで、どの URL クエリ表記がより一般的に使用されているかを理解してください。

+
+ +

以下は mailto の他の URL の例です。

+ + + +

まとめ

+ +

とにかく今のところ、それはリンクのためのそれです！
+ スタイルの設定を見始めると、コースの後半のリンクに戻ります。次に HTML について説明します。テキストのセマンティクスに戻って、役に立つと思われるより高度な機能や変わった機能について説明します。高度なテキストの書式設定は、次に行うことです。

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

+ +

このモジュール内の文書

+ + diff --git a/files/ja/learn/html/introduction_to_html/debugging_html/index.html b/files/ja/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..24c4e6c4d3 --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,185 @@ +--- +title: HTML のデバッグ +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML +tags: + - CodingScripting + - HTML + - エラー + - ガイド + - デバッグ + - バリデーション + - バリデーター + - ビギナー +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

HTML を書くことは良いですが、何か問題が生じた場合どうなります？また、コード内のどこにエラーがあるか見つけられますか？この記事では HTML 内のエラーの発見、および修正の手助けをしてくれるいくつかのツールを紹介します。

+ + + + + + + + + + + + +
前提条件:HTML の使い方、HTML の始め方や HTML テキストの基礎、そしてハイパーリンクの作成を網羅した例。
目的:HTML内の問題を見つけるためのデバッグ用ツールの基本的な使い方の学習。
+ +

デバッグは怖くない

+ +

何かのコードを書いている時、エラーが起きる (何かしらの間違いを犯したため、コードが全く機能しない、あるいは望んでいた通りに動かない) その恐ろしい瞬間まで、通常は全く問題ありません。たとえば、以下は Rust 言語で書かれた単純なプログラムを {{glossary("compile")}} しようとしたときに報告されるエラーを示しています。A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.ここに、比較的分かりやすいエラーメッセージがあります。 — "閉じていない二重引用符文字列"。リストを見れば、おそらく論理的に println!(Hello, world!"); に二重引用符がない可能性があるとわかるでしょう。しかし、プログラムが大きくなるにつれてエラーメッセージはすぐに複雑になり、解釈しにくくなります。簡単な場合でも、Rust について何も知らない人には少し威圧的に見えるかもしれません。

+ +

デバッグを怖がる必要はありません —  プログラミング言語やコードの作成、デバッグに慣れるための鍵は、言語とツールの両方に精通していることです。

+ +

HTML とデバッグ

+ +

HTML は Rust ほど理解するのが複雑ではありません。ブラウザが解析して結果を表示するまで、HTML は別の形式にコンパイルされません (解釈されますが、コンパイルはされません)。そして HTML の {{glossary("element")}} 構文は、Rust、{{glossary("JavaScript")}}、または {{glossary("Python")}} のような "実際のプログラミング言語" よりはるかに理解しやすいです。ブラウザが HTML を解析する方法は、プログラミング言語の実行方法よりもはるかに寛容です。これは良いことと悪いことの両方です。

+ +

許容コード

+ +

では寛容とはどういうことでしょうか。まあ、一般的にコードで何か間違ったことをするとき、出くわすことになる2つの主なタイプのエラーがあります：

+ + + +

HTML 自体は構文エラーに悩まされていません。ブラウザが構文解析エラーを許容して解析するからです。つまり、構文エラーがあってもページは表示されたままです。ブラウザには、誤って書かれたマークアップを解釈する方法を決定するための組み込みのルールがあるので、たとえそれが期待したものでなくても、実行することはできます。もちろん、これはまだ問題になる可能性があります。

+ +
+

メモ: Web の世界が最初に構築されたとき、HTML はそれほど厳格には解析されませんでした。これは、構文（シンタックス）が絶対的に正しいことを確認するよりも、人々がコンテンツを公開できることのほうが重要であると判断されたためです。当初から構文がより厳格に処理されていたとすれば、おそらく 現在のような Web は実現されなかったでしょう。

+
+ +

アクティブラーニング: 許容コードの学習

+ +

HTML コードの寛容な性質を学習する時が来ました。

+ +
    +
  1. まず、debug-example のデモをダウンロードしてローカルに保存します。このデモは、調査するために意図的にエラーを含むように書かれています (HTML マークアップは整形式ではないと言われており、整形式とは対照的です)。
    2. +
  2. 次にブラウザで開きます。 このようなものを見るでしょう：A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
    3. +
  3. これはすぐには良く見えません。ソースコードを調べて、問題が解決できるかどうか確認しましょう (本文の内容だけが表示されます)。 + 
    <h1>HTML debugging examples</h1>
+
+<p>What causes errors in HTML?
+
+<ul>
+  <li>Unclosed elements: If an element is <strong>not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  <li>Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
+      what is this?</em>
+
+  <li>Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+      homepage</a>
+</ul>
    +
    4. +
  4. 問題を見てみましょう。 +
      +
    • {{htmlelement("p","paragraph")}} と {{htmlelement("li","list item")}} 要素には終了タグがありません。上の画像を見ると、ある要素がどこで終わり、別の要素が始まるべきかを推測するのは簡単なので、これはマークアップのレンダリングにあまり悪い影響を与えていないようです。
      • +
    • 最初の {{htmlelement("strong")}} 要素には終了タグがありません。要素がどこで終了するのか分かりにくいので、もう少し問題があります。実際、残りのテキスト全体が強調されています。
      • +
    • このセクションはひどくネストされています： <strong>strong <em>strong emphasised?</strong> what is this?</em>。前の問題もあって、これがどのように解釈されたかを見分けるのは容易ではありません。
      • +
    • {{htmlattrxref("href","a")}} 属性値に、閉じ二重引用符がありません。これが最大の問題を引き起こしているようです。リンクはまったくレンダリングされていません。
      • +
    +
    5. +
  5. それでは、ソースコードのマークアップに対して、ブラウザがレンダリングしたマークアップを見てみましょう。これを行うには、ブラウザの開発者ツールを使用できます。ブラウザの開発者ツールの使い方に慣れていない場合は、Discover browser developer tools を数分確認してください。
    6. +
  6. DOM インスペクタでは、レンダリングされたマークアップがどのように見えるかを見ることができます。The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
    7. +
  7. DOM インスペクタを使用して、ブラウザが HTML エラーを修正しようとしている方法を確認するためにコードを詳しく調べてみましょう (もちろん Firefox で確認していますが、他のモダンなブラウザでも同じ結果が得られるはずです)。 +
      +
    • 段落とリスト項目には終了タグが付けられています。
      • +
    • 最初の <strong> 要素がどこで閉じられるべきかは明確ではないので、ブラウザはそれぞれ別々のテキストブロックをそれぞれの strong タグで、ドキュメントの一番下まで閉じています。
      • +
    • 不正確なネスティングはブラウザによってこのように修正されました： + 
      <strong>strong
+  <em>strong emphasised?</em>
+</strong>
+<em> what is this?</em>
      +
      • +
    • 二重引用符がないリンクは完全に削除されました。 最後のリスト項目は次のようになります。 + 
      <li>
+  <strong>Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: </strong>
+</li>
      +
      • +
    +
    8. +
+ +

HTML バリデーション

+ +

上記の例から、HTML が整形式であることを本当に確認したいことがわかります。しかし、どうですか？上のような小さな例では、行を検索してエラーを見つけるのは簡単ですが、巨大で複雑な HTML 文書についてはどうでしょうか。

+ +

最良の戦略は、HTML、CSS、およびその他の Web テクノロジを定義する仕様を管理する組織である W3C によって作成および管理されている Markup Validation Service を介して HTML ページを実行することです。この Web ページは入力として HTML ドキュメントを受け取り、それを通して、あなたの HTML の何が悪いのかを伝えるレポートを提供してくれます。

+ +

The HTML validator homepage

+ +

検証する HTML を指定するには、Web アドレスを指定するか、HTML ファイルをアップロードするか、または HTML コードを直接入力します。

+ +

アクティブラーニング: HTML ドキュメントの検証

+ +

サンプル文書でこれを試してみましょう。

+ +
    +
  1. まず、Markup Validation Service を1つのブラウザタブに読み込みます (まだ読み込まれていない場合)。
    2. +
  2. Validate by Direct Input タブに切り替えます。
    3. +
  3. 本文だけでなく、すべてのサンプルドキュメントのコードをコピーして、Markup Validation Service に表示される大きなテキスト領域に貼り付けます。
    4. +
  4. Check ボタンを押します
    5. +
+ +

これでエラーと他の情報のリストを提供してくれるはずです。

+ +

A list of of HTML validation results from the W3C markup validation service

+ +

エラーメッセージの解釈

+ +

エラーメッセージは通常役に立ちますが、あまり役に立たないこともあります。少し訓練すれば、これらを解釈してコードを修正する方法を考え出すことができます。エラーメッセージとその意味を見ていきましょう。各メッセージには行番号と列番号が付いているので、エラーを簡単に見つけることができます。

+ + + +

すべてのエラーメッセージが何を意味するのかわからない場合でも、心配しないでください — 一度にいくつかのエラーを修正してみることをお勧めします。 それから、どんなエラーが残っているかを示すためにあなたの HTML を再検証することを試みてください。以前のエラーを修正すると他のエラーメッセージも消えてしまうことがあります。つまりはドミノ効果で、単一の問題が原因でいくつかのエラーが発生することがあるということです。

+ +

出力に次のバナーが表示されたら、エラーがすべて解決したことがわかります。

+ +

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

+ +

まとめ

+ +

ここでは HTML のデバッグについて紹介しました。これは、後で CSS、JavaScript、およびその他の種類のコードのデバッグを始めるときに頼りになる便利なスキルです。
+ また HTMLモジュールの学習に関する記事の紹介の終わりにもなります。今、あなたは私たちの評価で自分自身をテストすることに進むことができます。最初のものは以下にリンクされています。

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ja/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..86cb004b5e --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,293 @@ +--- +title: ドキュメントと Web サイトの構造 +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Layout + - Page + - Site + - blocks + - semantics +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

{{glossary("HTML")}} は、ページの個々の部分 (「段落」や「画像」など) を定義するだけでなく、ウェブサイトの領域を定義するために使用される多数のブロックレベル要素 (「ヘッダー」、「ナビゲーションメニュー」、「メインコンテンツ列」など) も備えています。この記事では、基本的なウェブサイト構造を計画し、この構造を表す HTML を記述する方法について説明します。

+ + + + + + + + + + + + +
前提条件:「HTML を始めよう」で説明されている基本的な HTML の理解。「HTML テキストの基礎」で説明されている HTML テキストの書式設定。「ハイパーリンクの作成」で説明されている、ハイパーリンクのしくみ。
目的:セマンティックタグを使用して文書を構造化する方法、および単純なウェブサイトの構造を作成する方法を学びます。
+ +

文書の基本部分

+ +

ウェブページはひとつひとつの見た目が異なるものですが、全画面表示のビデオやゲームを表示している場合やアートプロジェクトの一部分である場合や単にまずく構成されている場合を除いて、よく似た標準コンポーネントを共有している傾向にあります:

+ +
+
ヘッダー:
+
通常は大きな見出しやロゴの付いた上部の大きな部分。通常、ウェブページ間を移動しても、ウェブサイトに関する主な共通情報がととどまっている場所です。
+
ナビゲーションバー:
+
サイトの主要セクションへのリンク。通常はメニューボタン、リンク、またはタブで表されます。ヘッダーと同様に、このコンテンツは通常、あるウェブページから別のウェブページへと一貫性を保っています — あなたのウェブサイト上でナビゲーションが矛盾していると、混乱して欲求不満のあるユーザーになるだけです。多くの Web デザイナーはナビゲーションバーを個々のコンポーネントではなくヘッダーの一部と見なしていますが、これは必須ではありません。実際、スクリーンリーダーは 2 つの機能を別々にした方が読みやすくなるため、2 つの機能を別々に使用するほうがアクセシビリティに優れていると主張する人もいます。
+
メインコンテンツ:
+
特定のウェブページのほとんどのユニークなコンテンツが含まれている中央の大きな領域。たとえば、見たいビデオ、読んでいる本編、表示したい地図、ニュースの見出しなど これは間違いなくページごとに異なるウェブサイトの一部です。
+
サイドバー:
+
いくつかの周辺情報、リンク、引用、広告など。通常これはメインコンテンツ (例えば、ニュース記事ページ、サイドバーに作者の略歴、または関連記事へのリンクなど) に含まれているものとの関連性があります。また、二次ナビゲーションシステムのように繰り返し発生する要素がある場合もあります。
+
フッター:
+
通常、注意事項、著作権表示、または連絡先情報が含まれているページの下部にある部分。これは共通の情報 (ヘッダーなど) を入れる場所ですが、通常、その情報はウェブサイト自体にとって重要ではありません。フッターは、人気のあるコンテンツにすばやくアクセスするためのリンクを提供することで、{{Glossary("SEO")}} の目的で使用されることもあります。
+
+ +

「典型的なウェブサイト」は下記のようなレイアウトになります:

+ +

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

+ +

コンテンツを構造化する HTML

+ +

上に示した簡単な例はきれいではありませんが、典型的なウェブサイトのレイアウト例を示すのには最適です。一部のウェブサイトはより多くのコラムを持っています、いくつかはかなり複雑ですが、アイデアはあります。適切な CSS を使用すれば、さまざまなセクションをラップして望みどおりの外観にするためにほとんどすべての要素を使用できますが、前述のとおり、セマンティクスを尊重し、適切な役割に適切な要素を使用する必要があります。

+ +

なぜならビジュアルがすべてを伝えるわけではないからです。私たちはナビゲーションメニューや関連リンクなど、コンテンツの最も有用な部分に目の見えるユーザーの注意を引くために、色とフォントサイズを使用します。しかし、例えば「ピンク」や「大きいフォント」のような概念があまり有用ではないと思われる視覚障害者についてはどうでしょうか。

+ +
+

注: 色覚障害者は世界の人口の約 4 ％を占めています。言い換えれば、男性 12 人に 1 人、女性 200 人に 1 人が色覚異常です。視覚障害のある人々は世界の人口の約 4〜5 ％を占めています (2012 年には全世界で 2 億 8,500 万人の人々がいましたが、総人口は約 70 億人でした)。

+
+ +

HTML コードでは、それらの機能に基づいてコンテンツのセクションをマークアップすることができます — スクリーンリーダーのような支援技術はそれらの要素を認識し、「メインナビゲーションを見つける」や「メインコンテンツを見つける」といった作業を手助けすることができます。
+ コースの前半で述べたように、適切な役割に適切な要素構造とセマンティクスを使用しないことによる影響は多くあります。

+ +

このようなセマンティックマークアップを実装するために、HTML には、そのようなセクションを表すために使用できる専用のタグが用意されています。次に例を示します。

+ + + +

アクティブ学習: 実例のコードを見てみる

+ +

上記の例は次のコードで表されています (この例は GitHub リポジトリにもあります)。上の例を見てから、下のリストを見て、どの部分がビジュアルのどの部分を構成しているかを確認してください。

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>My page title</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Here is our main header that is used across all the pages of our website -->
+
+    <header>
+      <h1>Header</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- A Search form is another commmon non-linear way to navigate through a website. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Search query">
+         <input type="submit" value="Go!">
+       </form>
+     </nav>
+
+    <!-- Here is our page's main content -->
+    <main>
+
+      <!-- It contains an article -->
+      <article>
+        <h2>Article heading</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>subsection</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Another subsection</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- the aside content can also be nested within the main content -->
+      <aside>
+        <h2>Related</h2>
+
+        <ul>
+          <li><a href="#">Oh I do like to be beside the seaside</a></li>
+          <li><a href="#">Oh I do like to be beside the sea</a></li>
+          <li><a href="#">Although in the North of England</a></li>
+          <li><a href="#">It never stops raining</a></li>
+          <li><a href="#">Oh well...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- And here is our main footer that is used across all the pages of our website -->
+
+    <footer>
+      <p>©Copyright 2050 by nobody. All rights reversed.</p>
+    </footer>
+
+  </body>
+</html>
+ +

コードを見て理解するためにしばらく時間をかけてください — コード内のコメントもそれを理解するのに役立ちます。ドキュメントのレイアウトを理解するための鍵は、正しい HTML 構造を作成し、それを CSS でレイアウトすることです。CSS トピックの一部として CSS レイアウトの学習を始めるまで、これを待ちます。

+ +

HTML レイアウト要素の詳細

+ +

すべての HTML セクショニング要素の全体的な意味を詳細に理解しておくとよいでしょう。これは、ウェブ開発でより多くの経験を積むようになるにつれて徐々に取り組むものです。  HTML 要素のリファレンスを読むことによって多くの詳細を見つけることができます。今のところ、これらは理解するべき主な定義です：

+ + + +

非セマンティックなラッパー

+ +

時にはいくつかのアイテムをまとめたり、コンテンツをラップしたりするための理想的なセマンティック要素が見つからない場合があります。いくつかの {{glossary("CSS")}} や {{glossary("JavaScript")}} を持つ単一のエンティティとしてそれらすべてに影響を与えるために単に要素のセットを一緒にグループ化したいことがあります。このような場合に、HTML は {{HTMLElement("div")}} と {{HTMLElement("span")}} 要素を提供します。これらを適切な {{htmlattrxref('class')}} 属性と一緒に使用して、簡単にターゲティングできるようにそれらに何らかの種類のラベルを提供することをお勧めします。

+ +

{{HTMLElement("span")}} はインラインの非セマンティック要素です。コンテンツをラップするより良い意味的なテキスト要素が思いつかないか、または特定の意味を加えたくない場合にだけ使うべきです。例えば：

+ +
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
+him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the
+play, the lights should be down low]</span>.</p>
+ +

この場合、編集者のメモは単に演劇の監督に追加の指示を与えることになっています。特別な意味を持つことは想定されていません。視覚のある人にとっては、CSS はメモを本文からわずかに離すように使われます。

+ +

{{HTMLElement("div")}} はブロックレベルの非セマンティック要素であり、使用するセマンティックブロック要素を考えない場合、または特定の意味を追加したくない場合にのみ使用してください。たとえば、電子商取引サイトで、いつでも買い物をすることができるショッピングカートのウィジェットを想像してみてください。

+ +
<div class="shopping-cart">
+  <h2>Shopping cart</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Silver earrings">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Total cost: $237.89</p>
+</div>
+ +

これは必ずしも <aside> ではありません。必ずしもページのメインコンテンツに関連しているわけではないからです (どこからでも見られるようにしたいのです)。ページのメインコンテンツの一部ではないので、<section> の使用を特に保証するものではありません。したがって、この場合は <div> で問題ありません。スクリーンリーダーのユーザーが見つけやすいように、道標として見出しを追加しました。

+ +
+

警告: Div は使い勝手が良いので使いすぎになりがちです。それらは意味的な価値を持たないので、HTML コードを乱雑にするだけです。より良い意味的な解決策がない場合にのみ使用するように気を付けてください。

+
+ +

改行と垂直方向のルール

+ +

時々使う、そして知りたい 2 つの要素は {{htmlelement("br")}} と {{htmlelement("hr")}} です：

+ +

<br> は段落内に改行を作成します。これは、住所や詩のように一連の短い固定線が必要な状況で硬い構造を強制する唯一の方法です。例えば：

+ +
<p>There once was a girl called Nell<br>
+Who loved to write HTML<br>
+But her structure was bad, her semantics were sad<br>
+and her markup didn't read very well.</p>
+ +

<br> 要素がないと、段落は 1行で表示されます (コースの前半で述べたように、HTML はほとんどの空白を無視します)。コード内でこれらを使用すると、マークアップは次のようにレンダリングされます。

+ +

There once was a man named O'Dell
+ Who loved to write HTML
+ But his structure was bad, his semantics were sad
+ and his markup didn't read very well.

+ +

<hr> 要素は、テキストの主題の変更 (トピックやシーンの変更など) を示す水平方向の罫線をドキュメントに作成します。視覚的には単に横線のように見えます。例として：

+ +
<p>ロンは荒廃した地獄の獣たちによって隅に追いやられた。怖がっていたが、彼の友達を守ることを決心していたので、彼は自分の杖を上げて戦いをする準備をした。</p>
+<hr>
+<p>その間、ハリーは家に座って、彼の使用料の声明を見つめてそして魅惑の苦痛の手紙が彼の窓を通って飛んで、そして彼の膝に着陸したときに次のスピンオフシリーズが出るだろう時を考えました。彼はそれをぼんやりと読んでため息をついた。「その時は仕事に戻るほうがいい」と彼は言った。</p>
+ +

このようにレンダリングされます：

+ +

ロンは荒廃した地獄の獣たちによって隅に追いやられた。怖がっていたが、彼の友達を守ることを決心していたので、彼は自分の杖を上げて戦いをする準備をした。

+ +
+

その間、ハリーは家に座って、彼の使用料の声明を見つめてそして魅惑の苦痛の手紙が彼の窓を通って飛んで、そして彼の膝に着陸したときに次のスピンオフシリーズが出るだろう時を考えました。彼はそれをぼんやりと読んでため息をついた。「その時は仕事に戻るほうがいい」と彼は言った。

+ +

簡単なウェブサイトを計画する

+ +

簡単なウェブページのコンテンツの構造を計画したら、次の論理的なステップは、ウェブサイト全体に掲載したいコンテンツ、必要なページ、および可能な限り最高のユーザーエクスペリエンスを実現するために、それらをどのように配置して互いにリンクさせるかを解決することです。これは {{glossary("Information architecture")}} と呼ばれます。大規模で複雑なウェブサイトでは、このプロセスに多くの計画を立てることがありますが、数ページの単純なウェブサイトでは、かなり単純で楽しいものになります。

+ +
    +
  1. ナビゲーションメニューやフッターコンテンツなど、(全部ではないにしても) ほとんどのページに共通の要素がいくつかあることに注意してください。たとえば、サイトがビジネスのためのものである場合、連絡先情報を各ページのフッターで利用可能にすることは良い考えです。すべてのページに共通にしたいものを書き留めます。the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. +
  2. 次に、各ページの構造をどのようにしたらよいかを大まかにスケッチします (上の単純なウェブサイトのようになります)。各ブロックがどうなるかに注意してください。A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. +
  3. さて、自身のウェブサイトに載せたい他のすべての (全ページに共通ではない) コンテンツをブレインストーミングしましょう — 大きなリストに書き留めます。A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. +
  4. 次に、これらすべてのコンテンツ項目をグループに分類して、どの部分が異なるページに共存しているかを把握します。これは {{glossary("Card sorting")}} と呼ばれるテクニックと非常によく似ています。The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. +
  5. それでは、大まかなサイトマップをスケッチしてみましょう。サイト上の各ページにバブルを付け、ページ間の典型的なワークフローを示すために線を引きます。
    + ホームページはおそらく中心にあり、すべてではないにしてもほとんどのページにリンクするでしょう。例外はありますが、小規模サイトのほとんどのページはメインナビゲーションから利用できるはずです。物事がどのように提示されるかもしれないかについてのメモも含めることをお勧めします。A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. +
+ +

アクティブラーニング: 自身のサイトマップを作成する

+ +

自身が作成したウェブサイトのために上記の演習を実行してみてください。何についてサイトを作りたいですか？

+ +
+

注: 作業をどこかに保存してください。後で必要になるかもしれません。

+
+ +

まとめ

+ +

この時点であなたはウェブページ/サイトをどのように構成するかについてより良い考えを持っているはずです。このモジュールの最後の記事では、HTML をデバッグする方法を学びます。

+ +

関連情報

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

+ +

このモジュール内

+ + diff --git a/files/ja/learn/html/introduction_to_html/getting_started/index.html b/files/ja/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..6cfcea234e --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,786 @@ +--- +title: HTML を始めよう +slug: Learn/HTML/Introduction_to_HTML/Getting_started +tags: + - Attribute + - Beginner + - CodingScripting + - Comment + - Element + - Guide + - HTML + - entity reference + - whitespace +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

この記事では HTML の不変的な基礎を扱って、始められるようにします。要素や属性などの重要な用語 (すでに聞き覚えはあるかもしれません)、それらが言語にどう組み込まれているか説明します。また、HTML 要素の構造、典型的な HTML ページの構造を見せて、その他の重要な基礎言語機能について説明します。それでは、 HTML の例とともに見ていきましょう。

+ + + + + + + + + + + + +
前提条件:基礎的なコンピュータリテラシー、基本的なソフトウェアのインストール、ファイル取扱いの基礎理解。
目的: +

HTML 言語の基礎習得と、いくつかの HTML 要素を書く練習

+
+ +

HTML とは？

+ +

{{glossary("HTML")}} (ハイパーテキスト・マークアップ・ランゲージ／Hypertext Markup Language) はプログラミング言語ではありません。HTML 言語は、訪れたウェブサイトの構成をブラウザに対して伝えるために使うマークアップ言語です。HTML 言語はウェブ開発者が望むこと次第で、複雑なものにも簡単なものにもなります。HTML は{{glossary("Element", "要素")}}の集まりからなり、コンテンツの一部を要素で囲む（マークアップする）ことで、特定の見せ方・動かし方に変えられます。囲むための{{glossary("Tag", "タグ")}}は、コンテンツの一部をハイパーリンク (ウェブ上の別ページへリンクすること) にしたり、単語を斜体にしたりすることができます。たとえば、次の一行を見てください：

+ +
My cat is very grumpy
+ +

この行を独立させたい場合、それを段落タグ ({{htmlelement("p")}}) 要素で囲んで段落指定することで実現できます:

+ +
<p>My cat is very grumpy</p>
+ +
+

注:HTML の要素は大文字小文字を区別しません。つまり大文字でも小文字でも書くことができます。例えば {{htmlelement("title")}} 要素は <title>、<TITLE>、<Title>、<TiTlE> などと書くことができて、どれも正しく動作します。最も良いのは、一貫性や信頼性、その他の理由のためにすべての要素を小文字で書くことです。

+
+ +

HTML 要素の分解

+ +

先ほどの段落タグの要素についてもう少し詳しく見ていきましょう:

+ +

+ +

この要素の主要な部分は次のとおりです:

+ +
    +
  1. 開始タグ(Opening tag): 要素名 (この場合は "p")、囲んでいる開き山括弧と閉じ山括弧で構成されています。これは要素が始まってその効果が開始する位置を宣言しますーこの場合、段落が始まる位置です。
    2. +
  2. 終了タグ(Closing tag): 要素名の前に一つのスラッシュが含まれることを除けば、開始タグと同じです。これは要素の終了を宣言しますーこの場合、段落が終わる位置です。終了タグを忘れるのは初心者にありがちなミスで、おかしな結果になってしまいます。
    3. +
  3. 内容(Content): これは要素の内容で、この場合、テキストそのものです。
    4. +
  4. 要素(Element): 開始タグ + 内容 + 終了タグが要素になります。
    5. +
+ +

実習: 最初の HTML 要素を作ってみる

+ +

以下の Input 欄にある行を <em> と </em> で囲んでください (要素を開始するために行の先頭に <em> を、要素を終了するために行の末尾に </em> をそれぞれ置きます) — これによりその行はイタリック体 (斜体) によって強調表示されるはずです！　この変化は Output 欄でリアルタイムで確認できているはずです。

+ +

もし入力ミスをしても、Reset ボタンを押すことでいつでもリセットできます。立ち往生してしまっても Show solution ボタンを押せばいつでもカンニングできます。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +

要素のネスト

+ +

要素の中に要素を入れることができますーこれは“ネスト” (入れ子) と呼ばれています。たとえば “My cat is very grumpy.” と記述したい場合、“very” という語を {{htmlelement("strong")}} 要素で囲むことができ、それはその語がより強く強調表示されることを意味します：

+ +
<p>My cat is <strong>very</strong> grumpy.</p>
+ +

ただし、要素が正しくネストされていることを確認する必要はあります: 上の例では、開始タグは最初に p 要素、その次に strong 要素が来ますから、終了タグは最初に strong 要素を、一番最後に p 要素を置くことになります。次は間違った例です:

+ +
<p>My cat is <strong>very grumpy.</p></strong>
+ +

タグのセットが互いに内側か外側なのかがはっきり分かるように、要素の開始と終了は正しく配置する必要があります。もし上の例のように互いに “掛け違って” しまっている場合、ブラウザーはそのマークアップが本来意図していただろうことを出来るだけ読み取ろうとはしますが、予期しない結果となることは当然に想定されます。ですからこうした “掛け違い” はやめましょう！

+ +

ブロック要素とインライン要素

+ +

HTML の要素には 2 つの重要なカテゴリーがあり、それは知っておくべきことです。すなわち、ブロックレベル要素とインライン要素です。

+ + + +

次の例で考えてみましょう:

+ +
<em>first</em><em>second</em><em>third</em>
+
+<p>fourth</p><p>fifth</p><p>sixth</p>
+
+ +

{{htmlelement("em")}} 要素はインライン要素なので、以下で確認できるように、最初の 3 つの要素は同じ行で他の要素と互いにスペースを空けずにたたずんでいます。一方で、{{htmlelement("p")}} 要素はブロックレベル要素なので、各要素はその上下にスペースを伴った新たな行で表示されます (この間隔はブラウザーが段落に対して適用するデフォルトの CSS のスタイルによるものです)。

+ +

{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}

+ +
+

注意: HTML5 においては要素カテゴリが再定義されています: 要素のコンテンツ・カテゴリーを見てください。これらの定義は従来のものに比べてより正確で、なおかつ曖昧さが少ないものとなっていますが、一方では、それらは “ブロックレベル要素” と “インライン要素” の対比よりも遥かに理解することが難しくなっています。このため、私たちはここのトピックを通じて従来の分類を堅持するつもりです。

+
+ +
+

注意: このトピックで使っている “ブロック” と “インライン” の用語は CSS ボックスのタイプと同じ名前で混同するでしょう。既定ではこれらは関係ありますが、CSS の表示タイプの変更は要素のカテゴリーを変更しませんし、どの要素が入っているべきでどの要素に入れられるべきかにも影響しません。HTML5 でこの用語が落とされた理由は、このとてもよくある混同を防ぐためです。

+
+ +
+

注意: ブロックレベル要素とインライン要素のリストを含む有用なリファレンスページがあります — ブロックレベル要素とインライン要素をご覧ください。

+
+ +

空要素

+ +

全ての要素が上述の開始タグ・コンテンツ・終了タグのパターンに従っているわけではありません。いくつかの要素は 1 つのタグのみで構成され、それは通常、ドキュメント内でそれが含まれている場所に何かを挿入したり埋め込むために使用されます。例えば、以下の {{htmlelement("img")}} 要素はウェブページ上のそれが含まれた場所に 1 つの画像ファイルを埋め込みます:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

これはページに次の画像を出力するはずです:

+ +

{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

注意: 空要素 (Empty elements) は Void 要素 (Void elements) と呼ばれていることがあります。

+
+ +

属性

+ +

要素は次のように属性(Attribute)を持つこともできます:

+ +

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

+ +

属性は実際のコンテンツの中で表示させたくない「要素に関する追加情報」を保有します。上のケースでは class 属性は、その要素に後でスタイル情報などが適用される対象であることを示すものとして使用できるような、固有の名前を持つことを許容します。

+ +

各属性は次の要件を満たす必要があります:

+ +
    +
  1. 属性名と要素名の間に 1 つの半角スペース (その要素内にすでに 1 つ以上の属性が設定されている場合は、併せて各属性名の間)
    2. +
  2. 属性名とそれに続く等号 (=)
    3. +
  3. 属性値。始端から終端までをクォーテーションマーク (引用符) で囲む
    4. +
+ +

実習: 要素に属性を追加する

+ +

要素のもう一つの例として {{htmlelement("a")}} (これを「アンカー」と言って、テキストの一部を囲んでハイパーリンクにするものです) を考えます。アンカー要素は多くの属性を持つことができますが、例えばこれらのものが使われます:

+ + + +

それでは以下の Input 欄を編集して、あなたの好きなサイトのリンクを張ってみましょう。まず、<a> 要素を追加します。次に、<a> 要素に href 属性と title 属性を追加します。最後に、新しいタブでリンク先を開くために target 属性を追加します。この変化は Output 欄でリアルタイムで確認できているはずです。まずテキストがハイパーリンクに変わります。そのリンクをホバーしてやる (マウスホバー) と title 属性のコンテンツが表示されます。そのリンクをクリックすると href 属性で指定したページに遷移します。要素名と各属性の間に半角スペースを挿入することに気を付けてください。

+ +

もし入力ミスをしても、Reset ボタンを押すことでいつでもリセットできます。立ち往生してしまっても Show solution ボタンを押せばいつでもカンニングできます。

+ + + +

{{ EmbedLiveSample('Playable_code2', 700, 360, "", "", "hide-codepen-jsfiddle") }}

+ +

真偽値属性

+ +

沢山の HTML ソースを見ていくうちに、属性値のない属性を発見するでしょう。このことは文法的に許されています。こういった属性のことを「真偽値属性」と言います。真偽値属性は一般的に属性名と同じ属性値だけを取ることができます。例えば、input 要素の {{htmlattrxref("disabled", "input")}} 属性は真偽値属性ですが、下記のように記述した場合、 input 要素が "使用不可能に" (disabled, グレーアウト表示) なり、データを入力することができなくなります。

+ +
<input type="text" disabled="disabled">
+
+ +

真偽値属性は、略記法として次のように書くことが文法的に許されています。比較のために "使用不可能に" (disabled, グレーアウト表示) しなかった場合の input 要素も併記しています。

+ +
<input type="text" disabled>
+
+<input type="text">
+ +

上記の HTML コードの結果は下記のようになります。

+ +

{{ EmbedLiveSample('Boolean_attributes', 700, 50, "", "", "hide-codepen-jsfiddle") }}

+ +
+

訳者注：下記の様な真偽値属性の属性名と属性値を一致させない記述は HTML の仕様としては誤りです。このような誤りを防ぐために、真偽値属性の真偽値は必ず省略するようにしましょう。

+ +
<input type="text" disabled="foo bar baz">
+
+
+ +

属性値のクォーテーションマークを省略することについて

+ +

ウェブ (正式にはワールド・ワイド・ウェブ) 上の HTML 文章の中には奇妙なマークアップスタイルで記述されているものもあります。その一つとして、「属性値をクォーテーションマークで囲まない」というのがあります。このスタイルでは正しく動作する場合としない場合があります。先ほどの <a> タグの例で言うと、このような href 属性だけの基本的な使い方では正しく動作します。

+ +
<a href=https://www.mozilla.org/>favourite website</a>
+ +

しかし、例えば次のように半角スペースの入った title 属性を追加すると動作がおかしくなります。

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>
+ +

この場合だと「title 属性は "The" という属性値を持ち、それとは別に <a>要素が Mozilla と homepage という真偽値属性を持つ」というようにブラウザーは誤解します。このように、「属性値をクォーテーションマークで囲まない」ことによる違いは HTML を見ただけでは分からないので、コードのエラーや予期しない動作の原因となります。このコードをブラウザーに解釈させたものを下に用意しましたので、このリンク上をホバーしてツールチップに表示される文字がどうなっているかを確認してみましょう。

+ +

{{EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

安全なコードを書くために、必ず属性値にはクォーテーションマークをつけましょう。そうすれば、先ほどのような問題を避けることができ、コードの可読性も向上します。

+ +

ダブルクォートかシングルクォートか？

+ +

この記事では属性を囲むクォーテーションマークとしてすべてダブルクォート ( " ) を使用しています。しかし誰かの HTML でシングルクォート ( ' ) を見ることがあるかもしれません。これは書き方の問題なので、属性値はダブルクォートで囲んでもシングルクォートで囲んでも構いません。例えば次の 2 つの行は等価です。

+ +
<a href="http://www.example.com">A link to my example.</a>
+
+<a href='http://www.example.com'>A link to my example.</a>
+ +

但し、これらを混在させて使うことはできません。次の記述は誤りです。

+ +
<a href="http://www.example.com'>A link to my example.</a>
+ +

属性値をダブルクォートで囲んでいる場合は、その内部でシングルクォートを書くこともできますし、シングルクォートの中でダブルクォートを書くこともできます。

+ +
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+ +

ただし、両方の引用符が同じ種類 (一重引用符または二重引用符) の引用符の中に引用符を含める場合は、引用符に HTML エンティティを使用する必要があります。たとえば、これは壊れます：

+ +
<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
+ +

だからあなたはこのようにする必要があります：

+ +
<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
+ +

HTML 文書の構成

+ +

これまで、個々の HTML の要素の基礎を説明しましたが、それら単体ではあまり有用ではありません。ここでは個々の HTML の要素を使って HTML ページを構成する方法を説明していきます。

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

上記の HTML 文書を例に、順に解説していきます。

+ +
    +
  1. +

    <!DOCTYPE html>: いわゆる "doctype" というものです。 HTML の黎明期(1991～1992年あたり)には、 "doctype" というものは HTML の文法セットへのリンクとしての役割を持っていました。当時の "doctype" の記述は自動エラーチェックが容易であるなどの長所も持っていました。当時の "doctype" は、次のようなものでした。

    + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + +

    しかし、今日においては誰も HTML における "doctype" の本来的な役割なんて考えていません。 "doctype" はつじつま合わせのための歴史的な産物です。今日においてには <!DOCTYPE html> は正しい "doctype" と認識させるための最も簡潔な記述です。 "doctype" について、これ以上知る必要はありません。

    +
    2. +
  2. <html></html>: {{htmlelement("html")}} 要素。 HTML 文書は<html>要素 1 つだけからなります。この要素はページ全体であり、<html> タグはページ全体を囲んでいます。<html> 要素はルート要素とも呼ばれます。
    3. +
  3. <head></head>: {{htmlelement("head")}} 要素。この要素は、HTML ページに入れておきたいが見せたくないすべてのものを入れておくコンテナーの働きをします。例えば、検索結果に出したいページのキーワードや説明や、ページのスタイルを指定するための CSS や、文字エンコーディングの定義などが含まれます。より詳しくは、このシリーズの次の記事で詳しく説明します。
    4. +
  4. <meta charset="utf-8">: この要素はこの文書が UTF-8 という文字コードを使用しているということをブラウザーに伝えるためのものです。UTF-8 は世界中の自然言語の大半をカバーしている文字コードです。重要なこととしてあらゆるテキストコンテンツを扱うことができます。文字コードとして UTF-8 を指定しない手はなく、そうしておけば後で説明する問題を回避できます。
    5. +
  5. <title></title>: {{htmlelement("title")}} 要素。これはページのタイトルを指定するもので、ページが読み込まれたブラウザーのタブに表示されます。また、このページをブラウザー上でブックマークしたりお気に入りに追加したりすると <title> 要素の内容がページの説明として使われます。
    6. +
  6. <body></body>: {{htmlelement("body")}} 要素。この中にユーザーがページを訪問した時に表示したいコンテンツ (例えば、テキスト、画像、ビデオ、ゲーム、オーディオトラック等) を記述します。
    7. +
+ +
+

訳者注: 1. の "doctype" は文書型宣言(DTD)と呼ばれております。 HTML 以外のマークアップ言語(XML, SVG, MathML等)においては今日においても重要な意味を持っています。

+
+ +

実習: HTML 文書をカスタマイズする

+ +

もし HTML 文書を書く練習をローカルコンピューターで試したい場合は、次のようにします。

+ +
    +
  1. 上記の HTML ページのコードサンプルの全体を選択して「コピー」します。
    2. +
  2. テキストエディタ上で新規ファイルを作成します。
    3. +
  3. 新規テキストファイルの中で「貼り付け」、または「ペースト」します。
    4. +
  4. index.html という名前でファイルを保存します。
    5. +
+ +
+

脚注: 元となる HTML テンプレートは MDN ラーニングエリア GitHub リポジトリ にも置いてあります。

+
+ +

ウェブブラウザーでこのファイルを開くとレンダリングされた HTML 文書が表示されます。コードを編集した場合は、ブラウザー上でページの更新 (または、再読み込み) を行うと編集結果が反映されます。最初はこんな表示です。

+ +

A simple HTML page that says This is my pageこの実習では、 上に示したようにあなたのコンピューター内部でコード編集してもいいですが、この節の下の方に編集できるフォーム (Input, Output と付されているものです) を使うこともできます。スマートフォンなどで学習する際はこのフォームが役に立つと思います。この節のフォームの Input の部分は、 {{htmlelement("body")}} 要素の中身を表しています。以下の手順を踏んで、ページをカスタマイズしてみましょう。

+ +
+

訳者注: 下記の演習項目は後で詳しく学習できますので、できなくても構いません。

+
+ + + +

間違えた場合は Reset ボタンを押すことで元に戻すことができます。分からない場合は Show solution ボタンを押して答えを見てみましょう。

+ + + +

{{ EmbedLiveSample('Playable_code3', 700, 360, "", "", "hide-codepen-jsfiddle") }}

+ +

HTML 内の空白

+ +

上記の例において、大量の半角スペースが挿入されていることに気づいたかもしれません。大量の半角スペースはあっても無くても構わないものです。次の２つのコードスニペット (それ単体では動作しないコード例のこと) は等価です。

+ +
<p>Dogs are silly.</p>
+
+<p>Dogs        are
+         silly.</p>
+ +

半角スペースをどれ程入力しても (そして、どれ程改行しても)、 HTML パーサはそれを１つの半角スペースとして認識します。ではどうして半角スペースを沢山入力するのでしょうか。それは HTML コードの可読性を向上させるためです。 HTML のコードがいいフォーマット(書式)で記述されていて、１行の中に沢山タグをゴチャゴチャに詰め込まなければ、そのコードの中がどうなっているかが分かりやすくなります。この記事ではインデント(字下げ)として半角スペース２文字分を挿入しています。 HTML のフォーマット(例えば、インデントとして半角スペース何文字分を挿入するのか等)については HTML の書き手によって様々ですが、フォーマットを意識して記述しなければなりません。

+ +
+

訳者注: 全角スペースは、 HTML の文法としては半角スペースや改行とは全く異なる扱いになるので、全角スペースを用いてインデントを行ったりしないでください。また、日本語の文章を段落要素<p>の中で改行すると、半角スペースが挿入されます。

+ +
<p>私は日本人です。
+四季を好みます。</p>
+ +

従って、段落要素(<p>)の中では一切改行はしないでください。ただ、長い文章では段落要素の中身が横に長くなってしまいます。その場合は、テキストエディタで「右端で折り返す」などの設定を行ってみてください。

+ +
<p>私は日本人です。四季を好みます。</p>
+ +

段落要素の中で改行したい場合は、改行要素<br>を用います(文章内の会話や、詩などに用います)。

+ +
<p>彼は言いました。<br>
+「私は日本人です。四季を好みます。」<br>
+私は彼の発した突然の一言にはっと驚きました。</p>
+
+ +

実体参照: HTML に特殊文字を含める

+ +
+

訳者注: HTML エンティティ、実体参照、文字参照、文字実体参照、は、それぞれほぼ同じ意味で用いられます。

+
+ +

HTML では<、>、"、'、&の５つの文字は特殊文字と呼ばれています。これら５つの文字は HTML の文法自身の一部です。ではこれらの文字そのものを組版したい場合はどうすればいいのでしょうか。例えば「 You & Me 」や「 x < y 」等の表記をしたい場合です。

+ +

そのような場合は、「文字参照」を使用する必要があります。文字参照とは「文字を表す特別なコード」のことであり、これを使うことで正確な組版を行うことができます。文字参照は必ずアンパサンド (&) で始まり、セミコロン(;)で終わります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
実際の文字等価な文字参照
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

次の例では Web 技術について記述している段落要素を２つ並べています。

+ +
<p>HTML では、<p>要素で段落を定義します。</p>
+
+<p>HTML では、&lt;p&gt;要素で段落を定義します。</p>
+
+ +

上記の例をブラウザーに解釈させたものを下記に出力しています。１つ目の段落の出力が間違っていることが分かるかと思います。2 つ目の <p> を新しい段落の始まりとして認識しているためです。２つ目の段落は正しく出力されています。山括弧(<、>)を文字参照に置き換えているためです。

+ +

{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}

+ +
+

脚注: HTML で使用することのできる文字実体参照のリストはこの Wikipedia の記事で確認することができます: List of XML and HTML character entity references.

+
+ +

HTML におけるコメント

+ +

大抵のプログラミング言語同様、HTML においてもコード内にコメントを書くことができます。コメントはブラウザーによって無視されるので、組版には反映されません。コメントの目的としては、 HTML コードがどのように動作するのかや、コードの別の部分がどのように動作するのかを述べるることできます。コメントは、 HTML のコードを書いて半年以上経ってから自分で見返して、自分が何をしたのかを思い出すことができない時に大変有用となります。また、自分のコードを他の人に読んでもらう時にも有用です。

+ +

HTML ファイル内の一部をコメントにするには、その箇所を特別なマーカーの <!-- と --> で囲みます。例えば次のような感じです。

+ +
<p>私はコメントの外にいます。</p>
+
+<!-- <p>私はコメントの中にいます。</p> -->
+ +

下記を見ると、最初の段落は表示されますが、次の段落は表示されないことが分かります。

+ +

{{ EmbedLiveSample('HTML_comments', 700, 100) }}

+ +

要約

+ +

この記事の最後にたどり着きました — HTML のほんの初歩のツアーを楽しんでこられたことを望んでいます！ここではこの言語がどのようなものか、基本的にどうやって動作するのかを理解し、いくつかの要素と属性を書くことができるようになったでしょう。あなたがいる場所は完璧な場所です、続きの記事ではすでに見てきたことをもっと詳細に経験して、いくつか新しい言語機能を紹介します。引き続き注目！

+ +
+

脚注: さて、 HTML についてより深く学習するために CSS (Cascading Style Sheets)の基礎についても理解しておきましょう。 CSS はウェブページのスタイルをカスタマイズするために使用します。具体的には、テキストのフォントや色を変えたり、ページレイアウトを設定したりといったことがあげられます。 HTML と CSS は相互補完、つまり２つで１つです。両方学習するとすぐ気づくでしょう。

+
+ +

関連情報

+ + + +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

このモジュール内

+ + diff --git a/files/ja/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ja/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..c4222a362d --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,717 @@ +--- +title: HTML テキストの基礎 +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Introduction to HTML + - Learn + - Text + - headings + - paragraphs + - semantics +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
 {{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

HTML の役割の 1 つはテキストに構造と意味 ({{glossary("semantics", "セマンティクス")}}ともいう) を与え、ブラウザーが正しく表示できるようにすることです。この記事では {{glossary("HTML")}} を使ってテキストのページを構造化する方法、見出しとパラグラフをつけたり、言葉を強調したり、リストを作ったり、などを説明します。

+ + + + + + + + + + + + +
前提条件:HTML 入門に載っている、基本的な HTML に精通していること。
目的:基本的なテキストページをマークアップして構造や意味を設定する方法を学ぶ — パラグラフ、見出し、リスト、強調、クォーテーションを含む。
+ +

基本: 見出しとパラグラフ

+ +

たいていの構造化されたテキストは見出しとパラグラフで構成されていて、それは物語でも、新聞でも、大学の教科書でも、雑誌などでも、何を読んでいるのかにかかわらずそうです。

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

構造化されたコンテンツは読み手にとって読みやすく楽しい体験になります。

+ +

HTML では、各パラグラフは {{htmlelement("p")}} 要素で囲む必要があり、次のようです:

+ +
<p>I am a paragraph, oh yes I am.</p>
+ +

それぞれの見出しは見出しの要素に囲まれます:

+ +
<h1>I am the title of the story.</h1>
+ +

6 つの見出し要素があります — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}},  {{htmlelement("h6")}} です。各要素は文書内で別々のコンテンツレベルを表現します; <h1> は主な見出しで、<h2> はサブの見出しで、<h3> はサブのサブの見出しを表して、といったように。

+ +

構造的な階層を実装する

+ +

例として, 物語を考えましょう。 <h1> は物語の題名を表し、<h2> は各章の題名を表し、<h3> は各章の節を表す、といったようでしょう。

+ +
<h1>The Crushing Bore</h1>
+
+<p>By Chris Mills</p>
+
+<h2>Chapter 1: The dark night</h2>
+
+<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
+
+<h2>Chapter 2: The eternal silence</h2>
+
+<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
+
+<h3>The specter speaks</h3>
+
+<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
+ +

階層が意味を成す限り、関係する要素が何を意味するかは正にあなた次第です。このような構造を作成する際には、いくつかのベストプラクティスを覚えておく必要があります:

+ + + +

なぜ構造が必要なのか？

+ +

この質問に答えるには、text-start.html を見てください — この記事の動作例の開始点です (すてきなハマスのレシピです)。あとの練習で必要になるため、ローカルマシンにこのファイルのコピーを保存します。この文書の本文は現在、複数の部分のコンテンツが入っています — まったくマークアップされていませんが、改行で区切られています (次の行に移るのに Enter/Return を押します)。

+ +

しかし、この文書をブラウザーで開くと、テキストが 1 つの大きな塊に見えるでしょう!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

これはコンテンツの構造を与える要素がないためですので、ブラウザーはどれが見出しでどれが本文かがわかりません。さらには:

+ + + +

このため、コンテンツに構造的なマークアップが必要となります。

+ +

アクティブラーニング: コンテンツに構造を与える

+ +

ライブな実例に飛び込んでみましょう。下記の実例で、入力フィールドの生テキストに要素を与え、出力フィールドに見出しと2つの段落が見えるようにしてみましょう。

+ +

間違えた場合、リセットボタンでいつでもリセットできます。行き詰まったら、「Show solution(答えを見る)」ボタンで回答を見ます。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

なぜセマンティクスが必要なのか？

+ +

私たちはあらゆる場面でセマンティクスに頼っています。 —私たちは日常にある物の機能が何かを判断するために過去の経験を頼りにします。つまり、私たちは物を見れば、 それがどのような機能をもつかを知っています。  例えば、赤信号は「止まれ」を、「青信号」は「進め」を意味すると期待します。もしも、間違ったセマンティクスを適用すれば、ものごとは一瞬にして扱いにくくなることがあります。(赤を「進め」の意味で使っている国はあるのでしょうか？そんな国がないといいのですが。 )

+ +

同様に、正確な要素を使い、コンテンツに正しい意味や機能、見た目をを与えられているかどうかを確かめる必要があります。この文脈では、{{htmlelement("h1")}} 要素は要素によって囲んだテキストを「ページのトップレベル見出し」の役割 (または意味) にします。

+ +
<h1>This is a top level heading</h1>
+ +

既定では、ブラウザーはヘッダに見えるようにこれを大きなフォントサイズにします (もっとも、CSSを使えばあなたのやりたいようにできますが)。より重要なことは、その意味する値が (上記で述べましたが) サーチエンジンと画面を読む人によって、異なる方法で使われるということです。

+ +

一方、任意の要素をトップレベル見出しのように見せることもできます。以下の例を見てください。

+ +
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
+ +

これは {{htmlelement("span")}} 要素です。これにはセマンティクスはありません。意味を与えずにCSSを適用させたいとき (あるいはJavaScriptで何かをしたいとき)、コンテンツを囲むために使います (このあと、このコースではこの要素についてより多くのことについて発見することになります)。CSS の中にはトップレベル見出しのような見栄えにするために使えるものもあります。しかし、意味的な値はないため、上記で述べたような付加的な恩恵を得ることはできないでしょう。その役割に応じた適切な HTML 要素を使うことは良い考え方です。

+ +

リスト

+ +

さて、リストに目を向けてみましょう。リストは生活のあらゆる場所にあります。買い物のリストから、自分の家にたどり着くために意識することなく毎日従っている経路のリスト、このチュートリアルであなたが見ている説明のリストまであります。Web 上にもリストはどこにでもあり、気にかけるものに応じて、3種類が用意されています。

+ +

順序なし

+ +

順序なしリストは、買い物リストに使うときのように、項目の並びに関係がないものについてマークアップするときに使います。

+ +
milk
+eggs
+bread
+hummus
+ +

すべての順序なしリストは {{htmlelement("ul")}} で開始し、すべてのリストの項目を囲みます。

+ +
<ul>
+milk
+eggs
+bread
+hummus
+</ul>
+ +

最後にリストの項目をそれぞれ {{htmlelement("li")}} (list item)で囲みます。

+ +
<ul>
+  <li>milk</li>
+  <li>eggs</li>
+  <li>bread</li>
+  <li>hummus</li>
+</ul>
+ +

アクティブラーニング: 順序なしリストをマークアップする

+ +

自身の HTML 順序なしリストを作るために下のライブサンプルを編集してみましょう。

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

+ +

順序つき

+ +

順序付きリストは、以下のような一連の指示のように、項目に順序があるリストのことです。

+ +
Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road
+ +

マークアップの構造は順序なしリストと同じです。違うのは、<ul> の代わりに {{htmlelement("ol")}} 要素でリストの項目をそれぞれ囲まなければならないということです。

+ +
<ol>
+  <li>Drive to the end of the road</li>
+  <li>Turn right</li>
+  <li>Go straight across the first two roundabouts</li>
+  <li>Turn left at the third roundabout</li>
+  <li>The school is on your right, 300 meters up the road</li>
+</ol>
+ +

アクティブラーニング: 順序つきリストをマークアップする

+ +

自身の HTML 順序つきリストを作るために下のライブサンプルを編集してみましょう。

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

+ +

手をうごかしてみよう: Marking up our recipe page

+ +

この記事のこの時点で、レシピページの例をマークアップするために必要な情報はすべて揃っています。text-start.html 開始ファイルのローカルコピーを保存してそこで作業を行うか、または下記の編集可能な例で実行するかを選択できます。編集した例に記入すると、次にページを開いたときに失われるため、ローカルで実行するのがおそらくよりよいでしょう。どちらにも長所と短所があります。

+ + + +

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

+ +

立ち往生した場合は、いつでも [ソリューションを表示] ボタンを押すか、github レポジトリの text-complete.html の例をご覧ください。

+ +

入れ子のリスト

+ +

あるリストを別のリストの中に入れ子にしてもまったく問題ありません。いくつかのサブ箇条書きを最上位の箇条書きの下に配置することをお勧めします。 レシピの例から2番目のリストを見てみましょう。

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.</li>
+  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+  <li>If you want a smooth hummus, process it for a longer time.</li>
+</ol>
+ +

最後の2つの箇条書きはそれらの前の箇条書きと非常に密接に関係しているので (それらはその箇条書きの下に収まるサブ命令や選択のように読みます)、それらを自身の順序なしリストの中に入れ子にして現在のリストの中に入れることは意味があります。4番目の箇条書き。 これは次のようになります。

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.
+    <ul>
+      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+      <li>If you want a smooth hummus, process it for a longer time.</li>
+    </ul>
+  </li>
+</ol>
+ +

前のアクティブラーニングの例に戻り、2番目のリストを次のように更新してみてください。

+ +

強調と重要性

+ +

人間の言語では、文の意味を変えるために特定の単語を強調することが多く、特定の単語を何らかの意味で重要または異なるものとしてマークしたい場面がよくあります。HTML は、そのような効果でテキストコンテンツをマークアップすることを可能にするためにさまざまなセマンティック要素を提供します。そしてこのセクションでは、最も一般的なもののいくつかを見ていきます。

+ +

強調

+ +

話されている言葉を強調したいときは、ある言葉を強調して、自分の言っていることの意味を微妙に変えます。同様に、書かれた言語では、イタリック体でそれらを置くことによって単語を強調する傾向があります。たとえば、次の2つの文は意味が異なります。

+ +

I am glad you weren't late.

+ +

I am glad you weren't late.

+ +

最初の文は、その人が遅刻していないことを本当に安心しているように思われます。対照的に、2番目のものは皮肉的または受動的 - 攻撃的に聞こえ、その人が少し遅れて到着したという不快感を表しています。

+ +

HTML では、このようなインスタンスをマークアップするために {{htmlelement("em")}} (強調) 要素を使用します。文書を読みやすくするだけでなく、これらはスクリーンリーダーによって認識され、異なるトーンの音声で話されます。ブラウザではデフォルトでイタリック体になっていますが、純粋にイタリック体にするだけの場合にはこのタグを使用しないでください。そのためには、{{htmlelement("span")}} 要素と CSS、あるいは {{htmlelement("i")}} 要素 (下記参照) を使用します。

+ +
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+ +

重要性が高い

+ +

重要な言葉を強調するために、話し言葉でそれらを強調し、そして書面でそれらを bold にする傾向があります。例えば：

+ +

This liquid is highly toxic.

+ +

I am counting on you. Do not be late!

+ +

HTML では、このようなインスタンスをマークアップするために {{htmlelement("strong")}} (強い重要性) 要素を使用します。 この文書をより便利にするだけでなく、これらもスクリーンリーダーによって認識され、異なるトーンの音声で話されています。ブラウザではデフォルトで太字のテキストとしてスタイル設定されていますが、太字のスタイルにするだけの場合にはこのタグを使用しないでください。そのためには、{{htmlelement("span")}} 要素といくつかの CSS、あるいは {{htmlelement("b")}} 要素 (下記参照) を使用します。

+ +
<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+ +

必要に応じて、 strong と emphasis を相互に入れ子にすることができます。

+ +
<p>This liquid is <strong>highly toxic</strong> —
+if you drink it, <strong>you may <em>die</em></strong>.</p>
+ +

アクティブラーニング: 重要にしましょう！

+ +

このアクティブラーニングセクションでは、編集可能な例を示しました。その中で、それらを必要としていると思う言葉に強調と強い重要性を付け加えてみてください。

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

+ +

イタリック、太字、下線...

+ +

これまで説明してきた要素には明確な意味があります。{{htmlelement("b")}}、{{htmlelement("i")}} および {{htmlelement("u")}} の状況はやや複雑です。CSS がまだ十分にサポートされていないかまったくサポートされていなかった時代に、太字、斜体、または下線付きのテキストを書くことができるようにそれらはできました。このような要素は表示にのみ影響を与え、意味には影響を与えない表示要素として知られていますが、もはや使用されるべきではありません。これまで見てきたように、セマンティクスはアクセシビリティ、SEO などにとって非常に重要だからです。

+ +

HTML5では <b>、<i>、<u> が新しい、やや混乱しやすいセマンティックロールで再定義されました。

+ +

最適な経験則は次のとおりです。これ以上適切な要素がない場合に、太字、斜体、または下線で伝統的に伝えられてきたような意味を伝えるために <b>、<i> または <u> を使用するのが適切です。ただし、アクセシビリティの考え方を守ることは常に重要です。 イタリック体の概念は、スクリーンリーダーを使っている人、またはラテン系のアルファベット以外の書記体系を使っている人にとってはあまり役に立ちません。

+ + + +
+

下線についての親切な警告：人々は下線をハイパーリンクと強く関連付けています。したがって、Web 上では、リンクのみに下線を引くのが最善です。意味的に適切な場合は <u> 要素を使用しますが、CSS を使用してデフォルトの下線を Web 上でより適切なものに変更することを検討してください。以下の例はその方法を示しています。

+
+ +
<!-- scientific names -->
+<p>
+  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
+  is the most common hummingbird in Eastern North America.
+</p>
+
+<!-- foreign words -->
+<p>
+  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- a known misspelling -->
+<p>
+  Someday I'll learn how to <u style="text-decoration-line: underline; text-decoration-style: wavy;">spel</u> better.
+</p>
+
+<!-- Highlight keywords in a set of instructions -->
+<ol>
+  <li>
+    <b>Slice</b> two pieces of bread off the loaf.
+  </li>
+  <li>
+    <b>Insert</b> a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  </li>
+</ol>
+ +

要約

+ +

今はここで終わりとしましょう。 この記事では、HTMLでテキストをマークアップする方法についての優れたアイデアを説明し、この分野で最も重要な要素のいくつかを紹介しました。この分野には、さらに多くのセマンティック要素を網羅する必要があります。この後の「その他のセマンティック要素」の記事で、さらに詳しく説明します。 次回の記事では、Web上で最も重要な要素と思われるハイパーリンクの作成方法について詳しく説明します。

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ +

このモジュール内

+ + diff --git a/files/ja/learn/html/introduction_to_html/index.html b/files/ja/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..6711d0012a --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/index.html @@ -0,0 +1,65 @@ +--- +title: HTML 入門 +slug: Learn/HTML/Introduction_to_HTML +tags: + - CodingScripting + - HTML + - Introduction to HTML + - Landing + - Links + - Structure + - Text + - head + - semantics +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

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

+ +

前提条件

+ +

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

+ +
+

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

+
+ +

ガイド

+ +

このモジュールは以下の記事を含んでいます。これらを読むことで、HTMLの基礎理論の全てを学び、スキルを試すのに十分な機会が得られるでしょう。

+ +
+
HTML入門
+
HTML を開始するための、完全な基本を網羅します — 要素、属性やその他の重要な用語を定義します。この用語を聞いたことがあるかもしれませんし、ここが言語に溶け込んでいる所です。また HTML 要素が構成される方法や、典型的な HTML ページが校正される方法を示し、その他の重要な言語機能を説明します。進むにつれ、HTML で遊んでみて、興味が沸いてくるでしょう！
+
Headとは? HTML のメタデータ
+
HTML ドキュメントの Head は、ページが読み込まれてもウェブブラウザーで表示されない部分です。これはページ{{htmlelement("title", "タイトル")}}や、(HTML コンテンツを CSS でスタイリングする場合に) {{glossary("CSS")}} へのリンクや、カスタム favicon や、メタデータ (HTML についてのデータ、例えば誰が書いたかや、文書を記述する重要なキーワードなど) です。
+
HTML テキストの基礎
+
HTML の主な役割の1つは、テキストの意味付け (セマンティクスとしても知られます) で、それによってブラウザーは正しくテキストを表示する方法がわかります。この記事では HTML を使ってテキストブロックを見出しとパラグラフに分けたり、単語を強調/重要にしたり、リストを作成したりする方法を見て行きます。
+
ハイパーリンクを作成する
+
ハイパーリンクは本当に重要です — これはウェブをウェブにしているものです。この記事ではリンクを作成するのに必要な文法を表して、リンクの最も良いやり方を考察します。
+
上級のテキスト整形
+
HTML ではテキスト整形用として、HTML テキストの基礎 の記事で扱ってきてない多くの要素があります。ここでの要素はあまり知られてないですが、知っておくと役立ちます。ここでは引用や、説明リストや、コンピューターのコードや関連するテキスト、下付き上付きや、連絡先情報などのマークアップを学習します。
+
ドキュメントとウェブサイトの構造
+
ページの個々の部分 (例えば「パラグラフ」や「画像」) を定義するのと同様に、ウェブサイトのエリアも (例えば「ヘッダー」、「ナビゲーションメニュー」、「本文のカラム」) HTML で定義されます。この記事では基本的なウェブサイトの構造を計画する方法と、構造を表現する HTML を書く方法を見て行きます。
+
HTMLをデバッグする
+
HTML を書くのは良いですが、うまくいかなくて、コードのエラーが収まらない場合はどうでしょうか？この記事では手助けとなるいくつかのツールを紹介します。
+
+ +

評価

+ +

以下の評価で、上記のガイドにある HTML 基礎の理解をテストできます。

+ +
+
手紙をマークアップする
+
早かれ遅かれ、手紙を書くことを学びます; これはテキストフォーマットの技術をテストするのにも役立ちます！この評価ではマークアップすべき手紙が与えられます。
+
コンテンツページを構造化する
+
この評価では、ヘッダー・フッター・ナビゲーションメニュー・メインコンテンツ・サイドバーを含む、簡単なコンテンツページを構造化する HTML の能力をテストします。
+
+ +

関連情報

+ +
+
Web literacy basics 1
+
HTML 概論のモジュールで話されたたくさんのスキルを見て回ったりテストしたりできる、素晴らしい Mozilla ファウンデーションのコースです。学習者はこの6つのモジュールにて Web について読んだり書いたり参加したりするのに慣れていきます。製作と共同作業を通じて Web の基礎を発見してください。
+
diff --git a/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..055a2afb5d --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -0,0 +1,105 @@ +--- +title: 手紙をマークアップする +slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +tags: + - Beginner + - CodingScripting + - HTML + - head + - テキスト + - リンク + - 評価 +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +
+
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
+私たちはみんな遅かれ早かれ手紙を書くことを学びます。 + +

テキストの書式設定のスキルを試すのも便利な例です。この課題では、ハイパーリンクを含む基本的な HTML テキストフォーマットスキルと高度な HTML テキストフォーマットスキルをテストするためにマークアップするための文字が与えられます。さらに HTML <head> コンテンツに対するあなたの慣れをテストします。

+
+ + + + + + + + + + + + +
前提条件:このアセスメントを試みる前に、「HTML を始めよう」、「head には何が入る? HTML のメタデータ」、「HTML テキストの基礎」、「ハイパーリンクの作成」、および「高度なテキスト処理」をすでに読んでおく必要があります。
目的:基本的な HTML テキストの書式設定とハイパーリンクのスキル、および HTML <head> の内容に関する知識をテストします。
+ +

スタートポイント

+ +

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

+ +

簡単なプロジェクト

+ +

このプロジェクトの場合、あなたの仕事は大学のイントラネットでホストされる必要がある手紙をマークアップすることです。手紙は、大学で働くことへの申し込みに関する研究フェローから博士課程の学生への返事です。

+ +

ブロック/構造セマンティクス

+ + + +

インラインセマンティクス:

+ + + +

ドキュメントの head:

+ + + +

ヒントとコツ

+ + + +

例

+ +

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

+ +

Example

+ +

評価

+ +

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

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..b434a3fea4 --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -0,0 +1,107 @@ +--- +title: コンテンツページを構造化する +slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +tags: + - Beginner + - CodingScripting + - HTML + - セマンティクス + - デザイン + - レイアウト + - 学習 + - 構造 + - 評価 +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

CSS を使用してレイアウトできるようにコンテンツのページを構成することは、習得が非常に重要なスキルです。そのためこの評価では、ページがどのように表示されるのかを検討し、適切な構造セマンティクスを選択してその上にレイアウトを構築する能力についてテストします。

+ + + + + + + + + + + + +
前提条件:この評価を試みる前に、「ドキュメントとWebサイトの構造」に特に重点を置いて、コースの残りの部分を通してすでに学習していること。
目的:Web ページ構造の知識、および将来のレイアウト設計をマークアップで表現する方法をテストする。
+ +

スタートポイント

+ +

この評価を開始するには、すべての開始アセットを含むzipファイルを入手してください。 zip ファイルには以下が含まれています。

+ + + +

ローカルコンピュータで例を作成するか、あるいは JSBin や Thimble などのサイトを使用して評価を行います。

+ +

プロジェクト概要

+ +

このプロジェクトでは、あなたの仕事は、バードウォッチング Web サイトのホームページのコンテンツを取得し、それにページレイアウトを適用できるように構造要素を追加することです。持っている必要があるものは：

+ + + +

以下に適したラッパーを追加する必要があります。

+ + + +

また、する必要があることは：

+ + + +

ヒント

+ + + +

例

+ +

次のスクリーンショットは、マークアップされた後のホームページの外観の例を示しています。

+ +

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

+ +

評価

+ +

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

+ +

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..15394f6e79 --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,292 @@ +--- +title: head には何が入る? HTML のメタデータ +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Meta + - favicon + - head + - lang + - metadata +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

HTML の文書の {{glossary("Head", "head")}} 部分は、ページが読み込まれてもウェブブラウザーには表示されない部分です。この部分には、例えば、 {{htmlelement("title")}} といった情報や {{glossary("CSS")}} へのリンク (もし HTML を CSS で修飾したいならば)、独自のファビコンへのリンク、そしてほかのメタデータ (HTML を誰が書いたのかとかその HTML を表現する重要なキーワードなど) の情報を含んでいます。この記事では、上記のすべてのことと、さらに、読者にマークアップ言語と頭に入れておくべきほかのコードについてよい基礎を与えます。

+ + + + + + + + + + + + +
前提知識:基本的な HTML の知識。 HTML を始めようで扱うようなもの。
目的:HTML の head について学ぶこと。 head の目的は何か、そして head が含む情報の中で最も重要なのは何か、加えてそれが HTML 文書の中でどれほどの影響を持つか。
+ +

HTML の head とは何か？

+ +

前の記事で扱った HTML 文書をもう一度見てみましょう。

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

HTML の head は {{htmlelement("head")}} 要素のコンテンツです — {{htmlelement("body")}} 要素のコンテンツ (これはブラウザーに読み込まれた時に表示されます) とは違っていて、head のコンテンツはページに表示されません。その代わり、head の仕事は文書の {{glossary("Metadata", "メタデータ")}} を含んでいます。上記の例では、head はとても小さいです。

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

しかし、大きなページでは、 head にたくさんの項目があることもあります — お気に入りのウェブサイトに移動して、ウェブ開発ツールを使って head コンテンツを確認してみます。ここでの狙いは head に置くことのできるすべての使い方を示すことではなく、むしろ head に入れたくなるのが最も明らかなものの使い方を教えて、なじんでもらうことです。始めましょう。

+ +

タイトルをつける

+ +

{{htmlelement("title")}} 要素についてはすでに見てきました — これは文書にタイトルを追加するのに使います。しかしこれは {{htmlelement("h1")}} 要素 (これは body コンテンツの最上位レベルの見出し(head)を追加します — 時々ページタイトルとしても参照されます) と混同されます。しかしこれらは別のものです!

+ + + +

アクティブラーニング: 単純な例を検討する

+ +
    +
  1. このアクティブラーニングを始めるのに、我々の GitHub リポジトリに移動して title-example.html page のコピーをダウンロードして頂きたいです。これは次のいずれかでできます + +
      +
    1. ページのコードをコピー&ペーストして、コードエディターの新規ファイルに入れて、ふさわしい場所に保存します
      2. +
    2. ページの "Raw" を押すと、新しいタブに生のコードが出ます。次に、ブラウザーメニューから ファイル > 名前を付けて保存... を選んで、ファイルの保存場所を選びます
      3. +
    +
    2. +
  2. ファイルをブラウザーで開きます。このようなものが見えるでしょう: +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.<h1> コンテンツが出ている場所と、<title> コンテンツが出ている場所がひと目で分かります!

    +
    3. +
  3. 自分のコードエディターで開いて、この要素を編集して、ブラウザーで再読み込みしてもよいです。楽しんでみてください。
    4. +
+ +

<title> 要素はいろいろな方法で使われます。例えば、ページのブックマーク (ブックマーク > このページをブックマーク または Firefox の URL バーのスターアイコンにて) してみると、提案されたブックマーク名として <title> コンテンツが記入されています。

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

<title> の内容は後述するように、コンテンツは検索結果にも使われます。

+ +

メタデータ: <meta>要素

+ +

メタデータはデータを説明するデータで、 HTML には文書にメタデータを追加する「公式な」方法があります — {{htmlelement("meta")}} 要素です。もちろん、この記事で話しているその他のものもメタデータと考えられます。ページの <head> に入る <meta> 要素にはさまざまな種類がありますが、この段階では、ややこしすぎるため、すべては説明しません。その代わり、よく見かけるいくつかのものを説明し、理解を与えます。

+ +

HTML文書の文字コードを指定する

+ +

上で見てきた例では、この行が含まれていました。

+ +
<meta charset="utf-8">
+ +

この要素は単に文書のキャラクターエンコーディングを指定しています — それは文書が使うことが許されるキャラクターセットです。utf-8 はあらゆる言語からとてもたくさんの文字を含む汎用的なキャラクターセットです。つまりウェブページがあらゆる言語の表示を取り扱えるのです; このため、作成するすべてのウェブページにこれをセットするのが良いです！例えば、ページで英語と日本語を正しく扱うことができます:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,文字エンコーディングを、例えば ISO-8859-1 (ラテン文字のアルファベットの文字セット) に指定すると、ページの表示はメチャクチャな見た目になります。

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +
+

メモ: ブラウザーによっては (例 Chrome) 自動的に正しくないエンコーディングを修正しますので、お使いのブラウザーによっては、この問題が見られないこともあります。それでもなお、その他のブラウザーでの問題を避けるため、とにかくページに utf-8 エンコーディングを設定すべきです。

+
+ +

アクティブラーニング: 文字エンコーディングで実験する

+ +

これを試すには、<title> についての前の節で得たシンプルな HTML テンプレート (title-example.html page) をもう一度見てみて、 meta charset の値を ISO-8859-1 に変えて、日本語を追加してみます。私達の使ったコードは次のものです:

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

作成者と説明を追加する

+ +

多くの <meta> 要素は name と content 属性が含まれます:

+ + + +

ページに入れるのが便利な 2 つのメタ要素は、ページの著者(author)を定義するものと、ページの説明(description)を与えるものです。例を見てみます:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="The MDN Web Docs Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications.">
+ +

著者 (author) の指定はいくつかの点で役立ちます。コンテンツに関する質問があって問い合わせしたい場合、誰がそのページを書いたのかに答えられます。 CMS (コンテンツ管理システム) によっては自動的にページの作者の情報を抽出して、このような目的で利用するための機能があります。

+ +

ページの内容に関連したキーワードを含む説明 (description) を指定すると、検索エンジンで行われる関連検索で、ページをより上位にできる可能性があるため役立ちます (この行為に対する用語は Search Engine Optimization (検索エンジン最適化) または {{glossary("SEO")}}といいます)。

+ +

アクティブラーニング:検索エンジンにおける description の扱い

+ +

description は検索エンジンの結果ページにも使われます。練習でこれを見ていきましょう。

+ +
    +
  1. Mozilla Developer Network のフロントページに移動します。
    2. +
  2. ページのソースを見ます (ページ上で右クリックまたは Ctrl を押しながらクリックして、コンテキストメニューからページのソースを表示を選びます)。
    3. +
  3. description の meta タグを見てみます。それはこのようなものです。 + 
    <meta name="description" content="The MDN Web Docs site
+  provides information about Open Web technologies
+  including HTML, CSS, and APIs for both Web sites and
+  progressive web apps.">
    +
    4. +
  4. ここでお好きな検索エンジンで "MDN Web Docs" を検索します (ここでは Google を使っています) 。 description の <meta> と <title> 要素のコンテンツが検索結果で使われています — 確かに値打ちがあります。 +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

メモ: Google ではメインの MDN ホームページリンクの下にいくつか MDN Web Docs のサブページが見えるでしょう— これはサイトリンクと呼ばれ、Google's webmaster tools で設定されます — これは Google 検索エンジンでサイトの検索結果を良くする方法です。

+
+ +
+

注: 多くの <meta> 機能はもう使われていません。例えば、 keyword の <meta> 要素 (<meta name="keywords" content="fill, in, your, keywords, here">) — 検索エンジンが色々な検索用語と関連するページを決めるためのキーワードを与えると考えられています — は、スパマーが結果にバイアスをかける多数のキーワードを埋めるだけなので、検索エンジンから無視されます。

+
+ +

メタデータの他の種類

+ +

ウェブを旅するにつれ、他の種類のメタデータも見つかるでしょう。ウェブサイトで見る多くの機能はプロプライエタリな作成物で、使うことのできる特定の情報をあるサイト (例えば SNS) に与えます。

+ +

例えば、 Open Graph Data は Facebook が開発した、ウェブサイトに豊富なメタデータを与えるメタデータプロトコルです。 MDN Web Docs のソースコードでは、次のようなものがあります。

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

この効果として、 facebook で MDN Web Docs にリンクしたとき、リンクに画像と説明が表示されます。ユーザーにとってより便利になります。

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter も同様のプロプラエタリなメタデータを持ちます。 URL が twitter.com で表示される時に同様な効果となります。例えば。

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

サイトに自分の好きなアイコンをつける

+ +

もっとサイトデザインを豊かにするために、メタデータにカスタムアイコンを追加して、特定のコンテキストで表示されるようにすることができます。このうち最もよく使われるものが ファビコン (ブラウザーの「お気に入り」や「ブックマーク」の一覧を指すために使われる "favorites icon" の略) です。

+ +

つつましいファビコンは何年も使われてきています。16ピクセル四方のアイコンが最初の種類であり、様々な場所で使われました。各ページを開いているブラウザータブの中や、ブックマークパネル内のブックマークページの隣でファビコン表示が見られるでしょう。

+ +

ページにファビコンを追加するには:

+ +
    +
  1. サイトの index ページと同じディレクトリに、 .ico 形式で保存します (大半のブラウザーは .gif や .png のような、より一般的な形式のファビコンにも対応していますが、 ICO 形式を使えば Internet Explorer 6 以降の古いブラウザでも動作することが保証されます)。
    2. +
  2. HTML の {{HTMLElement("head")}} ブロックに下記の行を入れて参照します。 + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

ブックマークパネルでファビコンが表示される例です。

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

最近では考慮するべきアイコンの種類がほかにもたくさんあります。例えば、 MDN Web Docs ホームページのソースコードには以下の行があります。

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

コメントはそれぞれのアイコンの用途を説明しています。 — この要素は、ウェブサイトが iPad のホーム画面に保存された時のすばらしい高解像度なアイコンの提供といったことをカバーしています。

+ +

こうした種類のアイコンをいますぐすべて実装することに心配しすぎないでください — これはかなり高度な機能で、このコースが進んでも分からないはずです。ここでの主な目的は、他のウェブサイトのソースコードを見た時に出くわした場合にこれらが何か知ることです。

+ +
+

メモ: もし、サイトがセキュリティを向上させるために Content Security Policy (CSP) を使用している場合、ポリシーがファビコンに適用されます。ファビコンが読み込まれないという問題に遭遇したら、 {{HTTPHeader("Content-Security-Policy")}} ヘッダーの img-src ディレクティブがアクセスを妨害していないかを確認してください。

+
+ +

HTML に CSS と JavaScript を追加する

+ +

最近のほとんどすべてのウェブサイトでは、格好よく見せるために {{glossary("CSS")}} や動画や地図、ゲームなどといったインタラクティブな機能を追加するために {{glossary("JavaScript")}} を用いています。これらは最も一般的に用いられ、それぞれ {{htmlelement("link")}} 要素、 {{htmlelement("script")}} 要素で表します。

+ + + +

アクティブラーニング: ページに CSS と JavaScript を追加する

+ +
    +
  1. アクティブラーニングを始めるにあたって、私たちの meta-example.html, script.js ,style.css をコピーしてローカルの同じフォルダに保存してください。ファイル名と拡張子が変わっていないことを確認してください。
    2. +
  2. HTML ファイルをブラウザとテキストエディタで開いてください。
    3. +
  3. 先に述べた情報に従って、 {{htmlelement("link")}} 要素と {{htmlelement("script")}} 要素を HTML に書き加えてください。すると CSS と JavaScript が HTML に適用されます。
    4. +
+ +

以上を正しく行い、 HTML を保存してブラウザを更新したら、変化がみられるでしょう。

+ +

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

+ + + +
+

メモ: この演習で行きづまって CSS/JS が適用できなくなってしまった場合は、 css-and-js.html サンプルページをチェックしてみてください。

+
+ +

文書の主要な言語の設定

+ +

最後に、ページの言語を設定することができること (そしてそうすべきこと) に言及する価値があるでしょう。これは、 lang 属性を開始 HTML タグに追加することで実現することができます (meta-example.html に表示され、以下に表示されています)。

+ +
<html lang="en-US">
+ +

これは様々なところで役に立ちます。言語が設定されていれば、 検索エンジンによるHTML 文書のタグ付けがより効果的になりますし (たとえば、言語固有の結果を正しく表示できるようになるなど)、読み上げソフトを使用している視覚障碍者にとっても有用です ("six" はフランス語と英語の両方に存在しますが、発音が異なります)。

+ +

文書のサブセクションを異なる言語として認識されるように設定することもできます。たとえば、次のようにすると日本語のセクションを日本語として認識されるように設定できます。

+ +
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
+ +

これらのコードは ISO 639-1 規格で定義されています。それらについての詳細は、 HTML と XML の言語タグにあります。

+ +

まとめ

+ +

これで HTML head の弾丸ツアーは終了します。ここでできることは他にもたくさんありますが、この段階では徹底的なツアーでは退屈で混乱を招くことになるでしょうから、もっとも一般的なことに関する考えだけを紹介したかったのです。たった今、そこに到達しました。次回の記事では、HTML テキストの基礎について説明します。

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

+ +

このモジュール内の文書

+ + diff --git a/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html new file mode 100644 index 0000000000..3431a47258 --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,370 @@ +--- +title: ウェブにベクターグラフィックスを追加する +slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +tags: + - Beginner + - Graphics + - Guide + - HTML + - Images + - Learn + - Raster + - SVG + - Vector + - iframe + - img + - ガイド + - グラフィックス + - ベクター + - ラスター + - 初心者 + - 学習 + - 画像 +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

ベクターグラフィックは多くの状況でとても便利です。 — ファイルサイズは小さく、スケーラビリティが高いため、ズームイン (拡大表示) したり、大きなサイズに拡大したりしてもモザイクになりません。この記事では、ウェブページにそれを組み込む方法を説明します。

+
+ + + + + + + + + + + + +
前提条件:HTML の基本と、画像を文書に挿入する方法を理解しておく必要があります。
目的:SVG (ベクター) 画像をウェブページに埋め込む方法を学びます。
+ +
+

メモ: この記事は SVG を教えるためのものではありません。 SVG が何であるかと、ウェブページに追加する方法について説明します。

+
+ +

ベクターグラフィックとは何か？

+ +

ウェブ上では、ラスター画像とベクター画像の2種類の画像を扱います。

+ + + +

両者の違いを知るために、例を見てみましょう。この例は、 Github のリポジトリで vector-versus-raster.html として公開されています。 — これは、2つの一見同一の黒い影付きの赤い星の画像を並べて表示しています。違いは、左のものが PNG 画像であり、右のものが SVG 画像であるということです。

+ +

この違いは、ページをズームインすると明らかになります。 PNG 画像には、各ピクセルの位置（と色）に関する情報が含まれているため、ズームインするとピクセル化されます。 ズームインすると、各ピクセルのサイズが単純に拡大され、画面上の複数のピクセルが塗りつぶされるので、画像がギザギサに見えるようになります。 しかし、ベクター画像は大きさにかかわらず、アルゴリズムが画像内のシェイプを処理するために使用され、値が大きくなるにつれて単純に縮尺が変更されるため、きれいにくっきりと見えます。

+ +

2つの星の画像

+ +

2つの星の画像が拡大表示され、1つがくっきりになり、他の画像がギザギサになる

+ +
+

メモ: 上の画像は実際には全て PNG です — いずれの場合も、左の星はラスター画像を表し、右の星はベクター画像を表します。 実際の例については、vector-versus-raster.html デモを参照してください！

+
+ +

さらに、ベクター画像ファイルは、画像内のすべてのピクセルの情報ではなく、一握りのアルゴリズムを保持するだけで済むので、ラスター同等物よりもはるかに軽くなります。

+ +

SVG とは何か？

+ +

SVG は、ベクター画像を記述するための {{glossary("XML")}} ベースの言語です。これは基本的に HTML のようなマークアップですが、画像に表示するシェイプを定義するためのさまざまな要素と、それらのシェイプに適用する効果があります。 SVG は、コンテンツではなくグラフィックをマークアップするためのものです。最も単純なものとしては、 {{svgelement("circle")}} や {{svgelement("rect")}} のような単純なシェイプを作成するための要素があります。 {{svgelement("feColorMatrix")}} (変換行列を使用して色を変換)、 {{svgelement("animate")}} (ベクターグラフィックの一部をアニメーション化)、 {{svgelement("mask")}} (画像の上にマスクを適用する) など、より高度な SVG の機能もあります。

+ +

簡単な例として、次のコードは円形と長方形を作成します。

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="black" />
+  <circle cx="150" cy="100" r="90" fill="blue" />
+</svg>
+ +

これにより、次の出力が生成されます。

+ +

{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}

+ +

上記の例から、 SVG が手作業で簡単に書けるという印象を受けるかもしれません。実際、単純な SVG ならばテキストエディターで手作業で記述することはできますが、複雑な画像では、すぐにとても困難になり始めます。 SVG 画像を作成するには、ほとんどの人が Inkscape や Illustrator のようなベクターグラフィックエディターを使用します。これらのパッケージでは、さまざまなグラフィックツールを使用してさまざまなイラストを作成したり、写真に近似したもの (たとえば、 Inkscape のトレースビットマップ機能) を作成したりすることができます。

+ +

SVG にはこれまで説明したもの以外にも、いくつかの長所があります。

+ + + +

では、なぜ誰もが SVG よりもラスターグラフィックを使いたがるのでしょうか？実際、SVG にはいくつかの短所があります。

+ + + +

ラスターグラフィックは、前述の理由から、写真などの複雑な高精度画像に対しては、ほぼ間違いなく優れています。

+ +
+

メモ: Inkscape では、スペースを節約するためにファイルを Plain SVG として保存します。 また、ウェブ用の SVG を作成する方法について説明しているこの記事 (英語) を参照してください。

+
+ +

ページへの SVG の追加

+ +

この節では、SVG ベクターグラフィックをウェブページに追加するさまざまな方法を説明します。

+ +

簡単な方法: {{htmlelement("img")}}

+ +

{{htmlelement("img")}} 要素を介して SVG を埋め込むには、予想通り、 src 属性で参照する必要があります。 height 属性または width 属性 (または SVG に固有のアスペクト比がない場合は両方) が必要です。まだHTML の画像を終了していない人は、こちらをお読みください。

+ +
<img
+    src="equilateral.svg"
+    alt="3辺がすべて等しい三角形"
+    height="87px"
+    width="100px" />
+ +

長所

+ + + +

短所

+ + + +

トラブルシューティングとクロスブラウザーの対応

+ +

SVG に対応していないブラウザー (IE 8 以前、Android 2.3 以前) では、 src 属性から PNG または JPG を参照し、 SVG を参照するために {{htmlattrxref("srcset", "img")}} 属性 (最近のブラウザーのみが認識する) を使用することができます。 この場合、対応しているブラウザーのみが SVG を読み込みます。 — 古いブラウザーは代わりに PNG を読み込みます。

+ +
<img src="equilateral.png" alt="辺が等しい三角形" srcset="equilateral.svg">
+ +

以下に示すように、 SVG を CSS の背景画像として使用することもできます。 以下のコードでは、古いブラウザーでは理解できる PNG を使用しますが、新しいブラウザーでは SVG を読み込みます。

+ +
background: url("fallback.png") no-repeat center;
+background-image: url("image.svg");
+background-size: contain;
+ +

上記の <img> 方式と同様に、 CSS 背景画像を使用して SVG を挿入すると、 SVG を JavaScript で操作することができず、同じ CSS の制限が適用されます。

+ +

SVG がまったく表示されない場合は、サーバーが正しく設定されていない可能性があります。 それが問題なら、この記事が正しい方向を指しています。

+ +

HTML の中に SVG コードを組み込む方法

+ +

テキストエディターで SVG ファイルを開き、 SVG コードをコピーして HTML 文書に貼り付けることもできます。 これは、SVG をインラインにする、または SVG をインライン化するとも呼ばれます。 SVG コードスニペットは、{{svgelement("svg")}} タグで始まり、 <svg></svg> タグで終わることを確認してください (これら以外のものは含めないでください)。文書に貼り付けることのできる簡単な例を次に示します。

+ +
<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+
+ +

長所

+ + + +

短所

+ + + + + +

{{htmlelement("iframe")}} で SVG を埋め込む方法

+ +

SVG 画像は、ウェブページのようにブラウザーで開くことができます。 したがって、SVG 文書を <iframe> に埋め込むことは、<object> から <iframe> へ — その他の埋め込み技術で学んだように行われます。

+ +

ここで簡単なレビューです。

+ +
<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="3つの不等辺の三角形" />
+</iframe>
+ +

これは間違いなく選択するには最良の方法ではありません。

+ +

短所

+ + + +

アクティブラーニング: SVG で遊ぶ

+ +

このアクティブラーニングの節では、 SVG をとても楽しく遊ぶことができます。 下の入力セクションでは、始めるためのサンプルをすでに提供していることがわかります。 また、SVG 要素のリファレンスにアクセスして、SVG で使用できる他のおもちゃの詳細を調べて、それらを試してみることもできます。 このセクションでは、あなたの研究スキルを鍛え、楽しく学びましょう。

+ +

コードが機能しなくなった場合は、[Reset] ボタンを使用していつでもリセットすることができます。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}

+ +

まとめ

+ +

この記事では、ベクターグラフィックと SVG の概要、それらをなぜ知っておくと便利なのか、そして SVG をウェブページに組み込む方法について簡単に説明しました。 SVG を学ぶ上での完全なガイドとなることは決して考えられていませんでしたが、ウェブ上の旅行でそれに会っていれば、SVG が何であるかを知ることができます。 あなたがまだ SVG のエキスパートではないと感じたら心配しないでください。 もしそれがどう動くかについて詳しく知りたいなら助けになる以下のリンクを参考にしてください。

+ +

このモジュールの最後の記事では、レスポンシブ画像を詳細に調査し、さまざまなデバイス間で画像をより良く動作させるための HTML ツールについて説明します。

+ +

関連項目

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

このモジュール内の文書

+ + diff --git a/files/ja/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ja/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..4d5e14ae4f --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,521 @@ +--- +title: HTML の画像 +slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +tags: + - Beginner + - Guide + - HTML + - Image + - alt text + - captions + - figcaption + - figure + - img + - ガイド + - キャプション + - 代替テキスト + - 初心者 + - 図表 + - 画像 + - 記事 +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+ +

最初は、Web は単なるテキストに過ぎず、とても退屈でした。幸運なことに、Web ページ内に画像 (および他のより興味深いタイプのコンテンツ) を埋め込む能力が追加されるまでにはあまり時間がかかりませんでした。考慮すべき他のタイプのマルチメディアもありますが、単純な画像を Web ページに埋め込むために使用される、慎ましい {{htmlelement("img")}} 要素から始めるのが理にかなっています。この記事では、基本的な使い方を含め、{{htmlelement("figure")}} を使ったキャプションの注釈付け、{{glossary("CSS")}} 背景画像との関連付けなど、詳細な使い方を見ていきます。

+ + + + + + + + + + + + +
前提条件:基本的なコンピュータリテラシー、インストールされた基本ソフトウェア、ファイル操作の基本知識、HTML の基礎知識に精通していること (HTML の使い方を参照してください)。
目的:単純な画像を HTML に埋め込み、キャプションで注釈を付ける方法、および HTML 画像と CSS 背景画像との関連を学ぶ。
+ +

画像を Web ページにどのように置くのですか？

+ +

単に画像を Web ページに配置するには、{{htmlelement("img")}} 要素を使用します。これは有用であるために少なくとも1つの属性 — src (フルタイトルやソースと呼ばれることもあります) を必要とする {{glossary("empty element","空要素")}} (テキストコンテンツまたは終了タグがないことを意味する) です。src 属性には、{{htmlelement("a")}} 要素の href 属性値と同じように、ページに埋め込む画像を指すパスが含まれ、相対 URL または絶対 URL にすることができます。

+ +
+

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

+
+ +

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

+ +
<img src="dinosaur.jpg">
+ +

画像が HTML ページ (Google が {{glossary("SEO")}}/索引付けの目的で推奨するディレクトリ) 内の images サブディレクトリにあった場合は、次のように埋め込みます。

+ +
<img src="images/dinosaur.jpg">
+ +

等々。

+ +
+

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

+
+ +

たとえば、絶対 URL を使用して画像を埋め込むことができます。

+ +
<img src="https://www.example.com/images/dinosaur.jpg">
+ +

しかし、これは無意味だけでなく、ブラウザが DNS サーバから IP アドレスを再度検索するなどより多くの作業をすることになります。ほとんどの場合、Web サイトの画像を HTML と同じサーバに保存します。

+ +
+

警告: ほとんどの画像は著作権で保護されています。次の場合を除き、Web ページに画像を表示しないでください。
+
+ 1) 画像を所有している
+ 2) 画像の所有者からの書面による明示的な許可を得ている、または
+ 3) 画像は、実際にパブリックドメインであるという十分な証拠がある。
+
+ 著作権侵害は違法で非倫理的です。加えて、あなたがリンクする権限を持たない他の誰かの Web サイトでホストされている画像へあなたの src 属性を向けないでください。これは「ホットリンク」と呼ばれます。さらに、誰かの帯域幅を盗むことは違法です。また、ページが遅くなり、画像が削除されたり、恥ずかしいものに置き換えられたりするかどうかを制御できません。

+
+ +

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

+ +

恐竜の基本的な画像が、ブラウザに埋め込まれ、その上に "Images in HTML" が書かれています

+ +
+

メモ: {{htmlelement("img")}} や {{htmlelement("video")}} のような要素は、置き換えられた要素と呼ばれることがあります。これは、要素の内容とサイズが、要素自体の内容ではなく、外部リソース(画像ファイルや動画ファイルなど)によって定義されているためです。

+
+ +
+

メモ: 完成したサンプルは、このセクションの Github で実行するから見つけることができます (ソースコードも参照してください)。

+
+ +

代替テキスト

+ +

次の属性は alt です。その値は、画像が見えない/表示されない状況で使用するためにあり、画像のテキスト記述であると考えられる。たとえば、上記のコードは次のように変更できます。

+ +
<img src="images/dinosaur.jpg"
+     alt="恐竜の骨格の頭と胴体、
+          それは長い鋭い歯を持つ大きな頭を持っています">
+ +

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

+ +

Images in HTMLというタイトルですが、今回は恐竜の画像が表示されず、代替テキストが代わりに表示されます。

+ +

それでは、なぜ代替テキストを見たり、必要とするのでしょうか?  いくつかの理由から便利です。

+ + + +

alt 属性の中にぴったりの何を書きますか?  それは最初の場所に画像がある理由に依存します。言い換えれば、画像が表示されない場合に失うもの。

+ + + +

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

+ +
+

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

+
+ +

幅と高さ

+ +

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

+ +
<img src="images/dinosaur.jpg"
+     alt="恐竜の骨格の頭と胴体、
+          それは長い鋭い歯を持つ大きな頭を持っています"
+     width="400"
+     height="341">
+ +

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

+ +

恐竜の代替テキストを含む Images in HTML タイトルは、幅と高さの設定の結果として大きなボックスの内側に表示されます

+ +

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

+ +

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

+ +
+

メモ: 画像のサイズを変更する必要がある場合は、代わりに CSS を使用する必要があります。

+
+ +

画像のタイトル

+ +

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

+ +
<img src="images/dinosaur.jpg"
+     alt="恐竜の骨格の頭と胴体、
+          それは長い鋭い歯を持つ大きな頭を持っています"
+     width="400"
+     height="341"
+     title="マンチェスター大学博物館に展示されている T-Rex">
+ +

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

+ +

恐竜の画像に、A T-Rex on display at the Manchester University Museumというツールチップのタイトルが表示されます

+ +

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

+ +

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

+ +

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

+ +

今度はあなたの番です!  この能動的学習セクションでは、あなたに簡単な埋め込み練習をさせていただきます。基本的な {{htmlelement("img")}} タグが提供されています。次の URL の画像を埋め込むようにしてください。

+ +

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

+ +

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

+ +

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

+ + + +

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

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

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

+ +

キャプションといえば、画像に付けるキャプションを追加する方法はいくつかあります。たとえば、これをやめさせることは何もありません。

+ +
<div class="figure">
+  <img src="images/dinosaur.jpg"
+       alt="恐竜の骨格の頭と胴体、
+            それは長い鋭い歯を持つ大きな頭を持っています"
+       width="400"
+       height="341">
+
+  <p>マンチェスター大学博物館に展示されている T-Rex。</p>
+</div>
+ +

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

+ +

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

+ +
<figure>
+  <img src="images/dinosaur.jpg"
+       alt="恐竜の骨格の頭と胴体、
+            それは長い鋭い歯を持つ大きな頭を持っています"
+       width="400"
+       height="341">
+
+  <figcaption>マンチェスター大学博物館に展示されている T-Rex。</figcaption>
+</figure>
+ +

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

+ +
+

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

+
+ +

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

+ + + +

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

+ +

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

+ +

この能動的学習セクションでは、以前の能動的学習セクションで完成したコードを図表にします。

+ + + +

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

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

CSS 背景画像

+ +

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

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

結果として得られる埋め込み画像は、HTML 画像よりも位置付けと制御が容易であることは間違いありません。それでは、なぜ HTML 画像を気にするのですか?  上記のとおり、CSS 背景画像は装飾用です。ビジュアルを向上させるためにページに何かを追加したいだけなら、これは問題ありません。しかし、そのような画像には意味論的な意味は全くありません。同等のテキストを持つことはできず、スクリーンリーダーには見えません。これは HTML 画像の輝く時です!

+ +

要約: 画像に意味がある場合は、コンテンツに関して、HTML 画像を使用する必要があります。画像が純粋に装飾である場合は、CSS 背景画像を使用する必要があります。

+ +
+

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

+
+ +

それは今のところすべてです。画像とキャプションを詳細にカバーしています。次の記事では、HTML を使用してWebページに動画と音声を埋め込む方法を見ていきます。

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/html/multimedia_and_embedding/index.html b/files/ja/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..3dc7f06753 --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,78 @@ +--- +title: マルチメディアとその埋め込み方 +slug: Learn/HTML/Multimedia_and_embedding +tags: + - Assessment + - Audio + - Beginner + - CodingScripting + - Flash + - Guide + - HTML + - Images + - Landing + - Learn + - SVG + - Video + - iframes + - imagemaps + - responsive + - イメージマップ + - ガイド + - フラッシュ + - レスポンシブ + - 初心者 + - 動画 + - 学習 + - 画像 + - 着地ページ + - 評価試験 + - 音声 +translation_of: Learn/HTML/Multimedia_and_embedding +--- +

{{LearnSidebar}}

+ +

このコースではここまで多くのテキストを見てきましたが、ただテキストだけのWebでは面白くありません。Web が生き生きとして、面白いコンテンツがどんどんあふれるようにする方法を見ていきましょう！ このモジュールでは、HTMLをどのように用いれば、あなたの Web ページにマルチメディアを含めることができるかについて学びます。 また、画像を挿入するためのさまざまな方法や、動画・音声、さらには他の Web ページ全体を挿入する方法についても触れます。

+ +

前提条件

+ +

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

+ +
+

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

+
+ +

ガイド

+ +

このモジュールには下記の記事が含まれていて、そこではマルチメディアをWeb ページに埋め込むための基礎を学びます。

+ +
+
HTMLの画像
+
考慮すべき他のタイプのマルチメディアもありますが、単純な画像をWeb ページに埋め込むために使用される、慎ましい {{htmlelement("img")}} 要素から始めるのが理にかなっています。 この記事では、基本的な使い方を含め、 {{htmlelement("figure")}} を使ったキャプションによる注釈付け、CSS背景画像との関連の仕方など、画像をより深く使用する方法を見ていきます。
+
動画と音声のコンテンツ
+
次に、HTML5の {{htmlelement("video")}} 要素と {{htmlelement("audio")}} 要素を使用して、動画や音声をページに埋め込む方法を見ていきます。 それには、基本的な使い方を含め、さまざまなファイルフォーマットへのアクセスをさまざまなブラウザーに提供したり、キャプションや字幕の追加、古いブラウザーへの代替の追加などが含まれています。
+
<object> から <iframe> へ — その他の埋め込み技術
+
この時点では、{{htmlelement("iframe")}} 、{{htmlelement("embed")}}、{{htmlelement("object")}} 要素のような幅広い種類のコンテンツをWeb ページに埋め込むことができる要素をいくつか見ていきたいと考えています。 <iframe> は他のWeb ページを埋め込むためのもので、他の2つは PDF、SVG、さらには Flash を埋め込むことができます — 出口にある技術ですが、まだ半定期的に見かけるでしょう。
+
Webにベクターグラフィックスを追加する
+
ベクターグラフィックスは、特定の状況で非常に便利です。 PNG や JPG のような通常のフォーマットとは異なり、ズームインしてもゆがんだりピクセル化したりしません — 縮尺を変えても滑らかな状態を保つことができます。 この記事では、ベクターグラフィックスの概要と、ポピュラーな {{glossary("SVG")}} フォーマットをWeb ページに含める方法を紹介します。
+
レスポンシブ画像
+
携帯電話からデスクトップコンピュータに至るまで、Webを閲覧できるようになったさまざまな種類のデバイスで、現代のWeb世界を習得するために不可欠な概念は、レスポンシブデザインです。 これは、さまざまな画面サイズ、解像度などに合わせて機能を自動的に変更できるWeb ページの作成を指します。 これについては、後ほどCSSモジュールで詳しく見ていく予定ですが、ここでは、HTMLで {{htmlelement("picture")}} 要素を含むレスポンシブ画像を作成するためのツールを見ていきます。
+
+ +

評価試験

+ +

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

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

関連情報

+ +
+
画像の上にヒットマップを追加する
+
イメージマップは、画像のさまざまな部分を別の場所にリンクするためのメカニズムを提供します(あなたがクリックしたそれぞれの国についての詳細情報にリンクしている地図を考えてみてください)。 この手法は時には便利なことがあります。
+
Webリテラシーの基礎 2 (英語)
+
優れたMozillaの基礎コースで、マルチメディアと埋め込みモジュールで説明されているスキルのいくつかを調べてテストします。 Web ページの作成、アクセシビリティの設計、リソースの共有、オンラインメディアの使用、オープンな作業 (コンテンツは自由に利用可能で、他の人が共有できることを意味します) の基礎を深く理解してください。
+
diff --git a/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html new file mode 100644 index 0000000000..b03f568d29 --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -0,0 +1,129 @@ +--- +title: Mozilla のスプラッシュページ +slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +tags: + - Assessment + - Beginner + - CodingScripting + - Embedding + - HTML + - Multimedia + - Video + - iframe + - picture + - responsive + - sizes + - srcset + - マルチメディア + - レスポンシブ + - 初心者 + - 動画 + - 埋め込み + - 評価試験 +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +

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

+ + + + + + + + + + + + +
前提条件:この評価試験を試す前に、残りのマルチメディアとその埋め込み方のモジュールに既に取り組んでいる必要があります。
目的:ウェブページに画像と動画を埋め込むこと、フレーム、および HTML レスポンシブ画像技術に関する知識をテストすること。
+ +

出発点

+ +

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

+ +

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

+ +
+

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

+
+ +

プロジェクトの概要

+ +

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

+ +

画像の準備

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

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

+ +

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

+ +

例

+ +

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

+ +

サンプルのスプラッシュページの広い画面のショット

+ +

サンプルのスプラッシュページの狭い画面のショット

+ +

評価

+ +

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

+ +
+

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

+
+ +

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

+ +

このモジュール内の文書

+ + diff --git a/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html new file mode 100644 index 0000000000..1623398dd0 --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -0,0 +1,399 @@ +--- +title: object から iframe へ — その他の埋め込み技術 +slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +tags: + - Article + - Beginner + - CodingScripting + - Embedding + - Flash + - Guide + - HTML + - Learn + - Multimedia and embedding + - Object + - embed + - iframe +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
+ +

そろそろ、画像、動画、音声など、ウェブページへの埋め込みのコツがつかめてきたはずです。ここでは、少し横道にそれて、ウェブページに様々な種類のコンテンツを埋め込むことができる要素、 {{htmlelement("iframe")}}、 {{htmlelement("embed")}}、 {{htmlelement("object")}} を見てみたいと思います。 <iframe> は他のウェブページを埋め込むためのもので、他の2つの要素は PDF、SVG、 さらに Flash — もうすぐなくなる技術ですが、まだ時々見かけるもの — も、埋め込むことができます。

+ + + + + + + + + + + + +
前提条件:基本的なコンピュータリテラシー、インストールされた基本ソフトウェア、ファイルの操作に関する基本知識、HTML の基礎知識 (HTML の入門)、およびこのモジュールの前の記事
目的:Flash ムービーなどのウェブページのように、{{htmlelement("object")}}、{{htmlelement("embed")}}、{{htmlelement("iframe")}} を使用してアイテムをウェブページに埋め込む方法を学びます。
+ +

埋め込みの短い歴史

+ +

昔、ウェブ上では、フレームを使ってウェブサイトを作るのが一般的でした - ウェブサイトの小さな部分が個々の HTML ページに保存されていました。これらは、フレームセットと呼ばれるマスター文書に埋め込まれていました。これにより、テーブルの列と行のサイジングのように、各フレームが埋めた画面上の領域を指定することができました。これらは90年代半ばから後半にかけてのクールさの極みと考えられていました。このような小さな塊に分割されたウェブページを持っているとダウンロード速度が向上したという証拠がありました — 特にネットワーク接続が非常に遅いため、特に顕著です。それらは多くの問題を抱えていましたが、ネットワーク速度がより速くなるにつれて、これ以上の利点はなく、あなたはそれらがもう使用されているのを見ていません。

+ +

ちょっと後で(90年代後半、2000年代初頭)、{{Glossary("Java","Java アプレット")}}や {{Glossary("Adobe_Flash","Flash")}} などのプラグイン技術が普及しました。これにより、ウェブ開発者は動画やアニメーションなどのウェブページに豊富なコンテンツを埋め込むことができました。これらの技術を埋め込むことは、{{htmlelement("object")}} や、あまり使われていない {{htmlelement("embed")}} などの要素によって実現され、当時は非常に便利でした。アクセシビリティ、セキュリティ、ファイルサイズなど、多くの問題が発生して以来、それらは流行していませんでした。最近のモバイルデバイスのほとんどは、このようなプラグインをサポートしておらず、デスクトップのサポートは出口にあります。

+ +

最後に、{{htmlelement("iframe")}} 要素が現れました({{htmlelement("canvas")}}、{{htmlelement("video")}} などのコンテンツを埋め込む他の方法と一緒に)。これは、ウェブ文書全体を別のウェブ文書に埋め込む方法を提供し、あたかも {{htmlelement("img")}} か他の要素であるかのように、今日では普通に使用されています。

+ +

歴史の授業を終了して、これらのいくつかの使い方を見てみましょう。

+ +

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

+ +

この記事では、能動的学習セクションにまっすぐ飛び込んで、埋め込み技術が有用であるかどうかをすぐに知ることができます。オンラインの世界では Youtube はとてもよく知られていますが、多くの人は利用可能な共有施設については知らないのです。YouTube が {{htmlelement("iframe")}} を使って好きなページに動画を埋め込むことができる仕組みを見てみましょう。

+ +
    +
  1. まず、Youtube へ行き、あなたが好きな動画を見つけてください。
    2. +
  2. 動画の下に [共有] ボタンがあります。これを選択すると、共有オプションが表示されます。
    3. +
  3. [埋め込む] ボタンを選択すると、<iframe> コードがいくつか表示されます。これをコピーします。
    4. +
  4. 下の入力ボックスにそれを挿入し、結果が出力にあるかどうかを確認します。
    5. +
+ +

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

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

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

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

iframe の詳細

+ +

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

+ +

<iframe> で検討すべき{{anch("Security concerns","セキュリティ上の懸念")}}がいくつかあり、これについては以下で説明しますが、あなたのウェブサイトで使用しないでください — ちょっとした知識と慎重な考えが必要です。コードを少し詳しく見てみましょう。あなたのウェブページの1つに MDN の用語集を含めることを考えていたら、次のようなことを試すことができます。

+ +
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox>
+  <p>
+    <a href="https://developer.mozilla.org/en-US/docs/Glossary">
+    iframe をサポートしていないブラウザーのための代替リンク
+    </a>
+  </p>
+</iframe>
+ +

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

+ +
+
{{htmlattrxref('allowfullscreen','iframe')}}
+
設定されている場合、<iframe> は、 Full Screen API を使用してフルスクリーンモードにすることができます(この記事の範囲外です)。
+
{{htmlattrxref('frameborder','iframe')}}
+
1 に設定すると、これはブラウザーにこのフレームと他のフレームとの境界を描画するように指示します。これは既定の動作です。0 は境界を取り去ります。{{Glossary('CSS')}} で {{cssxref('border')}}: none; を使用すると、同じ効果がより良く達成できるので、この属性を使用することはもうお勧めできません。
+
{{htmlattrxref('src','iframe')}}
+
この属性は、{{htmlelement("video")}} や {{htmlelement("img")}} と同様に、埋め込む文書の URL を指すパスを含んでいます。
+
{{htmlattrxref('width','iframe')}} と {{htmlattrxref('height','iframe')}}
+
これらの属性は、iframe の幅と高さを指定します。
+
代替コンテンツ
+
{{htmlelement("video")}} のような他の要素と同じように、 <iframe> と </iframe> のタグの間に、ブラウザーが <iframe> をサポートしていない場合に表示される代替コンテンツを含めることができます。この場合、代わりにページへのリンクが含まれています。最近では、<iframe> をサポートしていないブラウザーを見つけることはまずありません。
+
{{htmlattrxref('sandbox','iframe')}}
+
この属性は、他の <iframe> の機能よりも若干現代的なブラウザー(たとえば、IE 10 以上)で機能し、高度なセキュリティ設定を要求します。これについては、次のセクションで詳しく説明します。
+
+ +
+

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

+
+ +

セキュリティ上の懸念

+ +

上ではセキュリティ上の懸念について言及しました。これについてもう少し詳しく説明しましょう。あなたはこのコンテンツのすべてを初めから完全に理解することを期待していません。この懸念を認識して、より経験豊かになり、あなたの実験や作業で <iframe> の使用を検討し始める参考にしてください。また、恐怖を感じ、<iframe> を使わない必要はありません — 注意するだけです。

+ +

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

+ +
+

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

+
+ +

簡単な例ですが、先ほど紹介した例をブラウザーに読み込んでみましょう。Github にライブが公開されています(ソースコードも参照してください)。実際にページに何も表示されませんが、ブラウザーの開発者ツールのコンソールに、理由を示すメッセージが表示されます。Firefox では、"Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing." (X-Frame-Optionsによって読み込みが拒否されました: https://developer.mozilla.org/en-US/docs/Glossary はフレーミングを許可していません。)というメッセージが表示されます。これは、MDN を作成した開発者が、<iframe> 内に埋め込まれないようにウェブサイトのページを提供する設定をサーバーに組み込んだためです(下記の {{anch("Configure CSP directives","CSP ディレクティブの設定")}}を参照してください)。これは、理にかなっています — あなたのサイトにそれらを埋め込んであなた自身のものと主張するようなことをしない限り、MDN のページ全体が他のページに埋め込まれるのは本当に意味がありません — または、クリックジャッキングを介してデータを盗み出そうとする。どちらも本当に悪いことです。さらに、誰もがこれをやり始めたら、すべての追加の帯域幅が Mozilla に多額の費用をかけるようになります。

+ +

必要なときにのみ埋め込みます

+ +

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

+ +
+

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

+ +

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

+
+ +

HTTPS を使用する

+ +

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

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

HTTPS を使用するには、高価なセキュリティ証明書が必要です(ただし、Let's Encrypt で簡単にできます) — 入手できない場合は、親文書を HTTP で配信できます。しかし、上記の HTTPS の2つ目の利点のため、コストにかかわらず、第三者のコンテンツを HTTP に埋め込むことは絶対にしないでください(最良の場合のシナリオでは、ユーザのウェブブラウザーは恐ろしい警告を表示します)。<iframe> を使用してコンテンツを埋め込むことができる評判の良い企業はすべて、HTTPS 経由で利用できるようになります — たとえば、Google マップや YouTube からコンテンツを埋め込む場合は、<iframe> の src 属性内の URL を調べます。

+ +
+

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

+
+ +

常に sandbox 属性を使用する

+ +

攻撃者には、あなたのウェブサイトで悪いことを行うことができるような力を与えたくないので、埋め込みコンテンツには、その仕事を行うために必要な権限のみを与えるべきです。もちろん、これは自分のコンテンツにも当てはまります。適切に(またはテスト用に)使用できるが、コードベースの残りの部分に何らかの害(偶発的または悪意のある)を及ぼすことができないコード用のコンテナは、サンドボックスと呼ばれます。

+ +

サンドボックスにないコンテンツはあまりにも多くのことを行うことができます( JavaScript の実行、フォームの送信、ポップアップウィンドウなど)。既定では、前述の例に示すように、パラメーターなしの sandbox 属性を使用して、使用可能なすべての制限を課す必要があります。

+ +

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

+ +
+

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

+
+ +

CSP ディレクティブの設定

+ +

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

+ +
+

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

+
+ +

<embed> 要素と <object> 要素

+ +

{{htmlelement("embed")}} 要素と {{htmlelement("object")}} 要素は、{{htmlelement("iframe")}} とは異なる機能を果たします。これらの要素は、Java アプレットや Flash などのプラグイン技術、PDF(ブラウザーで PDF プラグインを使用して表示できる)、動画、SVG、画像などのコンテンツを含む、複数のタイプの外部コンテンツを埋め込む汎用埋め込みツールです!

+ +
+

メモ: プラグインは、ブラウザーがネイティブに読むことができないコンテンツへのアクセスを提供するソフトウェアです。

+
+ +

しかし、あなたはこれらの要素を大いに利用することはまずありません。アプレットは何年も使われておらず、Flash は多くの理由から人気がなくなりました (下記の{{anch("The case against plugins","プラグインに対するケース")}}を参照)。PDF は埋め込まれたものよりもリンクされている傾向があり、画像や動画などの他のコンテンツには、それらを扱うためのずっと優れた、より簡単な要素があります。プラグインとこれらの埋め込み方法は、従来の技術ですが、イントラネットやエンタープライズプロジェクトのような特定の状況でそれらを見かけた場合に備えて言及しています。

+ +

プラグインのコンテンツを埋め込む必要がある場合の最低限必要な情報です。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{htmlelement("embed")}}{{htmlelement("object")}}
埋め込みコンテンツの {{glossary("URL")}}{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
埋め込みコンテンツの正確な{{glossary("MIME type", 'メディアタイプ')}}{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
プラグインによって制御されるボックスの高さと幅 (CSS ピクセル単位){{htmlattrxref('height','embed')}}
+ {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
+ {{htmlattrxref('width','object')}}
プラグインにパラメータとして供給するための名前と値それらの名前と値を持つ特別な属性<object> 内に含まれる単一タグの {{htmlelement("param")}} 要素
利用不可能なリソースに対する代替として独立した HTML コンテンツサポートされていません(<noembed> は廃止されました)<object> 内の、<param> 要素の後に含まれる
+ +
+

メモ: <object> には、data 属性、type 属性、またはその両方が必要です。両方を使用する場合は、{{htmlattrxref('typemustmatch','object')}} 属性を使用することもできます(この記事の執筆時点では、Firefox でのみ実装されています)。typemustmatch は、type 属性が正しいメディアタイプを提供していない限り、埋め込みファイルが実行されないようにします。typemustmatch は、異なる{{glossary("origin","オリジン")}}のコンテンツを埋め込んでいる場合に、大きなセキュリティ上の利点をもたらすことができます(攻撃者がプラグインを介して任意のスクリプトを実行することを防ぐことができます)。

+
+ +

次に、{{htmlelement("embed")}} 要素を使用して Flash ムービーを埋め込む例を示します(Github でライブを見て、ソースコードも確認してください)。

+ +
<embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer">
+ +

かなり恐ろしいですね。Adobe Flash ツールで生成された HTML は、<embed> 要素が埋め込まれた <object> 要素を使用して、すべてのベースをカバーするために悪化する傾向がありました(例を参照してください)。Flash は、HTML5 動画の代替コンテンツとしても使用されていましたが、これは必要ではないと見られています。

+ +

次に、PDF をページに埋め込む <object> の例を見てみましょう(ライブのサンプルとソースコードを参照)。

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

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

+ +

プラグインに対するケース

+ +

かつて、プラグインはウェブ上で不可欠でした。映画をオンラインで見るために Adobe Flash Player をインストールしなければならない時代を覚えていますか? そして、常に Flash Player と Java Runtime Environment のアップデートに関する迷惑な警告を受けていました。ウェブ技術はこれまでより堅牢に成長し、その時代は終わりを告げています。ほとんどのアプリケーションでは、プラグインに依存するコンテンツの配信をやめ、代わりにウェブテクノロジを活用し始めてください。

+ + + +
+

Note: その固有の問題点と Flash のサポート不足により、 Adobe は2020年末に Flash のサポートを終了すると発表しました。 2020年1月の時点で、ほとんどのブラウザーは既定で Flash コンテンツをブロックしており、2020年12月31日までにはすべてのブラウザーで Flash 機能が完全に削除されます。それ以降は、既存の Flash コンテンツにアクセスできなくなります。

+
+ +

だから何をすべきか? 双方向性が必要な場合、HTML と {{glossary("JavaScript")}} は、Java アプレットや旧式の ActiveX/BHO 技術を必要とせずに、簡単に仕事を完了させることができます。Adobe Flash に頼る代わりに、メディアの要求に合わせて HTML5 動画、ベクターグラフィックスに SVG、複雑な画像やアニメーションに Canvas を使用することができます。Peter Elst は、数年前にすでに、Adobe Flash が特殊なゲームやビジネスアプリケーションを除いて、仕事のための適切なツールではないことを書いていました(英語)。ActiveX に関しては、Microsoft の {{glossary("Microsoft Edge","Edge")}} ブラウザーでさえサポートされなくなりました。

+ +

スキルをテストしよう

+ +

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

+ +

まとめ

+ +

ウェブ文書に他のコンテンツを埋め込むという話題は、すぐに非常に複雑になる可能性があるので、関連する技術のより高度な機能のいくつかを示唆しながらも、すぐに関連すると思われる単純で使い慣れた方法で紹介しようとしました。まず、あなたのページに地図や動画などの第三者のコンテンツを含めること以外に埋め込みを使用する可能性は低いです。しかし、経験が増すにつれて、より多くの用途を見つけることになるでしょう。

+ +

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

+ +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ja/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..80dfff9fc9 --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,282 @@ +--- +title: レスポンシブ画像 +slug: Learn/HTML/Multimedia_and_embedding/Responsive_images +tags: + - Article + - Beginner + - CodingScripting + - Design + - Graphics + - Guide + - HTML + - Image + - Intermediate + - img + - picture + - sizes + - srcset + - ガイド + - グラフィックス + - デザイン + - 中級 + - 初心者 + - 画像 + - 記事 +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

この記事では、レスポンシブ画像の概念 — 画面サイズ、解像度などの機能が大きく異なる機器で適切に動作する画像 — について学び、 HTML がそれを実装する上でどのような道具を提供しているかを見てみます。 レスポンシブ画像は、レスポンシブウェブデザインの一部にすぎませんが(そしてそれを実現する上で良いステージになりますが)、 CSS のトピックの将来のモジュールで多くのことを学ぶトピックです。

+
+ + + + + + + + + + + + +
前提:HTML の基本及びウェブページに静止画を追加する方法をすでに知っているものとします。
目的:{{htmlattrxref("srcset", "img")}} や {{htmlelement("picture")}} 要素のような機能を使って、ウェブサイトにレスポンシブ画像を実装する方法を学ぶこと。
+ +

なぜレスポンシブ画像なのか？

+ +

では、レスポンシブ画像でどのような問題を解決しようとしているのでしょうか。 典型的なシナリオを見てみましょう。 典型的なウェブサイトには、おそらく訪問者の印象を良くするためのヘッダー画像と、おそらくその下にはコンテンツ画像がいくつかあります。 おそらく、ヘッダー画像はヘッダーの幅全体にまたがるようにして、コンテンツ画像はコンテンツ列のどこかに合わせたいと思うでしょう。この簡単な例を見てみましょう。

+ +

広い画面で表示されているサイト例 - ここでは最初の画像はよく、中央で細部まで十分に見えます。

+ +

これは、ラップトップやデスクトップなどの広い画面のデバイスではうまく表示できます(ライブを見て、 Github でソースコードを見ることができます)。 以下の点を除けば CSS については詳しく説明しません。

+ + + +

これは問題ありませんが狭い画面のデバイスでサイトを表示するときには問題が発生します。 ヘッダーは正しく見えますが、モバイルデバイスの画面の高さ全体のうち多くの部分を占めるようになってきています。 最初のコンテンツ画像はひどく見えにくくなっています。 この寸法では、中の人物がほとんど見えていません。

+ +

狭い画面で見たサイト例。最初の画像は細部が分かりにくいところまで縮小しています。

+ +

改良点は、サイトを狭い画面で見たときに画像の重要なディティールを表示するため、切り取った画像を表示することです。 第2の切り取られた画像は、タブレットのような中幅の画面のデバイス用に表示することができます。 これは一般的にアートディレクションの問題として知られています。

+ +

さらに、小さなモバイル画面で見ている場合、このような大きな画像をページに埋め込む必要はありません。 これは解像度切り替えの問題と呼ばれています。 ラスター画像は、ベクターグラフィックスの所で見たように、幅のピクセルの集まりと、高さのピクセルの集まりです。 小さいラスター画像は、元のサイズよりも大きく表示されていると粒状に見え始めます(ベクターグラフィックスではそうなりません)。

+ +

逆に、意図した大きさよりもはるかに小さい画面に大きな画像を表示する必要はありません。 そうすることで帯域幅を無駄にすることがあります。 特に、モバイルユーザーは、小さな画像がデバイスに表示される時、デスクトップ向けの大きな画像をダウンロードすることによって帯域幅を無駄にしたくありません。 理想的な状況は、複数の解像度が利用可能で、ウェブサイト上のデータにアクセスするデバイスに応じて適切なサイズを提供することです。

+ +

状況をより複雑にしているのが、一部のデバイスは高い解像度の画面を持ち、きれいに表示するには、期待されるよりも大きい画像を必要としていることです。 これは本質的に同じ問題ですが、少し異なる状況のものです。

+ +

ベクター画像はある側面でこれらの問題を解決すると思うかもしれません。 — ファイルサイズが小さくて容易に縮尺変更でき、どこでも利用できるからです。 しかし、すべての種類の画像に適しているわけではありません。 — 単純な図形、パターン、インターフェイス要素などには適していますが、例えば写真のような、ディティールのものをベクターベースの画像で作成すると、とても複雑になります。  JPEG のようなラスター画像形式は、上記の例に見られるような種類の画像により適しています。

+ +

この種の問題は、ウェブが最初に登場したとき、90年代前半から中期の頃には存在しませんでした — ウェブをブラウズする唯一のデバイスはデスクトップとラップトップであったため、ブラウザーの技術者や仕様書の著者は解決策を実装することを考えませんでした。 レスポンシブ画像技術は上記のような問題を解決するために最近になって実装され、ブラウザーに様々な画像ファイル、どれも表示するものは同じですが、ピクセル数が異なる様々な画像(解像度の切り替え)、異なる領域の取り方が異なる様々な画像(アートディレクション)を含めることができます。

+ +
+

メモ: この記事で説明している新機能 — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — は、最近のデスクトップ及びモバイルのブラウザーのすべてが対応しています(Microsoft Edge ブラウザーも含みますが Internet Explorer は含みません)。

+
+ +

レスポンシブ画像の作り方

+ +

この節では、上で説明した二つの問題を踏まえ、 HTML のレスポンシブ機能を使用してそれらを解決する方法を示します。 なお、上記の例のコンテンツエリアに見られるように、この節では HTML の {{htmlelement("img")}} に注目します。 — サイトヘッダーの画像は単なる装飾なので、 CSS 背景画像を使用して実装します。 CSS はおそらく、 HTML よりもレスポンシブデザインのための優れたツールを持っています(英語)ので、これについては将来 CSS のモジュールで説明します。

+ +

解像度の切り替え: 様々な寸法

+ +

それでは、解像度切り替えで解決したい問題は何でしょうか？ 同じ画像コンテンツを、機器に応じて大きくしたり小さくしたりして表示することです。 — これは、例の中の2番目のコンテンツ画像の状況です。 標準的な {{htmlelement("img")}} 要素は、伝統的にブラウザーにソースファイルを一つだけしか指定できません。

+ +
<img src="elva-fairy-800w.jpg" alt="妖精の衣装を着たエルバ">
+ +

しかし、複数の追加のソース画像と、ブラウザーが正しいものを選択する助けになるヒントを提供することができる、新しい2つの属性 — {{htmlattrxref("srcset", "img")}} 及び {{htmlattrxref("sizes", "img")}} — を使用することができます。 この例は、 Github の responsive.html で見ることができます(ソースコードも参照してください)。

+ +
<img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="妖精の衣装を着たエルバ">
+ +

srcset 及び sizes 属性は複雑に見えますが、上記のように属性値のそれぞれの部分を別々の行に書けば、理解することは難しくありません。 それぞれの値にはコンマ区切りのリストが設定されており、それぞれのリストの部分は3つの部分からなっています。 それぞれの中身を見てみましょう。

+ +

srcset は、ブラウザーが選択することができる画像のセットと、それぞれの画像の寸法を定義します。 それぞれのコンマの前に書くものは以下の通りです。

+ +
    +
  1. 画像ファイル名(elva-fairy-480w.jpg)
    2. +
  2. 空白
    3. +
  3. 画像の本質的な幅のピクセル数(480w) — なお、これは単位に px ではなく w を使用します。 これは画像の実際の寸法で、これはコンピューターの画像ファイルを調べると分かります(例えば Mac では Finder で画像を選択して、 Cmd + I を押すと情報画面が出てきます)。
    4. +
+ +

sizes は、一連のメディア条件(例えば画面の幅)であり、特定のメディア条件が成立したときに、どの寸法の画像を選択するのが最適化を示します。 — これらは以前に説明したヒントです。 この場合、それぞれのコンマの前には次のようなものを書きます。

+ +
    +
  1. メディア条件((max-width:480px)) — これについては CSS の記事で詳しく学びますが、今はメディア条件とは画面がなることができる状態であるとだけ言っておきましょう。 この場合、「ビューポートの幅が 480 ピクセル以下であるとき」と言っています。
    2. +
  2. 空白
    3. +
  3. メディア条件が成立したときに埋めるスロットの幅(440px)
    4. +
+ +
+

メモ: スロットの幅については、絶対的な長さ(px, em)又は相対的な長さ(パーセント値など)で指定することができます。 最後のスロットの幅にはメディア条件がないことに気づいたかもしれません。 — これは成立するメディア条件がない場合に使用される既定値です。 ブラウザーは最初に一致した条件の後はすべて無視しますので、メディア条件の順序に注意してください。

+
+ +

したがって、これらの属性を使用すると、ブラウザーは次のようになります。

+ +
    +
  1. そのデバイスの幅を見る。
    2. +
  2. sizes リストの中のどのメディア条件が真であるかを確認する。
    3. +
  3. そのメディア照会で与えられたスロットサイズを見る。
    4. +
  4. 選択したスロットサイズに最も近い srcset リストで参照される画像を読み込みます。
    5. +
+ +

以上です！  この時点で、480px のビューポート幅を持つブラウザーがページを読み込むと、 (max-width: 480px) メディア条件が真となるため、440px スロットが選択されるので、その固有幅(480w)が 440px に最も近い elva-fairy-480w.jpg が読み込まれます。 800px の画像は 128KB ですが、480px の画像は 63KB で 65KB の節約になります。 今、これが多くの写真を持っているページだったと想像してみてください。 この技術を使用することで、モバイルユーザーは多くの帯域幅を節約できます。

+ +

これらの機能をサポートしていない古いブラウザーはそれを無視し、 {{htmlattrxref("src", "img")}} 属性で参照されている画像を通常の方法で読み込みます。

+ +
+

メモ: ドキュメントの {{htmlelement("head")}} には、 <meta name="viewport" content="width=device-width"> という行があります。  これは、モバイルブラウザーがウェブページを読み込むために実際のビューポート幅を使用するように強制します。  (一部のモバイルブラウザーでは、ビューポート幅について嘘をつき、大きなビューポート幅でページを読み込み、読み込んだページを縮小するため、レスポンシブ画像やデザインにはあまり役に立ちません。  これについては、今後のモジュールで詳しく説明します。)

+
+ +

便利な開発者ツール

+ +

ブラウザーには、必要なスロット幅などの作業に役立ついくつかの便利な開発者ツールがあります。 私がそれらを作業していたとき、私は最初にサンプルの非レスポンシブ版(not-responsive.html)を読み込んでからレスポンシブデザインモード(ツール → ウェブ開発 → レスポンシブデザインモード)に行きました。 まるでさまざまなデバイスの画面サイズで表示されているかのようにウェブページのレイアウトを見ることができます。

+ +

ビューポート幅を 320px から 480px に設定して、それぞれのために私はインスペクタへ行き、私たちが興味を持っている <img> 要素をクリックしてから、画面の右側にある [レイアウト] タブの [ボックスモデル] でそのサイズを調べました。 これはあなたが必要とする固有の画像幅を与えるはずです。

+ +

インスペクタで強調表示された画像要素を持つfirefox開発者ツールのスクリーンショット。サイズは440 x 293ピクセルです。次に、ビューポート幅を任意に設定して(たとえば、幅を狭く設定する)、ネットワークインスペクタ(ツール → ウェブ開発 → ネットワーク)を開き、ページを再読み込みすることで、srcset が機能しているかどうかを確認できます。 これにより、ウェブページを構成するためにダウンロードされた資産のリストが表示されます。 ここでダウンロード用に選択された画像ファイルを確認できます。

+ +
+

メモ: Chrome でテストするときは、[その他ツール] → [デベロッパー ツール] → [ネットワーク] タブの [Disable cache (when DevTools is open)] チェックボックスをオンにして、開発者ツールが開いているときにキャッシュを無効にします。  そうしないと、Chrome はキャッシュされた画像をより適切なものより優先します。

+
+ +

firefox開発者ツールのネットワークインスペクタのスクリーンショット。ページのHTMLがダウンロードされていることと、レスポンシブ画像の2つの800ワイドバージョンを含む3つの画像

+ +

解像度の切り替え: 同じサイズ、異なる解像度

+ +

複数の画面解像度をサポートしていても、誰もが画面上で同じ実世界サイズで画像を見る場合は、sizes を指定せずに x 記述子を指定した srcset を使用してブラウザーに適切な解像度の画像を選択させることができます — やや簡単な構文です！ これは srcset-resolutions.html のようなものです(ソースコードも参照してください)。
+  

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="妖精の衣装を着たエルバ">
+
+ +

妖精の衣装を着た小さな女の子の絵、古いカメラのフィルム効果が画像に適用されるこの例では、次の CSS が画像に適用され、画面上に 320 ピクセルの幅が設定されます(CSS ピクセルとも呼ばれます)。

+ +
img {
+  width: 320px;
+}
+ +

この場合、sizes は必要ありません。ブラウザーは、表示されている画面がどの解像度であるかを単純に調べ、srcset で参照される最も適切な画像を提供します。 したがって、ページにアクセスするデバイスが標準解像度や低解像度の画面を持っていて、1つのデバイスピクセルが各 CSS ピクセルを表している場合、elva-fairy-320w.jpg の画像が読み込まれます(1x は暗黙のため、含める必要はありません)。 デバイスが CSS ピクセルあたり2つのデバイスピクセルの高解像度を持つ場合、elva-fairy-640w.jpg の画像が読み込まれます。 640px の画像は 93KB ですが、320px の画像は 39KB です。

+ +

アートディレクション

+ +

要約すると、アートディレクションの問題は、表示される画像を異なる画像表示サイズに合うように変更したいことを含みます。 たとえば、デスクトップブラウザーで見たときに中央に人がいる大きな風景をウェブサイトに表示している場合、モバイルブラウザーでウェブサイトを表示すると縮小され、人がとても小さくて見えにくいので格好悪くなります。 モバイルでは、人にズームインしたより小型のポートレイト画像を表示するほうがよいでしょう。  {{htmlelement("picture")}} 要素は、この種の解決法を実装することを可能にします。
+
+ オリジナルの not-responsive.html の例に戻ると、アートディレクションがひどく必要な画像があります。

+ +
<img src="elva-800w.jpg" alt="クリスは立って彼の娘エルバを保持します">
+ +

{{htmlelement("picture")}} でこれを修正しましょう！   <video>や<audio>と同様に、<picture> 要素はラッパーで、ブラウザーが選択できるいくつかの異なるソースを提供するいくつかの {{htmlelement("source")}} 要素を含み、次に極めて重要な {{htmlelement("img")}} 要素が続きます。 responsive.html のコードは次のようになります。

+ +
<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="クリスは立って彼の娘エルバを保持します">
+</picture>
+
+ + + +

このコードでは、以下に示すように、広い画面と狭い画面の両方に適切な画像を表示することができます。

+ +

広い画面で表示された私たちのサンプルサイト - ここでは最初の画像は大丈夫です。中央のディティールを見るのに十分です。最初の画像をポートレートに切り替えるために使用されるpicture要素を使用した狭い画面で表示されたサンプルサイトは、ディティールをクローズアップし、狭い画面でより便利になりました

+ +
+

メモ: media 属性は、アートディレクションのシナリオでのみ使用してください。 media を使用する場合は、sizes 属性内でメディア条件も指定しないでください。

+
+ +

なぜ CSS や JavaScript を使ってこれを行うことができないのですか？

+ +

ブラウザーがページの読み込みを開始すると、メインのパーサーがページの CSS と JavaScript を読み込んで解釈する前に、画像のダウンロード(先読み)を開始します。 これは便利なテクニックで、平均してページ読み込み時間の 20％ を削減します。 しかし、レスポンシブ画像では役に立ちません。 そのため、srcset のような解決法を実装する必要があります。 たとえば、 {{htmlelement("img")}} 要素を読み込んでから JavaScript でビューポートの幅を検出し、必要に応じて元の画像をより小さなものに動的に変更することはできません。 それまでには、元の画像が既に読み込まれていて、さらに小さい画像も読み込むことになります。 これは、レスポンシブ画像の条件ではさらに悪化します。

+ + + +

現代の画像フォーマットを大胆に使用する

+ +

小さなファイルサイズと高品質を同時に維持できる、エキサイティングな新しい画像フォーマット(WebP や PEG-2000 など)がいくつかあります。 しかし、ブラウザーのサポートにはむらがあります。

+ +

<picture> は、古いブラウザーにも対応しています。 MIME タイプを type 属性内に指定すると、ブラウザーはサポートしていないファイルタイプを直ちに拒否できます。

+ +
<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="4つの正三角形から構築された通常のピラミッド">
+</picture>
+
+ + + +

能動的学習: あなた自身のレスポンシブ画像の実装

+ +

この能動的学習では、私たちはあなたが勇敢に(ほとんど)一人で行くことを期待しています。 <picture> を使って、あなた自身の適切なアートディレクションの狭い画面や広い画面と、srcset を使用する解像度切り替えの例を実装してください。

+ +
    +
  1. あなたのコードを格納するためのシンプルな HTML を書く(必要に応じて not-responsive.html を出発点として使用する)
    2. +
  2. どこかから細かいディテールが入った素晴らしい広い画面のランドスケープ画像を探してきましょう。 グラフィックスエディタを使用してウェブサイズの画像を作成し、それをトリミングしてディテールを拡大した小さな部分を表示し、2番目の画像を作成します(約 480px の幅がこれに適しています)。
    3. +
  3. <picture> 要素を使用して、アートディレクション画像切り替えを実装します。
    4. +
  4. サイズの異なる複数の画像ファイルを作成し、それぞれが同じ画像を表示します。
    5. +
  5. srcset や sizes を使用して、異なる解像度で同じサイズの画像を提供するか、異なるビューポートの幅で異なる画像サイズを提供するかのいずれかの解像度切り替えの例を作成します。
    6. +
+ +
+

メモ: 上記のように、ブラウザーの開発者ツールの助けを借りて、必要なサイズにしてください。

+
+ +

まとめ

+ +

それはレスポンシブ画像のラップです — あなたはこれらの新しいテクニックで遊ぶことを楽しんでください。 要約すると、私たちがここで議論してきた2つの明確な問題があります。

+ + + +

これはまた、マルチメディアと埋め込みのモジュール全体を閉じます！  先に進む前に行うべき唯一のことは、マルチメディアの評価を試み、あなたがどのように乗り出すかを見ることです。 楽しんでください。

+ +

関連項目

+ + + +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

このモジュール

+ + +
diff --git a/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..205d7b7027 --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,307 @@ +--- +title: 動画と音声のコンテンツ +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +tags: + - Article + - Audio + - Beginner + - Guide + - HTML + - Video + - captions + - subtitles + - track + - ガイド + - 初心者 + - 動画 + - 記事 + - 音声 +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

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

+ + + + + + + + + + + + +
前提条件:基本的なコンピュータリテラシー、インストールされた基本ソフトウェア、ファイル操作の基本知識、HTML の基礎知識(HTML 入門)、および HTML の画像。
目的:動画や音声のコンテンツをWebページに埋め込み、動画にキャプションや字幕を追加する方法を学びます。
+ +

Webでの動画と音声

+ +

Web 開発者は、あらゆる種類の動画 (動画ファイルはテキストや画像よりもはるかに大きい) をサポートするのに十分な速さがある帯域幅を使い始めた2000年代初頭以来、Web 上で動画や音声を長時間使用したいと考えていました。初期段階では、HTML などのネイティブな Web テクノロジーでは動画や音声を Web に埋め込むことができなかったため、Flash (および後で Silverlight) などの独自技術 (またはプラグインベース) が一般的になりました。この種の技術はうまくいきましたが、HTML/CSS の機能、セキュリティの問題、アクセシビリティの問題でうまく機能しないなど、さまざまな問題がありました。

+ +

もし正しく行っていれば、ネイティブな解決策はこれの多くを解決します。幸いにも、数年後、{{glossary("HTML5")}} 仕様には、{{htmlelement("video")}} 要素と {{htmlelement("audio")}} 要素、およびそれらを制御するためのいくつかのぴかぴかの新しい {{Glossary("JavaScript")}} {{Glossary("API")}} が追加されました。ここでは JavaScript を見ていません — HTML で実現できる基本的な基礎だけです。

+ +

音声や動画のファイルを作成する方法は教えません — 完全に異なる知識や技能が必要です。あなたが実験のための音声や動画のファイルとサンプルコードを手に入れることができない場合に備えて、それを提供しています。

+ +
+

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

+
+ +

<video> 要素

+ +

{{htmlelement("video")}} 要素を使用すると、動画を非常に簡単に埋め込むことができます。本当に簡単な例は次のようになります。

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

機能は次のとおりです。

+ +
+
{{htmlattrxref("src","video")}}
+
{{htmlelement("img")}} 要素と同じように、src (ソース) 属性には、埋め込みたい動画へのパスが含まれています。これは、まったく同じように動作します。
+
{{htmlattrxref("controls","video")}}
+
ユーザは、動画や音声の再生を制御できる必要があります (特にてんかんを患っている人にとっては重要です)。controls 属性を使用してブラウザ独自のコントロールインターフェイスを組み込むか、適切な JavaScript API を使用してインターフェイスを構築する必要があります。少なくとも、インターフェイスにはメディアの開始と停止、および音量の調整が含まれている必要があります。
+
<video> タグ内の段落
+
これは代替コンテンツと呼ばれ、ページにアクセスしているブラウザが <video> 要素をサポートしていない場合に表示され、古いブラウザでの代替手段となります。これはあなたが好きなことができます。この場合、動画ファイルへの直接リンクが提供されているため、使用しているブラウザに関係なく、ユーザは少なくとも何らかの方法でアクセスできます。
+
+ +

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

+ +

小さな白いウサギの動画を表示するシンプルなビデオプレーヤー

+ +

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

+ +

複数のフォーマットをサポートする

+ +

上の例では、Safari や Internet Explorer などのブラウザで上記のライブのリンクにアクセスしたなら、すでに気づいているかもしれない問題があります。動画は再生されません!  これは、さまざまなブラウザが異なる動画 (および音声) のフォーマットをサポートしているためです。

+ +

用語をすばやく説明しましょう。MP3、MP4、WebM などの形式はコンテナフォーマットと呼ばれます。それらは、音声トラック、動画トラック (動画の場合)、および提示されるメディアを記述するメタデータなど、歌または動画全体を構成する異なる部分を含みます。

+ +

音声トラックと動画トラックもさまざまなフォーマットになっています。たとえば:

+ + + +

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

+ +
+

メモ: 音声と動画のコーデックの互換性表からわかるように、それほど単純ではありません。さらに、多くのモバイルプラットフォームのブラウザは、サポート対象のシステムのメディアプレーヤーに再生するためにそれを渡すことで、サポートされていないフォーマットを再生することができます。しかしこれは今のところできます。

+
+ +

上記のフォーマットは、動画と音声を管理可能なファイルに圧縮するために存在します (生の動画と音声は非常に大きい)。ブラウザには、Vorbis や H.264 などの{{Glossary("Codec","コーデック")}}が含まれています。これらのコーデックは、圧縮された音声と動画を2進数字に変換して戻すために使用されます。上記のように、残念ながらブラウザはすべて同じコーデックをサポートしているわけではないので、メディアの制作ごとに複数のファイルを用意する必要があります。メディアをデコードするために適切なコーデックがない場合、再生されません。

+ +
+

メモ: なぜこのような状況が存在するのだろうか。MP3 (音声用)と MP4/H.264 (動画用) はどちらも広くサポートされており、良質です。しかし、それらはまた、特許を握られている — 米国特許は、MP3 は2017年まで、H.264 は2027年までカバーしています。つまり、特許を保有していないブラウザは、これらのフォーマットをサポートするために膨大な金額を支払う必要があります。さらに、多くの人々は、制限されたソフトウェアを原則として避け、オープンフォーマットを支持しています。このため、さまざまなブラウザに複数のフォーマットを提供する必要があります。

+
+ +

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

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

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

+ +

各 <source> 要素には type 属性もあります。これはオプションですが、動画ファイルの  {{glossary("MIME type","MIME タイプ")}}が含まれており、ブラウザがこれらを読み込んで理解できない動画をすぐにスキップすることができます。それらが含まれていない場合、ブラウザは各ファイルを読み込んで再生しようとしますが、より多くの時間とリソースを必要とします。

+ +
+

メモ: サポートされているメディアフォーマットの記事には、一般的な {{glossary("MIME type","MIME タイプ")}}がいくつか含まれています。

+
+ +

その他の <video> 機能

+ +

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

+ +
<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>お使いのブラウザは HTML5 動画をサポートしていません。その代わりに<a href="rabbit320.mp4">動画へのリンク</a>があります。</p>
+</video>
+
+ +

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

+ +

再生する前にポスター画像を表示するビデオプレーヤー。 ポスター画像には "HTML5 video example, OMG hell yeah!" と書いてあります。新しい機能は次のとおりです。

+ +
+
{{htmlattrxref("width","video")}} と {{htmlattrxref("height","video")}}
+
これらの属性または {{Glossary("CSS")}} を使用して動画サイズを制御することができます。どちらの場合も、動画は元の縦横比 (アスペクト比) を維持します。アスペクト比が設定したサイズによって維持されない場合、動画は水平方向にスペースを埋めるように拡大し、デフォルトでは満たされていないスペースには無地の背景色が与えられます。
+
{{htmlattrxref("autoplay","video")}}
+
この属性は、ページの残りの部分がロードされている間に音声または動画の再生をすぐに開始します。ユーザに実際に迷惑をかけることがあるので、サイトで動画 (または音声) を自動再生することはお勧めしません。
+
{{htmlattrxref("loop","video")}}
+
この属性は、動画 (または音声) が終了するたびに再生を開始させます。これは迷惑になることもありますので、本当に必要な場合にのみ使用してください。
+
{{htmlattrxref("muted","video")}}
+
この属性を使用すると、デフォルトで音声をオフにしてメディアを再生します。
+
{{htmlattrxref("poster","video")}}
+
この属性は、動画の再生前に表示される画像の URL を値としてとります。これは、スプラッシュ画面または広告画面に使用するためのものです。
+
{{htmlattrxref("preload","video")}}
+
+

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

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

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

+ +

<audio> 要素

+ +

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

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>お使いのブラウザは HTML5 音声をサポートしていません。代わりに<a href="viper.mp3">音声へのリンク</a>があります。</p>
+</audio>
+ +

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

+ +

再生ボタン、タイマー、音量コントロール、および進行状況バーを備えたシンプルなオーディオプレーヤー

+ +
+

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

+
+ +

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

+ + + +

これ以外について <audio> は、<video> と同じ機能をすべてサポートしています。詳細については、上記のセクションを参照してください。

+ +

動画のテキストトラックを表示する

+ +

ここでは、もっと知りたいと思う、やや高度なコンセプトについて説明します。多くの人々は、少なくともある時点では、Web上で見つけた音声や動画のコンテンツを聞くことができない、または聞きたくない。たとえば:

+ + + +

音声や動画で話されている言葉の写しをこれらの人々に提供できるのはうれしいことではないでしょうか?  HTML5 動画のおかげで、WebVTT フォーマットと {{htmlelement("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. +
  2. {{htmlelement("track")}} 要素で .vtt ファイルにリンクします。<track> は <audio> または <video> 内に配置する必要がありますが、すべての <source> 要素の後に配置する必要があります。{{htmlattrxref("kind","track")}} 属性を使用して、キューが subtitles、captions、または descriptions のいずれであるかを指定します。さらに、{{htmlattrxref("srclang","track")}} 属性を使用して、字幕が書かれた言語をブラウザに伝えます。
    3. +
+ +

ここに例があります。

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

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

+ +

再生、停止、音量、キャプションのオン/オフなどのスタンドコントロールを備えたビデオプレーヤー。 動画の再生には、槍のような武器を持つ男のシーンが表示され、キャプションには "Esta hoja tiene pasado oscuro." と表示されます。

+ +

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

+ +
+

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

+
+ +

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

+ +

この能動的学習のために、(理想的には) あなたが世界に出て自分の動画や音声を録画するのが好ましいです — 最近の携帯電話では、音声や動画を非常に簡単に録音することができ、コンピュータに転送することができれば使用できます。動画の場合は WebM と MP4、音声の場合は MP3 と Ogg に行き着くには、変換する必要があるかもしれませんが、Miro Video Converter や Audacity など、あまり多くの手間をかけることなく、これを行うための十分なプログラムがあります。さあ、行ってください!

+ +

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

+ +

次のことをしましょう。

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

追加のボーナスとして、テキストトラックの研究や動画にキャプションを追加する方法などがあります。

+ +

まとめ

+ +

それはラップです。Web ページで動画や音声を楽しみながら楽しく遊びました!  次の記事では、{{htmlelement("iframe")}} や {{htmlelement("object")}} などの技術を使用して、Webにコンテンツを埋め込む他の方法について説明します。

+ +

関連情報

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +

このモジュール

+ + + +
+
+ + diff --git a/files/ja/learn/html/tables/advanced/index.html b/files/ja/learn/html/tables/advanced/index.html new file mode 100644 index 0000000000..bb33f6e292 --- /dev/null +++ b/files/ja/learn/html/tables/advanced/index.html @@ -0,0 +1,475 @@ +--- +title: HTML 表の高度な機能とアクセシビリティ +slug: Learn/HTML/Tables/Advanced +tags: + - Accessibility + - Advanced + - Article + - Beginner + - CodingScripting + - HTML + - Headers + - Learn + - caption + - scope + - sumary + - table + - tbody + - tfoot + - thead +translation_of: Learn/HTML/Tables/Advanced +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +

このモジュールの2番目の記事では、HTML テーブルのより高度な機能 (キャプション/要約、行をテーブルのヘッダー、本文、フッターのセクションにグループ化するなど) や、視覚障碍のあるユーザのためのテーブルのアクセシビリティについて調べます。

+ + + + + + + + + + + + +
前提知識:HTML の基礎 (HTML 入門を参照)。
目標:表のより高度な機能やアクセシビリティについて学ぶ
+ +

<caption> を用いて表にキャプションを追加する

+ +

テーブルにキャプションを付けるには、{{htmlelement("caption")}} 要素内に配置し、それを {{htmlelement("table")}} 要素内にネストします。これは <table> 要素の開始タグすぐ下に置くべきです。

+ +
<table>
+  <caption>ジュラ紀の恐竜</caption>
+
+  ...
+</table>
+ +

上記の簡単な例から推測できるように、キャプションには表の内容の説明が含まれています。 これは、ページに目を通して表が役に立つかどうかをすぐに把握したい全ての読者にとって便利ですが、特に盲目のユーザにとっては便利です。 スクリーンリーダーに表の内容を知るためだけに多くのセルの内容を読み上げさせるのではなく、キャプションを頼りにして表をより詳細に読み取るかどうかを決定できます。

+ +

キャプションは <table> タグのすぐ下に配置します。

+ +
+

注: {{htmlattrxref("summary","table")}} 属性は、<table> 要素で説明を提供するためにも使用できます。 これはスクリーンリーダーによっても読み上げられます。 ただし、summary は HTML5 仕様では{{glossary("deprecated","推奨されておらず")}}、(ページには表示されないので)晴眼のユーザには読むことができないため、代わりに <caption> 要素を使用することをお勧めします。

+
+ +

アクティブラーニング: キャプションの追加

+ +

前の記事で最初に出会った例を再考しながら、これを試してみましょう。

+ +
    +
  1. HTML 表の基本の最後から語学教師の学校の時間割を開くか、または timetable-fixed.html ファイルのローカルコピーを作成してください。
    2. +
  2. 表に適切なキャプションを追加します。
    3. +
  3. コードを保存してブラウザで開くと、コードがどのように見えるかがわかります。
    4. +
+ +
+

注: GitHub で私たちのバージョンを見つけることができます —  timetable-caption.html を見てください(ライブもご覧ください)。

+
+ +

<thead>、<tfoot>、<tbody> を用いて構造を追加する

+ +

表の構造がもう少し複雑になったら、それらにもっと構造的な定義を与えることは有用です。 これを行う明確な方法の1つは、{{htmlelement("thead")}}、{{htmlelement("tfoot")}}、および {{htmlelement("tbody")}} を使用することです。 これにより、表のヘッダー、フッター、および本体のセクションをマークアップできます。

+ +

これらの要素によって表がスクリーンリーダーのユーザにアクセスしやすくなることはなく、また視覚的な機能強化が生じることもありません。 ただし、これらはスタイリングやレイアウトに非常に役立ちます — CSS を表に追加するための便利なフックとして機能します。 いくつか興味深い例を挙げると、長い表の場合、全ての印刷ページで表のヘッダーとフッターを繰り返すようにしたり、表の本体を単一ページに表示して、上下にスクロールして内容を表示したりすることができます。

+ +

それらを使用するには、

+ + + +
+

注: <tbody> は常に全ての表に含まれていて、コードで指定しない場合は暗黙的に含まれます。 これを確認するには、<tbody> を含まない以前の例の1つを開き、ブラウザ開発者ツールの HTML コードを調べます — ブラウザによってこのタグが追加されたことがわかります。 なぜそれを含まないのかと疑問に思うかもしれません — すべき、表の構造とスタイリングがより細かく制御できるためです。

+
+ +

アクティブラーニング: 表構造の追加

+ +

これらの新しい要素を実行してみましょう。

+ +
    +
  1. まず、新しいフォルダに spending-record.html と minimal-table.css のローカルコピーを作成します。
    2. +
  2. ブラウザでそれを開いてみてください — あなたはそれが問題ないように見えますが、それは改善されることになるかもしれません。 支出額の合計を含む "SUM" 行は間違った場所にあるように思われ、コードから抜けている細部がいくつかあります。
    3. +
  3. 明白なヘッダー行を <thead> 要素内に、 "SUM" 行を <tfoot> 要素内に、そして残りの内容を <tbody> 要素内に配置します。
    4. +
  4. 保存して更新すると、<tfoot> 要素を追加すると "SUM" 行が表の一番下に移動していることがわかります。
    5. +
  5. 次に、{{htmlattrxref("colspan","td")}} 属性を追加して "SUM" セルを最初の4列にまたがるようにします。そのため、実際の数は "Cost" 列の下部に表示されます。
    6. +
  6. これらの要素が CSS を適用するためにどれほど有用であるかのアイデアをあなたに与えるために、表にいくつかの簡単な追加のスタイリングを追加しましょう。 HTML 文書の <head> の中には、空の {{htmlelement("style")}} 要素があります。 この要素内に、次の CSS コード行を追加します。 + 
    tbody {
+  font-size: 90%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+
    +
    7. +
  7. 保存して更新し、結果を確認します。 <tbody> 要素と <tfoot> 要素が適切に配置されていない場合は、同じスタイルを適用するためにはるかに複雑なセレクタ/規則を記述する必要があります。
    8. +
+ +
+

注: 現時点で私たちはあなたが CSS を完全に理解しているとは思っていません。 あなたが私たちの CSS モジュールを一通り学ぶとき、これについてより多くを学ぶでしょう(CSS 入門は始めるのに良い場所です。 スタイリングされた表に関する具体的な記事もあります)。

+
+ +

完成した表は次のようになります。

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

注: Github では、それを spending-record-finished.html として見つけることもできます(ライブもご覧ください)。

+
+ +

ネストした表

+ +

<table> 要素を含む完全な構造を含める限り、表を別の表の中にネストすることは可能です。 そのマークアップがスクリーンリーダーのユーザにとって混乱を招きやすく、アクセスしにくくなるため、これは一般的にはあまり推奨されません。 多くの場合、既存の表に追加のセル/行/列を挿入することもできます。 ただし、他のソースからコンテンツを簡単にインポートしたい場合などは、時々必要になります。

+ +

次のマークアップは、単純なネストした表を示しています。

+ +
<table id="table1">
+  <tr>
+    <th>title1</th>
+    <th>title2</th>
+    <th>title3</th>
+  </tr>
+  <tr>
+    <td id="nested">
+      <table id="table2">
+        <tr>
+          <td>cell1</td>
+          <td>cell2</td>
+          <td>cell3</td>
+        </tr>
+      </table>
+    </td>
+    <td>cell2</td>
+    <td>cell3</td>
+  </tr>
+  <tr>
+    <td>cell4</td>
+    <td>cell5</td>
+    <td>cell6</td>
+  </tr>
+</table>
+ +

その出力は次のようになります。

+ + + + + + + + + + + + + + + + + + + +
title1title2title3
+ + + + + + + + +
cell1cell2cell3
+ 		cell2cell3
cell4cell5cell6
+ +

視覚障碍者向けの表

+ +

データ表の使用方法について簡単に説明しましょう。 表は、データにすばやくアクセスし、さまざまな値を検索できるようにするための便利なツールです。例えば、昨年8月に Gent で販売された指輪 (Rings) の数を確認するには、下の表を見てください。その情報を理解するために、この表内のデータとその列ヘッダーや行ヘッダーとの間の視覚的な関連付けを行います。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Items Sold August 2016
ClothesAccessories
TrousersSkirtsDressesBraceletsRings
BelgiumAntwerp5622437223
Gent4618506115
Brussels5127386928
The NetherlandsAmsterdam8934698538
Utrecht8012433619
+ +

しかし、あなたがそれらの視覚的な関連付けをすることができないならば、どうですか？ では、どのようにして上記のような表を読むことができますか？ 視覚障碍者は、Webページの情報を読み上げるスクリーンリーダーをよく使用します。 平文を読んでいるときはこれは問題ありませんが、表を解釈することは視覚障碍者にとっては非常に困難な場合があります。 それでも、適切なマークアップを使用して、視覚的な関連付けをプログラムによる関連付けに置き換えることができます。

+ +
+

注: WHO のデータによると、2017年の視覚障碍者は約253百万人です。

+
+ +

記事のこのセクションでは、可能な限りアクセス可能な表にするためのその他の手法について説明します。

+ +

列ヘッダーと行ヘッダーを使用する

+ +

スクリーンリーダーは全てのヘッダーを識別し、それらを使用してそれらのヘッダーとそれらが関連するセルとの間のプログラムによる関連付けを行います。 列ヘッダーと行ヘッダーの組み合わせにより、各セル内のデータが識別および解釈されるため、スクリーンリーダーのユーザは、晴眼のユーザの場合と同様に表を解釈できます。

+ +

前の記事ですでにヘッダーについて説明しました — <th> 要素によるヘッダーの追加を参照してください。

+ +

scope 属性

+ +

この記事の新しい話題は {{htmlattrxref("scope","th")}} 属性です。 これは <th> 要素に追加して、ヘッダーがどのセルのヘッダーであるかをスクリーンリーダーに正確に伝えることができます — 例えば、それが入っているのは行のヘッダーなのか、それとも列のヘッダーなのか？ 先ほどの支出記録の例を振り返ると、次のように列ヘッダーを列ヘッダーとして明確に定義できます。

+ +
<thead>
+  <tr>
+    <th scope="col">Purchase</th>
+    <th scope="col">Location</th>
+    <th scope="col">Date</th>
+    <th scope="col">Evaluation</th>
+    <th scope="col">Cost (€)</th>
+  </tr>
+</thead>
+ +

そして各行は次のように定義されたヘッダーを持つことができます(列ヘッダーと同様に行ヘッダーを追加した場合)。

+ +
<tr>
+  <th scope="row">Haircut</th>
+  <td>Hairdresser</td>
+  <td>12/09</td>
+  <td>Great idea</td>
+  <td>30</td>
+</tr>
+ +

スクリーンリーダーは、このように構成されたマークアップを認識し、例えば、ユーザが列全体または行全体を一度に読み上げることを可能にします。

+ +

scope には、さらに2つの可能な値、colgroup と rowgroup があります。 これらは、複数列または複数行の上に位置する見出しに使用されます。 このセクションの最初にある "Items Sold August 2016" の表を見ると、"Clothes" セルが "Trousers"、"Skirts"、"Dresses" のセルの上に位置することがわかります。 これらのセルは全てヘッダー(<th>)としてマークアップするべきで、 "Clothes" はそれらの上に位置し、他の3つの小見出しを定義する見出しです。 従って、"Clothes" は scope="colgroup" の属性を得るべきですが、それ以外は scope="col" の属性を得ます。

+ +

id 属性と headers 属性

+ +

scope 属性を使用する代わりに、{{htmlattrxref("id")}} 属性と {{htmlattrxref("headers", "td")}} 属性を使用して、ヘッダーとセル間の関連付けを作成することもできます。 使い方は次のとおりです。

+ +
    +
  1. 各 <th> 要素に一意の id を追加します。
    2. +
  2. 各 <td> 要素に headers 属性を追加します。 各 headers 属性には、そのセルのヘッダーとして機能する全ての <th> 要素の id のリストを、スペースで区切って含める必要があります。
    3. +
+ +

これは HTML の表に、表内の各セルの位置の明示的な定義を与えます。 これは、それが属する各列と各行のヘッダーによって定義されます。 スプレッドシートのようなものです。 それがうまく機能するためには、表は本当に列と行の両方のヘッダーを必要とします。

+ +

支出コストの例に戻ると、前の2つのコードは次のように書き直すことができます。

+ +
<thead>
+  <tr>
+    <th id="purchase">Purchase</th>
+    <th id="location">Location</th>
+    <th id="date">Date</th>
+    <th id="evaluation">Evaluation</th>
+    <th id="cost">Cost (€)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <th id="haircut">Haircut</th>
+  <td headers="location haircut">Hairdresser</td>
+  <td headers="date haircut">12/09</td>
+  <td headers="evaluation haircut">Great idea</td>
+  <td headers="cost haircut">30</td>
+</tr>
+
+  ...
+
+</tbody>
+ +
+

注: この方法では、ヘッダーとデータセルの間に非常に正確な関連付けが作成されますが、マークアップがはるかに多くなり、エラーの余地がありません。 scope アプローチは通常ほとんどの表に十分です。

+
+ +

アクティブラーニング: scope と headers で遊ぶ

+ +
    +
  1. この最後の演習では、まず items-sold.html と minimal-table.css のローカルコピーを新しいディレクトリに作成してください。
    2. +
  2. この表をより適切にするために適切な scope 属性を追加してみてください。
    3. +
  3. 最後に、最初のファイルの別のコピーを作成して、今度は、id 属性と headers 属性を使用して表にアクセスしやすくします。
    4. +
+ +
+

注: 完成した例と照らし合わせて作業内容を確認できます — items-sold-scope.html(ライブもご覧ください)および items-sold-headers.html(ライブもご覧ください)。

+
+ +

まとめ

+ +

表の HTML について他にも学べることがいくつかありますが、現時点で知っておく必要があることは全てここで説明しました。 この時点で、HTML の表のスタイリングについて学びたいと思うかもしれません — スタイリングされた表を参照してください。

+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +
+

このモジュール

+ + +
diff --git a/files/ja/learn/html/tables/basics/index.html b/files/ja/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..ec37b6ad39 --- /dev/null +++ b/files/ja/learn/html/tables/basics/index.html @@ -0,0 +1,569 @@ +--- +title: HTML の表の基本 +slug: Learn/HTML/Tables/Basics +tags: + - Beginner + - CodingScripting + - HTML + - Learn + - basics + - col + - colgroup + - colspan + - header + - row + - rowspan + - セル + - テーブル + - 記事 +translation_of: Learn/HTML/Tables/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

この記事は、 HTML の表を始めるために、行やセルなどとても基本的なところから、見出し、複数列や行のセルの結合、スタイルを適用するためにセルの列をすべてグループ化する方法などを扱います。

+ + + + + + + + + + + + +
前提条件:HTML の基本 (HTML 入門を参照)。
目標:基本的に HTML 表に親しむこと。
+ +

テーブルとは何か

+ +

テーブルとは、行と列からなる構造化されたデータの集合 (表形式データ) です。テーブルを使用すると、さまざまな種類のデータ間のある種の関連性、たとえば人と年齢、1日または1週間、地元のプールの予定時刻などを示す値をすばやく簡単に検索できます。

+ +

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

A swimming timetable showing a sample data table

+ +

1800 年以降のこの米国国勢調査文書で証明されているように、テーブルは人間社会で非常に一般的に使用されており、長い間使用されてきました。

+ +

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

+ +

したがって、HTML の作成者が Web 上で表形式データを構造化して表示するための手段を提供したことは不思議ではありません。

+ +

テーブルはどのように動作するか

+ +

テーブルの特徴は、厳密だということです。 情報は、行と列ヘッダーを視覚的に関連付けることによって簡単に解釈されます。例えば下の表を見て、62個の衛星を持つ巨大ガス惑星である木星を見つけてください。関係する行と列との見出し部分を組み合わせて考えることで答えを見つけることができます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
太陽系の惑星のデータ (惑星の事実は「Nasa の惑星情報シート - メートル法」から引用)
名前質量 (1024kg)直径 (km)密度 (kg/m3)重力 (m/s2)一日の長さ (hours)太陽からの距離 (106km)平均気温 (°C)月の数備考
地球型惑星水星0.3304,87954273.74222.657.91670太陽に一番近い
金星4.8712,10452438.92802.0108.24640
地球5.9712,75655149.824.0149.6151私たちの世界
火星0.6426,79239333.724.7227.9-652赤い惑星
木星型惑星巨大ガス惑星木星1898142,984132623.19.9778.6-11067最大の惑星
土星568120,5366879.010.71433.5-14062
巨大氷惑星天王星86.851,11812718.717.22872.5-19527
海王星10249,528163811.016.14495.1-20014
矮星冥王星0.01462,37020950.7153.35906.4-22552006年に惑星として分類されなくなりましたが、これは物議を醸しています。
+ +

正しく行われれば、盲目の人でも HTML テーブルの表形式データを解釈できます。HTML テーブルが成功すれば、晴眼者でも視覚障害者でも同様にユーザエクスペリエンスが向上するはずです。

+ +

表のスタイル付け

+ +

GitHub のライブサンプルもご覧ください。テーブルがもう少し読みやすくなっているということに気付くでしょう。これは、今までこのページで見てきたテーブルには最小限のスタイルしか施されていないからです。対して、GitHub バージョンではより特別な意味を持った CSS が適用されています。

+ +

幻想にふけってはいけません。テーブルを Web 上で有効にするには、CSS でスタイル情報を提供し、HTML でしっかりとした構造を提供する必要があります。このモジュールでは、HTML 部分に焦点を合わせています。CSS の部分については、ここを終えた後に表のスタイリングの記事を参照してください。

+ +

このモジュールでは CSS に焦点を当てませんが、スタイルを設定しなくてもデフォルトのテーブルより読みやすくなるように、最小限の CSS スタイルシートを使用できます。スタイルシートはここで、そしてスタイルシートを適用する HTML テンプレートも見つけることができます。これらを一緒にすると、HTML テーブルを試すための良い出発点になります。

+ +

HTML の表を使用するべきではない場面

+ +

HTML テーブルは表形式のデータに使用する必要があります - これがそれらが設計されているものです。残念ながら、HTML テーブルを使用して Web ページをレイアウトする人が多くいました。ヘッダーを含む1行、コンテンツ列を含む1行、フッターを含む1行などです。アクセシビリティ学習モジュールのページレイアウトでより多くの詳細と例を見つけることができます。これは一般的に使用されていました。ブラウザ間での CSS サポートがひどいものだったからです。テーブルレイアウトは、現在ではあまり一般的ではありませんが、Web の一部の場所ではまだ見られることがあります。

+ +

つまり、CSS レイアウト手法ではなく、テーブルをレイアウトに使用するのは得策ではありません。主な理由は次のとおりです。

+ +
    +
  1. レイアウトテーブルは視覚障害のあるユーザのアクセシビリティを低下させます。視覚障害者が使用するスクリーンリーダーは、HTML ページに存在するタグを解釈し、その内容をユーザに読み上げます。テーブルはレイアウトに適したツールではなく、マークアップは CSS のレイアウト手法よりも複雑であるため、スクリーンリーダーの出力はユーザにとってわかりにくいものになります。
    2. +
  2. テーブルはタグスープを生成します。前述のように、テーブルレイアウトは通常、適切なレイアウト手法よりも複雑なマークアップ構造を含みます。これにより、コードの記述、保守、およびデバッグが困難になる可能性があります。
    3. +
  3. テーブルは自動的には応答しません。適切なレイアウトコンテナ ({{htmlelement("header")}}、{{htmlelement("section")}}、{{htmlelement("article")}}、{{htmlelement("div")}}など) を使用する場合、その幅はデフォルトで親要素の100％になります。一方、テーブルはデフォルトでは内容に応じてサイズが設定されているため、さまざまなデバイスで効果的に機能するようにテーブルレイアウトのスタイルを変更するには、追加の対策が必要です。
    4. +
+ +

アクティブラーニング: 最初の表の作成

+ +

テーブル理論については十分に説明したので、実用的な例に飛び込み、簡単なテーブルを作成しましょう。

+ +
    +
  1. まず最初に、ローカルマシンの新しいディレクトリに、blank-template.html と minimal-table.css のローカルコピーを作成します。
    2. +
  2. すべてのテーブルの内容は、<table></table> という2つのタグで囲まれています。HTML のボディの中にこれらを追加してください。
    3. +
  3. テーブル内の最小のコンテナは、<td> 要素によって作成されるテーブルセルです ('td' は 'table data' を表します)。テーブルタグ内に次のコードを追加します。 + 
    <td>Hi, I'm your first cell.</td>
    +
    4. +
  4. 4行のセルが必要な場合は、これらのタグを3回コピーする必要があります。テーブルの内容を次のように更新します。 + 
    <td>Hi, I'm your first cell.</td>
+<td>I'm your second cell.</td>
+<td>I'm your third cell.</td>
+<td>I'm your fourth cell.</td>
    +
    5. +
+ +

お分かりのように、セルは互いの下に配置されているのではなく、同じ行に配置されています。 各 <td> 要素は単一のセルを作成し、それらが一緒になって最初の行を構成します。 追加するセルごとに行が長くなります。

+ +

この行が大きくなるのを防ぎ、後続のセルを2行目に配置するには、<tr> 要素を使用する必要があります ('tr' は 'table row' を表します)。今これを調査しましょう。

+ +
    +
  1. 以下のように、既に作成した4つのセルを <tr> タグ内に配置します。 + + 
    <tr>
+  <td>Hi, I'm your first cell.</td>
+  <td>I'm your second cell.</td>
+  <td>I'm your third cell.</td>
+  <td>I'm your fourth cell.</td>
+</tr>
    +
    2. +
  2. 1行作成したら、あと1、2行作成してみましょう。各行は追加の <tr> 要素で囲み、各セルを <td> に含める必要があります。
    3. +
+ +

これにより、テーブルは次のようになります。

+ + + + + + + + + + + + + + + + +
Hi, I'm your first cell.I'm your second cell.I'm your third cell.I'm your fourth cell.
Second row, first cell.Cell 2.Cell 3.Cell 4.
+ +
+

メモ: GitHub では simple-table.html としても見つけることができます (こちらも参照してください)。

+
+ +

<th> 要素による見出しの追加

+ +

それでは表の見出し、つまり行または列の先頭に配置され、その行または列に含まれるデータの種類を定義する特別なセルに注目しましょう(例として、この記事の最初の例の「Person」セルと「Age」セルを参照してください)。それらがなぜ有用であるかを説明するために、次の表の例を見てください。まずはソースコードから：

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Breed</td>
+    <td>Jack Russell</td>
+    <td>Poodle</td>
+    <td>Streetdog</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Age</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Owner</td>
+    <td>Mother-in-law</td>
+    <td>Me</td>
+    <td>Me</td>
+    <td>Sister-in-law</td>
+  </tr>
+  <tr>
+    <td>Eating Habits</td>
+    <td>Eats everyone's leftovers</td>
+    <td>Nibbles at food</td>
+    <td>Hearty eater</td>
+    <td>Will eat till he explodes</td>
+  </tr>
+</table>
+ +

実際にレンダリングされたテーブルは次のとおりです。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
BreedJack RussellPoodleStreetdogCocker Spaniel
Age169105
OwnerMother-in-lawMeMeSister-in-law
Eating HabitsEats everyone's leftoversNibbles at foodHearty eaterWill eat till he explodes
+ +

ここで問題は、何が起こっているかを知ることはできますが、データを相互参照することができるほど簡単ではないことです。列と行の見出しが何らかの形で目立つ場合は、その方がはるかに良いでしょう。

+ +

アクティブラーニング: 表の見出し

+ +

このテーブルを改良してみましょう。

+ +
    +
  1. まず、あなたのローカルマシンの新しいディレクトリに dogs-table.html と minimal-table.css ファイルのローカルコピーを作ります。HTML には、上で見たのと同じ Dogs の例が含まれています。
    2. +
  2. テーブルのヘッダを視覚的にも意味的にもヘッダとして認識させるには、<th> 要素を使用します ('th' は 'table header' を表します)。これは <td> とまったく同じように機能しますが、通常のセルではなくヘッダーを表す点が異なります。HTML を開き、テーブルのヘッダを囲む全ての <td> 要素を <th> 要素に変更してください。
    3. +
  3. HTML を保存してブラウザにロードすると、ヘッダーがヘッダーらしく見えます。
    4. +
+ +
+

メモ: 完成した例は GitHub の dogs-table-fixed.html にあります (こちらもご覧ください)。

+
+ +

なぜ見出しは便利なのか

+ +

私たちはすでにこの質問に部分的に答えました — ヘッダーがはっきり目立つときには探しているデータを見つけやすく、デザインは一般的に見栄えがよくなります。

+ +
+

メモ: テーブルの見出しにはデフォルトのスタイルがいくつかあります。テーブルに独自のスタイルを追加しなくても、目立つように太字で中央に配置されています。

+
+ +

テーブルヘッダには、scope 属性 (次の記事で学ぶことになります) とともに、追加の利点もあります。それらを使用すると、各ヘッダーを同じ行または列のすべてのデータに関連付けることで、テーブルをよりアクセスしやすくすることができます。これにより、スクリーンリーダーはデータの行全体または列全体を一度に読み取ることができます。これは非常に便利です。

+ +

セルを複数の行や列で結合できるようにする

+ +

セルを複数の行または列にまたがるようにしたい場合があるかもしれません。次の簡単な例を見てください。これは一般的な動物の名前を示しています。場合によっては、動物の名前の横にオスとメスの名前を表示したいことがあります。そうでない場合もあるでしょう。そのような場合は、動物の名前を表全体に広げたいだけです。

+ +

最初のマークアップは次のようになります。

+ +
<table>
+  <tr>
+    <th>Animals</th>
+  </tr>
+  <tr>
+    <th>Hippopotamus</th>
+  </tr>
+  <tr>
+    <th>Horse</th>
+    <td>Mare</td>
+  </tr>
+  <tr>
+    <td>Stallion</td>
+  </tr>
+  <tr>
+    <th>Crocodile</th>
+  </tr>
+  <tr>
+    <th>Chicken</th>
+    <td>Hen</td>
+  </tr>
+  <tr>
+    <td>Rooster</td>
+  </tr>
+</table>
+ +

しかし、出力結果は私たちが望むものではありません。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animals
Hippopotamus
HorseMare
Stallion
Crocodile
ChickenHen
Rooster
+ +

"Animals"、"Hippopotamus"、および "Crocodile" を2列にまたがって作成し、"Horse" と "Chicken" を2列にまたがって作成する方法が必要です。幸いなことに、テーブルのヘッダーとセルには colspan 属性と rowspan 属性があり、それを使って実行できます。どちらも単位なしの数値を受け入れます。これはスパンする行数または列数と同じです。たとえば、colspan="2" を指定すると、セルは2列にまたがります。

+ +

このテーブルを改善するために colspan と rowspan を使用しましょう。

+ +
    +
  1. まず、ご使用のローカルマシンの新しいディレクトリに、animals-table.html ファイルと minimal-table.css ファイルのローカルコピーを作成します。HTML には、上記と同じ動物の例が含まれています。
    2. +
  2. 次に、colspan を使用して "Animals"、"Hippopotamus"、および "Crocodile" を2列にまたがって作成します。
    3. +
  3. 最後に、rowspan を使用して "Horse" と "Chicken" を2行にまたがるようにします。
    4. +
  4. 改善を確認するには、ブラウザでコードを保存して開きます。
    5. +
+ +
+

メモ: 完成した例は GitHub の animals-table-fixed.html にあります (こちらもご覧ください)。

+
+ +

列への共通のスタイル付け

+ +

先に進む前に、この記事で最後に紹介する機能があります。
+ HTML では、データの列全体のスタイル情報を1か所にまとめて定義することができます — <col> 要素と <colgroup> 要素です。列にスタイルを指定するのは少々面倒で非効率的な場合があるためです。列内の <td> や <th> ごとにスタイル情報を指定するか、{{cssxref(":nth-child()")}} などの複雑なセレクタを使用する必要があります。

+ +

次の簡単な例を見てください。

+ +
<table>
+  <tr>
+    <th>Data 1</th>
+    <th style="background-color: yellow">Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td style="background-color: yellow">Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+ +

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

+ + + + + + + + + + + + + + + + +
Data 1Data 2
CalcuttaOrange
RobotsJazz
+ +

列内の3つすべてのセルにわたってスタイル情報を繰り返す必要があるため、これは理想的ではありません (実際のプロジェクトでは3つすべてに class を設定し、別のスタイルシートでスタイルを指定することになります)。これを行う代わりに、<col> 要素で情報を1回指定できます。<col> 要素は、開始 <table> タグのすぐ下の <colgroup> コンテナ内で指定されます。次のようにテーブルを指定することで、上と同じ効果を生み出すことができます。

+ +
<table>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+    <th>Data 1</th>
+    <th>Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td>Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+ +

事実上、2つの "スタイル列" を定義しています。1つは各列のスタイル情報を指定しています。最初の列にはスタイルを設定していませんが、空白の <col> 要素を含める必要があります。そうでない場合、スタイルは最初の列にも適用されます。

+ +

両方の列にスタイル情報を適用する場合は、次のように span 属性を持つ1つの <col> 要素を含めるだけで済みます。

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

colspan や rowspan と同じように、span はスタイルを適用したい列の数を指定する単位なしの数値を取ります。

+ +

アクティブラーニング: colgroup と col

+ +

今こそ自分でやってみるべき時です。

+ +

以下に言語教師のタイムテーブルを見ることができます。金曜日に、彼女は一日中オランダ語を教える新しいクラスを持っていますが、彼女はまた火曜日と木曜日に数期間ドイツ語を教えています。彼女は教えている日を含むコラムをハイライトしたいと思います。

+ +

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

+ +

以下の手順に従ってテーブルを再作成してください。

+ +
    +
  1. まず、timetable.html ファイルのローカルコピーをあなたのローカルマシンの新しいディレクトリに作成してください。HTML には、上で見たのと同じ表から、列のスタイル情報を除いたものが含まれています。
    2. +
  2. <col> 要素を追加することができる <table> タグのすぐ下のテーブルの上部に <colgroup> 要素を追加します (以下の残りの手順を参照)。
    3. +
  3. 最初の2つの列はスタイルなしのままにする必要があります。
    4. +
  4. 3列目に背景色を追加します。style 属性の値はbackground-color:#97DB9A; です。
    5. +
  5. 4列目に別の幅を設定します。style 属性の値は width: 42px; です。
    6. +
  6. 5列目に背景色を追加します。style 属性の値は background-color: #97DB9A; です。
    7. +
  7. これは特別な日であり、彼女は新しいクラスを教えていることを示すために、6番目の列に異なる背景色と境界線を追加します。style 属性の値は background-color:#DCC48E; border:4px solid #C1437A; です。
    8. +
  8. The last two days are free days, so just set them to no background color but a set width; the value for the style attribute is width: 42px;
    + 最後の2日間は空き日なので、背景色を設定せずに幅を設定します。style 属性の値は width: 42px; です。
    9. +
+ +

例でどのようにして上手くいくかを見てください。どうしていいか分からなくなったり、作業をチェックしたい場合は、timetable-fixed.html として GitHub に私たちのバージョンを見つけることができます (それもライブを見てください)。

+ +

まとめ

+ +

HTML テーブルの基本はこれで終わりです。次の記事では、もう少し高度なテーブルの機能を見て、視覚障害者にとってそれらがどれほどアクセシブルであるかを考えます。

+ +

{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

+ +
+

このモジュール

+ + +
diff --git a/files/ja/learn/html/tables/index.html b/files/ja/learn/html/tables/index.html new file mode 100644 index 0000000000..7f1a8c7fd2 --- /dev/null +++ b/files/ja/learn/html/tables/index.html @@ -0,0 +1,43 @@ +--- +title: HTML テーブル +slug: Learn/HTML/Tables +tags: + - Article + - Beginner + - CodingScripting + - Guide + - HTML + - Landing + - Module + - Tables +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

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

+ +

必要となる知識

+ +

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

+ +
+

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

+
+ +

ガイド

+ +

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

+ +
+
HTML テーブルの基本
+
この記事を読めば、HTMLのテーブルについてのイロハを知ることができます。行や列、見出しやカラムと行を複数に分割するセルの作成を扱い、またいかにしてカラムにあるセルをまとめて見栄えを整えるかについて扱います。
+
HTML テーブルの高度な機能とアクセシビリティ
+
このモジュールの2つ目の記事では、 HTMLのもう少し発展的な機能について扱います。 たとえば、見出しや要約、そして行をまとめて表のhead,bodyそしてフッターのsectionにすることです。同時に視覚にハンディキャップを有する人びとのために表のアクセシビリティについても記事で扱います。
+
+ +

評価

+ +
+
惑星データの構造化
+
テーブルについての記事を理解できたかの評価として、太陽系の星についてのいくつかのデータを提供し、あなたにHTMLを用いて表にしてもらいます。
+
diff --git a/files/ja/learn/html/tables/structuring_planet_data/index.html b/files/ja/learn/html/tables/structuring_planet_data/index.html new file mode 100644 index 0000000000..625a34c151 --- /dev/null +++ b/files/ja/learn/html/tables/structuring_planet_data/index.html @@ -0,0 +1,87 @@ +--- +title: '評価: 太陽系の惑星のデータを構造化する' +slug: Learn/HTML/Tables/Structuring_planet_data +tags: + - Assessment + - Beginner + - CodingScripting + - HTML + - Learn + - テーブル +translation_of: Learn/HTML/Tables/Structuring_planet_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

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

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

はじめに

+ +

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

+ +
+

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

+
+ +

やることの概要

+ +

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

+ +

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

+ +

+ +

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

+ + + +

手順

+ +

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

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

ヒントとTIPS

+ + + +

評価

+ +

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

+ +

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

+ +

このモジュール

+ + -- cgit v1.2.3-54-g00ecf