diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/learn/html | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/learn/html')
27 files changed, 7490 insertions, 0 deletions
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 +--- +<div class="summary"> +<p>ここでは、イメージマップを設定する方法と、最初に検討すべきいくつかの欠点を説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Getting_started_with_the_web">基本的な HTML 文書の作成方法</a>と、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">アクセス可能な画像をウェブページに追加する方法</a>について、理解している必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>1つの画像の異なる領域を異なるページにリンクする方法を学びます。</td> + </tr> + </tbody> +</table> + +<div class="warning"> +<p>この記事では、クライアント側のイメージマップについてのみ説明します。 ユーザーにマウスが必要なサーバー側のイメージマップは使用しないでください。</p> +</div> + +<h2 id="Image_maps_and_their_drawbacks" name="Image_maps_and_their_drawbacks">イメージマップとその欠点</h2> + +<p>{{htmlelement('a')}} 内に画像をネストすると、画像全体が1つのウェブページにリンクします。 一方、イメージマップは、それぞれが異なるリソースにリンクするいくつかのアクティブな領域（「ホットスポット」と呼ばれます）を含みます。</p> + +<p>以前は、イメージマップは一般的なナビゲーションデバイスでしたが、そのパフォーマンスとアクセシビリティの影響を徹底的に検討することが重要です。</p> + +<p>いくつかの理由から<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">テキストリンク</a>（CSS でスタイル付けされたもの）がイメージマップよりも好ましい。 テキストリンクは軽量でメンテナンス可能で、多くの場合 SEO に優しく、アクセシビリティのニーズをサポートしています（スクリーンリーダー、テキストのみのブラウザ、翻訳サービスなど）。</p> + +<h2 id="How_to_insert_an_image_map_properly" name="How_to_insert_an_image_map_properly">イメージマップを正しく挿入する方法</h2> + +<h3 id="Step_1_The_image" name="Step_1_The_image">ステップ 1: 画像</h3> + +<p>どんな画像でも受け入れられるわけではありません。</p> + +<ul> + <li>画像は、人々が画像のリンクをたどったときに何が起こるかを明確にする必要があります。 <code>alt</code> テキストはもちろん必須ですが、多くの人々は決してそれを見ません。</li> + <li>画像には、ホットスポットの始まりと終わりを明示する必要があります。</li> + <li>ホットスポットは、どのビューポートサイズでも快適にタップするのに十分な大きさでなければなりません。 どれくらいの大きさか？ <a href="http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">72 × 72 CSS ピクセルは良好な最小値</a>（英語）で、タッチターゲット間の間隔に余裕もあります。 <a href="http://www.goethe-verlag.com/book2/">50languages.com</a> の世界地図（執筆時点）は、問題を完全に示しています。 アルバニアやエストニアよりもロシアや北米をタップする方がはるかに簡単です。</li> +</ul> + +<p>{{htmlelement("img")}} 要素と {{htmlattrxref("alt",'img')}} テキストを使用して、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">常に同じ方法</a>で画像を挿入します。 画像がナビゲーションデバイスとしてのみ存在する場合、後で {{htmlelement('area')}} 要素に適切な {{htmlattrxref("alt",'area')}} テキストを指定すると <code>alt=""</code> と書くことができます。</p> + +<p>特殊な {{htmlattrxref("usemap","img")}} 属性が必要です。 イメージマップには、スペースを含まない一意の名前を考えてください。 次に、<code>usemap</code> 属性の値としてその名前（# が先行する）を割り当てます。</p> + +<pre class="brush: html"><img + src="image-map.png" + alt="" + usemap="#example-map-1" /></pre> + +<h3 id="Step_2_Activate_your_hotspots" name="Step_2_Activate_your_hotspots">ステップ 2: ホットスポットを有効にする</h3> + +<p>このステップでは、すべてのコードを {{htmlelement('map')}} 要素内に配置します。 <code><map></code> には、上の <code>usemap</code> 属性で使用したのと同じマップ名の {{htmlattrxref("name","map")}} 属性だけが必要です。</p> + +<pre class="brush: html"><map name="example-map-1"> + +</map></pre> + +<p><code><map></code> 要素の中に {{htmlelement('area')}} 要素が必要です。 <code><area></code> 要素はそれぞれが1つのホットスポットに対応します。 キーボードでのナビゲーションを直観的に保つには、<code><area></code> 要素のソースでの順序がホットスポットの視覚的順序に対応していることを確認してください。</p> + +<p><code><area></code> 要素は空要素ですが、次の4つの属性が必要です。</p> + +<dl> + <dt>{{htmlattrxref('shape','area')}}</dt> + <dt>{{htmlattrxref('coords','area')}}</dt> + <dd> + <p><code>shape</code> は、<code>circle</code>（円）、<code>rect</code>（四角形）、<code>poly</code>（ポリゴン）、<code>default</code>（デフォルト）の4つの値のいずれかをとります。 （<code>default</code> の <code><area></code> は画像全体から、あなたが定義した他のホットスポットを除いたものです。） 選択した <code>shape</code> によって、<code>coords</code> で指定する必要がある座標情報が決まります。</p> + + <ul> + <li>円の場合は、中心の x 座標と y 座標を指定し、その後に半径の長さを指定します。</li> + <li>四角形の場合は、左上角と右下角の x/y 座標を指定します。</li> + <li>ポリゴンの場合は、各角の x/y 座標を指定します（したがって、少なくとも6つの値）。</li> + </ul> + + <p>座標は CSS ピクセルで与えます。</p> + + <p>重なり合っている場合、ソースでの順序で選ばれます。</p> + </dd> + <dt>{{htmlattrxref('href','area')}}</dt> + <dd>リンク先のリソースの URL。 現在の領域をどこにもリンクさせたくない場合は、この属性を空白のままにしておくことができます（空白の円を描いている場合など）。</dd> + <dt>{{htmlattrxref('alt','area')}}</dt> + <dd> + <p>リンクがどこにあるのか、それが何をするのかを人に伝える必須の属性。 <code>alt</code> テキストは、画像が利用できない場合にのみ表示されます。 <a href="/ja/docs/Learn/Accessibility/HTML#Text_alternatives">アクセス可能なリンクテキストを書くためのガイドライン</a>を参照してください。</p> + + <p><code>href</code> 属性が空白で、画像全体に既に <code>alt</code> 属性がある場合、<code>alt=""</code> と書くことができます。</p> + </dd> +</dl> + +<pre class="brush: html"><map name="example-map-1"> + <area shape="circle" coords="200,250,25" + href="page-2.html" alt="circle example" /> + + + <area shape="rect" coords="10, 5, 20, 15" + href="page-3.html" alt="rectangle example" /> + +</map></pre> + +<h3 id="Step_3_Make_sure_it_works_for_everybody" name="Step_3_Make_sure_it_works_for_everybody">ステップ 3: 誰にとっても効果があることを確認する</h3> + +<p>多くのブラウザやデバイスでイメージマップを厳密にテストするまで、あなたは完了していません。 キーボードだけでリンクをたどってみてください。 画像をオフにしてみてください。</p> + +<p>イメージマップが約 240 px より広い場合は、ウェブサイトをレスポンシブにするためにさらに調整する必要があります。 座標が同じままでは、もはや画像と一致しないので、小さな画面の場合は画像のサイズを変更するだけでは不十分です。</p> + +<p>イメージマップを使用する必要がある場合は、Matt Stow の <a href="https://github.com/stowball/jQuery-rwdImageMaps">jQuery プラグイン</a>（英語）を調べることができます。 また、Dudley Storey は、<a href="http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps">イメージマップエフェクトとして SVG を使用する方法</a>（英語）と、その後にビットマップ画像用に <a href="http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG">SVG とラスターを組み合わせる方法</a>（英語）を示しています。</p> + +<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2> + +<ul> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("map")}}</li> + <li>{{htmlelement("area")}}</li> + <li><a href="http://www.maschek.hu/imagemap/imgmap">オンラインイメージマップエディター</a>（英語）</li> + <li><a href="http://blog.goolara.com/2014/06/05/image-maps-revisited/">Advice on handling email clients</a>（リンク切れ）</li> +</ul> 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 +--- +<div class="summary"> +<p>HTML は、インラインであろうと構造化された用語集であろうと、記述の意味を伝達するいくつかの方法を提供します。 この記事では、キーワードを定義する際に適切にマークアップする方法について説明します。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Getting_started_with_the_web">基本的な HTML 文書の作成方法</a>に精通している必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>新しいキーワードを導入する方法と説明リストを作成する方法を学びます。</td> + </tr> + </tbody> +</table> + +<p>用語の意味が必要なときは、おそらくまっすぐに辞書や用語集に行くでしょう。 辞書や用語集は、キーワードを1つ以上の説明と正式に関連付けます。 この場合は次のようになります。</p> + +<blockquote> +<dl> + <dt>Blue (<em>Adjective</em>)</dt> + <dd>Of a color like the sky in a sunny day.<br> + <em><q>The clear blue sky</q></em></dd> + <dd>Of a subtle sadness, melancholy.<br> + <em><q>I'm feeling blue</q></em></dd> +</dl> +</blockquote> + +<p>しかし、私たちは常に次のように非公式にキーワードを定義しています。</p> + +<blockquote> +<p><strong><dfn>Firefox</dfn></strong> は、Mozilla Foundation によって作成されたウェブブラウザです。</p> +</blockquote> + +<p>これらのユースケースに対処するために、{{Glossary("HTML")}} には説明と説明された単語をマークするための{{Glossary("tag","タグ")}}が用意されているので、読者に意味が適切に伝わるようになります。</p> + +<h2 id="How_to_mark_informal_description" name="How_to_mark_informal_description">非公式の説明をマークする方法</h2> + +<p>教科書では、キーワードが初めて出てきたときに、キーワードを太字にしてすぐに定義するのが一般的です。</p> + +<p>私たちは HTML でもそうしていますが、HTML は視覚的なメディアではないので太字を使いません。 {{htmlelement("dfn")}} は、初めて出現するキーワードをマークするための特別な要素です。 <code><dfn></code> タグは、定義ではなく定義される単語の周りにあり、定義は段落全体で構成されています。</p> + +<pre class="brush: html"><p><dfn>Firefox</dfn> は、Mozilla Foundation によって作成されたウェブブラウザです。</p> +</pre> + +<div class="note"> +<p>太字のもう1つの用途はコンテンツを強調することです。 太字自体は HTML の概念ではありませんが、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">強調を示すタグ</a>があります。</p> +</div> + +<h3 id="Special_case_Abbreviations" name="Special_case_Abbreviations">特別な場合: 略語</h3> + +<p>{{htmlelement("abbr")}} で<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/%E9%AB%98%E5%BA%A6%E3%81%AA%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E6%88%90%E5%9E%8B#Abbreviations">略語を特別にマーク</a>することが最適です。 これにより、スクリーンリーダーが適切に読むことができ、すべての略語を統一的に操作できるようになります。 新しいキーワードの場合と同様に、初めて出現したときに略語を定義する必要があります。</p> + +<pre class="brush: html"><p> + <dfn><abbr>HTML</abbr> (hypertext markup language、ハイパーテキストマークアップ言語)</dfn> + は、ウェブ上のドキュメントを構造化するために使用される記述言語です。 +</p></pre> + +<div class="note"> +<p>HTML 仕様は実際には略語を拡張するために <a href="http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element"><code>title</code> 属性を用意しています</a>（英語）。 ただし、これはインライン展開を提供するための許容可能な代替方法ではありません。 <code>title</code> の内容は、マウスを使用していない限り、ユーザーには完全に隠されています。 この仕様も同様に<a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">これを認めています</a>（英語）。</p> +</div> + +<h3 id="Improve_accessibility" name="Improve_accessibility">アクセシビリティの向上</h3> + +<p>{{HTMLElement('dfn')}} は定義されたキーワードをマークし、現在の段落がキーワードを定義していることを示します。 言い換えれば、<code><dfn></code> 要素とそのコンテナの間に暗黙の関係があります。 より正式な関係を望む場合、または定義が段落全体ではなく1つの文で構成されている場合は、<code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> 属性を使用して、より正式に定義に関連付けることができます。</p> + +<pre class="brush: html"><p> + <span id="ff"> + <dfn aria-describedby="ff">Firefox</dfn> + は、Mozilla Foundation によって作成されたウェブブラウザです。 + </span> + <a href="http://www.mozilla.org">mozilla.org</a> からダウンロードできます。 +</p></pre> + +<p>支援技術は、この属性を使用して、指定された用語の代替テキストを見つけることができます。 <code><dfn></code> 要素だけでなく、キーワードを囲む任意のタグで <code>aria-describedby</code> を使用して定義できます。 <code>aria-describedby</code> は、説明を含む要素の {{htmlattrxref('id')}} を参照します。</p> + +<h2 id="How_to_build_a_description_list" name="How_to_build_a_description_list">説明リストを作成する方法</h2> + +<p>説明リストは、用語とそれに対応する説明のリスト（例: 定義リスト、辞書エントリ、よくある質問、およびキーと値のペア）です。</p> + +<div class="note"> +<p>説明リストは、対話が話し手を直接記述しないため、<a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">対話をマークアップするのには適していません</a>（英語）。 ここには、<a href="http://www.w3.org/TR/html5/common-idioms.html#conversations">対話をマークアップするための推奨事項</a>（英語）があります。</p> +</div> + +<p>説明された用語は、{{htmlelement("dt")}} 要素内にあります。 対応する説明は直ちに続き、1つ以上の {{htmlelement("dd")}} 要素に含まれています。 説明リスト全体を {{htmlelement("dl")}} 要素で囲みます。</p> + +<h3 id="A_simple_example" name="A_simple_example">簡単な例</h3> + +<p>ここでは簡単な例として、食べ物と飲み物の種類を説明します。</p> + +<pre class="brush: html"><dl> + <dt>jambalaya</dt> + <dd> + rice-based entree typically containing chicken, + sausage, seafood, and spices + </dd> + + <dt>sukiyaki</dt> + <dd> + Japanese specialty consisting of thinly sliced meat, + vegetables, and noodles, cooked in sake and soy sauce + </dd> + + <dt>chianti</dt> + <dd> + dry Italian red wine originating in Tuscany + </dd> +</dl> +</pre> + +<div class="note"> +<p>ご覧のとおり、基本パターンは <code><dt></code> の用語を <code><dd></code> の説明で置き換えることです。 行内に2つ以上の用語が存在する場合は、以下の説明はそれらのすべてに適用されます。 行内に2つ以上の説明が存在する場合、それらはすべて最後に指定された用語に適用されます。</p> +</div> + +<h3 id="Improving_the_visual_output" name="Improving_the_visual_output">視覚的な出力を改善する</h3> + +<p>グラフィカルブラウザに前述のリストが表示される方法は次のとおりです。</p> + +<p>{{EmbedLiveSample("A_simple_example", 600, 180)}}</p> + +<p>キーワードをより際立たせたい場合は、それらを強調することができます。 HTML は視覚的な媒体ではないことを忘れないでください。 すべての視覚効果に対して {{glossary("CSS")}} が必要です。 CSS の {{cssxref("font-weight")}} プロパティは、ここで必要なものです。</p> + +<pre class="brush: css">dt { + font-weight: bold; +} +</pre> + +<p>これにより、以下のわずかに読みやすい結果が生成されます。</p> + +<p>{{EmbedLiveSample("How_to_build_a_description_list", 600, 180)}}</p> + +<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2> + +<ul> + <li>{{htmlelement("dfn")}}</li> + <li>{{htmlelement("dl")}}</li> + <li>{{htmlelement("dt")}}</li> + <li>{{htmlelement("dd")}}</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby 属性の使用方法</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">下記のリンクは、日常の解決すべき問題を HTML を使って解決する解決法を指しています。</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Basic_structure" name="Basic_structure">基本構造</h3> + +<p>HTML の最も基本的な適用は文書の構造化です。HTML に慣れていないならここから始めるべきです。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">基本的な HTML 文書を作成する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Web ページを論理的なセクションに分割する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">見出しと段落の適切な構成を設定する方法</a></li> +</ul> + +<h3 id="Basic_text-level_semantics" name="Basic_text-level_semantics">基本的なテキストレベルのセマンティクス</h3> + +<p>HTML は文書の意味的な情報を提供することに特化しているので、HTML 文書内でメッセージをうまく伝える方法についてあなたが抱えるかもしれない多くの質問に答えます。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">HTML を使ってリスト項目を作成する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">コンテンツを強調する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">テキストが重要だと示す方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Representing_computer_code">HTML でコンピュータコードを表示する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">画像やグラフィックに注釈を付ける方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Abbreviations">略語をマークして理解しやすくする方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Quotations">Web ページに引用を追加する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Howto/Define_terms_with_HTML">HTML で用語を定義する方法</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Hyperlinks" name="Hyperlinks">ハイパーリンク</h3> + +<p>HTML のための主な理由は {{Glossary("hyperlink", "ハイパーリンク")}}, を使ってナビゲーションを簡単にすることで、それは色々な方法で使われます:</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">HTML を使って目次を作成する方法</a></li> +</ul> + +<h3 id="Images_multimedia" name="Images_multimedia">画像とマルチメディア</h3> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">Web ページに画像を追加する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Web ページにビデオコンテンツを追加する方法</a></li> +</ul> + +<h3 id="Scripting_styling" name="Scripting_styling">スクリプトとスタイリング</h3> + +<p>HTML は文書の構造だけを解決します。表現の問題は {{glossary("CSS")}} を使うか、ページをインタラクティブにしたいならスクリプトを使います。</p> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Web ページで CSS を使用する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Web ページで JavaScript を使用する方法</a></li> +</ul> + +<h3 id="Embedded_content" name="Embedded_content">埋め込みコンテンツ</h3> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Web ページに他の Web ページを埋め込む方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_<embed>_and_<object>_elements">Web ページに Flash コンテンツを追加する方法</a></li> +</ul> +</div> +</div> + +<h2 id="Uncommon_or_advanced_problems" name="Uncommon_or_advanced_problems">あまりない、または上級の問題</h2> + +<p>基本を超えると、HTML はとてもリッチで複雑な問題を解決する高度な機能を提供します。この記事は直面するかもしれないあまりないユースケースに取り組むのに役立ちます。</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Forms" name="Forms">フォーム</h3> + +<p>フォームは、Web ページから Web サーバにデータを送信するために作成された複雑な HTML 構造です。<a href="/ja/docs/Learn/HTML/Forms">完全な専用ガイド</a>に目を通すことをお勧めします。ここから始めましょう。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">簡単な Web フォームを作成する方法</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Web フォームを構築化する方法</a></li> +</ul> + +<h3 id="Tabular_information" name="Tabular_information">表の情報</h3> + +<p>表形式データという情報は、行と列のある表で整理する必要があります。これは最も複雑な HTML 構造の1つで、習得するのは簡単ではありません。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">データテーブルの作り方</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML テーブルをアクセシブルにする方法</a></li> +</ul> + +<h3 id="Data_representation" name="Data_representation">データ表現</h3> + +<ul> + <li>数値とコード値をHTMLで表現する方法 - <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Superscript_and_subscript">上付き文字と下付き文字</a>、および<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Representing_computer_code">コンピュータコードの表現</a>を参照してください</li> + <li><a href="/ja/docs/Learn/HTML/Howto/Use_data_attributes">データ属性の使い方</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Advanced_text_semantics" name="Advanced_text_semantics">上級テキストセマンティクス</h3> + +<ul> + <li><a href="/ja/docs/Web/HTML/Element/br">HTMLの改行をコントロールする方法</a></li> + <li>変更をマークする方法 (追加および削除されたテキスト) - {{htmlelement("ins")}} と {{htmlelement("del")}} 要素を参照してください</li> +</ul> + +<h3 id="Advanced_images_multimedia" name="Advanced_images_multimedia">上級の画像やマルチメディア</h3> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像を Web ページに追加する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Web ページにベクター画像を追加する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">画像の上にヒットマップを追加する方法</a></li> +</ul> + +<h3 id="Internationalization" name="Internationalization">国際化</h3> + +<p>HTML は単一言語ではありません。一般的な国際化の問題を処理するためのツールを提供します。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Setting_the_primary_language_of_the_document">単一の Web ページに複数の言語を追加する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Marking_up_times_and_dates">HTML で日時を表示する方法</a></li> +</ul> + +<h3 id="パフォーマンス">パフォーマンス</h3> + +<ul> + <li><a href="/ja/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages">高速ロードの HTML ページを作成する方法</a></li> +</ul> +</div> +</div> + +<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></p> 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 +--- +<div>{{LearnSidebar}}</div> + +<p><a href="/ja/docs/Web/Guide/HTML/HTML5">HTML5</a> は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 <a href="/ja/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-*</code> 属性</a>により、標準外の属性、 DOM の追加プロパティ、 {{domxref("Node.setUserData()")}} のような特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。</p> + +<h2 id="HTML_syntax" name="HTML_syntax">HTML の構文</h2> + +<p>構文は単純です。あらゆる要素上で、名前が <code>data-</code> で始まるあらゆる属性がデータ属性です。例えば、記事 (article) があり、視覚表現を行わない追加情報を格納したいとします。 <code>data</code> 属性を使用するとこれだけです。</p> + +<pre class="brush: html"><article + id="electric-cars" + data-columns="3" + data-index-number="12314" + data-parent="cars"> +... +</article></pre> + +<h2 id="JavaScript_access" name="JavaScript_access">JavaScript からのアクセス</h2> + +<p><a href="/ja/docs/Web/JavaScript">JavaScript</a> でこれらの属性の値を読み出すことも、とても簡単です。 {{domxref("Element.getAttribute", "getAttribute()")}} で完全な HTML での名前を使用して読むこともできますが、もっと簡単な方法が標準で定義されています。 {{domxref("HTMLElement.dataset", "dataset")}} プロパティを通して {{domxref("DOMStringMap")}} で読み出すことができます。</p> + +<p><code>dataset</code> オブジェクトを通して <code>data</code> 属性を取得するには、属性名の <code>data-</code> より後の部分を使用して取得します (なお、ダッシュは camelCase に変換されます)。</p> + +<pre class="brush: js">const article = document.getElementById('electric-cars'); + +article.dataset.columns // "3" +article.dataset.indexNumber // "12314" +article.dataset.parent // "cars"</pre> + +<p>それぞれのプロパティは文字列であり、読み書きができます。上記の場合、 <code>article.dataset.columns = 5</code> を設定すると、その属性が <code>"5"</code> に変わります。</p> + +<h2 id="CSS_access" name="CSS_access">CSS からのアクセス</h2> + +<p>データ属性はプレーンな HTML 属性であるため、<a href="/ja/docs/Web/CSS">CSS</a> からもアクセスできることに注意してください。 例えば、記事の親データを表示するには、次のように {{cssxref("attr")}} 関数を使用して CSS で<a href="/ja/docs/Web/CSS/content">生成したコンテンツ</a>を使用できます。</p> + +<pre class="brush: css">article::before { + content: attr(data-parent); +}</pre> + +<p>CSS の<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクタ</a>を使用して、次のようにデータに応じてスタイルを変更することもできます。</p> + +<pre class="brush: css">article[data-columns='3'] { + width: 400px; +} +article[data-columns='4'] { + width: 600px; +}</pre> + +<p><a href="https://jsbin.com/ujiday/2/edit">この JSBin の例</a>では、これらすべてが一緒に機能していることがわかります。</p> + +<p>データ属性を保存して、ゲームのスコアなど、絶えず変化する情報を含めることもできます。 ここで CSS セレクタと JavaScript アクセスを使用すると、独自の表示ルーチンを作成することなく、気の利いたエフェクトを作成できます。 生成したコンテンツと CSS トランジション（transition、遷移）を使用した例については、<a href="https://www.youtube.com/watch?v=On_WyUB1gOk">このスクリーンキャスト</a>を参照してください（<a href="https://jsbin.com/atawaz/3/edit">JSBin の例</a>）。</p> + +<p>データ値は文字列です。 スタイリングを有効にするには、セレクタで数値を引用符で囲む必要があります。</p> + +<h2 id="Issues" name="Issues">問題</h2> + +<p>支援技術がアクセスできない可能性があるため、データ属性に表示およびアクセス可能なコンテンツを保存しないでください。 さらに、検索クローラーはデータ属性の値にインデックスを付けない場合があります。</p> + +<p>考慮すべき主な問題は、Internet Explorer のサポートとパフォーマンスです。 Internet Explorer 11 以降は標準のサポートを提供しますが、以前のバージョンはすべて <a href="https://caniuse.com/#feat=dataset"><code>dataset</code> をサポートしていません</a>（英語）。 IE 10 以下をサポートするには、代わりに {{domxref("Element.getAttribute", "getAttribute()")}} を使用してデータ属性にアクセスする必要があります。 また、通常の JS オブジェクトにこのデータを保存する場合と比較して、<a href="https://jsperf.com/data-dataset">データ属性の読み取りパフォーマンス</a>（英語）が低下します。</p> + +<p>ただし、カスタム要素に関連付けられたメタデータの場合、それらは優れたソリューションです。</p> + +<p>Firefox 49.0.2（およびおそらくそれに前後したバージョン）では、1022 文字を超えるデータ属性は Javascript（EcmaScript 4）によって読み取られません。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>この記事は、<a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">hacks.mozilla.org の JavaScript および CSS でのデータ属性の使用</a>（英語）から改編されました。</li> + <li>カスタム属性は SVG 2 でもサポートされています。 詳細については、{{domxref("SVGElement.dataset")}} および {{SVGAttr("data-*")}} を参照してください。</li> + <li><a href="https://www.sitepoint.com/use-html5-data-attributes/">HTML5 データ属性の使用方法</a>（Sitepoint、英語）</li> +</ul> 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 +--- +<div class="summary"> +<p>Take your webpages to the next level by harnessing JavaScript. Learn in this article how to trigger JavaScript right from your HTML documents.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja//Learn/HTML/Write_a_simple_page_in_HTML">基本的な HTML 文書の作成</a>方法を習熟している必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>HTMLファイルからJavaScript を起動する方法と、JavaScript にアクセスできるようにする最も良い習慣を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="About_JavaScript" name="About_JavaScript">JavaScript について</h2> + +<p>{{Glossary("JavaScript")}} はウェブページをインタラクティブにするための、主にクライアントサイドで使われるプログラミング言語です。 JavaScript を使わなくてもすばらしいウェブページを作ることが<em>できます</em>が、JavaScript は全く新しいレベルの可能性を開きます。</p> + +<div class="note"> +<p>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 <a href="/ja//Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a> article. If you already know something about JavaScript or if you have a background with other プログラミング言語s, we suggest you jump directly into our <a href="/ja//docs/Web/JavaScript/Guide">JavaScript Guide</a>.</p> +</div> + +<h2 id="How_to_trigger_JavaScript_from_HTML" name="How_to_trigger_JavaScript_from_HTML">HTML から JavaScript を起動する方法</h2> + +<p>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 <code>script</code>, depending on whether you're linking to an external script or embedding a script right in your webpage.</p> + +<h3 id="Linking_an_external_script" name="Linking_an_external_script">Linking an external script</h3> + +<p>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 <code>src</code> attribute pointing to the script file, using its <a href="/ja//Learn/Understanding_URLs">URL</a>:</p> + +<pre class="brush: html"><script src="path/to/my/script.js"></script></pre> + +<div class="note"> +<p><strong>Pro tip:</strong> In many cases it's a good idea to put your {{HTMLElement('script')}} elements at the end of your HTML document (right before the <code></body></code> closing {{Glossary("tag")}}).</p> + +<p>Loading and running scripts is blocking and immediate. That means, every time the browser comes across a <code><script></code> 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.</p> + +<p>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.</p> +</div> + +<h3 id="Writing_JavaScript_within_HTML" name="Writing_JavaScript_within_HTML">Writing JavaScript within HTML</h3> + +<p>You may also add JavaScript code between <code><script></code> tags rather than providing an <code>src</code> attribute.</p> + +<pre class="brush: html"><script> +window.addEventListener('load', function () { + console.log('This function is executed once the page is fully loaded'); +}); +</script></pre> + +<p>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</p> + +<ul> + <li>focus on your work</li> + <li>write self-sufficient HTML</li> + <li>write structured JavaScript applications</li> +</ul> + +<h2 id="Use_scripting_accessibly" name="Use_scripting_accessibly">Use scripting accessibly</h2> + +<p>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:</p> + +<ul> + <li><strong>Make all content available as (structured) text.</strong> Rely on HTML for your content as much as possible. 例えば、 if you've implemented a nice JavaScript progress bar, make sure to supplement it with matching text percentages inside the HTML. Likewise, your drop-down menus should be structured as <a href="/ja//Learn/HTML/Howto/Create_list_of_items_with_HTML">unordered lists</a> of <a href="/ja//Learn/HTML/Howto/Create_a_hyperlink">links</a>.</li> + <li><strong>Make all functionality accessible from the keyboard.</strong> + <ul> + <li>Let users Tab through all controls (e.g., links and form input) in a logical order.</li> + <li>If you use pointer events (like mouse events or touch events), duplicate the functionality with keyboard events.</li> + <li>Test your site using a keyboard only.</li> + </ul> + </li> + <li><strong>Don't set nor even guess time limits.</strong> It takes extra time to navigate with the keyboard or hear content read out. You can hardly ever predict just how long it will take for users or browsers to complete an process (especially asynchronous actions such as loading resources).</li> + <li><strong>Keep animations subtle and brief with no flashing.</strong> Flashing is annoying and can <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">cause seizures</a>. Additionally, if an animation lasts more than a couple seconds, give the user a way to cancel it.</li> + <li><strong>Let users initiate interactions.</strong> That means, don't update content, redirect, or refresh automatically. Don't use carousels or display popups without warning.</li> + <li><strong>Have a plan B for users without JavaScript.</strong> People may have JavaScript turned off to improve speed and security, and users often face network issues that prevent loading scripts. Moreover, third-party scripts (ads, tracking scripts, browser extensions) might break your scripts. + <ul> + <li>At a minimum, leave a short message with {{HTMLElement("noscript")}} like this: <code><noscript>To use this site, please enable JavaScript.</noscript></code></li> + <li>Ideally, replicate the JavaScript functionality with HTML and server-side scripting when possible.</li> + <li>If you're only looking for simple visual effects, CSS can often get the job done even more intuitively.</li> + <li> + <p><em>Since almost everybody <strong>does</strong> have JavaScript enabled, <code><noscript></code> is no excuse for writing inaccessible scripts.</em></p> + </li> + </ul> + </li> +</ul> + +<h2 id="Learn_more" name="Learn_more">Learn more</h2> + +<ul> + <li>{{htmlelement("script")}}</li> + <li>{{htmlelement("noscript")}}</li> + <li><a href="http://www.sitepoint.com/javascript-accessibility-101/">James Edwards' introduction to using JavaScript accessibly</a></li> + <li><a href="http://www.w3.org/TR/WCAG20/">Accessibility guidelines from W3C</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">ウェブサイトを構築するためには、ウェブページの構造を定義するための基本的な技術である {{Glossary('HTML')}} 言語を知っておくべきでしょう。 HTML はウェブコンテンツをどのよう解釈するべきかを特定するために使用します。段落、リスト、見出し、リンク、画像、マルチメディアプレーヤー、フォーム、又は他の数多くの要素の一つ、又はユーザーが定義した新しい要素などです。</p> + +<h2 id="Learning_pathway" name="Learning_pathway">学習経路</h2> + +<p>HTML 学習を学びの旅の起点にすることが理想的です。<a href="/docs/Web/Guide/HTML/Introduction">HTML 概論</a>を読んでみましょう。さらに学びたいと思ったなら、次は以下のような内容に移ることになるでしょう。</p> + +<ul> + <li><a href="/docs/Learn/CSS">CSS</a>、またそれを用いて、どうやって HTML の様式を整えるか。(例えば、文字の様式やサイズを適用したり、線で囲んだり、影をつけたり、ページをカラムでレイアウトしたり、アニメをつけたりすることができます。）</li> + <li><a href="/docs/Learn/JavaScript">JavaScript</a>、またそれを用いて、ウェブページをいかにして動的な機能を付け加えるか。(例えば、地図上にあなたの位置をプロットしたり、UI エレメントをボタン操作で、現れるようにしたり、隠すようにしたり、コンピュータ上にユーザーのデータを保存したり、その他いろいろなことができます。）</li> +</ul> + +<p>このトピックを開始する前に、最低限コンピュータを利用することに慣れておくべきでしょう。また、ウェブを受け手の側から、利用すること（つまり、ただ見たり、コンテンツを消費したりすること）にも慣れておくべきでしょう。また基本的な作業環境のセットアップもしておくべきでしょう。細かい話は、 <a href="/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a>や、 <a href="/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>に書かれています。今あげた二つの内容は、<a href="/docs/Learn/Getting_started_with_the_web">Web 入門</a>という初心者向けの章に含まれています。</p> + +<p>今回のトピックに入る前に、 <a href="/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>を一読しておくことをお薦めします。けれども、絶対にそうしておく必要があるというわけではありません。 <a href="/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基礎</a>の記事でカバーされている大体の内容は、 <a href="/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>の記事でもカバーされています。ただこちらのほうが、より詳細な記事になっています。</p> + +<h2 id="Modules" name="Modules">モジュール</h2> + +<p>このトピックは、以下の内容を含んでいます。そして、それらは、学んでいくのに好ましい順番で並んでいます。上から順番に学んでいくのが望ましいでしょう。</p> + +<dl> + <dt><a href="/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a></dt> + <dd>この章では、土台作りをします。ここで、あなたはHTMLの重要な概念や構文に慣れたり、HTML を文章に適用していくのを見たり、どうやってハイパーリンクができるのか、HTML がウェブページを作るためにどのように利用されるのかを学ぶことになります。</dd> + <dt><a href="/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアと埋め込み</a></dt> + <dd>この章では、 HTML を使ってどうやったら、あなたのウェブページにマルチメディアを導入できるかを学びます。画像を取り込むためのいくつかのやり方、ビデオや音声、さらに、ウェブページそのものを埋め込む方法もここで学びます。</dd> + <dt><a href="/docs/Learn/HTML/Tables">HTML 表</a></dt> + <dd>ウェブページ上の表形式のデータを理解しやすく{{glossary("Accessibility", "アクセスしやすい")}}方法で表現することは難しいことです。このモジュールでは、基本的な表のマークアップと、キャプションやサマリーの実装などのより複雑な機能をカバーしています。</dd> + <dt><a href="/docs/Learn/HTML/Forms">HTML フォーム</a></dt> + <dd>フォームはウェブのとても重要な部分です。これらはウェブサイトとのやりとりに必要な多くの機能を提供します。登録とログイン、フィードバックの送信、商品の購入などが含まれます。このモジュールでは、フォームのクライアント側部分の作成を始めます。</dd> +</dl> + +<h2 id="Solving_common_HTML_problems" name="Solving_common_HTML_problems">よくある HTML の問題の解決</h2> + +<p><a href="/docs/Learn/HTML/Howto">共通の問題解決に HTML を使う</a> 「基本的な問題を解決するために HTML を使う」では、ウェブページを作った時に出てくる一般的な問題をどうやって解決するかを説明するためのコンテンツのセクションへのリンクを提示します。タイトルの扱い方や、画像やビデオを加えたり、コンテンツを強調したり、基本的なフォームを作ったりします。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt>MDN 上の <a href="/ja/docs/Web/HTML">HTML (HyperText Markup Language)</a> .</dt> + <dd>MDN における HTML に関する文書の入口で、詳細な要素と属性のリファレンスがあります。例えば、要素がが持っている属性は何か、属性の持つ値は何かなどを知りたかったら、これは最適な場所です。</dd> +</dl> +</div> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">テキストの書式設定のための HTML には他にも多くの要素がありますが、これは <a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a> には書かれていません。この記事で説明されている要素はあまり知られていませんが、知っていると役に立ちます。（これはまだいかなる意味でも完全なリストではありません）。ここでは、注釈、説明リスト、コンピューターコードとその他の関連テキスト、下付き文字と上付き文字、連絡先情報などのマーキングについて学習します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML入門</a>に載っている、基本的なHTMLに精通していること。<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>に載っている、HTMLテキストフォーマット。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>高度な意味付け機能をマークアップするための、あまり知られていないHTML要素を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Description_lists" name="Description_lists">説明リスト</h2> + +<p>HTML テキストの基礎では、HTMLで <a href="/ja/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">基本的なリストをマークアップする</a>方法を見てきました、しかしたまに出てくる第3のリスト — <strong>説明リスト</strong> — については触れていませんでした。このリストの目的は、項目とそれに関連する説明を一緒にマークアップすることで、用語の定義や、質問と回答などに使います。用語の定義の例を見てみましょう:</p> + +<pre class="notranslate">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</pre> + +<p>説明リストは他の種類のリストと違うラッパーを使います — {{htmlelement("dl")}} です; それぞれの用語が {{htmlelement("dt")}} (description term; 説明用語) 要素で囲まれて、それぞれの説明は {{htmlelement("dd")}} (description definition; 説明定義) 要素で囲まれます。例のマークアップを完了しましょう:</p> + +<pre class="brush: html notranslate"><dl> + <dt>独白( soliloquy )</dt> + <dd>ドラマでは、登場人物が自分自身にしゃべりかけ、内なる考えや感情や、そうなった過程を(他の登場人物ではなく)観客に対して表現します。</dd> + <dt>独白( monologue)</dt> + <dd>ドラマで、登場人物が自分の考えを観客や他の登場人物に伝わるように喋ります。</dd> + <dt>ひそひそ話</dt> + <dd>ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。</dd> +</dl></pre> + +<p>ブラウザーデフォルトのスタイルでは、説明を用語からいくらかインデントします。MDN のスタイルはこの慣習にほぼ従いますが、用語を太字にします。</p> + +<dl> + <dt>独白 (soliloquy)</dt> + <dd>ドラマでは、登場人物が自分自身にしゃべりかけ、内なる考えや感情や、そうなった過程を(他の登場人物ではなく)観客に対して表現します。</dd> + <dt>独白 (monologue)</dt> + <dd>ドラマで、登場人物が自分の考えを観客や他の登場人物に伝わるように喋ります。</dd> + <dt>ひそひそ話</dt> + <dd>ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。</dd> +</dl> + +<p>注意として、単独の用語に複数の説明をつけるのも許されます、例えば:</p> + +<dl> + <dt>余談</dt> + <dd>ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。</dd> + <dd>文章では、現在のトピックに関連するが、主な流れには直接くっつけずに脇に置かれるコンテンツの節 (しばしば脇の囲みの中に置かれる)。</dd> +</dl> + +<h3 id="Active_learning_Marking_up_a_set_of_definitions" name="Active_learning_Marking_up_a_set_of_definitions">アクティブ学習: 定義をマークアップする</h3> + +<p>では実際に説明リストを使ってみましょう。ここでは以下の入力フィールドの生テキストをマークアップし、説明リストとして表示されるようにします。あなたがお好きな用語と説明を使って試してみることもできます。</p> + +<p>もし何かミスをしても、リセットボタンでいつでも元に戻すことができます。詰まってしまったら「Show solution」ボタンを押して解答を見ましょう。</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +Bacon +The glue that binds the world together. +Eggs +The glue that binds the cake together. +Coffee +The drink that gets the world running in the morning. +A light brown color.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<dl>\n <dt>Bacon</dt>\n <dd>The glue that binds the world together.</dd>\n <dt>Eggs</dt>\n <dd>The glue that binds the cake together.</dd>\n <dt>Coffee</dt>\n <dd>The drink that gets the world running in the morning.</dd>\n <dd>A light brown color.</dd>\n</dl>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Quotations" name="Quotations">引用</h2> + +<p>HTML には引用をマークアップするための機能もあります。どちらの要素を使用するかは、ブロックとインラインのどちらの引用をマークアップするかによって異なります。</p> + +<h3 id="Blockquotes" name="Blockquotes">ブロッククォート</h3> + +<p>ブロックレベルのコンテンツのセクション (段落、複数段落、リストなど) が他の場所から引用されている場合は、それを表すために {{htmlelement("blockquote")}} 要素で囲む必要があります。{{htmlattrxref("cite","blockquote")}} 属性内に引用のソースを指す URL を含めます。たとえば、次のマークアップは MDN の <code><blockquote></code> 要素ページから取得されます。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>これをブロッククォートにするには、次のようにします。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>ブラウザのデフォルトのスタイル設定では、これがインデントされた段落として、それが引用であることを示すインジケータとして表示されます。MDN はこれを行いますが、さらにいくつかのスタイルを追加します。</p> + +<blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote"> +<p><strong>HTML <code><blockquote></code> </strong><strong>要素</strong> (または <em>HTML Block Quotation 要素</em>) は、囲まれたテキストが拡張引用符であることを示します。</p> +</blockquote> + +<h3 id="Inline_quotations" name="Inline_quotations">インラインクォート</h3> + +<p>インラインの引用は、{{htmlelement("q")}} 要素を使用することを除いて、まったく同じ方法で機能します。例えば、以下のマークアップには MDN の <code><q></code> ページからの引用が含まれています。</p> + +<pre class="brush: html notranslate"><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></pre> + +<div title="Browser default styling will render this as normal text put in quotes to indicate a quotation, like so:">ブラウザーのデフォルトのスタイル設定では、これは引用符で囲まれた通常のテキストとしてレンダリングされ、次のようになります。</div> + +<div title="Browser default styling will render this as normal text put in quotes to indicate a quotation, like so:"></div> + +<p>quote 要素 — <code><q></code> — は "段落区切りを必要としない短い引用のためのもの" です。</p> + +<h3 id="Citations" name="Citations">引用元</h3> + +<p>{{htmlattrxref("cite","blockquote")}} 属性の内容は役に立ちそうに見えますが、残念ながらブラウザ、スクリーンリーダーなどはこれについてあまり機能しません。 JavaScript または CSS を使用して独自のソリューションを作成しない限り、ブラウザに引用元の内容を表示させる方法はありません。引用元のソースをページ上で利用可能にしたい場合は、それをマークアップするためのより良い方法は、{{htmlelement("cite")}} 要素を quote 要素の隣 (または内側) に置くことです。これはまさに引用したリソースのタイトル — 例えば本の名前 — を含むことを意味しますが、とにかく、 <code><cite></code> <span class="tlid-translation translation" lang="ja"><span title="">内のテキストを何らかの方法で引用ソースにリンクできない理由はありません。</span></span></p> + +<pre class="brush: html notranslate"><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></pre> + +<p>引用は、デフォルトではイタリック体で表示されています。あなたは <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a> の例で動作しているこのコードを見ることができます。</p> + +<h3 id="Active_learning_Who_said_that" name="Active_learning_Who_said_that">アクティブラーニング: 誰がそう言ったの？</h3> + +<p>もう一つのアクティブラーニングの時間です！ この例では、あなたにお願いします。</p> + +<ol> + <li>中央の段落を <code>cite</code> 属性を含むブロッククォートにします。</li> + <li>3番目の段落の一部を、<code>cite</code> 属性を含むインライン引用に変換します。</li> + <li>各リンクに <code><cite></code> 要素を含めます。</li> +</ol> + +<p>必要な引用元は以下のとおりです。</p> + +<ul> + <li>Confucius の引用については http://www.brainyquote.com/quotes/authors/c/confucius.html</li> + <li>http://www.affirmationsforpositivethinking.com/index.htm「The Need To Eliminate Negative Self Talk」用</li> +</ul> + +<p>間違えた場合は、リセットボタンを使用していつでもリセットできます。本当に動けなくなったら、<em>Show solution</em> ボタンを押して答えを見てください。</p> + +<div class="hidden"> +<h6 id="Playable_code_2" name="Playable_code_2">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 150px; width: 95%"> +<p>Hello and welcome to my motivation page. As Confucius once said:</p> +<p>It does not matter how slowly you go as long as you do not stop.</p> +<p>I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk (as mentioned in Affirmations for Positive Thinking.)</p> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> once said:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>It does not matter how slowly you go as long as you do not stop.</p>\n</blockquote>\n\n<p>I also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com/index.htm">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Abbreviations" name="Abbreviations">略語</h2> + +<p>Web を見回すときに見かけるもう1つのかなり一般的な要素は {{htmlelement("abbr")}} です — これは略語や頭字語を囲み、その用語の完全な展開 (これは{{htmlattrxref("title")}} <span class="tlid-translation translation" lang="ja"><span title="">属性内に含まれる</span></span>) を提供するために使用されます。例をいくつか見てみましょう。</p> + +<pre class="notranslate"><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></pre> + +<p>これらは次のようなものに見えます (用語が上に置かれると展開はツールチップに表示されます)。</p> + +<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> + +<div class="note"> +<p><strong>注</strong>: 別の要素だと、{{htmlelement("acronym")}} があります。これは基本的に <code><abbr></code> と同じことを行い、特に省略語ではなく頭字語を対象としていました。しかしこれは廃止され、ブラウザでは <code><abbr></code> ほどにはサポートされていませんでしたし、同じような機能を備えているため、両方を使用するのは無意味です。 代わりに <code><abbr></code> を使用してください。</p> +</div> + +<h3 id="Active_learning_marking_up_an_abbreviation" name="Active_learning_marking_up_an_abbreviation">アクティブラーニング: 略語をマークアップする</h3> + +<p>このシンプルなアクティブラーニング課題では、単に略語をマークアップしてください。以下のサンプルを使用するか、またはあなた自身のものと交換することができます。</p> + +<div class="hidden"> +<h6 id="Playable_code_3" name="Playable_code_3">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 50px; width: 95%"> +<p>NASA sure does some exciting work.</p> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> sure does some exciting work.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Marking_up_contact_details" name="Marking_up_contact_details">詳細な連絡先をマークアップする</h2> + +<p>HTML には連絡先の詳細をマークアップするための要素 — {{htmlelement("address")}} があります。これは単に連絡先の詳細を囲むだけです。例えば：</p> + +<pre class="brush: html notranslate"><address> + <p>Chris Mills, Manchester, The Grim North, UK</p> +</address></pre> + +<p>ただし {{htmlelement("address")}} 要素は、HTML 文書を作成した人の連絡先の詳細をマークアップするためのものであり、住所ではありません。マークアップが書かれている文書を書いたのがクリスならば、上記は大丈夫でしょう。このようなものでも大丈夫でしょう：</p> + +<pre class="brush: html notranslate"><address> + <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p> +</address></pre> + +<h2 id="Superscript_and_subscript" name="Superscript_and_subscript">上付きと下付き</h2> + +<p>日付、化学式、数式などの項目をマークアップするときには、上付き文字と下付き文字を使用する必要がある場合があります。{{htmlelement("sup")}} と {{htmlelement("sub")}} 要素がこの仕事を処理します。例えば：</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>このコードの出力は次のようになります。</p> + +<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> + +<h2 id="Representing_computer_code" name="Representing_computer_code">コンピューターコードを表現する</h2> + +<p>HTML を使用してコンピュータコードをマークアップするために利用可能な要素がいくつかあります。</p> + +<ul> + <li>{{htmlelement("code")}}: コンピュータコードの一般的な部分をマークアップします。</li> + <li>{{htmlelement("pre")}}: 空白 (通常はコードブロック) を保持するために — テキスト内でインデントまたは余分な空白を使用すると、ブラウザはそれを無視し、レンダリングされたページには表示されません。ただし、テキストを <code><pre></pre></code> タグで囲むと、空白はテキストエディタでの表示と同じようにレンダリングされます。</li> + <li>{{htmlelement("var")}}: 特に変数名をマークアップするためのものです。</li> + <li>{{htmlelement("kbd")}}: コンピューターに入力されたキーボード (およびその他の種類の) 入力をマークアップするためのものです。</li> + <li>{{htmlelement("samp")}}: コンピュータプログラムの出力をマークアップします。</li> +</ul> + +<p>いくつか例を見てみましょう。これら (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a> サンプルファイルのコピーを入手してください) を試してみるべきです：</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>上記のコードは次のようになります。</p> + +<p>{{EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Marking_up_times_and_dates" name="Marking_up_times_and_dates">日付と時刻をマークアップする</h2> + +<p>HTML には、時間と日付を機械可読形式でマークアップするための {{htmlelement("time")}} 要素もあります。例えば：</p> + +<pre class="brush: html notranslate"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 January 2016</<span class="pl-ent">time</span>></pre> + +<p>これはなぜ便利でしょうか？ 人間が日付を書き留める方法はたくさんあります。上記の日付は次のように書くことができます。</p> + +<ul> + <li>20 January 2016</li> + <li>20th January 2016</li> + <li>Jan 20 2016</li> + <li>20/01/16</li> + <li>01/20/16</li> + <li>The 20th of next month</li> + <li><span lang="fr">20e Janvier 2016</span></li> + <li><span lang="ja">2016年1月20日</span></li> + <li>等々</li> +</ul> + +<p>しかしこれらの異なる形式はコンピュータでは容易には認識できません。ページ内のすべてのイベントの日付を自動的に取得してカレンダーに挿入する場合はどうなりますか。{{htmlelement("time")}} 要素を使用すると、この目的のために、明確で機械可読な日時を付けることができます。</p> + +<p>上記の基本的な例は単純な機械可読な日付を提供するだけですが、可能な他の多くのオプションがあります。例えば：</p> + +<pre class="brush: html notranslate"><!-- Standard simple date --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 January 2016</<span class="pl-ent">time</span>> +<!-- Just year and month --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>>January 2016</<span class="pl-ent">time</span>> +<!-- Just month and day --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>>20 January</<span class="pl-ent">time</span>> +<!-- Just time, hours and minutes --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>>19:30</<span class="pl-ent">time</span>> +<!-- You can do seconds and milliseconds too! --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>>19:30:01.856</<span class="pl-ent">time</span>> +<!-- Date and time --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>>7.30pm, 20 January 2016</<span class="pl-ent">time</span>> +<!-- Date and time with timezone offset--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>>7.30pm, 20 January 2016 is 8.30pm in France</<span class="pl-ent">time</span>> +<!-- Calling out a specific week number--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>>The fourth week of 2016</<span class="pl-ent">time</span>></pre> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>これで HTML テキストのセマンティクスに関する学習が終わりました。このコースで見たことが HTML テキスト要素の完全なリストではないことに注意してください — <span class="tlid-translation translation" lang="ja"><span title="">私たちは必要不可欠なもの、そしてあなたがどこかで見るであろう、あるいは少なくとも面白いと思うかもしれないより一般的なものの一部をカバーしたいと思いました。もっと多くの HTML 要素を見つけるために、<a href="/ja/docs/Web/HTML/Element">HTML 要素のリファレンス</a> (<a href="/ja/docs/Web/HTML/Element#Inline_text_semantics">インラインテキストセマンティクスセクション</a>は始めるのに素晴らしい場所でしょう) を参照することができます。</span><span title="">次回の記事では、HTML 文書のさまざまな部分を構造化するために使用する HTML 要素について説明します。</span></span></p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTMLを始めよう</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">ハイパーリンクとは本当に重要なものです— ウェブが網状組織を構成しているのもハイパーリンクのおかげです。この記事ではリンクを作るために必要な構文を示し、リンクに関するベストプラクティスについて議論します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a>に載っている、基本的な HTML に精通していること。<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>に載っている、HTML テキストフォーマット。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ハイパーリンクを効率的に実装する方法、複数のファイルを互いにリンクする方法を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_hyperlink" name="What_is_a_hyperlink">ハイパーリンクとは</h2> + +<p>ハイパーリンクは Web が提供する最も刺激的なイノベーションです。Web の始まりから機能していましたが、Web を Web たるものにするものです — 文書から別の文書 (やリソース) へとリンクできたり、文書の特定の部分にリンクできたり、簡単な Web アドレスからアプリを利用できるようになります (ネイティブアプリと比較して、そちらはインストールが必要なだけです)。あらゆる Web コンテンツはリンクに変換できて、クリック (またはその他の有効化) した時に Web ブラウザーは別の Web アドレス ({{glossary("URL")}}) に移動します。</p> + +<div class="note"> +<p><strong>メモ</strong>: URL は HTML ファイルや、テキストファイル、画像、テキスト文書、動画やオーディオファイルや、その他 Web に載せられるものを指すことができます。Web ブラウザーにそのファイルの扱い方・表示法がわからない場合、それを本当に開きたいのか聞く (この場合ファイルを開いたり扱ったりする義務は適切な端末上のネイティブアプリに渡されます) か、ファイルをダウンロードします (この場合あとで処理することができます)。</p> +</div> + +<p>例えば、BBC のホームページでは、複数のニュース記事だけでなく、色々なサイトのエリアを指すリンク (ナビゲーション機能) や、ログイン/登録ページ (ユーザーツール) その他多数のリンクがあります。</p> + +<p><img alt="bbc.co.uk のフロントページで、たくさんのニュース項目と、ナビゲーションメニューの機能を表示しています" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Anatomy_of_a_link" name="Anatomy_of_a_link">リンクの解剖</h2> + +<p>基本的なリンクは、リンクにしたいテキスト (またはその他のコンテンツ、{{anch("Block level links")}} を参照) を {{htmlelement("a")}} 要素の中に囲むことで作成し、{{htmlattrxref("href", "a")}} (<strong>ハイパーテキスト参照</strong>または<strong>ターゲット</strong>とも) にリンク先にしたい Web アドレスを入れます。</p> + +<pre class="brush: html"><p>I'm creating a link to +<a href="https://www.mozilla.org/ja/">the Mozilla homepage</a>. +</p></pre> + +<p>これは以下のような結果をもたらします。</p> + +<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/ja/">the Mozilla homepage</a>.</p> + +<h3 id="Adding_supporting_information_with_the_title_attribute" name="Adding_supporting_information_with_the_title_attribute">title 属性による補足情報の追加</h3> + +<p>あなたのリンクに追加したいかもしれない別の属性は title です。これには、ページに含まれる情報の種類や注意すべき事項など、リンクに関する補足的な有用な情報が含まれています。 例えば、</p> + +<pre class="brush: html"><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></pre> + +<p>これにより、次のような結果が得られます (リンクがホバーされるとタイトルがツールチップとして表示されます)。</p> + +<p>I'm creating a link to <a class="ignore-external" 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> + +<div class="note"> +<p><strong>メモ</strong>: リンクのタイトルはマウスのホバーでのみ表示されます。つまり、Web ページをナビゲートするためにキーボードコントロールに頼る人々はタイトル情報にアクセスするのが困難になります。タイトルの情報がページの使いやすさにとって本当に重要な場合は、通常のテキストに入れるなどして、すべてのユーザーがアクセスできる方法で表示する必要があります。</p> +</div> + +<h3 id="Active_learning_creating_your_own_example_link" name="Active_learning_creating_your_own_example_link">アクティブラーニング: 独自のサンプルリンクを作成する</h3> + +<p>アクティブラーニングタイム：ローカルのコードエディタを使用して HTML ドキュメントを作成してください (私たちの<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">入門用テンプレート</a>でうまくいくでしょう)。</p> + +<ul> + <li>HTML の本文の中に、1 つ以上の段落または他の種類の既に知っているコンテンツを追加してみてください。</li> + <li>コンテンツの一部をリンクにします。</li> + <li>タイトル属性を含めます。</li> +</ul> + +<h3 id="Block_level_links" name="Block_level_links">ブロックレベルリンク</h3> + +<p>前述したように、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">ブロックレベル要素</a>であっても、あらゆるコンテンツをリンクに変えることができます。リンクに変換したい画像がある場合は、その画像を <code><a></a></code> タグの間に配置することで実現できます。</p> + +<pre class="brush: html"><a href="https://www.mozilla.org/ja/"> + <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> +</a></pre> + +<div class="note"> +<p><strong>メモ</strong>: 今後の記事では Web 上での画像の使用についてさらに多くのことがわかります。</p> +</div> + +<h2 id="A_quick_primer_on_URLs_and_paths" name="A_quick_primer_on_URLs_and_paths">URL とパスに関する簡単な入門</h2> + +<p>リンク先を完全に理解するには、URL とファイルパスを理解する必要があります。このセクションでは、これを達成するために必要な情報を提供します。</p> + +<p>URL (Uniform Resource Locator) は、Web 上のどこにあるのかを定義するテキストの文字列です。たとえば、Mozilla の日本語のホームページは <code>https://www.mozilla.org/ja/</code> にあります。</p> + +<p>URL はファイルを見つけるためにパスを使います。パスはファイルシステム内の目的のファイルが存在する場所を指定します。ディレクトリー構造の簡単な例を見てみましょう (<a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a> ディレクトリーを参照してください)。</p> + +<p><img alt="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" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>このディレクトリー構造の <strong>root</strong> は <code>creating-hyperlinks</code> と呼ばれます。Web サイトを使用してローカルで作業する場合は、サイト全体が入る 1 つのディレクトリーがあります。ルート内には、<code>index.html</code> ファイルと <code>contacts.html</code> があります。実際の Web サイトでは、<code>index.html</code> が私たちのホームページまたはランディングページ (Web サイトまたは Web サイトの特定のセクションのエントリポイントとして機能する Web ページ) になります。</p> + +<p>私たちのルートの中にも二つのディレクトリー — <code>pdfs</code> と <code>projects</code> があります。これらはそれぞれ中に PDF (<code>project-brief.pdf</code>) と <code>index.html</code> ファイルというファイルがあります。ファイルシステム内の別の場所にある限り、1 つのプロジェクトに 2 つの <code>index.html</code> ファイルを非常にうまく入れることができることに注意してください。多くの Web サイトはそうします。2番目の <code>index.html</code> は、おそらくプロジェクト関連の情報のメインランディングページになります。</p> + +<ul> + <li> + <p><strong>同じディレクトリー</strong>: <code>index.html</code> (最上位の <code>index.html</code>) 内に <code>contacts.html</code> を指すハイパーリンクを含める場合は、現在のファイルと同じディレクトリーにあるため、リンクしたいファイルの名前を指定するだけです。そのため使用する URL は <code>contacts.html</code> です：</p> + + <pre class="brush: html"><p>Want to contact a specific staff member? +Find details on our <a href="contacts.html">contacts page</a>.</p></pre> + </li> + <li> + <p><strong>サブディレクトリーに移動する</strong>: <code>index.html</code> (最上位の <code>index.html</code>) 内に <code>projects/index.html</code> を指すハイパーリンクを含める場合は、リンクしたいファイルを指定する前に <code>projects</code> ディレクトリーに移動する必要があります。これはディレクトリーの名前、スラッシュ、そしてファイルの名前を指定することでできます。そのため使用する URL は <code>projects/index.html</code> です：</p> + + <pre class="brush: html"><p>Visit my <a href="projects/index.html">project homepage</a>.</p></pre> + </li> + <li> + <p><strong>親ディレクトリーに戻る</strong>: <code>projects/index.html</code> の中に <code>pdfs/project-brief.pdf </code>を指すハイパーリンクを含めたい場合は、ディレクトリー階層を上がってから <code>pdf</code> ディレクトリーに戻る必要があります。「ディレクトリーを上る」は 2 つのドット — <code>..</code> — を使用して表します。そのため使用する URL は <code>../pdfs/project-brief.pdf</code> です：</p> + + <pre class="brush: html"><p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>メモ</strong>: 例えば <code>../../../complex/path/to/my/file.html</code> のように、必要に応じて、これらの機能の複数のインスタンスを複雑な URL に組み合わせることができます。</p> +</div> + +<h3 id="Document_fragments" name="Document_fragments">ドキュメントフラグメント</h3> + +<p>HTML 文書の上部だけでなく、HTML 文書の特定の部分 (<strong>ドキュメントフラグメント</strong>と呼ばれる) にリンクすることもできます。これを行うには、まずリンク先の要素に {{htmlattrxref("id")}} 属性を割り当てる必要があります。通常は特定の見出しにリンクするのが理にかなっているので、次のようになります。</p> + +<pre class="brush: html"><h2 id="Mailing_address">Mailing address</h2></pre> + +<p>次にその特定の <code>id</code> にリンクするには、URL の最後にハッシュ/ポンド記号を付けてそれを含めます。次に例を示します。</p> + +<pre class="brush: html"><p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p></pre> + +<p><em>同じドキュメントの別の部分</em>にリンクするために、ドキュメントフラグメント参照を単独で使用することさえできます。</p> + +<pre class="brush: html"><p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p></pre> + +<h3 id="Absolute_versus_relative_URLs" name="Absolute_versus_relative_URLs">絶対 URL vs 相対 URL</h3> + +<p>Web 上で見かける 2 つの用語は<strong>絶対 URL</strong> と<strong>相対 URL</strong> です。</p> + +<p><strong>絶対 URL</strong>: {{glossary("protocol")}} と {{glossary("domain name")}} を含む、Web 上の絶対位置で定義された位置を指します。たとえば、<code>index.html</code> ページが Web サーバーのルート内にある <code>projects</code> というディレクトリーにアップロードされ、その Web サイトのドメインが <code>http://www.example.com</code> の場合、そのページは <code>http://www.example.com/projects/index.html</code> (あるいは <code>http://www.example.com/projects/</code> だけでも、URL で指定されていない場合、Web サーバーは <code>index.html</code> のようなランディングページを探してロードします) で入手可能です。</p> + +<p>絶対 URL は、使用されている場所に関係なく、常に同じ場所を指します。</p> + +<p><strong>相対 URL</strong>: あなたがリンクしているファイルからの<em>相対的な</em>場所を指しています。たとえば、<code>http://www.example.com/projects/index.html</code> にあるサンプルファイルから同じディレクトリー内の PDF ファイルにリンクする場合、URL は単にファイル名 — 例えば <code>project-brief.pdf</code> — となり、追加情報は不要です。PDF が <code>projects</code> 内の <code>pdfs</code> という名前のサブディレクトリーにある場合、相対リンクは <code>pdfs/project-brief.pdf</code> (同等の絶対 URL は <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>) になります。</p> + +<p>相対 URL は内部で使用されているファイルの実際の場所によって、異なる場所を指します。たとえば、<code>index.html</code> ファイルを <code>projects</code> ディレクトリーから Web サイトのルート (最上位レベル、どのディレクトリーの中でもありません) に移動した場合、<code>pdfs/project-brief.pdf</code> 相対 URL リンクの内部は、<code>http://www.example.com/pdfs/project-brief.pdf</code> にあるファイルを指し、<code>http://www.example.com/projects/pdfs/project-brief.pdf</code> にあるファイルではありません。</p> + +<p>もちろん、<code>index.html</code> ファイルを移動しても <code>project-brief.pdf</code> ファイルと <code>pdfs</code> フォルダーの場所が突然変わることはありません — <span class="tlid-translation translation" lang="ja"><span title="">これは</span></span>リンクが間違った場所を指しているため、クリックしても機能しません。注意する必要があります。</p> + +<h2 id="Link_best_practices" name="Link_best_practices">リンクのベストプラクティス</h2> + +<p>リンクを書くときに従うべきベストプラクティスがいくつかあります。今これらを見てみましょう。</p> + +<ul> +</ul> + +<h3 id="Use_clear_link_wording" name="Use_clear_link_wording">明確なリンク用語を使う</h3> + +<p>ページにリンクを張るのは簡単です。それだと十分じゃありません。現在の状況やツールの好みに関係なく、リンクをすべての読者がアクセスできるようにする必要があります。例えば：</p> + +<ul> + <li>スクリーンリーダーのユーザーは、ページ上のリンクからリンクへと飛び回ったり、文脈の外でリンクを読んだりします。</li> + <li>検索エンジンはリンクテキストを使用してターゲットファイルにインデックスを付けます。したがって、リンクテキストにキーワードを含めて、リンクされているものを効果的に説明することをお勧めします。</li> + <li>視覚的な読者はすべての単語を読むのではなくページを読み飛ばします、そして彼らの目はリンクのように目立つページの特徴に引き寄せられるでしょう。彼らは説明的なリンクテキストが役に立つと思うでしょう。</li> +</ul> + +<p>具体的な例を見てみましょう。</p> + +<p><em><strong>良い</strong> リンクテキスト:</em> <a href="https://firefox.com">Download Firefox</a></p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Download Firefox +</a></p></pre> + +<p><em><strong>悪い</strong> リンクテキスト:</em> <a href="https://firefox.com/">Click here</a> to download Firefox</p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Click here +</a> +to download Firefox</p> +</pre> + +<p>その他のヒント</p> + +<ul> + <li>リンクテキストの一部として URL を繰り返さないでください。スクリーンリーダーが 1文字ずつ読み上げると、URL は見苦しくなり、さらに見苦しくなります。</li> + <li>リンクテキストに「リンク」や「へのリンク」と書いてはいけません — それは単なるノイズです。スクリーンリーダーは、リンクがあることを人々に伝えます。リンクは一般的に異なる色で表示され、下線が引かれているので、見ているユーザーもリンクがあることを知っているでしょう (ユーザーは慣れているので、この規約は一般に壊れてはいけません)。</li> + <li>リンクラベルはできるだけ短くしてください — 長いリンクは、特に全体を読み上げなければならないスクリーンリーダーのユーザーを悩ませます。</li> + <li>同じテキストが複数存在し、かつ異なる場所にリンクされている場合を最小限に抑えます。これはスクリーンリーダーのユーザーにとって問題となる可能性があり、リンクの一覧が文脈からはずれて表示されることがよくあります。</li> +</ul> + +<h3 id="Use_relative_links_wherever_possible" name="Use_relative_links_wherever_possible">できるだけ相対リンクを使う</h3> + +<p>上記の説明から、絶対リンクを常に使用することが賢明だと思うかもしれません。結局のところ、ページが相対リンクのように移動されても壊れません。ただし、<em>同じ Web サイト</em>内の他の場所にリンクする場合は、できるだけ相対リンクを使用する必要があります (他の Web サイトにリンクする場合は、絶対リンクを使用する必要があります)。</p> + +<ul> + <li>まず最初に、コードをスキャンするのがはるかに簡単です。相対 URL は一般に絶対 URL よりはるかに短いので、コードを読むのはずっと簡単です。</li> + <li> + <p>次に、可能な限り相対 URL を使用するほうが効率的です。<br> + 絶対 URL を使用すると、ブラウザーはドメインネームシステム ({{glossary("DNS")}}; 詳細は<a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブの仕組み</a>をご覧ください) 上のサーバーの実際の場所を検索することから開始し、次にそのサーバーに移動して要求されているファイルを見つけます。一方相対 URL では、ブラウザーは要求されているファイルを同じサーバー上で検索するだけです。そのため、相対 URL のように絶対 URL を使用する場合は、常にブラウザーに余分な作業を行わせることになります。つまりブラウザーの効率が低下します。</p> + </li> +</ul> + +<h3 id="Linking_to_non-HTML_resources_—_leave_clear_signposts" name="Linking_to_non-HTML_resources_—_leave_clear_signposts">HTML 以外のリソースへのリンク - 明確な道標を残す</h3> + +<p>(PDF や Word 文書のように) ダウンロードされたり (ビデオやオーディオのように) ストリーミングされたり、ポップアップウィンドウを開いたり、Flash ムービーを読み込んだりするなど、予期せぬ効果をもたらすリソースにリンクする場合は、混乱を避けるために明確な表現を追加します。例えば、それはかなりいらいらさせることができます。</p> + +<ul> + <li>低帯域幅の接続を使用している場合は、リンクをクリックすると、数メガバイトのダウンロードが突然開始されます。</li> + <li>Flash プレーヤーがインストールされていない場合は、リンクをクリックすると突然 Flash が必要なページに移動します。</li> +</ul> + +<p>ここではどのような種類のテキストを使用できるかを見るために、いくつかの例を見てみましょう。</p> + +<pre class="brush: html"><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></pre> + +<h3 id="Use_the_download_attribute_when_linking_to_a_download" name="Use_the_download_attribute_when_linking_to_a_download">ダウンロードへのリンクは download 属性を使う</h3> + +<p>ブラウザーで開くのではなくダウンロードするリソースにリンクしている場合は、<code>download</code> 属性を使用してデフォルトの保存ファイル名を指定できます。これは最新の Windows 版 Firefox へのダウンロードリンクの例です。</p> + +<pre class="brush: html"><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></pre> + +<h2 id="Active_learning_creating_a_navigation_menu" name="Active_learning_creating_a_navigation_menu">アクティブラーニング: ナビゲーションメニューの作成</h2> + +<p>この演習では、ナビゲーションメニューを使用していくつかのページをリンクして、複数ページの Web サイトを作成してください。これは Web サイトが作成される一般的な方法の 1 つです。同じナビゲーションメニューを含め、すべてのページで同じページ構造が使用されます。リンクをクリックすると、同じ場所に留まっているという印象が与えられ、異なるコンテンツが表示されます。</p> + +<p>次の 4 ページのローカルコピーをすべて同じディレクトリーに作成する必要があります (完全なファイルリストについては <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> ディレクトリーも参照してください)。</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>あなたがすべきことは：</p> + +<ol> + <li>リンク先のページの名前を含む、順序なしリストを 1 ページの指示された場所に追加します。ナビゲーションメニューは通常単なるリンクのリストなので、意味的には問題ありません。</li> + <li>各ページ名をそのページへのリンクにします。</li> + <li>ナビゲーションメニューを各ページにコピーします。</li> + <li>各ページで、その同じページへのリンクだけを削除します - ページに自分自身へのリンクを含めることは混乱を招き、無意味です。また、リンクがないことは、現在表示しているページを視覚的に思い出させるものです。</li> +</ol> + +<p>完成した例では、次のようになります。</p> + +<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>メモ</strong>: 動けなくなったり、正しいかどうかわからない場合は、<a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">ナビゲーションメニューのマークアップ</a>ディレクトリーをチェックして正しい答えを確認できます。</p> +</div> + +<h2 id="E-mail_links" name="E-mail_links">メールのリンク</h2> + +<p>クリックすると、リソースまたはページにリンクするのではなく、新しい送信メールメッセージを開くリンクまたはボタンを作成することができます。これは {{HTMLElement("a")}} 要素と <code>mailto:</code> URL スキームを使って行われます。</p> + +<p>最も基本的で一般的に使用されている形式では、<code>mailto:</code> リンクは単に意図した受信者のメールアドレスを示します。例えば：</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">メールをどこにも送信しません</a> +</pre> + +<p>この結果、次のようなリンクが表示されます。<a href="mailto:nowhere@mozilla.org">メールをどこにも送信しません</a>。</p> + +<p>実際、メールアドレスはオプションです。省略した場合 (つまり、{{htmlattrxref("href", "a")}} は単に "mailto:" です)、<span class="tlid-translation translation" lang="ja"><span title="">宛先アドレスがまだ指定されていないユーザーのメールクライアントによって、新しい送信メールウィンドウが開かれます。</span><span title="">これは、ユーザーがクリックして自分が選択したアドレスに E メールを送信できる「共有」リンクとして役立つことがよくあります。</span></span></p> + +<h3 id="Specifying_details" name="Specifying_details">詳細の指定</h3> + +<p>メールアドレスに加えて、他の情報を提供することができます。実際、提供する <code>mailto</code> URL には標準のメールヘッダフィールドを追加できます。最も一般的に使用されるのは "subject"、"cc"、および "body" です (これは本当のヘッダーフィールドではありませんが、新しいメールのための短い内容のメッセージを指定することを可能にします)。各フィールドとその値は、クエリ用語として指定されています。</p> + +<p>これは cc、bcc、件名、本文を含む例です。</p> + +<pre class="brush: html"><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></pre> + +<div class="note"> +<p><strong>メモ:</strong> 各フィールドの値は URL エンコードされている必要があります。つまり、非印刷文字 (タブ、キャリッジリターン、改ページなどの不可視文字) とスペースの<a href="http://en.wikipedia.org/wiki/Percent-encoding">パーセントエスケープ</a>が含まれています。また、疑問符 (<code>?</code>) を使用してメイン URL とフィールド値を区別し、アンパサンド (＆) を使用して <code>mailto:</code> URL 内の各フィールドを区別します。これは標準の URL クエリ表記です。<a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">GET メソッド</a>を読んで、どの URL クエリ表記がより一般的に使用されているかを理解してください。</p> +</div> + +<p>以下は <code>mailto</code> の他の URL の例です。</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>とにかく今のところ、それはリンクのためのそれです！<br> + スタイルの設定を見始めると、コースの後半のリンクに戻ります。次に HTML について説明します。テキストのセマンティクスに戻って、役に立つと思われるより高度な機能や変わった機能について説明します。高度なテキストの書式設定は、次に行うことです。</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは？HTML のメタデータ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">上級のテキスト整形</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文書と Web サイトの構造</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML のデバッグ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">文字のマークアップ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツのページの構造化</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">HTML を書くことは良いですが、何か問題が生じた場合どうなります？また、コード内のどこにエラーがあるか見つけられますか？この記事では HTML 内のエラーの発見、および修正の手助けをしてくれるいくつかのツールを紹介します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>HTML の使い方、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML の始め方</a>や <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>、そして<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>を網羅した例。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>HTML内の問題を見つけるためのデバッグ用ツールの基本的な使い方の学習。</td> + </tr> + </tbody> +</table> + +<h2 id="デバッグは怖くない">デバッグは怖くない</h2> + +<p>何かのコードを書いている時、エラーが起きる (何かしらの間違いを犯したため、コードが全く機能しない、あるいは望んでいた通りに動かない) その恐ろしい瞬間まで、通常は全く問題ありません。たとえば、以下は <a href="https://www.rust-lang.org/">Rust</a> 言語で書かれた単純なプログラムを {{glossary("compile")}} しようとしたときに報告されるエラーを示しています。<img alt="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." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">ここに、比較的分かりやすいエラーメッセージがあります。 — "閉じていない二重引用符文字列"。リストを見れば、おそらく論理的に <code>println!(Hello, world!");</code> に二重引用符がない可能性があるとわかるでしょう。しかし、プログラムが大きくなるにつれてエラーメッセージはすぐに複雑になり、解釈しにくくなります。簡単な場合でも、Rust について何も知らない人には少し威圧的に見えるかもしれません。</p> + +<p>デバッグを怖がる必要はありません — プログラミング言語やコードの作成、デバッグに慣れるための鍵は、言語とツールの両方に精通していることです。</p> + +<h2 id="HTML_とデバッグ">HTML とデバッグ</h2> + +<p>HTML は Rust ほど理解するのが複雑ではありません。ブラウザが解析して結果を表示するまで、HTML は別の形式にコンパイルされません (解釈されますが、コンパイルはされません)。そして HTML の {{glossary("element")}} 構文は、Rust、{{glossary("JavaScript")}}、または {{glossary("Python")}} のような "実際のプログラミング言語" よりはるかに理解しやすいです。ブラウザが HTML を解析する方法は、プログラミング言語の実行方法よりもはるかに<strong>寛容</strong>です。これは良いことと悪いことの両方です。</p> + +<h3 id="許容コード">許容コード</h3> + +<p>では寛容とはどういうことでしょうか。まあ、一般的にコードで何か間違ったことをするとき、出くわすことになる2つの主なタイプのエラーがあります：</p> + +<ul> + <li><strong>シンタックスエラー</strong>: 上記の Rust エラーのように、コード内のスペルミスで実際にはプログラムが実行されません。言語の構文に精通していて、エラーメッセージが何を意味するのか知っている限り、これらは通常修正が簡単です。</li> + <li><strong>ロジックエラー</strong>: これらは、シンタックスは実際には正しいのですが、コードが意図したものではないため、プログラムが正しく実行されないエラーです。エラーの原因を特定するためのエラーメッセージがないため、シンタックスエラーよりも修正が困難です。</li> +</ul> + +<p>HTML 自体は構文エラーに悩まされていません。ブラウザが構文解析エラーを許容して解析するからです。つまり、構文エラーがあってもページは表示されたままです。ブラウザには、誤って書かれたマークアップを解釈する方法を決定するための組み込みのルールがあるので、たとえそれが期待したものでなくても、実行することはできます。もちろん、これはまだ問題になる可能性があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: Web の世界が最初に構築されたとき、HTML はそれほど厳格には解析されませんでした。これは、構文（シンタックス）が絶対的に正しいことを確認するよりも、人々がコンテンツを公開できることのほうが重要であると判断されたためです。当初から構文がより厳格に処理されていたとすれば、おそらく 現在のような Web は実現されなかったでしょう。</p> +</div> + +<h3 id="アクティブラーニング_許容コードの学習">アクティブラーニング: 許容コードの学習</h3> + +<p>HTML コードの寛容な性質を学習する時が来ました。</p> + +<ol> + <li>まず、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example のデモ</a>をダウンロードしてローカルに保存します。このデモは、調査するために意図的にエラーを含むように書かれています (HTML マークアップは<strong>整形式ではない</strong>と言われており、<strong>整形式</strong>とは対照的です)。</li> + <li>次にブラウザで開きます。 このようなものを見るでしょう：<img alt="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. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li>これはすぐには良く見えません。ソースコードを調べて、問題が解決できるかどうか確認しましょう (本文の内容だけが表示されます)。 + <pre class="brush: html notranslate"><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></pre> + </li> + <li>問題を見てみましょう。 + <ul> + <li>{{htmlelement("p","paragraph")}} と {{htmlelement("li","list item")}} 要素には終了タグがありません。上の画像を見ると、ある要素がどこで終わり、別の要素が始まるべきかを推測するのは簡単なので、これはマークアップのレンダリングにあまり悪い影響を与えていないようです。</li> + <li>最初の {{htmlelement("strong")}} 要素には終了タグがありません。要素がどこで終了するのか分かりにくいので、もう少し問題があります。実際、残りのテキスト全体が強調されています。</li> + <li>このセクションはひどくネストされています： <code><strong>strong <em>strong emphasised?</strong> what is this?</em></code>。前の問題もあって、これがどのように解釈されたかを見分けるのは容易ではありません。</li> + <li>{{htmlattrxref("href","a")}} 属性値に、閉じ二重引用符がありません。これが最大の問題を引き起こしているようです。リンクはまったくレンダリングされていません。</li> + </ul> + </li> + <li>それでは、ソースコードのマークアップに対して、ブラウザがレンダリングしたマークアップを見てみましょう。これを行うには、ブラウザの開発者ツールを使用できます。ブラウザの開発者ツールの使い方に慣れていない場合は、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">Discover browser developer tools</a> を数分確認してください。</li> + <li>DOM インスペクタでは、レンダリングされたマークアップがどのように見えるかを見ることができます。<img alt="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." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li>DOM インスペクタを使用して、ブラウザが HTML エラーを修正しようとしている方法を確認するためにコードを詳しく調べてみましょう (もちろん Firefox で確認していますが、他のモダンなブラウザでも同じ結果が得られる<em>はず</em>です)。 + <ul> + <li>段落とリスト項目には終了タグが付けられています。</li> + <li>最初の <code><strong></code> 要素がどこで閉じられるべきかは明確ではないので、ブラウザはそれぞれ別々のテキストブロックをそれぞれの strong タグで、ドキュメントの一番下まで閉じています。</li> + <li>不正確なネスティングはブラウザによってこのように修正されました： + <pre class="brush: html notranslate"><strong>strong + <em>strong emphasised?</em> +</strong> +<em> what is this?</em></pre> + </li> + <li>二重引用符がないリンクは完全に削除されました。 最後のリスト項目は次のようになります。 + <pre class="brush: html notranslate"><li> + <strong>Unclosed attributes: Another common source of HTML problems. + Let's look at an example: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="HTML_バリデーション">HTML バリデーション</h3> + +<p>上記の例から、HTML が整形式であることを本当に確認したいことがわかります。しかし、どうですか？上のような小さな例では、行を検索してエラーを見つけるのは簡単ですが、巨大で複雑な HTML 文書についてはどうでしょうか。</p> + +<p>最良の戦略は、HTML、CSS、およびその他の Web テクノロジを定義する仕様を管理する組織である W3C によって作成および管理されている <a href="https://validator.w3.org/">Markup Validation Service</a> を介して HTML ページを実行することです。この Web ページは入力として HTML ドキュメントを受け取り、それを通して、あなたの HTML の何が悪いのかを伝えるレポートを提供してくれます。</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>検証する HTML を指定するには、Web アドレスを指定するか、HTML ファイルをアップロードするか、または HTML コードを直接入力します。</p> + +<h3 id="アクティブラーニング_HTML_ドキュメントの検証">アクティブラーニング: HTML ドキュメントの検証</h3> + +<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">サンプル文書</a>でこれを試してみましょう。</p> + +<ol> + <li>まず、<a href="https://validator.w3.org/">Markup Validation Service</a> を1つのブラウザタブに読み込みます (まだ読み込まれていない場合)。</li> + <li><a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> タブに切り替えます。</li> + <li>本文だけでなく、すべてのサンプルドキュメントのコードをコピーして、Markup Validation Service に表示される大きなテキスト領域に貼り付けます。</li> + <li><em>Check</em> ボタンを押します</li> +</ol> + +<p>これでエラーと他の情報のリストを提供してくれるはずです。</p> + +<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="エラーメッセージの解釈">エラーメッセージの解釈</h4> + +<p>エラーメッセージは通常役に立ちますが、あまり役に立たないこともあります。少し訓練すれば、これらを解釈してコードを修正する方法を考え出すことができます。エラーメッセージとその意味を見ていきましょう。各メッセージには行番号と列番号が付いているので、エラーを簡単に見つけることができます。</p> + +<ul> + <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): これらのメッセージは、要素が開いていて閉じる必要があることを示しています。終了タグは暗示されていますが、実際にはありません。行/列情報は、終了タグが実際にあるべき行の後の最初の行を指していますが、これは何が問題なのかを確認するのに十分な手掛かりです。</li> + <li>"Unclosed element <code>strong</code>": これは理解するのが本当に簡単です — {{htmlelement("strong")}} 要素は閉じられておらず、行/列情報はそれがどこにあるかを指し示しています。</li> + <li>"End tag <code>strong</code> violates nesting rules": これは間違って入れ子になった要素を指摘し、行/列情報はそれがどこにあるかを指摘します。</li> + <li>"End of file reached when inside an attribute value. Ignoring tag": これはかなり不可解です。ファイルの末尾が属性値の内側に表示されるため、おそらくファイルの末尾近くのどこかに適切に形成されていない属性値があるという事実を意味します。ブラウザがリンクをレンダリングしないという事実は、どの要素が問題になっているかについての良い手がかりを与えるはずです。</li> + <li>"End of file seen and there were open elements": これは少しあいまいですが、基本的には適切に閉じる必要がある開いている要素があるという事実を指します。行番号はファイルの最後の数行を指しており、このエラーメッセージには open 要素の例を示すコード行が付いています。 + <pre class="line-numbers language-html notranslate"><code class="language-html">example: <a href="https://www.mozilla.org/>link to Mozilla homepage<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> ↩ <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span>↩ <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span>↩<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + + <div class="note"> + <p><strong>メモ</strong>: 閉じ引用符が抜けている属性は、文書の残りの部分が属性の内容として解釈されるため、open 要素になる可能性があります。</p> + </div> + </li> + <li> + <p>"Unclosed element <code>ul</code>": {{htmlelement("ul")}} 要素は正しく閉じられているので、これはあまり役に立ちません。閉じ引用符がないために {{htmlelement("a")}} 要素が閉じられないため、このエラーが発生します。</p> + </li> +</ul> + +<p>すべてのエラーメッセージが何を意味するのかわからない場合でも、心配しないでください<span> — </span>一度にいくつかのエラーを修正してみることをお勧めします。 それから、どんなエラーが残っているかを示すためにあなたの HTML を再検証することを試みてください。以前のエラーを修正すると他のエラーメッセージも消えてしまうことがあります。つまりはドミノ効果で、単一の問題が原因でいくつかのエラーが発生することがあるということです。</p> + +<p>出力に次のバナーが表示されたら、エラーがすべて解決したことがわかります。</p> + +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="まとめ">まとめ</h2> + +<p>ここでは HTML のデバッグについて紹介しました。これは、後で CSS、JavaScript、およびその他の種類のコードのデバッグを始めるときに頼りになる便利なスキルです。<br> + また <span class="tlid-translation translation" lang="ja"><span title="">HTMLモジュールの学習に関する記事の紹介の終わりにもなります。今、あなたは私たちの評価で自分自身をテストすることに進むことができます。最初のものは以下にリンクされています。</span></span></p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">{{glossary("HTML")}} は、ページの個々の部分 (「段落」や「画像」など) を定義するだけでなく、ウェブサイトの領域を定義するために使用される多数のブロックレベル要素 (「ヘッダー」、「ナビゲーションメニュー」、「メインコンテンツ列」など) も備えています。この記事では、基本的なウェブサイト構造を計画し、この構造を表す HTML を記述する方法について説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML を始めよう</a>」で説明されている基本的な HTML の理解。「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>」で説明されている HTML テキストの書式設定。「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>」で説明されている、ハイパーリンクのしくみ。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>セマンティックタグを使用して文書を構造化する方法、および単純なウェブサイトの構造を作成する方法を学びます。</td> + </tr> + </tbody> +</table> + +<h2 id="Basic_sections_of_a_document" name="Basic_sections_of_a_document">文書の基本部分</h2> + +<p>ウェブページはひとつひとつの見た目が異なるものですが、全画面表示のビデオやゲームを表示している場合やアートプロジェクトの一部分である場合や単にまずく構成されている場合を除いて、よく似た標準コンポーネントを共有している傾向にあります:</p> + +<dl> + <dt>ヘッダー:</dt> + <dd>通常は大きな見出しやロゴの付いた上部の大きな部分。通常、ウェブページ間を移動しても、ウェブサイトに関する主な共通情報がととどまっている場所です。</dd> + <dt>ナビゲーションバー:</dt> + <dd>サイトの主要セクションへのリンク。通常はメニューボタン、リンク、またはタブで表されます。ヘッダーと同様に、このコンテンツは通常、あるウェブページから別のウェブページへと一貫性を保っています — あなたのウェブサイト上でナビゲーションが矛盾していると、混乱して欲求不満のあるユーザーになるだけです。多くの Web デザイナーはナビゲーションバーを個々のコンポーネントではなくヘッダーの一部と見なしていますが、これは必須ではありません。実際、スクリーンリーダーは 2 つの機能を別々にした方が読みやすくなるため、2 つの機能を別々に使用するほうが<a href="/ja/docs/Learn/Accessibility">アクセシビリティ</a>に優れていると主張する人もいます。</dd> + <dt>メインコンテンツ:</dt> + <dd>特定のウェブページのほとんどのユニークなコンテンツが含まれている中央の大きな領域。たとえば、見たいビデオ、読んでいる本編、表示したい地図、ニュースの見出しなど これは間違いなくページごとに異なるウェブサイトの一部です。</dd> + <dt>サイドバー:</dt> + <dd>いくつかの周辺情報、リンク、引用、広告など。通常これはメインコンテンツ (例えば、ニュース記事ページ、サイドバーに作者の略歴、または関連記事へのリンクなど) に含まれているものとの関連性があります。また、二次ナビゲーションシステムのように繰り返し発生する要素がある場合もあります。</dd> + <dt>フッター:</dt> + <dd>通常、注意事項、著作権表示、または連絡先情報が含まれているページの下部にある部分。これは共通の情報 (ヘッダーなど) を入れる場所ですが、通常、その情報はウェブサイト自体にとって重要ではありません。フッターは、人気のあるコンテンツにすばやくアクセスするためのリンクを提供することで、{{Glossary("SEO")}} の目的で使用されることもあります。</dd> +</dl> + +<p>「典型的なウェブサイト」は下記のようなレイアウトになります:</p> + +<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="HTML_for_structuring_content" name="HTML_for_structuring_content">コンテンツを構造化する HTML</h2> + +<p>上に示した簡単な例はきれいではありませんが、典型的なウェブサイトのレイアウト例を示すのには最適です。一部のウェブサイトはより多くのコラムを持っています、いくつかはかなり複雑ですが、アイデアはあります。適切な CSS を使用すれば、さまざまなセクションをラップして望みどおりの外観にするためにほとんどすべての要素を使用できますが、前述のとおり、セマンティクスを尊重し、<strong>適切な役割に適切な要素を使用する</strong>必要があります。</p> + +<p>なぜならビジュアルがすべてを伝えるわけではないからです。私たちはナビゲーションメニューや関連リンクなど、コンテンツの最も有用な部分に目の見えるユーザーの注意を引くために、色とフォントサイズを使用します。しかし、例えば「ピンク」や「大きいフォント」のような概念があまり有用ではないと思われる視覚障害者についてはどうでしょうか。</p> + +<div class="note"> +<p><strong>注</strong>: 色覚障害者は<a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">世界の人口の約 4 ％</a>を占めています。言い換えれば、男性 12 人に 1 人、女性 200 人に 1 人が色覚異常です。視覚障害のある人々は世界の人口の約 4〜5 ％を占めています (2012 年には<a href="https://en.wikipedia.org/wiki/Visual_impairment">全世界で 2 億 8,500 万人</a>の人々がいましたが、総人口は<a href="https://en.wikipedia.org/wiki/World_population#/media/File:World_population_history.svg">約 70 億人</a>でした)。</p> +</div> + +<p>HTML コードでは、それらの<em>機能</em>に基づいてコンテンツのセクションをマークアップすることができます — スクリーンリーダーのような支援技術はそれらの要素を認識し、「メインナビゲーションを見つける」や「メインコンテンツを見つける」といった作業を手助けすることができます。<br> + コースの前半で述べたように、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">適切な役割に適切な要素構造とセマンティクスを使用しないことによる影響</a>は多くあります。</p> + +<p>このようなセマンティックマークアップを実装するために、HTML には、そのようなセクションを表すために使用できる専用のタグが用意されています。次に例を示します。</p> + +<ul> + <li><strong>ヘッダー: </strong>{{htmlelement("header")}}.</li> + <li><strong>ナビゲーションバー: </strong>{{htmlelement("nav")}}.</li> + <li><strong>メインコンテンツ: </strong>{{htmlelement("main")}}。{{HTMLElement("article")}}、{{htmlelement("section")}}、および {{htmlelement("div")}} 要素で表されるさまざまなコンテンツサブセクションを含みます。</li> + <li><strong>サイドバー: </strong>{{htmlelement("aside")}}; {{htmlelement("main")}} の中に置かれることがよくあります。</li> + <li><strong>フッター: </strong>{{htmlelement("footer")}}.</li> +</ul> + +<h3 id="Active_learning_exploring_the_code_for_our_example" name="Active_learning_exploring_the_code_for_our_example">アクティブ学習: 実例のコードを見てみる</h3> + +<p>上記の例は次のコードで表されています (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">この例は GitHub リポジトリにもあります</a>)。上の例を見てから、下のリストを見て、どの部分がビジュアルのどの部分を構成しているかを確認してください。</p> + +<pre class="brush: html notranslate"><!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></pre> + +<p>コードを見て理解するためにしばらく時間をかけてください — コード内のコメントもそれを理解するのに役立ちます。ドキュメントのレイアウトを理解するための鍵は、正しい HTML 構造を作成し、それを CSS でレイアウトすることです。CSS トピックの一部として CSS レイアウトの学習を始めるまで、これを待ちます。</p> + +<h2 id="HTML_layout_elements_in_more_detail" name="HTML_layout_elements_in_more_detail">HTML レイアウト要素の詳細</h2> + +<p>すべての HTML セクショニング要素の全体的な意味を詳細に理解しておくとよいでしょう。これは、ウェブ開発でより多くの経験を積むようになるにつれて徐々に取り組むものです。 <a href="/ja/docs/Web/HTML/Element#Inline_text_semantics">HTML 要素のリファレンス</a>を読むことによって多くの詳細を見つけることができます。今のところ、これらは理解するべき主な定義です：</p> + +<ul> + <li>{{HTMLElement('main')}} は、このページに固有のコンテンツ用です。<code><main></code> はページごとに 1 回だけ使用し、{{HTMLElement('body')}} の中に直接入れてください。理想的には、これを他の要素の中に入れ子にしないでください。</li> + <li>{{HTMLElement('article')}} は、ページの残りの部分 (例えば、単一のブログ記事) なしでそれ自体が意味をなす関連コンテンツのブロックを囲みます。</li> + <li>{{HTMLElement('section')}} は <code><article></code> に似ていますが、1 つの機能 (例：ミニマップ、記事の見出しと要約のセット) を構成するページの単一部分をグループ化するためのものです。各セクションを<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">見出し</a>で始めるのがベストプラクティスです。文脈に応じて、<code><article></code> を異なる <code><section></code> に、または <code><section></code> を異なる <code><article></code> に分割することもできます。</li> + <li>{{HTMLElement('aside')}} には、メインコンテンツに直接関連しないコンテンツが含まれていますが、それに間接的に関連する追加情報 (用語集エントリ、著者略歴、関連リンクなど) を提供することができます。</li> + <li>{{HTMLElement('header')}} は紹介コンテンツのグループを表します。それが {{HTMLElement('body')}} の子である場合、それはウェブページのグローバルヘッダーを定義しますが、{{HTMLElement('article')}} または {{HTMLElement('section')}} の子である場合、そのセクションのための特定のヘッダーを定義します (これを<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">タイトルや見出し</a>と混同しないようにしてください)。</li> + <li>{{HTMLElement('nav')}} はページの主なナビゲーション機能を含みます。二次リンクなどはナビゲーションに入りません。</li> + <li>{{HTMLElement('footer')}} はページの終了コンテンツのグループを表します。</li> +</ul> + +<h3 id="Non-semantic_wrappers" name="Non-semantic_wrappers">非セマンティックなラッパー</h3> + +<p>時にはいくつかのアイテムをまとめたり、コンテンツをラップしたりするための理想的なセマンティック要素が見つからない場合があります。いくつかの {{glossary("CSS")}} や {{glossary("JavaScript")}} を持つ単一のエンティティとしてそれらすべてに影響を与えるために単に要素のセットを一緒にグループ化したいことがあります。このような場合に、HTML は {{HTMLElement("div")}} と {{HTMLElement("span")}} 要素を提供します。これらを適切な {{htmlattrxref('class')}} 属性と一緒に使用して、簡単にターゲティングできるようにそれらに何らかの種類のラベルを提供することをお勧めします。</p> + +<p>{{HTMLElement("span")}} はインラインの非セマンティック要素です。コンテンツをラップするより良い意味的なテキスト要素が思いつかないか、または特定の意味を加えたくない場合にだけ使うべきです。例えば：</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>この場合、編集者のメモは単に演劇の監督に追加の指示を与えることになっています。特別な意味を持つことは想定されていません。視覚のある人にとっては、CSS はメモを本文からわずかに離すように使われます。</p> + +<p>{{HTMLElement("div")}} はブロックレベルの非セマンティック要素であり、使用するセマンティックブロック要素を考えない場合、または特定の意味を追加したくない場合にのみ使用してください。たとえば、電子商取引サイトで、いつでも買い物をすることができるショッピングカートのウィジェットを想像してみてください。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>これは必ずしも <code><aside></code> ではありません。必ずしもページのメインコンテンツに関連しているわけではないからです (どこからでも見られるようにしたいのです)。ページのメインコンテンツの一部ではないので、<code><section></code> の使用を特に保証するものではありません。したがって、この場合は <code><div></code> で問題ありません。スクリーンリーダーのユーザーが見つけやすいように、道標として見出しを追加しました。</p> + +<div class="warning"> +<p><strong>警告</strong>: Div は使い勝手が良いので使いすぎになりがちです。それらは意味的な価値を持たないので、HTML コードを乱雑にするだけです。より良い意味的な解決策がない場合にのみ使用するように気を付けてください。</p> +</div> + +<h3 id="Line_breaks_and_horizontal_rules" name="Line_breaks_and_horizontal_rules">改行と垂直方向のルール</h3> + +<p><span class="tlid-translation translation" lang="ja"><span title="">時々使う、そして知りたい 2 つの要素</span></span>は {{htmlelement("br")}} と {{htmlelement("hr")}} です：</p> + +<p><code><br></code> は段落内に改行を作成します。これは、住所や詩のように一連の短い固定線が必要な状況で硬い構造を強制する唯一の方法です。例えば：</p> + +<pre class="brush: html notranslate"><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></pre> + +<p><code><br></code> 要素がないと、段落は 1行で表示されます (コースの前半で述べたように、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML はほとんどの空白を無視します</a>)。コード内でこれらを使用すると、マークアップは次のようにレンダリングされます。</p> + +<p>There once was a man named O'Dell<br> + Who loved to write HTML<br> + But his structure was bad, his semantics were sad<br> + and his markup didn't read very well.</p> + +<p><code><hr></code> 要素は、テキストの主題の変更 (トピックやシーンの変更など) を示す水平方向の罫線をドキュメントに作成します。視覚的には単に横線のように見えます。例として：</p> + +<pre class="notranslate"><p>ロンは荒廃した地獄の獣たちによって隅に追いやられた。怖がっていたが、彼の友達を守ることを決心していたので、彼は自分の杖を上げて戦いをする準備をした。</p> +<hr> +<p>その間、ハリーは家に座って、彼の使用料の声明を見つめてそして魅惑の苦痛の手紙が彼の窓を通って飛んで、そして彼の膝に着陸したときに次のスピンオフシリーズが出るだろう時を考えました。彼はそれをぼんやりと読んでため息をついた。「その時は仕事に戻るほうがいい」と彼は言った。</p></pre> + +<p>このようにレンダリングされます：</p> + +<p>ロンは荒廃した地獄の獣たちによって隅に追いやられた。怖がっていたが、彼の友達を守ることを決心していたので、彼は自分の杖を上げて戦いをする準備をした。</p> + +<hr> +<p>その間、ハリーは家に座って、彼の使用料の声明を見つめてそして魅惑の苦痛の手紙が彼の窓を通って飛んで、そして彼の膝に着陸したときに次のスピンオフシリーズが出るだろう時を考えました。彼はそれをぼんやりと読んでため息をついた。「その時は仕事に戻るほうがいい」と彼は言った。</p> + +<h2 id="Planning_a_simple_website" name="Planning_a_simple_website">簡単なウェブサイトを計画する</h2> + +<p><span class="tlid-translation translation" lang="ja"><span title="">簡単なウェブページのコンテンツの構造を計画したら、次の論理的なステップは</span><span title="">、ウェブサイト全体に掲載したいコンテンツ</span><span title="">、必要なページ</span><span title="">、および可能な限り最高のユーザーエクスペリエンスを実現するために、それらをどのように配置して互いにリンクさせるかを解決することです。</span></span>これは {{glossary("Information architecture")}} と呼ばれます。大規模で複雑なウェブサイトでは、このプロセスに多くの計画を立てることがありますが、数ページの単純なウェブサイトでは、かなり単純で楽しいものになります。</p> + +<ol> + <li>ナビゲーションメニューやフッターコンテンツなど、(全部ではないにしても) ほとんどのページに共通の要素がいくつかあることに注意してください。たとえば、サイトがビジネスのためのものである場合、連絡先情報を各ページのフッターで利用可能にすることは良い考えです。すべてのページに共通にしたいものを書き留めます。<img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>次に、各ページの構造をどのようにしたらよいかを大まかにスケッチします (上の単純なウェブサイトのようになります)。各ブロックがどうなるかに注意してください。<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>さて、自身のウェブサイトに載せたい他のすべての (全ページに共通ではない) コンテンツをブレインストーミングしましょう — 大きなリストに書き留めます。<img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>次に、これらすべてのコンテンツ項目をグループに分類して、どの部分が異なるページに共存しているかを把握します。これは {{glossary("Card sorting")}} と呼ばれるテクニックと非常によく似ています。<img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>それでは、大まかなサイトマップをスケッチしてみましょう。サイト上の各ページにバブルを付け、ページ間の典型的なワークフローを示すために線を引きます。<br> + ホームページはおそらく中心にあり、すべてではないにしてもほとんどのページにリンクするでしょう。例外はありますが、小規模サイトのほとんどのページはメインナビゲーションから利用できるはずです。物事がどのように提示されるかもしれないかについてのメモも含めることをお勧めします。<img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> +</ol> + +<h3 id="Active_learning_create_your_own_sitemap" name="Active_learning_create_your_own_sitemap">アクティブラーニング: 自身のサイトマップを作成する</h3> + +<p>自身が作成したウェブサイトのために上記の演習を実行してみてください。何についてサイトを作りたいですか？</p> + +<div class="note"> +<p><strong>注</strong>: 作業をどこかに保存してください。後で必要になるかもしれません。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この時点であなたはウェブページ/サイトをどのように構成するかについてより良い考えを持っているはずです。このモジュールの最後の記事では、HTML をデバッグする方法を学びます。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a>: HTML 5 のセマンティック要素と HTML 5 のアウトラインアルゴリズムの上級ガイド。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">この記事では HTML の不変的な基礎を扱って、始められるようにします。要素や属性などの重要な用語 (すでに聞き覚えはあるかもしれません)、それらが言語にどう組み込まれているか説明します。また、HTML 要素の構造、典型的な HTML ページの構造を見せて、その他の重要な基礎言語機能について説明します。それでは、 HTML の例とともに見ていきましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎的なコンピュータリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル取扱い</a>の基礎理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td> + <p>HTML 言語の基礎習得と、いくつかの HTML 要素を書く練習</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="What_is_HTML" name="What_is_HTML">HTML とは？</h2> + +<p>{{glossary("HTML")}} (ハイパーテキスト・マークアップ・ランゲージ／Hypertext Markup Language) はプログラミング言語ではありません。HTML 言語は、訪れたウェブサイトの構成をブラウザに対して伝えるために使うマークアップ言語です。HTML 言語はウェブ開発者が望むこと次第で、複雑なものにも簡単なものにもなります。HTML は{{glossary("Element", "要素")}}の集まりからなり、コンテンツの一部を要素で囲む（<em>マークアップ</em>する）ことで、特定の見せ方・動かし方に変えられます。囲むための{{glossary("Tag", "タグ")}}は、コンテンツの一部をハイパーリンク (ウェブ上の別ページへリンクすること) にしたり、単語を斜体にしたりすることができます。たとえば、次の一行を見てください：</p> + +<pre>My cat is very grumpy</pre> + +<p>この行を独立させたい場合、それを段落タグ ({{htmlelement("p")}}) 要素で囲んで段落指定することで実現できます:</p> + +<pre class="brush: html"><p>My cat is very grumpy</p></pre> + +<div class="note"> +<p><strong>注</strong>:HTML の要素は大文字小文字を区別しません。つまり大文字でも小文字でも書くことができます。例えば {{htmlelement("title")}} 要素は <code><title></code>、<code><TITLE></code>、<code><Title></code>、<code><TiTlE></code> などと書くことができて、どれも正しく動作します。最も良いのは、一貫性や信頼性、その他の理由のためにすべての要素を小文字で書くことです。</p> +</div> + +<h2 id="Anatomy_of_a_HTML_element" name="Anatomy_of_a_HTML_element">HTML 要素の分解</h2> + +<p>先ほどの段落タグの要素についてもう少し詳しく見ていきましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>この要素の主要な部分は次のとおりです:</p> + +<ol> + <li><strong>開始タグ(Opening tag):</strong> 要素名 (この場合は "p")、囲んでいる開き<strong>山括弧</strong>と閉じ<strong>山括弧</strong>で構成されています。これは要素が始まってその効果が開始する位置を宣言しますーこの場合、段落が始まる位置です。</li> + <li><strong>終了タグ(Closing tag):</strong> 要素名の前に一つのスラッシュが含まれることを除けば、開始タグと同じです。これは要素の終了を宣言しますーこの場合、段落が終わる位置です。終了タグを忘れるのは初心者にありがちなミスで、おかしな結果になってしまいます。</li> + <li><strong>内容(Content):</strong> これは要素の内容で、この場合、テキストそのものです。</li> + <li><strong>要素(Element):</strong> 開始タグ + 内容 + 終了タグが要素になります。</li> +</ol> + +<h3 id="Active_learning_creating_your_first_HTML_element" name="Active_learning_creating_your_first_HTML_element"><strong>実習: 最初の HTML 要素を作ってみる</strong></h3> + +<p>以下の Input 欄にある行を <code><em></code> と <code></em></code> で囲んでください (要素を開始するために行の先頭に <code><em></code> を、要素を終了するために行の末尾に <code></em></code> をそれぞれ置きます) — これによりその行はイタリック体 (斜体) によって強調表示されるはずです！ この変化は Output 欄でリアルタイムで確認できているはずです。</p> + +<p>もし入力ミスをしても、<em>Reset</em> ボタンを押すことでいつでもリセットできます。立ち往生してしまっても <em>Show solution</em> ボタンを押せばいつでもカンニングできます。</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + This is my text. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>controls<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span> + <span class="property token">font-family</span><span class="punctuation token">:</span> <span class="string token">'Open Sans Light'</span>,Helvetica,Arial,sans-serif<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">h2 </span><span class="punctuation token">{</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<em>This is my text.</em>'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + +textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> +window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// stop tab key tabbing out of textarea and</span> +<span class="comment token">// make it write a tab at the caret position instead</span> + +textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Nesting_elements" name="Nesting_elements">要素のネスト</h3> + +<p>要素の中に要素を入れることができますーこれは“<strong>ネスト</strong>” (入れ子) と呼ばれています。たとえば “My cat is <strong>very</strong> grumpy.” と記述したい場合、“very” という語を {{htmlelement("strong")}} 要素で囲むことができ、それはその語がより強く強調表示されることを意味します：</p> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>ただし、要素が正しくネストされていることを確認する必要はあります: 上の例では、開始タグは最初に <code>p</code> 要素、その次に <code>strong</code> 要素が来ますから、終了タグは最初に <code>strong</code> 要素を、一番最後に <code>p</code> 要素を置くことになります。次は間違った例です:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>タグのセットが互いに内側か外側なのかがはっきり分かるように、要素の開始と終了は正しく配置する必要があります。もし上の例のように互いに “掛け違って” しまっている場合、ブラウザーはそのマークアップが本来意図していただろうことを出来るだけ読み取ろうとはしますが、予期しない結果となることは当然に想定されます。ですからこうした “掛け違い” はやめましょう！</p> + +<h3 id="Block_versus_inline_elements" name="Block_versus_inline_elements">ブロック要素とインライン要素</h3> + +<p>HTML の要素には 2 つの重要なカテゴリーがあり、それは知っておくべきことです。すなわち、ブロックレベル要素とインライン要素です。</p> + +<ul> + <li>ブロックレベル要素はウェブページ上で視認できるブロックを形成します — それらはそれより前にあるいかなるコンテンツに対しても新たな行におけるコンテンツとして表示され、そのブロックの後に来るいかなるコンテンツもまた新たな行で表示されることになります。ブロックレベル要素はそのウェブページの構造、たとえば段落・リスト・ナビゲーションメニュー・フッターなどを表すことに使用される傾向があります。ブロックレベル要素はインライン要素の中にネストされることはできませんが、他のブロックレベル要素にネストされることがあります。</li> + <li>インライン要素はブロックレベル要素の中に包含され、なおかつ、段落全体やコンテンツのグループではなく、ドキュメントの内容の小さな部分だけを囲む要素です。インライン要素はドキュメント内に新たな行を表示させません; それらは通常、例えば、{{htmlelement("a")}} 要素 (ハイパーリンク) 又は {{htmlelement("em")}} や {{htmlelement("strong")}} といった強調要素のように、テキスト段落の中で表示されます。</li> +</ul> + +<p>次の例で考えてみましょう:</p> + +<pre class="brush: html"><em>first</em><em>second</em><em>third</em> + +<p>fourth</p><p>fifth</p><p>sixth</p> +</pre> + +<p>{{htmlelement("em")}} 要素はインライン要素なので、以下で確認できるように、最初の 3 つの要素は同じ行で他の要素と互いにスペースを空けずにたたずんでいます。一方で、{{htmlelement("p")}} 要素はブロックレベル要素なので、各要素はその上下にスペースを伴った新たな行で表示されます (この間隔はブラウザーが段落に対して適用するデフォルトの <a href="/docs/Learn/CSS/Introduction_to_CSS">CSS のスタイル</a>によるものです)。</p> + +<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> + +<div class="note"> +<p><strong>注意</strong>: HTML5 においては要素カテゴリが再定義されています: <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">要素のコンテンツ・カテゴリー</a>を見てください。これらの定義は従来のものに比べてより正確で、なおかつ曖昧さが少ないものとなっていますが、一方では、それらは “ブロックレベル要素” と “インライン要素” の対比よりも遥かに理解することが難しくなっています。このため、私たちはここのトピックを通じて従来の分類を堅持するつもりです。</p> +</div> + +<div class="note"> +<p><strong>注意</strong>: このトピックで使っている “ブロック” と “インライン” の用語は <a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS ボックスのタイプ</a>と同じ名前で混同するでしょう。既定ではこれらは関係ありますが、CSS の表示タイプの変更は要素のカテゴリーを変更しませんし、どの要素が入っているべきでどの要素に入れられるべきかにも影響しません。HTML5 でこの用語が落とされた理由は、このとてもよくある混同を防ぐためです。</p> +</div> + +<div class="note"> +<p><strong>注意</strong>: ブロックレベル要素とインライン要素のリストを含む有用なリファレンスページがあります — <a href="/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>と<a href="/docs/Web/HTML/Inline_elements">インライン要素</a>をご覧ください。</p> +</div> + +<h3 id="Empty_elements" name="Empty_elements">空要素</h3> + +<p>全ての要素が上述の開始タグ・コンテンツ・終了タグのパターンに従っているわけではありません。いくつかの要素は 1 つのタグのみで構成され、それは通常、ドキュメント内でそれが含まれている場所に何かを挿入したり埋め込むために使用されます。例えば、以下の {{htmlelement("img")}} 要素はウェブページ上のそれが含まれた場所に 1 つの画像ファイルを埋め込みます:</p> + +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>これはページに次の画像を出力するはずです:</p> + +<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>注意</strong>: 空要素 (Empty elements) は Void 要素 (Void elements) と呼ばれていることがあります。</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>要素は次のように属性(Attribute)を持つこともできます:</p> + +<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>属性は実際のコンテンツの中で表示させたくない「要素に関する追加情報」を保有します。上のケースでは <code>class</code> 属性は、その要素に後でスタイル情報などが適用される対象であることを示すものとして使用できるような、固有の名前を持つことを許容します。</p> + +<p>各属性は次の要件を満たす必要があります:</p> + +<ol> + <li>属性名と要素名の間に 1 つの半角スペース (その要素内にすでに 1 つ以上の属性が設定されている場合は、併せて各属性名の間)</li> + <li>属性名とそれに続く等号 (=)</li> + <li>属性値。始端から終端までをクォーテーションマーク (引用符) で囲む</li> +</ol> + +<h3 id="Active_learning_Adding_attributes_to_an_element" name="Active_learning_Adding_attributes_to_an_element">実習: 要素に属性を追加する</h3> + +<p>要素のもう一つの例として {{htmlelement("a")}} (これを「アンカー」と言って、テキストの一部を囲んでハイパーリンクにするものです) を考えます。アンカー要素は多くの属性を持つことができますが、例えばこれらのものが使われます:</p> + +<ul> + <li><code>href</code>: この属性にはリンクが参照するウェブ上のアドレスを指定します。またはリンクをクリックしたときにブラウザーが遷移する場所のことです。例えば、<code>href="https://www.mozilla.org/"</code> のように指定します。</li> + <li><code>title</code>: この属性にはリンクについての追加情報（リンク先のページが何であるかなど）を記載します。例えば、<code>title="The Mozilla homepage"</code> のように書きます。この内容はリンクにマウスカーソルを重ねた (マウスホバー) 時にツールチップとして表示されるでしょう。</li> + <li><code>target</code>: リンク先の内容を表示する場所 (ブラウジングコンテキスト) を指定します。例えば、<code>target="_blank"</code> と指定すると、リンク先の内容を新しいタブに表示します。現在のタブにリンク先の内容を表示させたい場合は <code>target</code>属性を省略します。</li> +</ul> + +<p>それでは以下の Input 欄を編集して、あなたの好きなサイトのリンクを張ってみましょう。まず、<code><a></code> 要素を追加します。次に、<code><a></code> 要素に <code>href</code> 属性と <code>title</code> 属性を追加します。最後に、新しいタブでリンク先を開くために <code>target</code> 属性を追加します。この変化は Output 欄でリアルタイムで確認できているはずです。まずテキストがハイパーリンクに変わります。そのリンクをホバーしてやる (マウスホバー) と <code>title</code> 属性のコンテンツが表示されます。そのリンクをクリックすると <code>href</code> 属性で指定したページに遷移します。要素名と各属性の間に半角スペースを挿入することに気を付けてください。</p> + +<p>もし入力ミスをしても、Reset ボタンを押すことでいつでもリセットできます。立ち往生してしまっても Show solution ボタンを押せばいつでもカンニングできます。</p> + +<div class="hidden"> +<h6 id="Playable_code2" name="Playable_code2">Playable code2</h6> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>input<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="entity token" title="<">&lt;</span>p<span class="entity token" title=">">&gt;</span>A link to my favourite website.<span class="entity token" title="<">&lt;</span>/p<span class="entity token" title=">">&gt;</span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span> + <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">h2 </span><span class="punctuation token">{</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favourite website</a>.</p>'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + +textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> +window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// stop tab key tabbing out of textarea and</span> +<span class="comment token">// make it write a tab at the caret position instead</span> + +textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 360, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Boolean_attributes" name="Boolean_attributes">真偽値属性</h3> + +<p>沢山の HTML ソースを見ていくうちに、属性値のない属性を発見するでしょう。このことは文法的に許されています。こういった属性のことを「真偽値属性」と言います。真偽値属性は一般的に属性名と同じ属性値だけを取ることができます。例えば、<code>input</code> 要素の {{htmlattrxref("disabled", "input")}} 属性は真偽値属性ですが、下記のように記述した場合、 input 要素が "使用不可能に" (disabled, グレーアウト表示) なり、データを入力することができなくなります。</p> + +<pre><input type="text" disabled="disabled"> +</pre> + +<p>真偽値属性は、略記法として次のように書くことが文法的に許されています。比較のために "使用不可能に" (disabled, グレーアウト表示) しなかった場合の <code>input</code> 要素も併記しています。</p> + +<pre class="brush: html"><input type="text" disabled> + +<input type="text"></pre> + +<p>上記の HTML コードの結果は下記のようになります。</p> + +<p>{{ EmbedLiveSample('Boolean_attributes', 700, 50, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="warning"> +<p>訳者注：下記の様な真偽値属性の属性名と属性値を一致させない記述は HTML の仕様としては誤りです。このような誤りを防ぐために、真偽値属性の真偽値は必ず省略するようにしましょう。</p> + +<pre><input type="text" disabled="foo bar baz"> +</pre> +</div> + +<h3 id="Omitting_quotes_around_attribute_values" name="Omitting_quotes_around_attribute_values">属性値のクォーテーションマークを省略することについて</h3> + +<p>ウェブ (正式にはワールド・ワイド・ウェブ) 上の HTML 文章の中には奇妙なマークアップスタイルで記述されているものもあります。その一つとして、「属性値をクォーテーションマークで囲まない」というのがあります。このスタイルでは正しく動作する場合としない場合があります。先ほどの <code><a></code> タグの例で言うと、このような <code>href</code> 属性だけの基本的な使い方では正しく動作します。</p> + +<pre><a href=<code>https://www.mozilla.org/</code>>favourite website</a></pre> + +<p>しかし、例えば次のように半角スペースの入った <code>title</code> 属性を追加すると動作がおかしくなります。</p> + +<pre class="example-bad brush: html"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>favourite website</a></pre> + +<p>この場合だと「<code>title</code> 属性は "The" という属性値を持ち、それとは別に <code><a></code>要素が <code>Mozilla</code> と <code>homepage</code> という真偽値属性を持つ」というようにブラウザーは誤解します。このように、「属性値をクォーテーションマークで囲まない」ことによる違いは HTML を見ただけでは分からないので、コードのエラーや予期しない動作の原因となります。このコードをブラウザーに解釈させたものを下に用意しましたので、このリンク上をホバーしてツールチップに表示される文字がどうなっているかを確認してみましょう。</p> + +<p>{{EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>安全なコードを書くために、必ず属性値にはクォーテーションマークをつけましょう。そうすれば、先ほどのような問題を避けることができ、コードの可読性も向上します。</p> + +<h3 id="Single_or_double_quotes" name="Single_or_double_quotes">ダブルクォートかシングルクォートか？</h3> + +<p>この記事では属性を囲むクォーテーションマークとしてすべてダブルクォート ( <code>"</code> ) を使用しています。しかし誰かの HTML でシングルクォート ( <code>'</code> ) を見ることがあるかもしれません。これは書き方の問題なので、属性値はダブルクォートで囲んでもシングルクォートで囲んでも構いません。例えば次の 2 つの行は等価です。</p> + +<pre class="brush: html"><a href="http://www.example.com">A link to my example.</a> + +<a href='http://www.example.com'>A link to my example.</a></pre> + +<p>但し、これらを混在させて使うことはできません。次の記述は誤りです。</p> + +<pre class="example-bad brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> + +<p>属性値をダブルクォートで囲んでいる場合は、その内部でシングルクォートを書くこともできますし、シングルクォートの中でダブルクォートを書くこともできます。</p> + +<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>ただし、両方の引用符が同じ種類 (一重引用符または二重引用符) の引用符の中に引用符を含める場合は、引用符に <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">HTML エンティティを使用する</a>必要があります。たとえば、これは壊れます：</p> + +<pre class="example-bad brush: html line-numbers language-html"><code class="language-html"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span></code></pre> + +<p>だからあなたはこのようにする必要があります：</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>http://www.example.com<span class="punctuation token">'</span></span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>Isn&#39;t this fun?<span class="punctuation token">'</span></span><span class="punctuation token">></span></span>A link to my example.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Anatomy_of_a_HTML_document" name="Anatomy_of_a_HTML_document">HTML 文書の構成</h2> + +<p>これまで、個々の HTML の要素の基礎を説明しましたが、それら単体ではあまり有用ではありません。ここでは個々の HTML の要素を使って HTML ページを構成する方法を説明していきます。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>上記の HTML 文書を例に、順に解説していきます。</p> + +<ol> + <li> + <p><code><!DOCTYPE html></code>: いわゆる "doctype" というものです。 HTML の黎明期(1991～1992年あたり)には、 "doctype" というものは HTML の文法セットへのリンクとしての役割を持っていました。当時の "doctype" の記述は自動エラーチェックが容易であるなどの長所も持っていました。当時の "doctype" は、次のようなものでした。</p> + + <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code></pre> + + <p>しかし、今日においては誰も HTML における "doctype" の本来的な役割なんて考えていません。 "doctype" はつじつま合わせのための歴史的な産物です。今日においてには <code><!DOCTYPE html></code> は正しい "doctype" と認識させるための最も簡潔な記述です。 "doctype" について、これ以上知る必要はありません。</p> + </li> + <li><code><html></html></code>: {{htmlelement("html")}} 要素。 HTML 文書は<code><html></code>要素 1 つだけからなります。この要素はページ全体であり、<code><html></code> タグはページ全体を囲んでいます。<code><html></code> 要素はルート要素とも呼ばれます。</li> + <li><code><head></head></code>: {{htmlelement("head")}} 要素。この要素は、HTML ページに入れておきたいが見せたくないすべてのものを入れておくコンテナーの働きをします。例えば、検索結果に出したいページのキーワードや説明や、ページのスタイルを指定するための CSS や、文字エンコーディングの定義などが含まれます。より詳しくは、このシリーズの次の記事で詳しく説明します。</li> + <li><code><meta charset="utf-8"></code>: この要素はこの文書が UTF-8 という文字コードを使用しているということをブラウザーに伝えるためのものです。UTF-8 は世界中の自然言語の大半をカバーしている文字コードです。重要なこととしてあらゆるテキストコンテンツを扱うことができます。文字コードとして UTF-8 を指定しない手はなく、そうしておけば後で説明する問題を回避できます。</li> + <li><code><title></title></code>: {{htmlelement("title")}} 要素。これはページのタイトルを指定するもので、ページが読み込まれたブラウザーのタブに表示されます。また、このページをブラウザー上でブックマークしたりお気に入りに追加したりすると <code><title></code> 要素の内容がページの説明として使われます。</li> + <li><code><body></body></code>: {{htmlelement("body")}} 要素。この中にユーザーがページを訪問した時に表示したいコンテンツ (例えば、テキスト、画像、ビデオ、ゲーム、オーディオトラック等) を記述します。</li> +</ol> + +<div class="note"> +<p>訳者注: 1. の "doctype" は文書型宣言(DTD)と呼ばれております。 HTML 以外のマークアップ言語(XML, SVG, MathML等)においては今日においても重要な意味を持っています。</p> +</div> + +<h3 id="Active_learning_Adding_some_features_to_an_HTML_document" name="Active_learning_Adding_some_features_to_an_HTML_document">実習: HTML 文書をカスタマイズする</h3> + +<p>もし HTML 文書を書く練習をローカルコンピューターで試したい場合は、次のようにします。</p> + +<ol> + <li>上記の HTML ページのコードサンプルの全体を選択して「コピー」します。</li> + <li>テキストエディタ上で新規ファイルを作成します。</li> + <li>新規テキストファイルの中で「貼り付け」、または「ペースト」します。</li> + <li><code>index.html</code> という名前でファイルを保存します。</li> +</ol> + +<div class="note"> +<p><strong>脚注</strong>: 元となる HTML テンプレートは <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN ラーニングエリア GitHub リポジトリ </a>にも置いてあります。</p> +</div> + +<p>ウェブブラウザーでこのファイルを開くとレンダリングされた HTML 文書が表示されます。コードを編集した場合は、ブラウザー上でページの更新 (または、再読み込み) を行うと編集結果が反映されます。最初はこんな表示です。</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">この実習では、 上に示したようにあなたのコンピューター内部でコード編集してもいいですが、この節の下の方に編集できるフォーム (Input, Output と付されているものです) を使うこともできます。スマートフォンなどで学習する際はこのフォームが役に立つと思います。この節のフォームの Input の部分は、 {{htmlelement("body")}} 要素の中身を表しています。以下の手順を踏んで、ページをカスタマイズしてみましょう。</p> + +<div class="note"> +<p>訳者注: 下記の演習項目は後で詳しく学習できますので、できなくても構いません。</p> +</div> + +<ul> + <li>{{htmlelement("body")}} 要素の開始タグ以降にページのメインタイトルを書きます。このメインタイトルは <code><h1></code> 開始タグと <code></h1></code> 終了タグで囲みます。ちなみにこれは <code>head</code> 要素の中に記述する <code>title</code> 要素とは異なります。実際にやってみると理解できると思います。フォームで編集する場合はすでに <code>body</code> 要素の中なので、コードの先頭にメインタイトルを記述する形になります。</li> + <li>すでに<code><p></code>要素が記述されていますので、その段落を好きな内容にしてみましょう。また、新しい段落を好きなように追加してみましょう。</li> + <li>段落 (<code><p></code>要素) 内で重要な言葉は <code><strong></code> 開始タグと <code></strong></code> 終了タグで囲んで太字で強調しましょう。 </li> + <li><a href="https://developer.mozilla.org/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">この記事の前半あたり</a>で説明したリンクを段落のどれかに張ってみましょう。</li> + <li><a href="https://developer.mozilla.org/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">この記事の前半あたり</a>で説明した方法を使って、段落の下に画像を挿入しましょう。説明では Firefox のロゴ画像を使用しましたが、他の画像を持ってくることにチャレンジしてもいいと思います。自分のコンピューターの中のファイルやウェブ上のどこか他の場所にある画像リンクといったものです。</li> +</ul> + +<p>間違えた場合は <em>Reset</em> ボタンを押すことで元に戻すことができます。分からない場合は Show solution ボタンを押して答えを見てみましょう。</p> + +<div class="hidden"> +<h6 id="Playable_code3" name="Playable_code3">Playable code3</h6> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>input<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="entity token" title="<">&lt;</span>p<span class="entity token" title=">">&gt;</span>This is my page<span class="entity token" title="<">&lt;</span>/p<span class="entity token" title=">">&gt;</span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span> + <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">h2 </span><span class="punctuation token">{</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">img </span><span class="punctuation token">{</span> + <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">100%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + +textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> +window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// stop tab key tabbing out of textarea and</span> +<span class="comment token">// make it write a tab at the caret position instead</span> + +textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 360, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Whitespace_in_HTML" name="Whitespace_in_HTML">HTML 内の空白</h3> + +<p>上記の例において、大量の半角スペースが挿入されていることに気づいたかもしれません。大量の半角スペースはあっても無くても構わないものです。次の２つのコードスニペット (それ単体では動作しないコード例のこと) は等価です。</p> + +<pre class="brush: html"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<p>半角スペースをどれ程入力しても (そして、どれ程改行しても)、 HTML パーサはそれを１つの半角スペースとして認識します。ではどうして半角スペースを沢山入力するのでしょうか。それは HTML コードの可読性を向上させるためです。 HTML のコードがいいフォーマット(書式)で記述されていて、１行の中に沢山タグをゴチャゴチャに詰め込まなければ、そのコードの中がどうなっているかが分かりやすくなります。この記事ではインデント(字下げ)として半角スペース２文字分を挿入しています。 HTML のフォーマット(例えば、インデントとして半角スペース何文字分を挿入するのか等)については HTML の書き手によって様々ですが、フォーマットを意識して記述しなければなりません。</p> + +<div class="warning"> +<p>訳者注: 全角スペースは、 HTML の文法としては半角スペースや改行とは全く異なる扱いになるので、全角スペースを用いてインデントを行ったりしないでください。また、日本語の文章を段落要素<code><p></code>の中で改行すると、半角スペースが挿入されます。</p> + +<pre><p>私は日本人です。 +四季を好みます。</p></pre> + +<p>従って、段落要素(<code><p></code>)の中では一切改行はしないでください。ただ、長い文章では段落要素の中身が横に長くなってしまいます。その場合は、テキストエディタで「右端で折り返す」などの設定を行ってみてください。</p> + +<pre><p>私は日本人です。四季を好みます。</p></pre> + +<p>段落要素の中で改行したい場合は、改行要素<code><br></code>を用います(文章内の会話や、詩などに用います)。</p> + +<pre><p>彼は言いました。<br> +「私は日本人です。四季を好みます。」<br> +私は彼の発した突然の一言にはっと驚きました。</p></pre> +</div> + +<h2 id="Entity_references_Including_special_characters_in_HTML" name="Entity_references_Including_special_characters_in_HTML">実体参照: HTML に特殊文字を含める</h2> + +<div class="note"> +<p>訳者注: HTML エンティティ、実体参照、文字参照、文字実体参照、は、それぞれほぼ同じ意味で用いられます。</p> +</div> + +<p>HTML では<code><</code>、<code>></code>、<code>"</code>、<code>'</code>、<code>&</code>の５つの文字は特殊文字と呼ばれています。これら５つの文字は HTML の文法自身の一部です。ではこれらの文字そのものを組版したい場合はどうすればいいのでしょうか。例えば「 You & Me 」や「 x < y 」等の表記をしたい場合です。</p> + +<p>そのような場合は、「文字参照」を使用する必要があります。文字参照とは「文字を表す特別なコード」のことであり、これを使うことで正確な組版を行うことができます。文字参照は必ずアンパサンド (&) で始まり、セミコロン(;)で終わります。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">実際の文字</th> + <th scope="col">等価な文字参照</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>次の例では Web 技術について記述している段落要素を２つ並べています。</p> + +<pre class="brush: html"><p>HTML では、<p>要素で段落を定義します。</p> + +<p>HTML では、&lt;p&gt;要素で段落を定義します。</p> +</pre> + +<p>上記の例をブラウザーに解釈させたものを下記に出力しています。１つ目の段落の出力が間違っていることが分かるかと思います。2 つ目の <code><p></code> を新しい段落の始まりとして認識しているためです。２つ目の段落は正しく出力されています。山括弧(<code><</code>、<code>></code>)を文字参照に置き換えているためです。</p> + +<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p>脚注: HTML で使用することのできる文字実体参照のリストはこの Wikipedia の記事で確認することができます: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> +</div> + +<h2 id="HTML_comments" name="HTML_comments">HTML におけるコメント</h2> + +<p>大抵のプログラミング言語同様、HTML においてもコード内にコメントを書くことができます。コメントはブラウザーによって無視されるので、組版には反映されません。コメントの目的としては、 HTML コードがどのように動作するのかや、コードの別の部分がどのように動作するのかを述べるることできます。コメントは、 HTML のコードを書いて半年以上経ってから自分で見返して、自分が何をしたのかを思い出すことができない時に大変有用となります。また、自分のコードを他の人に読んでもらう時にも有用です。</p> + +<p>HTML ファイル内の一部をコメントにするには、その箇所を特別なマーカーの <code><!--</code> と <code>--></code> で囲みます。例えば次のような感じです。</p> + +<pre class="brush: html"><p>私はコメントの外にいます。</p> + +<!-- <p>私はコメントの中にいます。</p> --></pre> + +<p>下記を見ると、最初の段落は表示されますが、次の段落は表示されないことが分かります。</p> + +<p>{{ EmbedLiveSample('HTML_comments', 700, 100) }}</p> + +<h2 id="Summary" name="Summary">要約</h2> + +<p>この記事の最後にたどり着きました — HTML のほんの初歩のツアーを楽しんでこられたことを望んでいます！ここではこの言語がどのようなものか、基本的にどうやって動作するのかを理解し、いくつかの要素と属性を書くことができるようになったでしょう。あなたがいる場所は完璧な場所です、続きの記事ではすでに見てきたことをもっと詳細に経験して、いくつか新しい言語機能を紹介します。引き続き注目！</p> + +<div class="note"> +<p><strong>脚注</strong>: さて、 HTML についてより深く学習するために <a href="/ja/docs/Learn/CSS">CSS</a> (Cascading Style Sheets)の基礎についても理解しておきましょう。 CSS はウェブページのスタイルをカスタマイズするために使用します。具体的には、テキストのフォントや色を変えたり、ページレイアウトを設定したりといったことがあげられます。 HTML と CSS は相互補完、つまり２つで１つです。両方学習するとすぐ気づくでしょう。</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使って HTML要素に色をつける</a></li> +</ul> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは？HTML のメタデータ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></li> + <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting" rel="nofollow">上級のテキスト整形</a></li> + <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure" rel="nofollow">ドキュメントとウェブサイトの構造</a></li> + <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML" rel="nofollow">HTML をデバッグする</a></li> + <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter" rel="nofollow">手紙をマークアップする</a></li> + <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content" rel="nofollow">コンテンツページを構造化する</a></li> +</ul> 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 +--- +<div> {{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">HTML の役割の 1 つはテキストに構造と意味 ({{glossary("semantics", "セマンティクス")}}ともいう) を与え、ブラウザーが正しく表示できるようにすることです。この記事では {{glossary("HTML")}} を使ってテキストのページを構造化する方法、見出しとパラグラフをつけたり、言葉を強調したり、リストを作ったり、などを説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a>に載っている、基本的な HTML に精通していること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>基本的なテキストページをマークアップして構造や意味を設定する方法を学ぶ — パラグラフ、見出し、リスト、強調、クォーテーションを含む。</td> + </tr> + </tbody> +</table> + +<h2 id="The_basics_Headings_and_Paragraphs" name="The_basics_Headings_and_Paragraphs">基本: 見出しとパラグラフ</h2> + +<p>たいていの構造化されたテキストは見出しとパラグラフで構成されていて、それは物語でも、新聞でも、大学の教科書でも、雑誌などでも、何を読んでいるのかにかかわらずそうです。</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> + +<p>構造化されたコンテンツは読み手にとって読みやすく楽しい体験になります。</p> + +<p>HTML では、各パラグラフは {{htmlelement("p")}} 要素で囲む必要があり、次のようです:</p> + +<pre class="brush: html"><p>I am a paragraph, oh yes I am.</p></pre> + +<p>それぞれの見出しは見出しの要素に囲まれます:</p> + +<pre class="brush: html"><h1>I am the title of the story.</h1></pre> + +<p>6 つの見出し要素があります — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, {{htmlelement("h6")}} です。各要素は文書内で別々のコンテンツレベルを表現します; <code><h1></code> は主な見出しで、<code><h2></code> はサブの見出しで、<code><h3></code> はサブのサブの見出しを表して、といったように。</p> + +<h3 id="Implementing_structural_hierarchy" name="Implementing_structural_hierarchy">構造的な階層を実装する</h3> + +<p>例として, 物語を考えましょう。 <code><h1></code> は物語の題名を表し、<code><h2></code> は各章の題名を表し、<code><h3></code> は各章の節を表す、といったようでしょう。</p> + +<pre class="brush: html"><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></pre> + +<p>階層が意味を成す限り、関係する要素が何を意味するかは正にあなた次第です。このような構造を作成する際には、いくつかのベストプラクティスを覚えておく必要があります:</p> + +<ul> + <li>ページごとに 1 つだけ <code><h1></code> を使うのが好まれる — これは最上位の見出しで、他のすべてはそれ以下の階層に置かれる。</li> + <li>見出しが階層内で正しい順序にしておく。<code><h3></code> のサブ見出しの後に <code><h2></code> のサブサブ見出しをつけたりしない — これは意味をなさないし変な結果となる。</li> + <li>6 つの見出しレベルで、必要性を感じないかぎり、ページごとに 3以内におさえる。たくさんの階層の文章は (つまり深い見出しの階層) 大きすぎて不格好であり、移動が困難になります。そのような場合、できるだけコンテンツを複数ページに分割するのが望ましいです。</li> +</ul> + +<h3 id="Why_do_we_need_structure" name="Why_do_we_need_structure">なぜ構造が必要なのか？</h3> + +<p>この質問に答えるには、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> を見てください — この記事の動作例の開始点です (すてきなハマスのレシピです)。あとの練習で必要になるため、ローカルマシンにこのファイルのコピーを保存します。この文書の本文は現在、複数の部分のコンテンツが入っています — まったくマークアップされていませんが、改行で区切られています (次の行に移るのに Enter/Return を押します)。</p> + +<p>しかし、この文書をブラウザーで開くと、テキストが 1 つの大きな塊に見えるでしょう!</p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> + +<p>これはコンテンツの構造を与える要素がないためですので、ブラウザーはどれが見出しでどれが本文かがわかりません。さらには:</p> + +<ul> + <li>ウェブページを見ているユーザーは、関連コンテンツを探すのにざっと見たり、時には読み始めるために見出しだけを見ている傾向にあります (we usually <a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">spend a very short time on a web page</a>)。しばらく有用なものが見つからない場合、イライラして別の場所に去っていきます。</li> + <li>ページをインデックスするサーチエンジンは、見出しのコンテンツを、ページの検索ランクに影響する重要なキーワードとみなします。見出しがないと、{{glossary("SEO")}} (検索エンジン最適化)の点で良くないでしょう。</li> + <li>極めて視覚が不自由な人はウェブページを読みません。つまりその代わりにウェブページを聞きます。これは <a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">スクリーンリーダー</a>というソフトウェアで実現されます。このソフトウェアはテキストコンテンツにすばやくアクセスする方法を提供します。さまざまな技術が使用される中で、文書の概要を見出しを読むことで提供し、ユーザーが必要な情報をすばやく見つけられるようにしています。見出しが見つからない場合、文書全体が読み上げられるのを聞くことになってしまいます。</li> + <li>{{glossary("CSS")}} でコンテンツをスタイリングしたり、{{glossary("JavaScript")}} で面白いことをさせるには、関連コンテンツを包んでいる要素が必要となり、それを効率的に CSS/JavaScript はターゲットとします。</li> +</ul> + +<p>このため、コンテンツに構造的なマークアップが必要となります。</p> + +<h3 id="Active_learning_Giving_our_content_structure" name="Active_learning_Giving_our_content_structure">アクティブラーニング: コンテンツに構造を与える</h3> + +<p>ライブな実例に飛び込んでみましょう。下記の実例で、入力フィールドの生テキストに要素を与え、出力フィールドに見出しと2つの段落が見えるようにしてみましょう。</p> + +<p>間違えた場合、リセットボタンでいつでもリセットできます。行き詰まったら、「<em>Show solution</em>(答えを見る)」ボタンで回答を見ます。</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>input<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span> <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>My short story I am a policewoman and my name is Trish. + +My legs are made of cardboard and I am married to a fish.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span> + <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">h2 </span><span class="punctuation token">{</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + +textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> +window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// stop tab key tabbing out of textarea and</span> +<span class="comment token">// make it write a tab at the caret position instead</span> + +textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Why_do_we_need_semantics" name="Why_do_we_need_semantics">なぜセマンティクスが必要なのか？</h3> + +<p>私たちはあらゆる場面でセマンティクスに頼っています。 —私たちは日常にある物の機能が何かを判断するために過去の経験を頼りにします。つまり、私たちは物を見れば、 それがどのような機能をもつかを知っています。 例えば、赤信号は「止まれ」を、「青信号」は「進め」を意味すると期待します。もしも、間違ったセマンティクスを適用すれば、ものごとは一瞬にして扱いにくくなることがあります。(赤を「進め」の意味で使っている国はあるのでしょうか？そんな国がないといいのですが。 )</p> + +<p>同様に、正確な要素を使い、コンテンツに正しい意味や機能、見た目をを与えられているかどうかを確かめる必要があります。この文脈では、{{htmlelement("h1")}} 要素は要素によって囲んだテキストを「ページのトップレベル見出し」の役割 (または意味) にします。</p> + +<pre class="brush: html"><h1>This is a top level heading</h1></pre> + +<p>既定では、ブラウザーはヘッダに見えるようにこれを大きなフォントサイズにします (もっとも、CSSを使えばあなたのやりたいようにできますが)。より重要なことは、その意味する値が (上記で述べましたが) サーチエンジンと画面を読む人によって、異なる方法で使われるということです。</p> + +<p>一方、任意の要素をトップレベル見出しのように見せることもできます。以下の例を見てください。</p> + +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span></pre> + +<p>これは {{htmlelement("span")}} 要素です。これにはセマンティクスはありません。意味を与えずにCSSを適用させたいとき (あるいはJavaScriptで何かをしたいとき)、コンテンツを囲むために使います (このあと、このコースではこの要素についてより多くのことについて発見することになります)。CSS の中にはトップレベル見出しのような見栄えにするために使えるものもあります。しかし、意味的な値はないため、上記で述べたような付加的な恩恵を得ることはできないでしょう。その役割に応じた適切な HTML 要素を使うことは良い考え方です。</p> + +<h2 id="Lists" name="Lists">リスト</h2> + +<p>さて、リストに目を向けてみましょう。リストは生活のあらゆる場所にあります。買い物のリストから、自分の家にたどり着くために意識することなく毎日従っている経路のリスト、このチュートリアルであなたが見ている説明のリストまであります。Web 上にもリストはどこにでもあり、気にかけるものに応じて、3種類が用意されています。</p> + +<h3 id="Unordered" name="Unordered">順序なし</h3> + +<p>順序なしリストは、買い物リストに使うときのように、項目の並びに関係がないものについてマークアップするときに使います。</p> + +<pre>milk +eggs +bread +hummus</pre> + +<p>すべての順序なしリストは {{htmlelement("ul")}} で開始し、すべてのリストの項目を囲みます。</p> + +<pre class="brush: html"><ul> +milk +eggs +bread +hummus +</ul></pre> + +<p>最後にリストの項目をそれぞれ {{htmlelement("li")}} (list item)で囲みます。</p> + +<pre class="brush: html"><ul> + <li>milk</li> + <li>eggs</li> + <li>bread</li> + <li>hummus</li> +</ul></pre> + +<h4 id="Active_learning_Marking_up_an_unordered_list" name="Active_learning_Marking_up_an_unordered_list">アクティブラーニング: 順序なしリストをマークアップする</h4> + +<p>自身の HTML 順序なしリストを作るために下のライブサンプルを編集してみましょう。</p> + +<div class="hidden"> +<h6 id="Playable_code_2" name="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">milk +eggs +bread +hummus</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 6em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> + +<h3 id="Ordered" name="Ordered">順序つき</h3> + +<p>順序付きリストは、以下のような一連の指示のように、項目に順序があるリストのことです。</p> + +<pre>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</pre> + +<p>マークアップの構造は順序なしリストと同じです。違うのは、<code><ul></code> の代わりに {{htmlelement("ol")}} 要素でリストの項目をそれぞれ囲まなければならないということです。</p> + +<pre class="brush: html"><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></pre> + +<h4 id="Active_learning_Marking_up_an_ordered_list" name="Active_learning_Marking_up_an_ordered_list">アクティブラーニング: 順序つきリストをマークアップする</h4> + +<p>自身の HTML 順序つきリストを作るために下のライブサンプルを編集してみましょう。</p> + +<div class="hidden"> +<h6 id="Playable_code_3" name="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">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</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> + +<h3 id="Active_learning_Marking_up_our_recipe_page" name="Active_learning_Marking_up_our_recipe_page">手をうごかしてみよう: Marking up our recipe page</h3> + +<p>この記事のこの時点で、レシピページの例をマークアップするために必要な情報はすべて揃っています。<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> 開始ファイルのローカルコピーを保存してそこで作業を行うか、または下記の編集可能な例で実行するかを選択できます。編集した例に記入すると、次にページを開いたときに失われるため、ローカルで実行するのがおそらくよりよいでしょう。どちらにも長所と短所があります。</p> + +<div class="hidden"> +<h6 id="Playable_code_4" name="Playable_code_4">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Quick hummus recipe + + This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. + + Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. + + Ingredients + + 1 can (400g) of chick peas (garbanzo beans) + 175g of tahini + 6 sundried tomatoes + Half a red pepper + A pinch of cayenne pepper + 1 clove of garlic + A dash of olive oil + + Instructions + + Remove the skin from the garlic, and chop coarsely + Remove all the seeds and stalk from the pepper, and chop coarsely + Add all the ingredients into a food processor + Process all the ingredients into a paste. + If you want a coarse "chunky" hummus, process it for a short time + If you want a smooth hummus, process it for a longer time + + For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. + + Storage + + Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. + + Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<h1>Quick hummous recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); + +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> + +<p>立ち往生した場合は、いつでも [ソリューションを表示] ボタンを押すか、github レポジトリの <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> の例をご覧ください。</p> + +<h3 id="Nesting_lists" name="Nesting_lists">入れ子のリスト</h3> + +<p>あるリストを別のリストの中に入れ子にしてもまったく問題ありません。いくつかのサブ箇条書きを最上位の箇条書きの下に配置することをお勧めします。 レシピの例から2番目のリストを見てみましょう。</p> + +<pre class="brush: html"><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></pre> + +<p>最後の2つの箇条書きはそれらの前の箇条書きと非常に密接に関係しているので (それらはその箇条書きの下に収まるサブ命令や選択のように読みます)、それらを自身の順序なしリストの中に入れ子にして現在のリストの中に入れることは意味があります。4番目の箇条書き。 これは次のようになります。</p> + +<pre class="brush: html"><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></pre> + +<p>前のアクティブラーニングの例に戻り、2番目のリストを次のように更新してみてください。</p> + +<h2 id="Emphasis_and_importance" name="Emphasis_and_importance">強調と重要性</h2> + +<p>人間の言語では、文の意味を変えるために特定の単語を強調することが多く、特定の単語を何らかの意味で重要または異なるものとしてマークしたい場面がよくあります。HTML は、そのような効果でテキストコンテンツをマークアップすることを可能にするためにさまざまなセマンティック要素を提供します。そしてこのセクションでは、最も一般的なもののいくつかを見ていきます。</p> + +<h3 id="Emphasis" name="Emphasis">強調</h3> + +<p>話されている言葉を強調したいときは、ある言葉を強調して、自分の言っていることの意味を微妙に変えます。同様に、書かれた言語では、イタリック体でそれらを置くことによって単語を強調する傾向があります。たとえば、次の2つの文は意味が異なります。</p> + +<p>I am glad you weren't late.</p> + +<p>I am <em>glad</em> you weren't <em>late.</em></p> + +<p>最初の文は、その人が遅刻していないことを本当に安心しているように思われます。対照的に、2番目のものは皮肉的または受動的 - 攻撃的に聞こえ、その人が少し遅れて到着したという不快感を表しています。</p> + +<p>HTML では、このようなインスタンスをマークアップするために {{htmlelement("em")}} (強調) 要素を使用します。文書を読みやすくするだけでなく、これらはスクリーンリーダーによって認識され、異なるトーンの音声で話されます。ブラウザではデフォルトでイタリック体になっていますが、純粋にイタリック体にするだけの場合にはこのタグを使用しないでください。そのためには、{{htmlelement("span")}} 要素と CSS、あるいは {{htmlelement("i")}} 要素 (下記参照) を使用します。</p> + +<pre class="brush: html"><p>I am <em>glad</em> you weren't <em>late</em>.</p></pre> + +<h3 id="Strong_importance" name="Strong_importance">重要性が高い</h3> + +<p>重要な言葉を強調するために、話し言葉でそれらを強調し、そして書面でそれらを <strong>bold</strong> にする傾向があります。例えば：</p> + +<p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p> + +<p>HTML では、このようなインスタンスをマークアップするために {{htmlelement("strong")}} (強い重要性) 要素を使用します。 この文書をより便利にするだけでなく、これらもスクリーンリーダーによって認識され、異なるトーンの音声で話されています。ブラウザではデフォルトで太字のテキストとしてスタイル設定されていますが、太字のスタイルにするだけの場合にはこのタグを使用しないでください。そのためには、{{htmlelement("span")}} 要素といくつかの CSS、あるいは {{htmlelement("b")}} 要素 (下記参照) を使用します。</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p></pre> + +<p>必要に応じて、 strong と emphasis を相互に入れ子にすることができます。</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong> — +if you drink it, <strong>you may <em>die</em></strong>.</p></pre> + +<h3 id="アクティブラーニング_重要にしましょう！">アクティブラーニング: 重要にしましょう！</h3> + +<p>このアクティブラーニングセクションでは、編集可能な例を示しました。その中で、それらを必要としていると思う言葉に強調と強い重要性を付け加えてみてください。</p> + +<div class="hidden"> +<h6 id="Playable_code_5" name="Playable_code_5">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><h1>Important notice</h1> + +<p>On Sunday January 9th 2010, a gang of goths were +spotted stealing several garden gnomes from a shopping +center in downtown Milwaukee. They were all wearing green +jumpsuits and silly hats, and seemed to be having a whale +of a time. If anyone has any information about this +incident, please contact the police now.</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show suggestion" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> + +<h3 id="イタリック、太字、下線...">イタリック、太字、下線...</h3> + +<p>これまで説明してきた要素には明確な意味があります。{{htmlelement("b")}}、{{htmlelement("i")}} および {{htmlelement("u")}} の状況はやや複雑です。CSS がまだ十分にサポートされていないかまったくサポートされていなかった時代に、太字、斜体、または下線付きのテキストを書くことができるようにそれらはできました。<span class="tlid-translation translation" lang="ja"><span title="">このような要素は表示にのみ影響を与え、意味には影響を与えない<strong>表示要素</strong>として知られていますが、もはや使用されるべきではありません。</span><span title="">これまで見てきたように、セマンティクスはアクセシビリティ、SEO などにとって非常に重要だからです。</span></span></p> + +<p>HTML5では <code><b></code>、<code><i></code>、<code><u></code> が新しい、やや混乱しやすいセマンティックロールで再定義されました。</p> + +<p>最適な経験則は次のとおりです。<span class="tlid-translation translation" lang="ja"><span title="">これ以上適切な要素がない場合に、太字、斜体、または下線で伝統的に伝えられてきたような意味を伝えるために</span></span> <code><b></code><span class="tlid-translation translation" lang="ja"><span title="">、</span></span><code><i></code><span class="tlid-translation translation" lang="ja"><span title=""> または</span></span> <code><u></code> <span class="tlid-translation translation" lang="ja"><span title="">を使用するのが適切です。</span></span>ただし、アクセシビリティの考え方を守ることは常に重要です。 イタリック体の概念は、スクリーンリーダーを使っている人、またはラテン系のアルファベット以外の書記体系を使っている人にとってはあまり役に立ちません。</p> + +<ul> + <li>{{HTMLElement('i')}} は、伝統的にイタリック体で伝えられた意味を伝えるために使われます：外来語、分類名、技術用語、考え...</li> + <li>{{HTMLElement('b')}} は、伝統的に太字で伝えられている意味を伝えるために使用されます。キーワード、製品名、リードセンテンス...</li> + <li>{{HTMLElement('u')}} は、下線で伝統的に伝えられている意味を伝えるために使用されます。適切な名前、スペルミス...</li> +</ul> + +<div class="note"> +<p>下線についての親切な警告：<strong>人々は下線をハイパーリンクと強く関連付けています</strong>。したがって、Web 上では、リンクのみに下線を引くのが最善です。意味的に適切な場合は <code><u></code> 要素を使用しますが、CSS を使用してデフォルトの下線を Web 上でより適切なものに変更することを検討してください。以下の例はその方法を示しています。</p> +</div> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="comment token"><!-- scientific names --></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + The Ruby-throated Hummingbird (<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>i</span><span class="punctuation token">></span></span>Archilochus colubris<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>i</span><span class="punctuation token">></span></span>) + is the most common hummingbird in Eastern North America. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="comment token"><!-- foreign words --></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + The menu was a sea of exotic words like <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>i</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>uk-latn<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>vatrushka<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>i</span><span class="punctuation token">></span></span>, + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>i</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>id<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>nasi goreng<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>i</span><span class="punctuation token">></span></span> and <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>i</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fr<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>soupe à l'oignon<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>i</span><span class="punctuation token">></span></span>. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="comment token"><!-- a known misspelling --></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + Someday I'll learn how to <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>u</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">text-decoration-line</span><span class="punctuation token">:</span> underline<span class="punctuation token">;</span> <span class="property token">text-decoration-style</span><span class="punctuation token">:</span> wavy<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>spel<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>u</span><span class="punctuation token">></span></span> better. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="comment token"><!-- Highlight keywords in a set of instructions --></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ol</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span>Slice<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span> two pieces of bread off the loaf. + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span>Insert<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span> a tomato slice and a leaf of + lettuce between the slices of bread. + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ol</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Summary" name="Summary">要約</h2> + +<p>今はここで終わりとしましょう。 この記事では、HTMLでテキストをマークアップする方法についての優れたアイデアを説明し、この分野で最も重要な要素のいくつかを紹介しました。この分野には、さらに多くのセマンティック要素を網羅する必要があります。この後の「その他のセマンティック要素」の記事で、さらに詳しく説明します。 次回の記事では、Web上で最も重要な要素と思われるハイパーリンクの作成方法について詳しく説明します。</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは？HTML のメタデータ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">上級のテキスト整形</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">ドキュメントとウェブサイトの構造</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML をデバッグする</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">手紙をマークアップする</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツページを構造化する</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">本来、{{glossary("HTML")}} は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味 (段落なのか？箇条書きなのか？表の一部なのか？) を与え、文書を論理的なセクションに構成し (ヘッダを持つのか？コンテンツを３段組にするのか？ナビゲーションメニューを持つのか？) 、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の２つについて紹介し、HTMLを理解する上で知る必要がある基本的な概念や文法について紹介します。</p> + +<h2 id="前提条件">前提条件</h2> + +<p>このモジュールを始めるにあたり、HTML の知識は一切必要ありません。しかし、最低でもコンピューターを利用したり、ウェブを受動的に利用 (つまり単にそれらを見たり、コンテンツを消費する) したりすることについては、慣れ親しんでいるべきです。<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a>に挙がっている基本的な作業環境を整えておき、<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>にあるような、ファイルを作成して管理する方法についても理解するべきです。これらの記事は両方共に、完全な初心者用のモジュール「<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web">Web入門</a>」の一部です。</p> + +<div class="note"> +<p><strong>注</strong>：自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは <a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインコーディングプログラムで試すことが可能です。</p> +</div> + +<h2 id="ガイド">ガイド</h2> + +<p>このモジュールは以下の記事を含んでいます。これらを読むことで、HTMLの基礎理論の全てを学び、スキルを試すのに十分な機会が得られるでしょう。</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML入門</a></dt> + <dd>HTML を開始するための、完全な基本を網羅します — 要素、属性やその他の重要な用語を定義します。この用語を聞いたことがあるかもしれませんし、ここが言語に溶け込んでいる所です。また HTML 要素が構成される方法や、典型的な HTML ページが校正される方法を示し、その他の重要な言語機能を説明します。進むにつれ、HTML で遊んでみて、興味が沸いてくるでしょう！</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Headとは? HTML のメタデータ</a></dt> + <dd>HTML ドキュメントの Head は、ページが読み込まれてもウェブブラウザーで表示<strong>されない</strong>部分です。これはページ{{htmlelement("title", "タイトル")}}や、(HTML コンテンツを CSS でスタイリングする場合に) {{glossary("CSS")}} へのリンクや、カスタム favicon や、メタデータ (HTML についてのデータ、例えば誰が書いたかや、文書を記述する重要なキーワードなど) です。</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></dt> + <dd>HTML の主な役割の1つは、テキストの意味付け (<strong>セマンティクス</strong>としても知られます) で、それによってブラウザーは正しくテキストを表示する方法がわかります。この記事では HTML を使ってテキストブロックを見出しとパラグラフに分けたり、単語を強調/重要にしたり、リストを作成したりする方法を見て行きます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></dt> + <dd>ハイパーリンクは本当に重要です — これはウェブをウェブにしているものです。この記事ではリンクを作成するのに必要な文法を表して、リンクの最も良いやり方を考察します。</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">上級のテキスト整形</a></dt> + <dd>HTML ではテキスト整形用として、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a> の記事で扱ってきてない多くの要素があります。ここでの要素はあまり知られてないですが、知っておくと役立ちます。ここでは引用や、説明リストや、コンピューターのコードや関連するテキスト、下付き上付きや、連絡先情報などのマークアップを学習します。</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">ドキュメントとウェブサイトの構造</a></dt> + <dd>ページの個々の部分 (例えば「パラグラフ」や「画像」) を定義するのと同様に、ウェブサイトのエリアも (例えば「ヘッダー」、「ナビゲーションメニュー」、「本文のカラム」) HTML で定義されます。この記事では基本的なウェブサイトの構造を計画する方法と、構造を表現する HTML を書く方法を見て行きます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTMLをデバッグする</a></dt> + <dd>HTML を書くのは良いですが、うまくいかなくて、コードのエラーが収まらない場合はどうでしょうか？この記事では手助けとなるいくつかのツールを紹介します。</dd> +</dl> + +<h2 id="評価">評価</h2> + +<p>以下の評価で、上記のガイドにある HTML 基礎の理解をテストできます。</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">手紙をマークアップする</a></dt> + <dd>早かれ遅かれ、手紙を書くことを学びます; これはテキストフォーマットの技術をテストするのにも役立ちます！この評価ではマークアップすべき手紙が与えられます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツページを構造化する</a></dt> + <dd>この評価では、ヘッダー・フッター・ナビゲーションメニュー・メインコンテンツ・サイドバーを含む、簡単なコンテンツページを構造化する HTML の能力をテストします。</dd> +</dl> + +<h2 id="関連情報">関連情報</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt> + <dd><em>HTML 概論</em>のモジュールで話されたたくさんのスキルを見て回ったりテストしたりできる、素晴らしい Mozilla ファウンデーションのコースです。学習者はこの6つのモジュールにて Web について読んだり書いたり参加したりするのに慣れていきます。製作と共同作業を通じて Web の基礎を発見してください。</dd> +</dl> 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 +--- +<div> +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div> +私たちはみんな遅かれ早かれ手紙を書くことを学びます。 + +<p class="summary">テキストの書式設定のスキルを試すのも便利な例です。この課題では、ハイパーリンクを含む基本的な HTML テキストフォーマットスキルと高度な HTML テキストフォーマットスキルをテストするためにマークアップするための文字が与えられます。さらに HTML <code><head></code> コンテンツに対するあなたの慣れをテストします。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>このアセスメントを試みる前に、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML を始めよう</a>」、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">head には何が入る? HTML のメタデータ</a>」、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>」、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>」、および「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">高度なテキスト処理</a>」をすでに読んでおく必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>基本的な HTML テキストの書式設定とハイパーリンクのスキル、および HTML <head> の内容に関する知識をテストします。</td> + </tr> + </tbody> +</table> + +<h2 id="スタートポイント">スタートポイント</h2> + +<p>この課題を開始するには、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">マークアップする必要がある生のテキスト</a>と、HTML に<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">含める必要がある CSS</a> を入手します。テキストエディタを使用して新しい <code>.html</code> ファイルを作成し、作業を行います (または、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使用して課題を行います)。</p> + +<h2 id="簡単なプロジェクト">簡単なプロジェクト</h2> + +<p>このプロジェクトの場合、あなたの仕事は大学のイントラネットでホストされる必要がある手紙をマークアップすることです。手紙は、大学で働くことへの申し込みに関する研究フェローから博士課程の学生への返事です。</p> + +<p>ブロック/構造セマンティクス</p> + +<ul> + <li>ドキュメント全体を doctype、{{htmlelement("html")}}、{{htmlelement("head")}}、{{htmlelement("body")}} 要素を含む適切な構造で構成する必要があります。</li> + <li>一般的な手紙は、以下の点を除いて、段落と見出しの構造でマークアップされるべきです。トップレベルの見出し ("Re:" 行) が1つと、セカンドレベルの見出しが3つあります。</li> + <li>学期の開始日、研究科目、そしてエキゾチックな踊りは適切なリストタイプを使ってマークアップされるべきです。</li> + <li>2つのアドレスは段落の中に入れることができます。{{htmlelement("address")}} 要素はそれらには適していません — その理由を考えてください。さらに、アドレスの各行は新しい行の上に配置する必要がありますが、新しい段落には配置しないでください。</li> +</ul> + +<p>インラインセマンティクス:</p> + +<ul> + <li>送信者と受信者の名前 (および "Tel" と "Email") は、非常に重要なものとしてマークアップする必要があります。</li> + <li>文書内の4つの日付には、機械が読める日付を含む適切な要素を指定する必要があります。</li> + <li>手紙の最初のアドレスと最初の日付には、"sender-column" のクラス属性値を指定する必要があります。後で追加する CSS では、従来の手紙のレイアウトの場合と同様に、これらが正しく配置されます。</li> + <li>文字の本文中の5つの頭字語/略語は、それぞれの頭字語/略語を拡張するためにマークアップする必要があります。</li> + <li>6つの下付き/上付き文字は適切にマークアップする必要があります — 化学式、および 103 と 104 の数字 (それぞれ 10 のべき乗または 3 と 4 にする必要があります)。</li> + <li>テキストの中で少なくとも2つの適切な単語に強い重要性と強調を設定するようにしてください。</li> + <li>ハイパーリンクを追加する場所は2か所あります。タイトル付きの適切なリンクを追加してください。リンクが指す場所には http://example.com を使用してください。</li> + <li>大学のモットーのクォートと引用は適切な要素でマークアップされるべきです。</li> +</ul> + +<p>ドキュメントの head:</p> + +<ul> + <li>適切なメタタグを使用して、ドキュメントの文字コードを utf-8 として指定する必要があります。</li> + <li>手紙の作者は適切なメタタグで指定されるべきです。</li> + <li>提供された CSS は適切なタグの中に含まれるべきです。</li> +</ul> + +<h2 id="ヒントとコツ">ヒントとコツ</h2> + +<ul> + <li>HTML を検証するために <a href="https://validator.w3.org/">W3C HTML validator</a> を使用してください。検証すればボーナスポイントを得られるでしょう。</li> + <li>この課題をするために CSS を知る必要はありません。 提供された CSS を HTML 要素の中に入れるだけです。</li> +</ul> + +<h2 id="例">例</h2> + +<p>次のスクリーンショットは、マークアップ後の文字の表示例を示しています。</p> + +<p><img alt="Example" src="https://mdn.mozillademos.org/files/15811/Letter%20screengrab%202.png" style="border: 1px solid black; display: block; height: 1858px; margin: 0px auto; width: 931px;"></p> + +<h2 id="評価">評価</h2> + +<p>組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もし自己学習しているのであれば、<a href="https://discourse.mozilla.org/t/marking-up-a-letter-assignment/24676">この練習問題についてのディスカッションスレッド</a>、または <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください - 不正をすることによって得られるものは何もありません！</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">CSS を使用してレイアウトできるようにコンテンツのページを構成することは、習得が非常に重要なスキルです。そのためこの評価では、ページがどのように表示されるのかを検討し、適切な構造セマンティクスを選択してその上にレイアウトを構築する能力についてテストします。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>この評価を試みる前に、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">ドキュメントとWebサイトの構造</a>」に特に重点を置いて、コースの残りの部分を通してすでに学習していること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>Web ページ構造の知識、および将来のレイアウト設計をマークアップで表現する方法をテストする。</td> + </tr> + </tbody> +</table> + +<h2 id="スタートポイント">スタートポイント</h2> + +<p>この評価を開始するには、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">すべての開始アセットを含むzipファイル</a>を入手してください。 zip ファイルには以下が含まれています。</p> + +<ul> + <li>構造的マークアップを追加する必要がある HTML</li> + <li>マークアップをスタイルするための CSS</li> + <li>ページで使用されている画像</li> +</ul> + +<p>ローカルコンピュータで例を作成するか、あるいは <a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使用して評価を行います。</p> + +<h2 id="プロジェクト概要">プロジェクト概要</h2> + +<p>このプロジェクトでは、あなたの仕事は、バードウォッチング Web サイトのホームページのコンテンツを取得し、それにページレイアウトを適用できるように構造要素を追加することです。持っている必要があるものは：</p> + +<ul> + <li>ページのメインタイトル、サイトのロゴ、およびナビゲーションメニューを含む、サイトの全幅にわたるヘッダ。スタイル設定が適用されるとタイトルとロゴが並べて表示され、ナビゲーションがそれら2つの項目の下に表示されます。</li> + <li>ウェルカムテキストを含むメインブロックと、画像のサムネイルを含むサイドバーの2つの列を含むメインコンテンツ領域。</li> + <li>著作権情報とクレジットを含むフッター。</li> +</ul> + +<p>以下に適したラッパーを追加する必要があります。</p> + +<ul> + <li>ヘッダー</li> + <li>ナビゲーションメニュー</li> + <li>メインコンテンツ</li> + <li>ウェルカムテキスト</li> + <li>画像サイドバー</li> + <li>フッター</li> +</ul> + +<p>また、する必要があることは：</p> + +<ul> + <li>開始時に提供された既存の CSS のすぐ下に別の{{htmlelement("link")}} 要素を追加して、提供された CSS をページに適用します。</li> +</ul> + +<h2 id="ヒント">ヒント</h2> + +<ul> + <li><a href="https://validator.w3.org/nu/">W3C Nu HTML Checker</a> を使用して HTML、CSS、および SVG の意図しないミス — 他の方法では見逃している可能性のあるミス — を修正できるようにします。</li> + <li>この評価をするために CSS を知る必要はありません。 提供された CSS を HTML 要素の中に入れるだけです。</li> + <li>提供されている CSS は、正しい構造要素がマークアップに追加されると、レンダリングされたページでそれらが緑色に見えるように設計されています。</li> + <li>行き詰って、どんな要素をどこに置くべきか想像できないならば、ページレイアウトの簡単なブロック図を描き、各ブロックを折り返すべきだと思う要素を書き留めることがしばしば役立ちます。</li> +</ul> + +<h2 id="例">例</h2> + +<p>次のスクリーンショットは、マークアップされた後のホームページの外観の例を示しています。</p> + +<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="評価">評価</h2> + +<p>あなたが組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もしあなたが自己学習しているのであれば、<a href="https://discourse.mozilla.org/t/structuring-a-page-of-content-assignment/24678">この練習問題についてのディスカッションスレッド</a>、または <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください — 不正をすることによって得られるものは何もありません！</p> + +<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">HTML の文書の {{glossary("Head", "head")}} 部分は、ページが読み込まれてもウェブブラウザーには表示されない部分です。この部分には、例えば、 {{htmlelement("title")}} といった情報や {{glossary("CSS")}} へのリンク (もし HTML を CSS で修飾したいならば)、独自のファビコンへのリンク、そしてほかのメタデータ (HTML を誰が書いたのかとかその HTML を表現する重要なキーワードなど) の情報を含んでいます。この記事では、上記のすべてのことと、さらに、読者にマークアップ言語と頭に入れておくべきほかのコードについてよい基礎を与えます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的な HTML の知識。 <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML を始めよう</a>で扱うようなもの。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>HTML の head について学ぶこと。 head の目的は何か、そして head が含む情報の中で最も重要なのは何か、加えてそれが HTML 文書の中でどれほどの影響を持つか。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_the_HTML_head" name="What_is_the_HTML_head">HTML の head とは何か？</h2> + +<p><a href="/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">前の記事で扱った HTML 文書</a>をもう一度見てみましょう。</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>HTML の head は {{htmlelement("head")}} 要素のコンテンツです — {{htmlelement("body")}} 要素のコンテンツ (これはブラウザーに読み込まれた時に表示されます) とは違っていて、head のコンテンツはページに表示されません。その代わり、head の仕事は文書の {{glossary("Metadata", "メタデータ")}} を含んでいます。上記の例では、head はとても小さいです。</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>My test page</title> +</head></pre> + +<p>しかし、大きなページでは、 head にたくさんの項目があることもあります — お気に入りのウェブサイトに移動して、<a href="/ja/docs/Learn/Discover_browser_developer_tools">ウェブ開発ツール</a>を使って head コンテンツを確認してみます。ここでの狙いは head に置くことのできるすべての使い方を示すことではなく、むしろ head に入れたくなるのが最も明らかなものの使い方を教えて、なじんでもらうことです。始めましょう。</p> + +<h2 id="Adding_a_title" name="Adding_a_title">タイトルをつける</h2> + +<p>{{htmlelement("title")}} 要素についてはすでに見てきました — これは文書にタイトルを追加するのに使います。しかしこれは {{htmlelement("h1")}} 要素 (これは body コンテンツの最上位レベルの見出し(head)を追加します — 時々ページタイトルとしても参照されます) と混同されます。しかしこれらは別のものです!</p> + +<ul> + <li>{{htmlelement("h1")}} 要素はブラウザーに読み込まれた時にページに現れます — 一般的にページごとに 1 回使われて、ページコンテンツのタイトルをマークアップします (ストーリーのタイトルや、ニュースのヘッドラインや、使い方にふさわしいなんでも)。</li> + <li>{{htmlelement("title")}} 要素は (文書のコンテンツではなく) 全体の HTML 文書のタイトルを表すメタデータです。</li> +</ul> + +<h3 id="Active_learning_Inspecting_a_simple_example" name="Active_learning_Inspecting_a_simple_example">アクティブラーニング: 単純な例を検討する</h3> + +<ol> + <li>このアクティブラーニングを始めるのに、我々の GitHub リポジトリに移動して <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a> のコピーをダウンロードして頂きたいです。これは次のいずれかでできます + + <ol> + <li>ページのコードをコピー&ペーストして、コードエディターの新規ファイルに入れて、ふさわしい場所に保存します</li> + <li>ページの "Raw" を押すと、新しいタブに生のコードが出ます。次に、ブラウザーメニューから <em>ファイル > 名前を付けて保存...</em> を選んで、ファイルの保存場所を選びます</li> + </ol> + </li> + <li>ファイルをブラウザーで開きます。このようなものが見えるでしょう: + <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;"><h1> コンテンツが出ている場所と、<code><title></code> コンテンツが出ている場所がひと目で分かります!</p> + </li> + <li>自分のコードエディターで開いて、この要素を編集して、ブラウザーで再読み込みしてもよいです。楽しんでみてください。</li> +</ol> + +<p><code><title></code> 要素はいろいろな方法で使われます。例えば、ページのブックマーク (<em>ブックマーク > このページをブックマーク または Firefox の URL バーのスターアイコンにて</em>) してみると、提案されたブックマーク名として <code><title></code> コンテンツが記入されています。</p> + +<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p><code><title></code> の内容は後述するように、コンテンツは検索結果にも使われます。</p> + +<h2 id="Metadata_the_<meta>_element" name="Metadata_the_<meta>_element">メタデータ: <meta>要素</h2> + +<p>メタデータはデータを説明するデータで、 HTML には文書にメタデータを追加する「公式な」方法があります — {{htmlelement("meta")}} 要素です。もちろん、この記事で話しているその他のものもメタデータと考えられます。ページの <head> に入る <code><meta></code> 要素にはさまざまな種類がありますが、この段階では、ややこしすぎるため、すべては説明しません。その代わり、よく見かけるいくつかのものを説明し、理解を与えます。</p> + +<h3 id="Specifying_your_documents_character_encoding" name="Specifying_your_documents_character_encoding">HTML文書の文字コードを指定する</h3> + +<p>上で見てきた例では、この行が含まれていました。</p> + +<pre class="brush: html notranslate"><meta charset="utf-8"></pre> + +<p>この要素は単に文書のキャラクターエンコーディングを指定しています — それは文書が使うことが許されるキャラクターセットです。<code>utf-8</code> はあらゆる言語からとてもたくさんの文字を含む汎用的なキャラクターセットです。つまりウェブページがあらゆる言語の表示を取り扱えるのです; このため、作成するすべてのウェブページにこれをセットするのが良いです！例えば、ページで英語と日本語を正しく扱うことができます:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">文字エンコーディングを、例えば <code>ISO-8859-1</code> (ラテン文字のアルファベットの文字セット) に指定すると、ページの表示はメチャクチャな見た目になります。</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: ブラウザーによっては (例 Chrome) 自動的に正しくないエンコーディングを修正しますので、お使いのブラウザーによっては、この問題が見られないこともあります。それでもなお、その他のブラウザーでの問題を避けるため、とにかくページに <code>utf-8</code> エンコーディングを設定すべきです。</p> +</div> + +<h3 id="Active_learning_Experiment_with_character_encoding" name="Active_learning_Experiment_with_character_encoding">アクティブラーニング: 文字エンコーディングで実験する</h3> + +<p>これを試すには、<code><title></code> についての前の節で得たシンプルな HTML テンプレート (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>) をもう一度見てみて、 meta charset の値を <code>ISO-8859-1</code> に変えて、日本語を追加してみます。私達の使ったコードは次のものです:</p> + +<pre class="brush: html notranslate"><p>Japanese example: ご飯が熱い。</p></pre> + +<h3 id="Adding_an_author_and_description" name="Adding_an_author_and_description">作成者と説明を追加する</h3> + +<p>多くの <code><meta></code> 要素は <code>name</code> と <code>content</code> 属性が含まれます:</p> + +<ul> + <li><code>name</code> は meta 要素の種類を指定します。含まれる情報の種類です。</li> + <li><code>content</code> は実際のメタコンテンツを指定します。</li> +</ul> + +<p>ページに入れるのが便利な 2 つのメタ要素は、ページの著者(author)を定義するものと、ページの説明(description)を与えるものです。例を見てみます:</p> + +<pre class="brush: html notranslate"><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."></pre> + +<p>著者 (author) の指定はいくつかの点で役立ちます。コンテンツに関する質問があって問い合わせしたい場合、誰がそのページを書いたのかに答えられます。 CMS (コンテンツ管理システム) によっては自動的にページの作者の情報を抽出して、このような目的で利用するための機能があります。</p> + +<p>ページの内容に関連したキーワードを含む説明 (description) を指定すると、検索エンジンで行われる関連検索で、ページをより上位にできる可能性があるため役立ちます (この行為に対する用語は <a href="/ja/docs/Glossary/SEO">Search Engine Optimization</a> (検索エンジン最適化) または {{glossary("SEO")}}といいます)。</p> + +<h3 id="Active_learning_The_descriptions_use_in_search_engines" name="Active_learning_The_descriptions_use_in_search_engines">アクティブラーニング:検索エンジンにおける description の扱い</h3> + +<p>description は検索エンジンの結果ページにも使われます。練習でこれを見ていきましょう。</p> + +<ol> + <li><a href="https://developer.mozilla.org/ja/">Mozilla Developer Network のフロントページ</a>に移動します。</li> + <li>ページのソースを見ます (ページ上で右クリックまたは <kbd>Ctrl</kbd> を押しながらクリックして、コンテキストメニューからページのソースを表示を選びます)。</li> + <li>description の meta タグを見てみます。それはこのようなものです。 + <pre class="brush: html notranslate"><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."></pre> + </li> + <li>ここでお好きな検索エンジンで "MDN Web Docs" を検索します (ここでは Google を使っています) 。 description の <code><meta></code> と <code><title></code> 要素のコンテンツが検索結果で使われています — 確かに値打ちがあります。 + <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/16074/mdn-search-result.png" style="border-style: solid; border-width: 1px; display: block; height: 982px; margin: 0px auto; width: 1302px;"></p> + </li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: Google ではメインの MDN ホームページリンクの下にいくつか MDN Web Docs のサブページが見えるでしょう— これはサイトリンクと呼ばれ、<a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> で設定されます — これは Google 検索エンジンでサイトの検索結果を良くする方法です。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: 多くの <code><meta></code> 機能はもう使われていません。例えば、 keyword の <code><meta></code> 要素 (<code><meta name="keywords" content="fill, in, your, keywords, here"></code>) — 検索エンジンが色々な検索用語と関連するページを決めるためのキーワードを与えると考えられています — は、スパマーが結果にバイアスをかける多数のキーワードを埋めるだけなので、検索エンジンから無視されます。</p> +</div> + +<h3 id="Other_types_of_metadata" name="Other_types_of_metadata">メタデータの他の種類</h3> + +<p>ウェブを旅するにつれ、他の種類のメタデータも見つかるでしょう。ウェブサイトで見る多くの機能はプロプライエタリな作成物で、使うことのできる特定の情報をあるサイト (例えば SNS) に与えます。</p> + +<p>例えば、 <a href="http://ogp.me/">Open Graph Data</a> は Facebook が開発した、ウェブサイトに豊富なメタデータを与えるメタデータプロトコルです。 MDN Web Docs のソースコードでは、次のようなものがあります。</p> + +<pre class="brush: html notranslate"><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"></pre> + +<p>この効果として、 facebook で MDN Web Docs にリンクしたとき、リンクに画像と説明が表示されます。ユーザーにとってより便利になります。</p> + +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter も同様のプロプラエタリなメタデータを持ちます。 URL が twitter.com で表示される時に同様な効果となります。例えば。</p> + +<pre class="brush: html notranslate"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="Adding_custom_icons_to_your_site" name="Adding_custom_icons_to_your_site">サイトに自分の好きなアイコンをつける</h2> + +<p>もっとサイトデザインを豊かにするために、メタデータにカスタムアイコンを追加して、特定のコンテキストで表示されるようにすることができます。このうち最もよく使われるものが <strong>ファビコン</strong> (ブラウザーの「お気に入り」や「ブックマーク」の一覧を指すために使われる "favorites icon" の略) です。</p> + +<p>つつましいファビコンは何年も使われてきています。16ピクセル四方のアイコンが最初の種類であり、様々な場所で使われました。各ページを開いているブラウザータブの中や、ブックマークパネル内のブックマークページの隣でファビコン表示が見られるでしょう。</p> + +<p>ページにファビコンを追加するには:</p> + +<ol> + <li>サイトの index ページと同じディレクトリに、 <code>.ico</code> 形式で保存します (大半のブラウザーは <code>.gif</code> や <code>.png</code> のような、より一般的な形式のファビコンにも対応していますが、 ICO 形式を使えば Internet Explorer 6 以降の古いブラウザでも動作することが保証されます)。</li> + <li>HTML の {{HTMLElement("head")}} ブロックに下記の行を入れて参照します。 + <pre class="brush: html notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p>ブックマークパネルでファビコンが表示される例です。</p> + +<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>最近では考慮するべきアイコンの種類がほかにもたくさんあります。例えば、 MDN Web Docs ホームページのソースコードには以下の行があります。</p> + +<pre class="brush: html notranslate"><!-- 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"></pre> + +<p>コメントはそれぞれのアイコンの用途を説明しています。 — この要素は、ウェブサイトが iPad のホーム画面に保存された時のすばらしい高解像度なアイコンの提供といったことをカバーしています。</p> + +<p>こうした種類のアイコンをいますぐすべて実装することに心配しすぎないでください — これはかなり高度な機能で、このコースが進んでも分からないはずです。ここでの主な目的は、他のウェブサイトのソースコードを見た時に出くわした場合にこれらが何か知ることです。</p> + +<div class="note"> +<p><strong>メモ:</strong> もし、サイトがセキュリティを向上させるために Content Security Policy (CSP) を使用している場合、ポリシーがファビコンに適用されます。ファビコンが読み込まれないという問題に遭遇したら、 {{HTTPHeader("Content-Security-Policy")}} ヘッダーの <a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> ディレクティブ</a>がアクセスを妨害していないかを確認してください。</p> +</div> + +<h2 id="Applying_CSS_and_JavaScript_to_HTML" name="Applying_CSS_and_JavaScript_to_HTML">HTML に CSS と JavaScript を追加する</h2> + +<p>最近のほとんどすべてのウェブサイトでは、格好よく見せるために {{glossary("CSS")}} や動画や地図、ゲームなどといったインタラクティブな機能を追加するために {{glossary("JavaScript")}} を用いています。これらは最も一般的に用いられ、それぞれ {{htmlelement("link")}} 要素、 {{htmlelement("script")}} 要素で表します。</p> + +<ul> + <li> + <p>{{htmlelement("link")}} 要素は必ず HTML 文書の head の中に置きます。二つの属性をとり、 rel="stylesheet" はこれが文書のスタイルシートであることを示し、 href はスタイルシートファイルへのパスを表します。</p> + + <pre class="brush: html notranslate"><link rel="stylesheet" href="my-css-file.css"></pre> + </li> + <li> + <p>{{htmlelement("script")}} 要素は head におく必要はありません。実際、文書の最後の body の後 (<code></body></code> タグを閉じる前) に置かれることが多いです。これはブラウザーは全ての HTML の内容をすべて読み込んだ後 JavaScript を適用しようとすることをはっきりさせるためです (もし、 JavaScript がまだ存在しない要素にアクセスしようとしたらブラウザはエラーを返します。)。</p> + + <pre class="brush: html notranslate"><script src="my-js-file.js"></script></pre> + + <p><strong>メモ</strong>: <code><script></code> 要素は空要素のように見えるかもしれませんが、そうではありませんので、終了タグが必要です。また、外部のスクリプトファイルを読み込むのではなく、 <code><script></code> 要素の中にスクリプトを置くこともできます。</p> + </li> +</ul> + +<h3 id="Active_learning_applying_CSS_and_JavaScript_to_a_page" name="Active_learning_applying_CSS_and_JavaScript_to_a_page">アクティブラーニング: ページに CSS と JavaScript を追加する</h3> + +<ol> + <li>アクティブラーニングを始めるにあたって、私たちの <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> ,<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> をコピーしてローカルの同じフォルダに保存してください。ファイル名と拡張子が変わっていないことを確認してください。</li> + <li>HTML ファイルをブラウザとテキストエディタで開いてください。</li> + <li>先に述べた情報に従って、 {{htmlelement("link")}} 要素と {{htmlelement("script")}} 要素を HTML に書き加えてください。すると CSS と JavaScript が HTML に適用されます。</li> +</ol> + +<p>以上を正しく行い、 HTML を保存してブラウザを更新したら、変化がみられるでしょう。</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>JavaScript が空のリストをページに追加しました。リスト内のどこかをクリックすると、ダイアログボックスが現れてリストの新しい要素となるテキストを入力するように求められます。 OK ボタンを押すと。リストに新しい要素が加わります。リストに既にある要素をクリックすると、ダイアログボックスが現れ要素の名前を変えることができます。</li> + <li>CSS によって背景は緑になり文字が大きくなっています。 JavaScript によってページに加えられたいくつかのコンテンツもスタイルが適用されます (黒い境界線の付いた赤いバーは、 JS が生成したリストに CSS が追加したスタイルです)。</li> +</ul> + +<div class="note"> +<p><strong>メモ</strong>: この演習で行きづまって CSS/JS が適用できなくなってしまった場合は、 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> サンプルページをチェックしてみてください。</p> +</div> + +<h2 id="Setting_the_primary_language_of_the_document" name="Setting_the_primary_language_of_the_document">文書の主要な言語の設定</h2> + +<p>最後に、ページの言語を設定することができること (そしてそうすべきこと) に言及する価値があるでしょう。これは、 <a href="/ja/docs/Web/HTML/Global_attributes/lang">lang 属性</a>を開始 HTML タグに追加することで実現することができます (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> に表示され、以下に表示されています)。</p> + +<pre class="brush: html notranslate"><html lang="en-US"></pre> + +<p>これは様々なところで役に立ちます。言語が設定されていれば、 検索エンジンによるHTML 文書のタグ付けがより効果的になりますし (たとえば、言語固有の結果を正しく表示できるようになるなど)、読み上げソフトを使用している視覚障碍者にとっても有用です ("six" はフランス語と英語の両方に存在しますが、発音が異なります)。</p> + +<p>文書のサブセクションを異なる言語として認識されるように設定することもできます。たとえば、次のようにすると日本語のセクションを日本語として認識されるように設定できます。</p> + +<pre class="brush: html notranslate"><p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p></pre> + +<p>これらのコードは <a href="https://ja.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> 規格で定義されています。それらについての詳細は、 <a href="https://www.w3.org/International/articles/language-tags/">HTML と XML の言語タグ</a>にあります。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>これで HTML head の弾丸ツアーは終了します。ここでできることは他にもたくさんありますが、この段階では徹底的なツアーでは退屈で混乱を招くことになるでしょうから、もっとも一般的なことに関する考えだけを紹介したかったのです。たった今、そこに到達しました。次回の記事では、HTML テキストの基礎について説明します。</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは？HTML のメタデータ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">上級のテキスト整形</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文書とウェブサイトの構造</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML をデバッグする</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">手紙をマークアップする</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツページを構造化する</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div class="summary"> +<p>ベクターグラフィックは多くの状況でとても便利です。 — ファイルサイズは小さく、スケーラビリティが高いため、ズームイン (拡大表示) したり、大きなサイズに拡大したりしてもモザイクになりません。この記事では、ウェブページにそれを組み込む方法を説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の基本</a>と、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">画像を文書に挿入する</a>方法を理解しておく必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>SVG (ベクター) 画像をウェブページに埋め込む方法を学びます。</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: この記事は SVG を教えるためのものではありません。 SVG が何であるかと、ウェブページに追加する方法について説明します。</p> +</div> + +<h2 id="What_are_vector_graphics" name="What_are_vector_graphics">ベクターグラフィックとは何か？</h2> + +<p>ウェブ上では、ラスター画像とベクター画像の2種類の画像を扱います。</p> + +<ul> + <li>ラスター画像は、ピクセルのグリッド (格子) を使用して定義されます。 — ラスター画像ファイルには、各ピクセルの配置場所を正確に示す情報と、その色を正確に示す情報が含まれています。一般的なウェブのラスター形式には、ビットマップ (<code>.bmp</code>)、 PNG (<code>.png</code>)、 JPEG (<code>.jpg</code>)、 GIF (<code>.gif</code>) などがあります。</li> + <li>ベクター画像はアルゴリズムを使用して定義されます。 — ベクター画像ファイルにはシェイプ (形状) とパス (経路) の定義が含まれており、画面に描画されるときに画像がどのような外見になるかを、コンピューターが理解するために利用することができます。 {{Glossary("SVG")}} 形式では、ウェブ上で使用するための強力なベクターグラフィックを作成することができます。</li> +</ul> + +<p>両者の違いを知るために、例を見てみましょう。この例は、 Github のリポジトリで <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> として公開されています。 — これは、2つの一見同一の黒い影付きの赤い星の画像を並べて表示しています。違いは、左のものが PNG 画像であり、右のものが SVG 画像であるということです。</p> + +<p>この違いは、ページをズームインすると明らかになります。 PNG 画像には、各ピクセルの位置（と色）に関する情報が含まれているため、ズームインするとピクセル化されます。 ズームインすると、各ピクセルのサイズが単純に拡大され、画面上の複数のピクセルが塗りつぶされるので、画像がギザギサに見えるようになります。 しかし、ベクター画像は大きさにかかわらず、アルゴリズムが画像内のシェイプを処理するために使用され、値が大きくなるにつれて単純に縮尺が変更されるため、きれいにくっきりと見えます。</p> + +<p><img alt="2つの星の画像" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p> + +<p><img alt="2つの星の画像が拡大表示され、1つがくっきりになり、他の画像がギザギサになる" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: 上の画像は実際には全て PNG です — いずれの場合も、左の星はラスター画像を表し、右の星はベクター画像を表します。 実際の例については、<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> デモを参照してください！</p> +</div> + +<p>さらに、ベクター画像ファイルは、画像内のすべてのピクセルの情報ではなく、一握りのアルゴリズムを保持するだけで済むので、ラスター同等物よりもはるかに軽くなります。</p> + +<h2 id="What_is_SVG" name="What_is_SVG">SVG とは何か？</h2> + +<p><a href="/ja/docs/Web/SVG">SVG</a> は、ベクター画像を記述するための {{glossary("XML")}} ベースの言語です。これは基本的に HTML のようなマークアップですが、画像に表示するシェイプを定義するためのさまざまな要素と、それらのシェイプに適用する効果があります。 SVG は、コンテンツではなくグラフィックをマークアップするためのものです。最も単純なものとしては、 {{svgelement("circle")}} や {{svgelement("rect")}} のような単純なシェイプを作成するための要素があります。 {{svgelement("feColorMatrix")}} (変換行列を使用して色を変換)、 {{svgelement("animate")}} (ベクターグラフィックの一部をアニメーション化)、 {{svgelement("mask")}} (画像の上にマスクを適用する) など、より高度な SVG の機能もあります。</p> + +<p>簡単な例として、次のコードは円形と長方形を作成します。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>これにより、次の出力が生成されます。</p> + +<p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>上記の例から、 SVG が手作業で簡単に書けるという印象を受けるかもしれません。実際、単純な SVG ならばテキストエディターで手作業で記述することはできますが、複雑な画像では、すぐにとても困難になり始めます。 SVG 画像を作成するには、ほとんどの人が <a href="https://inkscape.org/en/">Inkscape</a> や <a href="https://ja.wikipedia.org/wiki/Adobe_Illustrator">Illustrator</a> のようなベクターグラフィックエディターを使用します。これらのパッケージでは、さまざまなグラフィックツールを使用してさまざまなイラストを作成したり、写真に近似したもの (たとえば、 Inkscape のトレースビットマップ機能) を作成したりすることができます。</p> + +<p>SVG にはこれまで説明したもの以外にも、いくつかの長所があります。</p> + +<ul> + <li>ベクター画像のテキストはアクセス可能です。 ({{glossary("SEO")}} にも役立ちます)。</li> + <li>SVG はスタイリングやスクリプティングに適しています。 これは、画像の各コンポーネントが、 CSS を使用してスタイルを設定したり、JavaScript を使用してスクリプトを作成できるためです。</li> +</ul> + +<p>では、なぜ誰もが SVG よりもラスターグラフィックを使いたがるのでしょうか？実際、SVG にはいくつかの短所があります。</p> + +<ul> + <li>SVG はとてもあっさりと複雑になり、ファイルサイズが大きくなる可能性があります。複雑な SVG もブラウザーでかなりの処理時間を要する可能性があります。</li> + <li>SVG は、作成しようとしている画像の種類によっては、ラスター画像よりも作成するのが難しい場合があります。</li> + <li>SVG は古いブラウザーが対応していないため、ウェブサイトで旧バージョンの Internet Explorer をサポートする必要がある場合に、適切でない可能性があります (SVG は IE9 から対応しています)。</li> +</ul> + +<p>ラスターグラフィックは、前述の理由から、写真などの複雑な高精度画像に対しては、ほぼ間違いなく優れています。</p> + +<div class="note"> +<p>メモ: Inkscape では、スペースを節約するためにファイルを Plain SVG として保存します。 また、<a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">ウェブ用の SVG を作成する方法について説明しているこの記事</a> (英語) を参照してください。</p> +</div> + +<h2 id="Adding_SVG_to_your_pages" name="Adding_SVG_to_your_pages">ページへの SVG の追加</h2> + +<p>この節では、SVG ベクターグラフィックをウェブページに追加するさまざまな方法を説明します。</p> + +<h3 id="The_quick_way_htmlelementimg" name="The_quick_way_htmlelement(img)">簡単な方法: {{htmlelement("img")}}</h3> + +<p>{{htmlelement("img")}} 要素を介して SVG を埋め込むには、予想通り、 <code>src</code> 属性で参照する必要があります。 <code>height</code> 属性または <code>width</code> 属性 (または SVG に固有のアスペクト比がない場合は両方) が必要です。まだ<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a>を終了していない人は、こちらをお読みください。</p> + +<pre class="brush: html notranslate"><img + src="equilateral.svg" + alt="3辺がすべて等しい三角形" + height="87px" + width="100px" /></pre> + +<h4 id="Pros" name="Pros">長所</h4> + +<ul> + <li>手早く、画像と同様の構文で、 <code>alt</code> 属性により同等のテキストを内蔵させることができる。</li> + <li><code><img></code> を {{htmlelement("a")}} 要素内に入れることで、画像を簡単にハイパーリンクにすることができる。</li> +</ul> + +<h4 id="Cons" name="Cons">短所</h4> + +<ul> + <li>JavaScript で画像を操作することはできません。</li> + <li>CSS で SVG コンテンツを制御する場合は、SVG コードにインライン CSS スタイルを含める必要があります。 (SVG ファイルから呼び出された外部スタイルシートは効果がありません。)</li> + <li>CSS の擬似クラス (<code>:focus</code> など) で画像のスタイルを変更することはできません。</li> +</ul> + +<h3 id="Troubleshooting_and_cross-browser_support" name="Troubleshooting_and_cross-browser_support">トラブルシューティングとクロスブラウザーの対応</h3> + +<p>SVG に対応していないブラウザー (IE 8 以前、Android 2.3 以前) では、 <code>src</code> 属性から PNG または JPG を参照し、 SVG を参照するために {{htmlattrxref("srcset", "img")}} 属性 (最近のブラウザーのみが認識する) を使用することができます。 この場合、対応しているブラウザーのみが SVG を読み込みます。 — 古いブラウザーは代わりに PNG を読み込みます。</p> + +<pre class="brush: html notranslate"><img src="equilateral.png" alt="辺が等しい三角形" srcset="equilateral.svg"></pre> + +<p>以下に示すように、 SVG を CSS の背景画像として使用することもできます。 以下のコードでは、古いブラウザーでは理解できる PNG を使用しますが、新しいブラウザーでは SVG を読み込みます。</p> + +<pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code> +<code>background-image: url("image.svg"); +background-size: contain;</code></pre> + +<p>上記の <code><img></code> 方式と同様に、 CSS 背景画像を使用して SVG を挿入すると、 SVG を JavaScript で操作することができず、同じ CSS の制限が適用されます。</p> + +<p>SVG がまったく表示されない場合は、サーバーが正しく設定されていない可能性があります。 それが問題なら、<a href="/ja/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">この記事が正しい方向を指しています</a>。</p> + +<h3 id="How_to_include_SVG_code_inside_your_HTML" name="How_to_include_SVG_code_inside_your_HTML">HTML の中に SVG コードを組み込む方法</h3> + +<p>テキストエディターで SVG ファイルを開き、 SVG コードをコピーして HTML 文書に貼り付けることもできます。 これは、<strong>SVG をインラインにする</strong>、または <strong>SVG をインライン化する</strong>とも呼ばれます。 SVG コードスニペットは、{{svgelement("svg")}} タグで始まり、 <code><a href="/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> タグで終わることを確認してください (これら以外のものは含めないでください)。文書に貼り付けることのできる簡単な例を次に示します。</p> + +<pre class="brush: html notranslate"><svg width="300" height="200"> + <rect width="100%" height="100%" fill="green" /> +</svg> +</pre> + +<h4 id="Pros_2" name="Pros_2">長所</h4> + +<ul> + <li>SVG をインラインで配置すると、 HTTP リクエストが節約されるので、読み込み時間が短縮されます。</li> + <li><code>class</code> と <code>id</code> を SVG 要素に割り当て、 SVG 内または HTML 文書の CSS スタイル規則を置く場所で、CSS でスタイルを設定することができます。 実際には、任意の <a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">SVG プレゼンテーション属性</a>を CSS プロパティとして使用できます。</li> + <li>SVG のインライン化は、CSS の相互作用（<code>:focus</code> など）と CSS アニメーションを（通常のスタイルシートでも）SVG 画像に使用できる唯一のアプローチです。</li> + <li>SVG マークアップを {{htmlelement("a")}} 要素でラップすることでハイパーリンクにすることができます。</li> +</ul> + +<h4 id="Cons_2" name="Cons_2">短所</h4> + +<ul> + <li>この方法は、SVG を1か所だけで使用している場合にのみ適しています。 複製はリソースを集中的に使用するメンテナンスを引き起こします。</li> + <li>余分な SVG コードは HTML ファイルのサイズを増加させます。</li> + <li>ブラウザーは、通常の画像をキャッシュするようにインライン SVG をキャッシュすることはできません。</li> + <li>{{svgelement("foreignObject")}} 要素に代替を含めることはできますが、SVG をサポートするブラウザーでは代替画像が引き続きダウンロードされます。 余分なオーバーヘッドが本当に価値があるかどうかは、陳腐化したブラウザーをサポートするかどうかで判断する必要があります。</li> +</ul> + +<ul> +</ul> + +<h3 id="How_to_embed_an_SVG_with_an_htmlelementiframe" name="How_to_embed_an_SVG_with_an_htmlelement(iframe)">{{htmlelement("iframe")}} で SVG を埋め込む方法</h3> + +<p>SVG 画像は、ウェブページのようにブラウザーで開くことができます。 したがって、SVG 文書を <code><iframe></code> に埋め込むことは、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a>で学んだように行われます。</p> + +<p>ここで簡単なレビューです。</p> + +<pre class="brush: html notranslate"><iframe src="triangle.svg" width="500" height="500" sandbox> + <img src="triangle.png" alt="3つの不等辺の三角形" /> +</iframe></pre> + +<p>これは間違いなく選択するには最良の方法ではありません。</p> + +<h4 id="Cons_3" name="Cons_3">短所</h4> + +<ul> + <li>ご覧のとおり、<code>iframe</code> には代替メカニズムがありますが、 <code>iframe</code> に完全に対応していない場合にのみ、ブラウザーに代替が表示されます。</li> + <li>さらに、 SVG と現在のウェブページが同じ{{glossary('origin',"オリジン")}}を持っていない限り、メインウェブページで JavaScript を使用して SVG を操作することはできません。</li> +</ul> + +<h2 id="Active_Learning_Playing_with_SVG" name="Active_Learning_Playing_with_SVG">アクティブラーニング: SVG で遊ぶ</h2> + +<p>このアクティブラーニングの節では、 SVG をとても楽しく遊ぶことができます。 下の入力セクションでは、始めるためのサンプルをすでに提供していることがわかります。 また、<a href="/ja/docs/Web/SVG/Element">SVG 要素のリファレンス</a>にアクセスして、SVG で使用できる他のおもちゃの詳細を調べて、それらを試してみることもできます。 このセクションでは、あなたの研究スキルを鍛え、楽しく学びましょう。</p> + +<p>コードが機能しなくなった場合は、[Reset] ボタンを使用していつでもリセットすることができます。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="width: 95%;min-height: 200px;"> + <svg width="100%" height="100%"> + <rect width="100%" height="100%" fill="red" /> + <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> + <polygon points="120,0 240,225 0,225" fill="green"/> + <text x="50" y="100" font-family="Verdana" font-size="55" + fill="white" stroke="black" stroke-width="2"> + Hello! + </text> + </svg> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution" disabled> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = ''; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事では、ベクターグラフィックと SVG の概要、それらをなぜ知っておくと便利なのか、そして SVG をウェブページに組み込む方法について簡単に説明しました。 SVG を学ぶ上での完全なガイドとなることは決して考えられていませんでしたが、ウェブ上の旅行でそれに会っていれば、SVG が何であるかを知ることができます。 あなたがまだ SVG のエキスパートではないと感じたら心配しないでください。 もしそれがどう動くかについて詳しく知りたいなら助けになる以下のリンクを参考にしてください。</p> + +<p>このモジュールの最後の記事では、レスポンシブ画像を詳細に調査し、さまざまなデバイス間で画像をより良く動作させるための HTML ツールについて説明します。</p> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li>MDN の <a href="/ja/docs/Web/SVG/Tutorial/Getting_Started">SVG チュートリアル</a></li> + <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">レスポンシブ SVG のちょっとした助言</a> (英語)</li> + <li><a href="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Sara Soueidan のレスポンシブ SVG 画像に関するチュートリアル</a> (英語)</li> + <li><a href="http://www.w3.org/TR/SVG-access/">SVG のアクセシビリティ上の長所</a> (英語)</li> + <li><a href="https://css-tricks.com/scale-svg/">SVG を縮尺変更する方法</a> (ラスターグラフィックほど簡単ではありません！) (英語)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ウェブにベクターグラフィックを追加する</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">最初は、Web は単なるテキストに過ぎず、とても退屈でした。幸運なことに、Web ページ内に画像 (および他のより興味深いタイプのコンテンツ) を埋め込む能力が追加されるまでにはあまり時間がかかりませんでした。考慮すべき他のタイプのマルチメディアもありますが、単純な画像を Web ページに埋め込むために使用される、慎ましい {{htmlelement("img")}} 要素から始めるのが理にかなっています。この記事では、基本的な使い方を含め、{{htmlelement("figure")}} を使ったキャプションの注釈付け、{{glossary("CSS")}} 背景画像との関連付けなど、詳細な使い方を見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされた基本ソフトウェア</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基本知識、HTML の基礎知識に精通していること (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML の使い方</a>を参照してください)。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>単純な画像を HTML に埋め込み、キャプションで注釈を付ける方法、および HTML 画像と CSS 背景画像との関連を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="How_do_we_put_an_image_on_a_webpage" name="How_do_we_put_an_image_on_a_webpage">画像を Web ページにどのように置くのですか？</h2> + +<p>単に画像を Web ページに配置するには、{{htmlelement("img")}} 要素を使用します。これは有用であるために少なくとも1つの属性 — <code>src</code> (フルタイトルやソースと呼ばれることもあります) を必要とする {{glossary("empty element","空要素")}} (テキストコンテンツまたは終了タグがないことを意味する) です。<code>src</code> 属性には、{{htmlelement("a")}} 要素の <code>href</code> 属性値と同じように、ページに埋め込む画像を指すパスが含まれ、相対 URL または絶対 URL にすることができます。</p> + +<div class="note"> +<p><strong>メモ</strong>: 続行する前に、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">URL とパスに関する簡単な入門</a>を読んで、相対 URLと絶対 URL のメモリを更新してください。</p> +</div> + +<p>例えば、画像が <code>dinosaur.jpg</code> というファイル名で、HTML ページと同じディレクトリにある場合、画像を次のように埋め込むことができます。</p> + +<pre class="brush: html"><img src="dinosaur.jpg"></pre> + +<p>画像が HTML ページ (Google が {{glossary("SEO")}}/索引付けの目的で推奨するディレクトリ) 内の <code>images</code> サブディレクトリにあった場合は、次のように埋め込みます。</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg"></pre> + +<p>等々。</p> + +<div class="note"> +<p><strong>メモ</strong>: 検索エンジンは画像ファイル名も読み込み、SEO に向けて数えます。したがって、画像にわかりやすいファイル名を付けてください。<code>dinosaur.jpg</code> は <code>img835.png</code> よりも優れています。</p> +</div> + +<p>たとえば、絶対 URL を使用して画像を埋め込むことができます。</p> + +<pre class="brush: html"><img src="https://www.example.com/images/dinosaur.jpg"></pre> + +<p>しかし、これは無意味だけでなく、ブラウザが DNS サーバから IP アドレスを再度検索するなどより多くの作業をすることになります。ほとんどの場合、Web サイトの画像を HTML と同じサーバに保存します。</p> + +<div class="warning"> +<p><strong>警告</strong>: ほとんどの画像は著作権で保護されています。次の場合を除き、Web ページに画像を表示<strong>しない</strong>でください。<br> + <br> + 1) 画像を所有している<br> + 2) 画像の所有者からの書面による明示的な許可を得ている、または<br> + 3) 画像は、実際にパブリックドメインであるという十分な証拠がある。<br> + <br> + 著作権侵害は違法で非倫理的です。加えて、あなたがリンクする権限を持たない他の誰かの Web サイトでホストされている画像へあなたの <code>src</code> 属性を向け<strong>ない</strong>でください。これは「ホットリンク」と呼ばれます。さらに、誰かの帯域幅を盗むことは違法です。また、ページが遅くなり、画像が削除されたり、恥ずかしいものに置き換えられたりするかどうかを制御できません。</p> +</div> + +<p>上のコードでは、次の結果が得られます。</p> + +<p><img alt='恐竜の基本的な画像が、ブラウザに埋め込まれ、その上に "Images in HTML" が書かれています' src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: {{htmlelement("img")}} や {{htmlelement("video")}} のような要素は、<strong>置き換えられた要素</strong>と呼ばれることがあります。これは、要素の内容とサイズが、要素自体の内容ではなく、外部リソース(画像ファイルや動画ファイルなど)によって定義されているためです。</p> +</div> + +<div class="note"> +<p><strong>メモ</strong>: 完成したサンプルは、このセクションの <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">Github で実行する</a>から見つけることができます (<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">ソースコード</a>も参照してください)。</p> +</div> + +<h3 id="Alternative_text" name="Alternative_text">代替テキスト</h3> + +<p>次の属性は <code>alt</code> です。その値は、画像が見えない/表示されない状況で使用するためにあり、画像のテキスト記述であると考えられる。たとえば、上記のコードは次のように変更できます。</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg" + alt="恐竜の骨格の頭と胴体、 + それは長い鋭い歯を持つ大きな頭を持っています"></pre> + +<p><code>alt</code> テキストをテストする最も簡単な方法は、意図的にファイル名のスペルミスをすることです。たとえば、画像名のスペルが <code>dinosooooor.jpg</code> の場合、ブラウザは画像を表示せず、代わりに代替テキストを表示します。</p> + +<p><img alt="Images in HTMLというタイトルですが、今回は恐竜の画像が表示されず、代替テキストが代わりに表示されます。" src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>それでは、なぜ代替テキストを見たり、必要とするのでしょうか? いくつかの理由から便利です。</p> + +<ul> + <li>ユーザは視覚障害があり、<a href="https://ja.wikipedia.org/wiki/スクリーンリーダー">スクリーンリーダー</a>を使用して Web を読むことができます。実際、画像を記述するための代替テキストを用意することは、ほとんどのユーザにとって有益です。</li> + <li>上記のように、ファイル名またはパス名のスペルが間違っている可能性があります。</li> + <li>ブラウザは画像タイプをサポートしていません。<a href="https://ja.wikipedia.org/wiki/Lynx_(%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6)">Lynx</a> などのテキストのみのブラウザを使用している人もいますが、代わりに画像の代替テキストを表示します。</li> + <li>検索エンジンにテキストを提供して活用することができます。たとえば、検索エンジンは代替テキストと検索照会を一致させることができます。</li> + <li>ユーザは画像をオフにして、データ転送量や目移りを減らしました。これは特に、携帯電話や帯域幅が限られて高価な国では一般的です。</li> +</ul> + +<p><code>alt</code> 属性の中にぴったりの何を書きますか? それは最初の場所に画像がある理由に依存します。言い換えれば、画像が表示されない場合に失うもの。</p> + +<ul> + <li><strong>装飾</strong>。装飾画像に {{anch("CSS background images","CSS 背景画像")}}を使用する必要がありますが、HTML を使用する必要がある場合は空白の <code>alt=""</code> を追加してください。画像がコンテンツの一部でない場合、スクリーンリーダーは時間を浪費してはなりません。</li> + <li><strong>コンテンツ</strong>。画像が重要な情報を提供している場合は、簡単な代替テキストで同じ情報を提供する。それよりもっと良いのは、誰もが見ることができる本文の中で提供する。冗長な代替テキストを書き込まないでください。すべての段落がメインコンテンツに2回書かれていると、目に見えるユーザにとってはどれほど迷惑でしょうか? 画像が主たる本文で十分に記述されている場合は、単に <code>alt=""</code> を使用できます。</li> + <li><strong>リンク</strong>。{{htmlelement("a")}} タグ内に画像を置くと、画像をリンクに変えるためには、依然として<a href="/ja/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Use_clear_link_wording">アクセス可能なリンクテキスト</a>を提供する必要があります。そのような場合は、同じ <code><a></code> 要素内に、または画像の <code>alt</code> 属性内に書き込むことができます。</li> + <li><strong>テキスト</strong>。テキストを画像に入れないでください。たとえば、メインの見出しにドロップシャドウが必要な場合は、テキストを画像に入れるのではなく、<a href="/ja/docs/Web/CSS/text-shadow">CSS を使用</a>します。しかし、これが避けられない場合は、<code>alt</code> 属性にテキストを与える必要があります。</li> +</ul> + +<p>基本的には、画像が見えないときでも、実用的な体験を提供することが鍵です。これにより、すべてのユーザにコンテンツが欠落していないことが保証されます。ブラウザの画像をオフにして、どのように見えるかを確認してください。画像が見えない場合に、すぐに役立つ代替テキストがどれほどあるかをすぐに理解できます。</p> + +<div class="note"> +<p><strong>メモ</strong>: 詳細については、<a href="/ja/docs/Learn/Accessibility/HTML#Text_alternatives">代替テキストのガイド</a>を参照してください。</p> +</div> + +<h3 id="Width_and_height" name="Width_and_height">幅と高さ</h3> + +<p><code>width</code> 属性と <code>height</code> 属性を使用して、画像の幅と高さを指定することができます。画像の幅と高さはさまざまな方法で確認できます。たとえば Mac では、<kbd>Cmd</kbd> + <kbd>I</kbd> を使用して画像ファイルの情報を表示することができます。例に戻ると、これをこのように行うことができます。</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg" + alt="恐竜の骨格の頭と胴体、 + それは長い鋭い歯を持つ大きな頭を持っています" + width="400" + height="341"></pre> + +<p>これは、通常の状況下では表示が大きく異なるものではありません。しかし、画像が表示されていない場合、たとえば、ユーザがページに移動して画像がまだ読み込まれていない場合、ブラウザには画像が表示されるスペースが残ります。</p> + +<p><img alt="恐竜の代替テキストを含む Images in HTML タイトルは、幅と高さの設定の結果として大きなボックスの内側に表示されます" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>これは良いことです。その結果、ページの読み込みがより迅速かつスムーズに行われます。</p> + +<p>ただし、HTML 属性を使用して画像のサイズを変更しないでください。画像のサイズを大きくしすぎると、ざらついて、ぼやけた画像になり、小さくしすぎると、帯域幅を無駄にしてユーザのニーズに合わない画像をダウンロードすることになります。正しい<a href="https://ja.wikipedia.org/wiki/アスペクト比">アスペクト比</a>を維持しないと、画像が歪んで見えることもあります。画像エディタを使用して画像を正しいサイズにしてから、Webページに配置する必要があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: 画像のサイズを変更する必要がある場合は、代わりに <a href="/ja/docs/Learn/CSS">CSS</a> を使用する必要があります。</p> +</div> + +<h3 id="Image_titles" name="Image_titles">画像のタイトル</h3> + +<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_the_title_attribute">リンク</a>と同様に、画像に <code>title</code> 属性を追加して、必要に応じてさらにサポート情報を提供することもできます。この例では、これを行うことができます。</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg" + alt="恐竜の骨格の頭と胴体、 + それは長い鋭い歯を持つ大きな頭を持っています" + width="400" + height="341" + title="<span id="result_box" lang="ja"><span>マンチェスター大学博物館に展示されている T-Rex</span></span>"></pre> + +<p>これは、リンクのタイトルと同様に、マウスのホバーによるツールチップを提供します。</p> + +<p><img alt="恐竜の画像に、A T-Rex on display at the Manchester University Museumというツールチップのタイトルが表示されます" src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> + +<p>しかし、これは推奨されていません — <code>title</code> には多くのアクセシビリティ上の問題があります。主に、スクリーンリーダーのサポートは予測不可能で、マウスを使用していない限り、ほとんどのブラウザーでは表示されません(例えば、キーボード ユーザ)。このことについてもっと知りたい場合は、Scott O'Hara の<a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/">タイトル属性の試行錯誤</a> (英語) をお読みください。</p> + +<p>画像に添付するのではなく、メインの記事のテキストにそのようなサポート情報を含める方が良いでしょう。</p> + +<h3 id="Active_learning_embedding_an_image" name="Active_learning_embedding_an_image">アクティブラーニング: 画像の埋め込み</h3> + +<p>今度はあなたの番です! この能動的学習セクションでは、あなたに簡単な埋め込み練習をさせていただきます。基本的な {{htmlelement("img")}} タグが提供されています。次の URL の画像を埋め込むようにしてください。</p> + +<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> + +<p>以前は他のサーバ上の画像に絶対にホットリンクしないように言っていましたが、これは単なる学習目的のためのものです。</p> + +<p>また、次のこともします。</p> + +<ul> + <li>代替テキストを追加し、画像 URL のスペルを間違えて機能することを確認します。</li> + <li>画像の正しい <code>width</code> と <code>height</code> (ヒント: 幅200ピクセル、高さ171ピクセル) を設定し、他の値を試してその効果を確認します。</li> + <li>画像に <code>title</code> を設定します。</li> +</ul> + +<p>間違えた場合は、[Reset] ボタンを使用してリセットすることができます。あなたが本当に立ち往生した場合は、[Show solution] ボタンを押して答えを表示してください。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +<img> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Annotating_images_with_figures_and_figure_captions" name="Annotating_images_with_figures_and_figure_captions">図表と図表のキャプションで画像に注釈を付ける</h2> + +<p>キャプションといえば、画像に付けるキャプションを追加する方法はいくつかあります。たとえば、これをやめさせることは何もありません。</p> + +<pre class="brush: html"><div class="figure"> + <img src="images/dinosaur.jpg" + alt="恐竜の骨格の頭と胴体、 + それは長い鋭い歯を持つ大きな頭を持っています" + width="400" + height="341"> + + <p>マンチェスター大学博物館に展示されている T-Rex。</p> +</div></pre> + +<p>これで結構です。それはあなたが必要とするコンテンツを含んでおり、CSS を使って素敵に書式設定できます。しかし、ここに問題があります。画像をキャプションに意味的にリンクするものは何もありません。スクリーンリーダーにとっては問題を引き起こす可能性があります。たとえば、50個の画像とキャプションがある場合、どのキャプションにどの画像が表示されますか?</p> + +<p>より良い解決策は、HTML5 の {{htmlelement("figure")}} と {{htmlelement("figcaption")}} 要素を使用することです。図表のための意味的なコンテナを提供し、図表をキャプションに明確にリンクさせること。これはまさにこの目的のために作成されたものです。上記の例は次のように書き直すことができます。</p> + +<pre><figure> + <img src="images/dinosaur.jpg" + alt="恐竜の骨格の頭と胴体、 + それは長い鋭い歯を持つ大きな頭を持っています" + width="400" + height="341"> + + <figcaption>マンチェスター大学博物館に展示されている T-Rex。</figcaption> +</figure></pre> + +<p>{{htmlelement("figcaption")}} 要素は、キャプションが {{htmlelement("figure")}} 要素の他のコンテンツを説明していることをブラウザと支援技術に伝えます。</p> + +<div class="note"> +<p><strong>メモ</strong>: アクセシビリティの観点から、キャプションと {{htmlattrxref('alt','img')}} テキストには明確な役割があります。キャプションは画像を見ることができる人にも利益をもたらしますが、代替テキストは欠けている画像と同じ機能を提供します。したがって、キャプションと代替テキストは、画像がなくなったときに両方が表示されるため、同じことを言うべきではありません。ブラウザで画像をオフにして見た目を確認してみてください。</p> +</div> + +<p>図表は画像である必要はありません。それは次のようにコンテンツの独立した単位です。</p> + +<ul> + <li>あなたの趣旨をコンパクトでわかりやすく表現します。</li> + <li>ページの直線的な流れのいくつかの場所に入ることができます。</li> + <li>メインテキストをサポートするための重要な情報を提供します。</li> +</ul> + +<p>図表は、いくつかの画像、コードスニペット、音声、動画、方程式、表、または何か他のものであってもよい。</p> + +<h3 id="Active_learning_creating_a_figure" name="Active_learning_creating_a_figure">アクティブラーニング: 図表の作成</h3> + +<p>この能動的学習セクションでは、以前の能動的学習セクションで完成したコードを図表にします。</p> + +<ul> + <li>{{htmlelement("figure")}} 要素でラップします。</li> + <li>テキストを <code>title</code> 属性からコピーし、<code>title</code> 属性を削除し、テキストを画像の下の {{htmlelement("figcaption")}} 要素の中に置きます。</li> +</ul> + +<p>間違えた場合は、[Reset] ボタンを使用してリセットすることができます。あなたが本当に立ち往生した場合は、[Show solution] ボタンを押して答えを表示してください。</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + + + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + + + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + + + + +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="CSS_background_images" name="CSS_background_images">CSS 背景画像</h2> + +<p>また、CSS を使用して画像をWebページに埋め込むこともできます(JavaScriptでもできますが、それはまったく別の話です)。CSS の {{cssxref("background-image")}} プロパティとその他の <code>background-*</code> プロパティは、背景画像の配置を制御するために使用されます。たとえば、ページ上の各段落に背景画像を配置するには、次のようにします。</p> + +<pre class="brush: css">p { + background-image: url("images/dinosaur.jpg"); +}</pre> + +<p>結果として得られる埋め込み画像は、HTML 画像よりも位置付けと制御が容易であることは間違いありません。それでは、なぜ HTML 画像を気にするのですか? 上記のとおり、CSS 背景画像は装飾用です。ビジュアルを向上させるためにページに何かを追加したいだけなら、これは問題ありません。しかし、そのような画像には意味論的な意味は全くありません。同等のテキストを持つことはできず、スクリーンリーダーには見えません。これは HTML 画像の輝く時です!</p> + +<p><strong>要約</strong>: 画像に意味がある場合は、コンテンツに関して、HTML 画像を使用する必要があります。画像が純粋に装飾である場合は、CSS 背景画像を使用する必要があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS 背景画像</a>については、<a href="/ja/docs/Learn/CSS">CSS</a> のトピックで詳しく説明します。</p> +</div> + +<p>それは今のところすべてです。画像とキャプションを詳細にカバーしています。次の記事では、HTML を使用してWebページに動画と音声を埋め込む方法を見ていきます。</p> + +<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Web にベクターグラフィックスを追加する</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li> +</ul> 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 +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">このコースではここまで多くのテキストを見てきましたが、ただテキストだけのWebでは面白くありません。Web が生き生きとして、面白いコンテンツがどんどんあふれるようにする方法を見ていきましょう！ このモジュールでは、HTMLをどのように用いれば、あなたの Web ページにマルチメディアを含めることができるかについて学びます。 また、画像を挿入するためのさまざまな方法や、動画・音声、さらには他の Web ページ全体を挿入する方法についても触れます。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを開始する前に、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML入門</a>で述べられてきた、HTML の基本についてのある程度の知識が求められます。 このモジュール (や似たようなもの) を一通り終えていない場合、まずそちらを一通り終えてから戻ってきてください！</p> + +<div class="note"> +<p><strong>メモ</strong>: 自分自身のファイルを作れないコンピューター/タブレット/その他デバイスで作業している場合、<a href="https://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインコーティングプログラムにてコードの実例 (の大半) を試すことができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<p>このモジュールには下記の記事が含まれていて、そこではマルチメディアをWeb ページに埋め込むための基礎を学びます。</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTMLの画像</a></dt> + <dd>考慮すべき他のタイプのマルチメディアもありますが、単純な画像をWeb ページに埋め込むために使用される、慎ましい {{htmlelement("img")}} 要素から始めるのが理にかなっています。 この記事では、基本的な使い方を含め、 {{htmlelement("figure")}} を使ったキャプションによる注釈付け、CSS背景画像との関連の仕方など、画像をより深く使用する方法を見ていきます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></dt> + <dd>次に、HTML5の {{htmlelement("video")}} 要素と {{htmlelement("audio")}} 要素を使用して、動画や音声をページに埋め込む方法を見ていきます。 それには、基本的な使い方を含め、さまざまなファイルフォーマットへのアクセスをさまざまなブラウザーに提供したり、キャプションや字幕の追加、古いブラウザーへの代替の追加などが含まれています。</dd> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></dt> + <dd>この時点では、{{htmlelement("iframe")}} 、{{htmlelement("embed")}}、{{htmlelement("object")}} 要素のような幅広い種類のコンテンツをWeb ページに埋め込むことができる要素をいくつか見ていきたいと考えています。 <code><iframe></code> は他のWeb ページを埋め込むためのもので、他の2つは PDF、SVG、さらには Flash を埋め込むことができます — 出口にある技術ですが、まだ半定期的に見かけるでしょう。</dd> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Webにベクターグラフィックスを追加する</a></dt> + <dd>ベクターグラフィックスは、特定の状況で非常に便利です。 PNG や JPG のような通常のフォーマットとは異なり、ズームインしてもゆがんだりピクセル化したりしません — 縮尺を変えても滑らかな状態を保つことができます。 この記事では、ベクターグラフィックスの概要と、ポピュラーな {{glossary("SVG")}} フォーマットをWeb ページに含める方法を紹介します。</dd> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></dt> + <dd>携帯電話からデスクトップコンピュータに至るまで、Webを閲覧できるようになったさまざまな種類のデバイスで、現代のWeb世界を習得するために不可欠な概念は、レスポンシブデザインです。 これは、さまざまな画面サイズ、解像度などに合わせて機能を自動的に変更できるWeb ページの作成を指します。 これについては、後ほどCSSモジュールで詳しく見ていく予定ですが、ここでは、HTMLで {{htmlelement("picture")}} 要素を含むレスポンシブ画像を作成するためのツールを見ていきます。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価試験</h2> + +<p>上記のガイドで説明されている HTML の基本について、以下の評価試験を行います。</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozillaのスプラッシュページ</a></dt> + <dd>今回の評価試験では、このモジュールの記事で説明したいくつかの技術の知識をテストするために、Mozillaのすべてついてのファンキーなスプラッシュページに、いくつかの画像と動画を追加してもらいます！</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">画像の上にヒットマップを追加する</a></dt> + <dd>イメージマップは、画像のさまざまな部分を別の場所にリンクするためのメカニズムを提供します(あなたがクリックしたそれぞれの国についての詳細情報にリンクしている地図を考えてみてください)。 この手法は時には便利なことがあります。</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Webリテラシーの基礎 2</a> (英語)</dt> + <dd>優れたMozillaの基礎コースで、マルチメディアと埋め込みモジュールで説明されているスキルのいくつかを調べてテストします。 Web ページの作成、アクセシビリティの設計、リソースの共有、オンラインメディアの使用、オープンな作業 (コンテンツは自由に利用可能で、他の人が共有できることを意味します) の基礎を深く理解してください。</dd> +</dl> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">今回の評価試験では、このモジュールの記事で説明したいくつかの技術の知識をテストするために、Mozilla のすべてついてのファンキーなスプラッシュページに、いくつかの画像と動画を追加してもらいます！</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>この評価試験を試す前に、残りの<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアとその埋め込み方</a>のモジュールに既に取り組んでいる必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ウェブページに画像と動画を埋め込むこと、フレーム、および HTML レスポンシブ画像技術に関する知識をテストすること。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">出発点</h2> + +<p>この評価試験を開始するには、github の <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a> ディレクトリにある HTML とすべての画像を取得する必要があります。 <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> の内容をローカルドライブの新しいディレクトリの <code>index.html</code> というファイルに保存します。 それから、<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> を同じディレクトリに保存します（画像を右クリックして保存するオプションを選びます）。</p> + +<p><a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> ディレクトリの別の画像にアクセスし、同じ方法で保存します。 あなたはそれらを使用する準備が整う前に、グラフィックスエディタを使って（それらのいくつかを）操作する必要があるので、今は別のディレクトリに保存する必要があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: 例の HTML ファイルには、ページのスタイルを設定するための CSS がかなり多く含まれています。 {{htmlelement("body")}} 要素内の HTML だけで、CSS に触れる必要はありません — 正しいマークアップを挿入する限り、スタイリングは正しく表示されます。</p> +</div> + +<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2> + +<p>今回の評価試験では、ほとんど完成した Mozilla のスプラッシュページを紹介しています。 これは、Mozilla が何を意味しているかについて、何か素敵で興味深いことを言い、さらなるリソースへのリンクを提供することを目的としています。 残念ながら、画像や動画はまだ追加されていません — これがあなたの仕事です！ ページの見栄えを良くし、もっと理にかなったものにするために、いくつかのメディアを追加する必要があります。 次のサブセクションでは、実行する必要があることを詳しく説明します。</p> + +<h3 id="Preparing_images" name="Preparing_images">画像の準備</h3> + +<p>お気に入りの画像エディタを使用して、次のものから 400px 幅と 120px 幅のバージョンを作成します。</p> + +<ul> + <li><code>firefox_logo-only_RGB.png</code></li> + <li><code>firefox-addons.jpg</code></li> + <li><code>mozilla-dinosaur-head.png</code></li> +</ul> + +<p>たとえば、<code>firefoxlogo400.png</code> と <code>firefoxlogo120.png</code> のように、それらを判りやすい名前にしてください。</p> + +<p><code>mdn.svg</code> に加えて、これらの画像は、<code>further-info</code> 領域内のさらなるリソースにリンクするアイコンになります。 また、サイトヘッダーの firefox ロゴにもリンクします。 これらすべてのコピーを <code>index.html</code> と同じディレクトリに保存します。</p> + +<p>次に、<code>red-panda.jpg</code> の 1200 ピクセル幅のランドスケープバージョンと、パンダをより近くに見せてくれる 600 ピクセル幅のポートレートバージョンを作成します。 繰り返しますが、それらを簡単に識別できるように、判りやすい名前にしてください。 これらの両方のコピーを <code>index.html</code> と同じディレクトリに保存します。</p> + +<div class="note"> +<p><strong>メモ</strong>: JPG 画像と PNG 画像を最適化して、できるだけ小さくして、それでも見栄えを良くしてください。 <a href="https://tinypng.com/">tinypng.com</a> は簡単にこれを行うための素晴らしいサービスです。</p> +</div> + +<h3 id="Adding_a_logo_to_the_header" name="Adding_a_logo_to_the_header">ヘッダーにロゴを追加する</h3> + +<p>{{htmlelement("header")}} 要素の中に、小さなバージョンの Firefox ロゴをヘッダーに埋め込む {{htmlelement("img")}} 要素を追加します。</p> + +<h3 id="Adding_a_video_to_the_main_article_content" name="Adding_a_video_to_the_main_article_content">主要記事のコンテンツに動画を追加する</h3> + +<p>{{htmlelement("article")}} 要素の内側（開始タグのすぐ下）に、 <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a> にある YouTube 動画を適切な YouTube ツールを使用してコードを生成して埋め込みます。 動画の幅は 400 ピクセルです。</p> + +<h3 id="Adding_responsive_images_to_the_further_info_links" name="Adding_responsive_images_to_the_further_info_links">さらなる情報リンクにレスポンシブ画像を追加する</h3> + +<p><code>further-info</code> クラスを持つ {{htmlelement("div")}} の中には、それぞれが興味深い Mozilla 関連のページにリンクする4つの {{htmlelement("a")}} 要素があります。 このセクションを完成させるには、適切な {{htmlattrxref("src", "img")}}、{{htmlattrxref("alt", "img")}}、{{htmlattrxref("srcset", "img")}}、{{htmlattrxref("sizes", "img")}} の各属性を含む {{htmlelement("img")}} 要素をそれぞれの内部に挿入する必要があります。</p> + +<p>いずれの場合でも (1つを除く — どれが本質的にレスポンシブですか？)、ブラウザーにビューポートの幅が 500px 以下の場合は 120px 幅のバージョン、それ以外の場合は 400px 幅のバージョンを提供したい。</p> + +<p>正しい画像と正しいリンクが一致していることを確認してください！</p> + +<div class="note"> +<p><strong>メモ</strong>: <code>srcset</code> と <code>sizes</code> の例を適切にテストするには、サイトをサーバーにアップロードする必要があります (<a href="/ja/docs/Learn/Common_questions/Using_Github_pages">Github ページ</a>を使用するのが簡単で無料の解決策です)。 そして、そこから Firefox の <a href="/ja/docs/Tools/Network_Monitor">Network Monitor</a> などのツールを使用して正しく動作しているかどうかをテストできます。</p> +</div> + +<h3 id="An_art_directed_red_panda" name="An_art_directed_red_panda">アートディレクションされたレッサーパンダ</h3> + +<p><code>red-panda</code> クラスを持つ {{htmlelement("div")}} の中に、ビューポートの幅が 600px 以下の場合は小さなポートレートのパンダ画像を提供する {{htmlelement("picture")}} 要素を挿入し、それ以外の場合は大きなランドスケープ画像を挿入します。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>以下のスクリーンショットは、広い画面と狭い画面で、スプラッシュページが正しくマークアップされた後にどのように見えるかを示しています。</p> + +<p><img alt="サンプルのスプラッシュページの広い画面のショット" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p> + +<p><img alt="サンプルのスプラッシュページの狭い画面のショット" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p> + +<h2 id="Assessment" name="Assessment">評価</h2> + +<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: 評価試験を Chrome ブラウザーのデベロッパーツールで行った場合、「レスポンシブビュー」でどんなに幅を狭く設定しても正しい画像が読み込めないことがあります。これは Chrome の特性のようです。 Firefox ブラウザーは (HTML が正しければ) 正しい画像を読み込みます。</p> +</div> + +<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTMLの画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ウェブにベクターグラフィックスを追加する</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozillaのスプラッシュページ</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{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")}}</div> + +<p class="summary">そろそろ、画像、動画、音声など、ウェブページへの埋め込みのコツがつかめてきたはずです。ここでは、少し横道にそれて、ウェブページに様々な種類のコンテンツを埋め込むことができる要素、 {{htmlelement("iframe")}}、 {{htmlelement("embed")}}、 {{htmlelement("object")}} を見てみたいと思います。 <code><iframe></code> は他のウェブページを埋め込むためのもので、他の2つの要素は PDF、SVG、 さらに Flash — もうすぐなくなる技術ですが、まだ時々見かけるもの — も、埋め込むことができます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされた基本ソフトウェア</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作</a>に関する基本知識、HTML の基礎知識 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML の入門</a>)、およびこのモジュールの前の記事</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>Flash ムービーなどのウェブページのように、{{htmlelement("object")}}、{{htmlelement("embed")}}、{{htmlelement("iframe")}} を使用してアイテムをウェブページに埋め込む方法を学びます。</td> + </tr> + </tbody> +</table> + +<h2 id="A_short_history_of_embedding" name="A_short_history_of_embedding">埋め込みの短い歴史</h2> + +<p>昔、ウェブ上では、<strong>フレーム</strong>を使ってウェブサイトを作るのが一般的でした - ウェブサイトの小さな部分が個々の HTML ページに保存されていました。これらは、<strong>フレームセット</strong>と呼ばれるマスター文書に埋め込まれていました。これにより、テーブルの列と行のサイジングのように、各フレームが埋めた画面上の領域を指定することができました。これらは90年代半ばから後半にかけてのクールさの極みと考えられていました。このような小さな塊に分割されたウェブページを持っているとダウンロード速度が向上したという証拠がありました — 特にネットワーク接続が非常に遅いため、特に顕著です。それらは多くの問題を抱えていましたが、ネットワーク速度がより速くなるにつれて、これ以上の利点はなく、あなたはそれらがもう使用されているのを見ていません。</p> + +<p>ちょっと後で(90年代後半、2000年代初頭)、{{Glossary("Java","Java アプレット")}}や {{Glossary("Adobe_Flash","Flash")}} などのプラグイン技術が普及しました。これにより、ウェブ開発者は動画やアニメーションなどのウェブページに豊富なコンテンツを埋め込むことができました。これらの技術を埋め込むことは、{{htmlelement("object")}} や、あまり使われていない {{htmlelement("embed")}} などの要素によって実現され、当時は非常に便利でした。アクセシビリティ、セキュリティ、ファイルサイズなど、多くの問題が発生して以来、それらは流行していませんでした。最近のモバイルデバイスのほとんどは、このようなプラグインをサポートしておらず、デスクトップのサポートは出口にあります。</p> + +<p>最後に、{{htmlelement("iframe")}} 要素が現れました({{htmlelement("canvas")}}、{{htmlelement("video")}} などのコンテンツを埋め込む他の方法と一緒に)。これは、ウェブ文書全体を別のウェブ文書に埋め込む方法を提供し、あたかも {{htmlelement("img")}} か他の要素であるかのように、今日では普通に使用されています。</p> + +<p>歴史の授業を終了して、これらのいくつかの使い方を見てみましょう。</p> + +<h2 id="Active_learning_classic_embedding_uses" name="Active_learning_classic_embedding_uses">アクティブラーニング: 従来の埋め込みを使う</h2> + +<p>この記事では、能動的学習セクションにまっすぐ飛び込んで、埋め込み技術が有用であるかどうかをすぐに知ることができます。オンラインの世界では <a href="https://www.youtube.com">Youtube</a> はとてもよく知られていますが、多くの人は利用可能な共有施設については知らないのです。YouTube が {{htmlelement("iframe")}} を使って好きなページに動画を埋め込むことができる仕組みを見てみましょう。</p> + +<ol> + <li>まず、Youtube へ行き、あなたが好きな動画を見つけてください。</li> + <li>動画の下に [共有] ボタンがあります。これを選択すると、共有オプションが表示されます。</li> + <li>[埋め込む] ボタンを選択すると、<code><iframe></code> コードがいくつか表示されます。これをコピーします。</li> + <li>下の入力ボックスにそれを挿入し、結果が出力にあるかどうかを確認します。</li> +</ol> + +<p>ボーナスポイントとして、例の中に <a href="https://www.google.com/maps/">Google マップ</a>を埋め込むこともできます。</p> + +<ol> + <li>Google マップへ行き、好きな地図を見つけます。</li> + <li>UI の左上にあるハンバーガーメニュー(3本の水平線)をクリックします。</li> + <li>[地図を共有または埋め込む] オプションを選択します。</li> + <li>[地図を埋め込む] オプションを選択します。これは、<code><iframe></code> コードをいくつか提供します。これをコピーします。</li> + <li>下の入力ボックスにそれを挿入し、結果が出力にあるかどうかを確認します。</li> +</ol> + +<p>間違えた場合は、[Reset] ボタンを使用してリセットすることができます。あなたが本当に立ち往生したら、[Show solution] ボタンを押して回答を見てください。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 250px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="width: 95%;min-height: 100px;"> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Iframes_in_detail" name="Iframes_in_detail">iframe の詳細</h2> + +<p>それは簡単で楽しいものでしたか? {{htmlelement("iframe")}} 要素は、他のウェブ文書を現在の文書に埋め込むことができるように設計されています。これは、直接制御できない可能性のある第三者のコンテンツをウェブサイトに組み込むのに適していて、独自のバージョンを実装する必要はありません — オンライン動画プロバイダの動画、<a href="https://disqus.com/">Disqus</a> のようなコメントシステム、オンライン地図プロバイダの地図、広告バナーなど。このコースで使用しているライブ編集可能な例は、<code><iframe></code> を使用して実装されています。</p> + +<p><code><iframe></code> で検討すべき{{anch("Security concerns","セキュリティ上の懸念")}}がいくつかあり、これについては以下で説明しますが、あなたのウェブサイトで使用しないでください — ちょっとした知識と慎重な考えが必要です。コードを少し詳しく見てみましょう。あなたのウェブページの1つに MDN の用語集を含めることを考えていたら、次のようなことを試すことができます。</p> + +<pre class="notranslate"><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></pre> + +<p>この例には、<code><iframe></code> の使用に必要な基本的な要素が含まれています。</p> + +<dl> + <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt> + <dd>設定されている場合、<code><iframe></code> は、 <a href="/ja/docs/Web/API/Fullscreen_API">Full Screen API</a> を使用してフルスクリーンモードにすることができます(この記事の範囲外です)。</dd> + <dt>{{htmlattrxref('frameborder','iframe')}}</dt> + <dd>1 に設定すると、これはブラウザーにこのフレームと他のフレームとの境界を描画するように指示します。これは既定の動作です。0 は境界を取り去ります。{{Glossary('CSS')}} で {{cssxref('border')}}<code>: none;</code> を使用すると、同じ効果がより良く達成できるので、この属性を使用することはもうお勧めできません。</dd> + <dt>{{htmlattrxref('src','iframe')}}</dt> + <dd>この属性は、{{htmlelement("video")}} や {{htmlelement("img")}} と同様に、埋め込む文書の URL を指すパスを含んでいます。</dd> + <dt>{{htmlattrxref('width','iframe')}} と {{htmlattrxref('height','iframe')}}</dt> + <dd>これらの属性は、iframe の幅と高さを指定します。</dd> + <dt>代替コンテンツ</dt> + <dd>{{htmlelement("video")}} のような他の要素と同じように、 <code><iframe></code> と <code></iframe></code> のタグの間に、ブラウザーが <code><iframe></code> をサポートしていない場合に表示される代替コンテンツを含めることができます。この場合、代わりにページへのリンクが含まれています。最近では、<code><iframe></code> をサポートしていないブラウザーを見つけることはまずありません。</dd> + <dt>{{htmlattrxref('sandbox','iframe')}}</dt> + <dd>この属性は、他の <code><iframe></code> の機能よりも若干現代的なブラウザー(たとえば、IE 10 以上)で機能し、高度なセキュリティ設定を要求します。これについては、次のセクションで詳しく説明します。</dd> +</dl> + +<div class="note"> +<p><strong>メモ</strong>: 速度を向上させるためには、メインコンテンツの読み込みが完了した後に iframe の <code>src</code> 属性を JavaScript で設定することをお勧めします。これにより、ページがより早く使用できるようになり、公式ページの読み込み時間が短縮されます(重要な {{glossary("SEO")}} の測定基準)。</p> +</div> + +<h3 id="Security_concerns" name="Security_concerns">セキュリティ上の懸念</h3> + +<p>上ではセキュリティ上の懸念について言及しました。これについてもう少し詳しく説明しましょう。あなたはこのコンテンツのすべてを初めから完全に理解することを期待していません。この懸念を認識して、より経験豊かになり、あなたの実験や作業で <code><iframe></code> の使用を検討し始める参考にしてください。また、恐怖を感じ、<code><iframe></code> を使わない必要はありません — 注意するだけです。</p> + +<p>ブラウザーメーカーやウェブ開発者は、iframe がウェブ上の悪意ある人物(しばしば<strong>ハッカー</strong>、またはより正確には<strong>クラッカー</strong>と呼ばれます)の共通のターゲット(公式の用語: <strong>攻撃ベクター</strong>)であるということを苦労して学びました。悪意ある人物は、あなたのウェブページを悪意を持って改ざんすることや、ユーザ名やパスワードなどの機密情報を明らかにするなど、人を騙し望んでいないことを行います。このため、仕様技術者とブラウザー開発者は、<code><iframe></code> をより安全にするためのさまざまなセキュリティ・メカニズムを開発しました。また、考慮すべき最善の措置もあります — これらのいくつかを以下で説明します。</p> + +<div class="note"> +<p>{{interwiki('wikipedia','クリックジャッキング')}}は、ハッカーが目に見えない iframe をあなたの文書に埋め込んだり(あなたの文書を自分の悪意のあるウェブサイトに埋め込んだり)して、ユーザの操作を乗っ取るための一般的な iframe 攻撃の一種です。これは、ユーザを誤解させたり機密データを盗む一般的な方法です。</p> +</div> + +<p>簡単な例ですが、先ほど紹介した例をブラウザーに読み込んでみましょう。Github に<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">ライブ</a>が公開されています(<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">ソースコード</a>も参照してください)。実際にページに何も表示されませんが、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者ツール</a>のコンソールに、理由を示すメッセージが表示されます。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 を作成した開発者が、<code><iframe></code> 内に埋め込まれないようにウェブサイトのページを提供する設定をサーバーに組み込んだためです(下記の {{anch("Configure CSP directives","CSP ディレクティブの設定")}}を参照してください)。これは、理にかなっています — あなたのサイトにそれらを埋め込んであなた自身のものと主張するようなことをしない限り、MDN のページ全体が他のページに埋め込まれるのは本当に意味がありません — または、クリックジャッキングを介してデータを盗み出そうとする。どちらも本当に悪いことです。さらに、誰もがこれをやり始めたら、すべての追加の帯域幅が Mozilla に多額の費用をかけるようになります。</p> + +<h4 id="Only_embed_when_necessary" name="Only_embed_when_necessary">必要なときにのみ埋め込みます</h4> + +<p>場合によっては、第三者のコンテンツを埋め込むことが理にかなっています — youtube 動画や地図のようなものですが、完全に必要なときに第三者のコンテンツだけを埋め込むのであれば、頭を悩ますことはありません。ウェブセキュリティのための良い経験則は、「慎重すぎることは決してありません。もしあなたがそれを作ったら、とにかくそれをもう一度チェックしてください。他の誰かがそれを作ったら、そうでないと証明されるまでそれは危険です。」ということです。</p> + +<div> +<p>セキュリティのほかに、知的財産の問題にも注意する必要があります。ほとんどのコンテンツは著作権で保護されており、オフラインでもオンラインでも、予期していないコンテンツ(例えば、<a href="https://commons.wikimedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8?uselang=ja">ウィキメディアコモンズ</a>のほとんどの画像)でさえもあります。あなたが所有しているか、または所有者があなたに書面による明白な許可を与えていない限り、ウェブページにコンテンツを表示しないでください。著作権侵害に対する罰則は厳しいものです。繰り返しますが、決して慎重すぎることはありません。</p> + +<p>コンテンツにライセンスが付与されている場合は、ライセンス条項に従わなければなりません。たとえば、MDN のコンテンツは <a href="/ja/docs/MDN/About#Copyrights_and_licenses">CC-BY-SA でライセンス</a>されています。つまり、コンテンツを大幅に変更した場合でも、コンテンツを引用する際には、<a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">適切にクレジットを表示する</a>(英語)必要があります。</p> +</div> + +<h4 id="Use_HTTPS" name="Use_HTTPS">HTTPS を使用する</h4> + +<p>{{Glossary("HTTPS")}} は {{Glossary("HTTP")}} の暗号化されたバージョンです。可能であれば、HTTPS を使用してウェブサイトを提供する必要があります。</p> + +<ol> + <li>HTTPS を使用すると、転送中にリモートコンテンツが改ざんされる可能性が減り、</li> + <li>HTTPS は、埋め込みコンテンツが親文書内のコンテンツにアクセスすることを防止し、逆も同様です。</li> +</ol> + +<p>HTTPS を使用するには、高価なセキュリティ証明書が必要です(ただし、<a href="https://letsencrypt.org/">Let's Encrypt</a> で簡単にできます) — 入手できない場合は、親文書を HTTP で配信できます。しかし、上記の HTTPS の2つ目の利点のため、コストにかかわらず、第三者のコンテンツを HTTP に埋め込むことは絶対にしないでください(最良の場合のシナリオでは、ユーザのウェブブラウザーは恐ろしい警告を表示します)。<code><iframe></code> を使用してコンテンツを埋め込むことができる評判の良い企業はすべて、HTTPS 経由で利用できるようになります — たとえば、Google マップや YouTube からコンテンツを埋め込む場合は、<code><iframe></code> の <code>src</code> 属性内の URL を調べます。</p> + +<div class="note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Learn/Common_questions/Using_Github_pages">Github のページ</a>では、既定で HTTPS 経由でコンテンツを提供できるため、コンテンツのホスティングに便利です。異なるホスティングを使用していて、わからない場合は、ホスティングプロバイダに問い合わせてください。</p> +</div> + +<h4 id="Always_use_the_sandbox_attribute" name="Always_use_the_sandbox_attribute">常に <code>sandbox</code> 属性を使用する</h4> + +<p>攻撃者には、あなたのウェブサイトで悪いことを行うことができるような力を与えたくないので、埋め込みコンテンツには、その仕事を行うために必要な権限のみを与えるべきです。もちろん、これは自分のコンテンツにも当てはまります。適切に(またはテスト用に)使用できるが、コードベースの残りの部分に何らかの害(偶発的または悪意のある)を及ぼすことができないコード用のコンテナは、<a href="https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%B3%E3%83%89%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9_(%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3)">サンドボックス</a>と呼ばれます。</p> + +<p>サンドボックスにないコンテンツはあまりにも多くのことを行うことができます( JavaScript の実行、フォームの送信、ポップアップウィンドウなど)。既定では、前述の例に示すように、パラメーターなしの <code>sandbox</code> 属性を使用して、使用可能なすべての制限を課す必要があります。</p> + +<p>絶対に必要な場合は、権限を1つずつ追加することができます(<code>sandbox=""</code> 属性値内に) — 使用可能なすべてのオプションについては、{{htmlattrxref('sandbox','iframe')}} のリファレンスのエントリを参照してください。重要な注意点の1つは、 <code>sandbox</code> 属性に <code>allow-scripts</code> と <code>allow-same-origin</code> の両方を追加しないことです。この場合、埋め込みコンテンツは、サイトのスクリプトの実行を停止する同一オリジン・セキュリティポリシーをバイパスし、JavaScript を使用してサンドボックスを完全に無効にします。</p> + +<div class="note"> +<p><strong>メモ</strong>: 攻撃者が欺いて悪意のあるコンテンツ(iframe 外にある)を直接訪問させることができれば、サンドボックスは保護を提供しません。特定のコンテンツが悪意のあるコンテンツ(ユーザ生成コンテンツなど)である可能性がある場合は、別の{{glossary("domain","ドメイン")}}からメインサイトへ配信してください。</p> +</div> + +<h4 id="Configure_CSP_directives" name="Configure_CSP_directives">CSP ディレクティブの設定</h4> + +<p>{{Glossary("CSP")}} は<strong><a href="/ja/docs/Web/Security/CSP">コンテンツセキュリティポリシー</a></strong>の略で、HTML 文書のセキュリティを強化するために設計された<a href="/ja/docs/Web/Security/CSP/CSP_policy_directives">一連の HTTP ヘッダー</a>(ウェブサーバーから配信されたときにウェブページとともに送信されるメタデータ)を提供します。<code><iframe></code> を保護する場合、<a href="/ja/docs/Web/HTTP/X-Frame-Options">適切な X-Frame-Options ヘッダーを送信するようにサーバーを構成</a>できます。これにより、他のウェブサイトがそのウェブページにあなたのコンテンツを埋め込むのを防ぐことができます({{interwiki('wikipedia','クリックジャッキング')}}や他の攻撃のホストを可能にする)。以前に見たように、これはまさに MDN 開発者が行ったことです。</p> + +<div class="note"> +<p><strong>メモ</strong>: Frederik Braun 氏の投稿 <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">X-Frame-Options セキュリティヘッダーについて</a>(英語)で、このトピックの背景情報を読むことができます。明らかに、これは、この記事の詳述の範囲外です。</p> +</div> + +<h2 id="The_<embed>_and_<object>_elements" name="The_<embed>_and_<object>_elements"><embed> 要素と <object> 要素</h2> + +<p>{{htmlelement("embed")}} 要素と {{htmlelement("object")}} 要素は、{{htmlelement("iframe")}} とは異なる機能を果たします。これらの要素は、Java アプレットや Flash などのプラグイン技術、PDF(ブラウザーで PDF プラグインを使用して表示できる)、動画、SVG、画像などのコンテンツを含む、複数のタイプの外部コンテンツを埋め込む汎用埋め込みツールです!</p> + +<div class="note"> +<p><strong>メモ</strong>: <strong>プラグイン</strong>は、ブラウザーがネイティブに読むことができないコンテンツへのアクセスを提供するソフトウェアです。</p> +</div> + +<p>しかし、あなたはこれらの要素を大いに利用することはまずありません。アプレットは何年も使われておらず、Flash は多くの理由から人気がなくなりました (下記の{{anch("The case against plugins","プラグインに対するケース")}}を参照)。PDF は埋め込まれたものよりもリンクされている傾向があり、画像や動画などの他のコンテンツには、それらを扱うためのずっと優れた、より簡単な要素があります。プラグインとこれらの埋め込み方法は、従来の技術ですが、イントラネットやエンタープライズプロジェクトのような特定の状況でそれらを見かけた場合に備えて言及しています。</p> + +<p>プラグインのコンテンツを埋め込む必要がある場合の最低限必要な情報です。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col">{{htmlelement("embed")}}</th> + <th scope="col">{{htmlelement("object")}}</th> + </tr> + </thead> + <tbody> + <tr> + <td>埋め込みコンテンツの {{glossary("URL")}}</td> + <td>{{htmlattrxref('src','embed')}}</td> + <td>{{htmlattrxref('data','object')}}</td> + </tr> + <tr> + <td>埋め込みコンテンツの正確な{{glossary("MIME type", 'メディアタイプ')}}</td> + <td>{{htmlattrxref('type','embed')}}</td> + <td>{{htmlattrxref('type','object')}}</td> + </tr> + <tr> + <td>プラグインによって制御されるボックスの高さと幅 (CSS ピクセル単位)</td> + <td>{{htmlattrxref('height','embed')}}<br> + {{htmlattrxref('width','embed')}}</td> + <td>{{htmlattrxref('height','object')}}<br> + {{htmlattrxref('width','object')}}</td> + </tr> + <tr> + <td>プラグインにパラメータとして供給するための名前と値</td> + <td>それらの名前と値を持つ特別な属性</td> + <td><code><object></code> 内に含まれる単一タグの {{htmlelement("param")}} 要素</td> + </tr> + <tr> + <td>利用不可能なリソースに対する代替として独立した HTML コンテンツ</td> + <td>サポートされていません(<code><noembed></code> は廃止されました)</td> + <td><code><object></code> 内の、<code><param></code> 要素の後に含まれる</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: <code><object></code> には、<code>data</code> 属性、<code>type</code> 属性、またはその両方が必要です。両方を使用する場合は、{{htmlattrxref('typemustmatch','object')}} 属性を使用することもできます(この記事の執筆時点では、Firefox でのみ実装されています)。<code>typemustmatch</code> は、<code>type</code> 属性が正しいメディアタイプを提供していない限り、埋め込みファイルが実行されないようにします。<code>typemustmatch</code> は、異なる{{glossary("origin","オリジン")}}のコンテンツを埋め込んでいる場合に、大きなセキュリティ上の利点をもたらすことができます(攻撃者がプラグインを介して任意のスクリプトを実行することを防ぐことができます)。</p> +</div> + +<p>次に、{{htmlelement("embed")}} 要素を使用して Flash ムービーを埋め込む例を示します(Github で<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">ライブ</a>を見て、<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">ソースコード</a>も確認してください)。</p> + +<pre class="brush: html notranslate"><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"></pre> + +<p>かなり恐ろしいですね。Adobe Flash ツールで生成された HTML は、<code><embed></code> 要素が埋め込まれた <code><object></code> 要素を使用して、すべてのベースをカバーするために悪化する傾向がありました(例を参照してください)。Flash は、HTML5 動画の代替コンテンツとしても使用されていましたが、これは必要ではないと見られています。</p> + +<p>次に、PDF をページに埋め込む <code><object></code> の例を見てみましょう(<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">ライブ</a>のサンプルと<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">ソースコード</a>を参照)。</p> + +<pre class="brush: html notranslate"><object data="mypdf.pdf" type="application/pdf" + width="800" height="1200" typemustmatch> + <p>PDF プラグインはありませんが、 + <a href="mypdf.pdf">PDF ファイルをダウンロードできます。 + </a> + </p> +</object></pre> + +<p>PDF は紙とデジタルの間の必要な足がかりでしたが、多くの<a href="http://webaim.org/techniques/acrobat/acrobat">アクセシビリティ上の課題</a>(英語)があり、小さな画面では読みにくい場合があります。それらはまだいくつかのサークルで人気がある傾向がありますが、ウェブページに埋め込むのではなく、ダウンロードしたり、別のページで読むことができるように、リンクする方がはるかに優れています。</p> + +<h3 id="The_case_against_plugins" name="The_case_against_plugins">プラグインに対するケース</h3> + +<p>かつて、プラグインはウェブ上で不可欠でした。映画をオンラインで見るために Adobe Flash Player をインストールしなければならない時代を覚えていますか? そして、常に Flash Player と Java Runtime Environment のアップデートに関する迷惑な警告を受けていました。ウェブ技術はこれまでより堅牢に成長し、その時代は終わりを告げています。ほとんどのアプリケーションでは、プラグインに依存するコンテンツの配信をやめ、代わりにウェブテクノロジを活用し始めてください。</p> + +<ul> + <li><strong>すべての人にあなたの手を広げる</strong>。誰もがブラウザーを持っていますが、プラグインはますます稀になっています(特にモバイルユーザの場合)。ウェブはプラグインなしで大部分が使えるので、プラグインをインストールするよりもむしろ競争相手のウェブサイトに行くだけです。</li> + <li><strong>Flash や他のプラグインに付属している<a href="http://webaim.org/techniques/flash/">余分なアクセシビリティの頭痛</a>(英語)から逃れてください。</strong></li> + <li><strong>さらなるセキュリティ上の危険から逃れてください</strong>。無数のパッチの後でさえ、Adobe Flash は<a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">安全ではないことが知られています</a>(英語)。Facebook の最高セキュリティ責任者である Alex Stamos は、2015年に <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">Adobe が Flash を打ち切るよう依頼しました</a>(英語)。</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> その固有の問題点と Flash のサポート不足により、 Adobe は2020年末に Flash のサポートを終了すると発表しました。 2020年1月の時点で、ほとんどのブラウザーは既定で Flash コンテンツをブロックしており、2020年12月31日までにはすべてのブラウザーで Flash 機能が完全に削除されます。それ以降は、既存の Flash コンテンツにアクセスできなくなります。</p> +</div> + +<p>だから何をすべきか? 双方向性が必要な場合、HTML と {{glossary("JavaScript")}} は、Java アプレットや旧式の ActiveX/BHO 技術を必要とせずに、簡単に仕事を完了させることができます。Adobe Flash に頼る代わりに、メディアの要求に合わせて <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">HTML5 動画</a>、ベクターグラフィックスに <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">SVG</a>、複雑な画像やアニメーションに <a href="/ja/docs/Web/Guide/HTML/Canvas_tutorial">Canvas</a> を使用することができます。<a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst は、数年前にすでに、Adobe Flash が特殊なゲームやビジネスアプリケーションを除いて、仕事のための適切なツールではないことを書いていました</a>(英語)。ActiveX に関しては、Microsoft の {{glossary("Microsoft Edge","Edge")}} ブラウザーでさえサポートされなくなりました。</p> + +<h2 id="Test_your_skills!" name="Test_your_skills!">スキルをテストしよう</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストをいくつか見つけることができます — <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding">マルチメディアと埋め込みのスキルのテスト</a>を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>ウェブ文書に他のコンテンツを埋め込むという話題は、すぐに非常に複雑になる可能性があるので、関連する技術のより高度な機能のいくつかを示唆しながらも、すぐに関連すると思われる単純で使い慣れた方法で紹介しようとしました。まず、あなたのページに地図や動画などの第三者のコンテンツを含めること以外に埋め込みを使用する可能性は低いです。しかし、経験が増すにつれて、より多くの用途を見つけることになるでしょう。</p> + +<p>ここで説明したもの以外にも、外部コンテンツの埋め込みを含む他の多くの技術があります。以前の記事では {{htmlelement("video")}}、{{htmlelement("audio")}}、{{htmlelement("img")}} などいくつかを見ましたが、JavaScript で生成された 2D および 3D グラフィックスの場合は {{htmlelement("canvas")}}、ベクターグラフィックスを埋め込む場合は {{SVGElement("svg")}} など、他にも見い出されるものがあります。モジュールの次の記事では <a href="/ja/docs/Web/SVG">SVG</a> を見ていきます。</p> + +<p>{{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")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ウェブにベクターグラフィックスを追加する</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{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")}}</div> + +<div> +<p class="summary">この記事では、レスポンシブ画像の概念 — 画面サイズ、解像度などの機能が大きく異なる機器で適切に動作する画像 — について学び、 HTML がそれを実装する上でどのような道具を提供しているかを見てみます。 レスポンシブ画像は、レスポンシブウェブデザインの一部にすぎませんが(そしてそれを実現する上で良いステージになりますが)、 <a href="/ja/docs/Learn/CSS">CSS のトピック</a>の将来のモジュールで多くのことを学ぶトピックです。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の基本</a>及び<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">ウェブページに静止画を追加する方法</a>をすでに知っているものとします。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>{{htmlattrxref("srcset", "img")}} や {{htmlelement("picture")}} 要素のような機能を使って、ウェブサイトにレスポンシブ画像を実装する方法を学ぶこと。</td> + </tr> + </tbody> +</table> + +<h2 id="Why_responsive_images" name="Why_responsive_images">なぜレスポンシブ画像なのか？</h2> + +<p>では、レスポンシブ画像でどのような問題を解決しようとしているのでしょうか。 典型的なシナリオを見てみましょう。 典型的なウェブサイトには、おそらく訪問者の印象を良くするためのヘッダー画像と、おそらくその下にはコンテンツ画像がいくつかあります。 おそらく、ヘッダー画像はヘッダーの幅全体にまたがるようにして、コンテンツ画像はコンテンツ列のどこかに合わせたいと思うでしょう。この簡単な例を見てみましょう。</p> + +<p><img alt="広い画面で表示されているサイト例 - ここでは最初の画像はよく、中央で細部まで十分に見えます。" src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p> + +<p>これは、ラップトップやデスクトップなどの広い画面のデバイスではうまく表示できます(<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">ライブを見て</a>、 Github で<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">ソースコード</a>を見ることができます)。 以下の点を除けば CSS については詳しく説明しません。</p> + +<ul> + <li>本文のコンテンツは、最大幅 1200 ピクセルに設定されています。 — その幅を超えるビューポートでは、本体は 1200 ピクセルのままで、利用可能な領域の中で中央に配置されます。それよりも狭いビューポートでは、本文はビューポートの幅の 100％ になります。</li> + <li>ヘッダー画像は、ヘッダーの幅がどのような幅であっても、その中心が常にヘッダーの中央に来るように設定されています。 ですから、サイトがより狭い画面で表示されている場合は、画像の中心にある重要なディテール(人物)が常に見え、両端の余分な部分が失われます。高さは 200 ピクセルです。</li> + <li>コンテンツ画像は、 {{HTMLElement("body")}} 要素が画像より狭くなると、画像があふれるのではなく、常に本文内に収まるように縮小し始めるよう設定されています。</li> +</ul> + +<p>これは問題ありませんが狭い画面のデバイスでサイトを表示するときには問題が発生します。 ヘッダーは正しく見えますが、モバイルデバイスの画面の高さ全体のうち多くの部分を占めるようになってきています。 最初のコンテンツ画像はひどく見えにくくなっています。 この寸法では、中の人物がほとんど見えていません。</p> + +<p><img alt="狭い画面で見たサイト例。最初の画像は細部が分かりにくいところまで縮小しています。" src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p> + +<p>改良点は、サイトを狭い画面で見たときに画像の重要なディティールを表示するため、切り取った画像を表示することです。 第2の切り取られた画像は、タブレットのような中幅の画面のデバイス用に表示することができます。 これは一般的に<strong>アートディレクションの問題</strong>として知られています。</p> + +<p>さらに、小さなモバイル画面で見ている場合、このような大きな画像をページに埋め込む必要はありません。 これは<strong>解像度切り替えの問題</strong>と呼ばれています。 ラスター画像は、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ベクターグラフィックス</a>の所で見たように、幅のピクセルの集まりと、高さのピクセルの集まりです。 小さいラスター画像は、元のサイズよりも大きく表示されていると粒状に見え始めます(ベクターグラフィックスではそうなりません)。</p> + +<p>逆に、意図した大きさよりもはるかに小さい画面に大きな画像を表示する必要はありません。 そうすることで帯域幅を無駄にすることがあります。 特に、モバイルユーザーは、小さな画像がデバイスに表示される時、デスクトップ向けの大きな画像をダウンロードすることによって帯域幅を無駄にしたくありません。 理想的な状況は、複数の解像度が利用可能で、ウェブサイト上のデータにアクセスするデバイスに応じて適切なサイズを提供することです。</p> + +<p>状況をより複雑にしているのが、一部のデバイスは高い解像度の画面を持ち、きれいに表示するには、期待されるよりも大きい画像を必要としていることです。 これは本質的に同じ問題ですが、少し異なる状況のものです。</p> + +<p>ベクター画像はある側面でこれらの問題を解決すると思うかもしれません。 — ファイルサイズが小さくて容易に縮尺変更でき、どこでも利用できるからです。 しかし、すべての種類の画像に適しているわけではありません。 — 単純な図形、パターン、インターフェイス要素などには適していますが、例えば写真のような、ディティールのものをベクターベースの画像で作成すると、とても複雑になります。 JPEG のようなラスター画像形式は、上記の例に見られるような種類の画像により適しています。</p> + +<p>この種の問題は、ウェブが最初に登場したとき、90年代前半から中期の頃には存在しませんでした — ウェブをブラウズする唯一のデバイスはデスクトップとラップトップであったため、ブラウザーの技術者や仕様書の著者は解決策を実装することを考えませんでした。<em> レスポンシブ画像技術</em>は上記のような問題を解決するために最近になって実装され、ブラウザーに様々な画像ファイル、どれも表示するものは同じですが、ピクセル数が異なる様々な画像<em>(解像度の切り替え</em>)、異なる領域の取り方が異なる様々な画像(アートディレクション)を含めることができます。</p> + +<div class="note"> +<p><strong>メモ</strong>: この記事で説明している新機能 — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — は、最近のデスクトップ及びモバイルのブラウザーのすべてが対応しています(Microsoft Edge ブラウザーも含みますが Internet Explorer は含みません)。</p> +</div> + +<h2 id="How_do_you_create_responsive_images" name="How_do_you_create_responsive_images">レスポンシブ画像の作り方</h2> + +<p>この節では、上で説明した二つの問題を踏まえ、 HTML のレスポンシブ機能を使用してそれらを解決する方法を示します。 なお、上記の例のコンテンツエリアに見られるように、この節では HTML の {{htmlelement("img")}} に注目します。 — サイトヘッダーの画像は単なる装飾なので、 CSS 背景画像を使用して実装します。 <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS はおそらく、 HTML よりもレスポンシブデザインのための優れたツールを持っています</a>(英語)ので、これについては将来 CSS のモジュールで説明します。</p> + +<h3 id="Resolution_switching_Different_sizes" name="Resolution_switching_Different_sizes">解像度の切り替え: 様々な寸法</h3> + +<p>それでは、解像度切り替えで解決したい問題は何でしょうか？ 同じ画像コンテンツを、機器に応じて大きくしたり小さくしたりして表示することです。 — これは、例の中の2番目のコンテンツ画像の状況です。 標準的な {{htmlelement("img")}} 要素は、伝統的にブラウザーにソースファイルを一つだけしか指定できません。</p> + +<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="妖精の衣装を着たエルバ"></pre> + +<p>しかし、複数の追加のソース画像と、ブラウザーが正しいものを選択する助けになるヒントを提供することができる、新しい2つの属性 — {{htmlattrxref("srcset", "img")}} 及び {{htmlattrxref("sizes", "img")}} — を使用することができます。 この例は、 Github の <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> で見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">ソースコード</a>も参照してください)。</p> + +<pre class="brush: 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="妖精の衣装を着たエルバ"></pre> + +<p><code>srcset</code> 及び <code>sizes</code> 属性は複雑に見えますが、上記のように属性値のそれぞれの部分を別々の行に書けば、理解することは難しくありません。 それぞれの値にはコンマ区切りのリストが設定されており、それぞれのリストの部分は3つの部分からなっています。 それぞれの中身を見てみましょう。</p> + +<p><strong><code>srcset</code></strong> は、ブラウザーが選択することができる画像のセットと、それぞれの画像の寸法を定義します。 それぞれのコンマの前に書くものは以下の通りです。</p> + +<ol> + <li>画像ファイル名(<code>elva-fairy-480w.jpg</code>)</li> + <li>空白</li> + <li>画像の<strong>本質的な幅のピクセル数</strong>(<code>480w</code>) — なお、これは単位に <code>px</code> ではなく <code>w</code> を使用します。 これは画像の実際の寸法で、これはコンピューターの画像ファイルを調べると分かります(例えば Mac では Finder で画像を選択して、 <kbd>Cmd</kbd> + <kbd>I</kbd> を押すと情報画面が出てきます)。</li> +</ol> + +<p><strong><code>sizes</code></strong> は、一連のメディア条件(例えば画面の幅)であり、特定のメディア条件が成立したときに、どの寸法の画像を選択するのが最適化を示します。 — これらは以前に説明したヒントです。 この場合、それぞれのコンマの前には次のようなものを書きます。</p> + +<ol> + <li><strong>メディア条件</strong>(<code>(max-width:480px)</code>) — これについては <a href="/ja/docs/Learn/CSS">CSS の記事</a>で詳しく学びますが、今はメディア条件とは画面がなることができる状態であるとだけ言っておきましょう。 この場合、「ビューポートの幅が 480 ピクセル以下であるとき」と言っています。</li> + <li>空白</li> + <li>メディア条件が成立したときに埋める<strong>スロットの幅</strong>(<code>440px</code>)</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: スロットの幅については、絶対的な長さ(<code>px</code>, <code>em</code>)又は相対的な長さ(パーセント値など)で指定することができます。 最後のスロットの幅にはメディア条件がないことに気づいたかもしれません。 — これは成立するメディア条件がない場合に使用される既定値です。 ブラウザーは最初に一致した条件の後はすべて無視しますので、メディア条件の順序に注意してください。</p> +</div> + +<p>したがって、これらの属性を使用すると、ブラウザーは次のようになります。</p> + +<ol> + <li>そのデバイスの幅を見る。</li> + <li><code>sizes</code> リストの中のどのメディア条件が真であるかを確認する。</li> + <li>そのメディア照会で与えられたスロットサイズを見る。</li> + <li>選択したスロットサイズに最も近い <code>srcset</code> リストで参照される画像を読み込みます。</li> +</ol> + +<p>以上です！ この時点で、480px のビューポート幅を持つブラウザーがページを読み込むと、 (<code>max-width: 480px</code>) メディア条件が真となるため、440px スロットが選択されるので、その固有幅(<code>480w</code>)が <code>440px</code> に最も近い <code>elva-fairy-480w.jpg</code> が読み込まれます。 800px の画像は 128KB ですが、480px の画像は 63KB で 65KB の節約になります。 今、これが多くの写真を持っているページだったと想像してみてください。 この技術を使用することで、モバイルユーザーは多くの帯域幅を節約できます。</p> + +<p>これらの機能をサポートしていない古いブラウザーはそれを無視し、 {{htmlattrxref("src", "img")}} 属性で参照されている画像を通常の方法で読み込みます。</p> + +<div class="note"> +<p><strong>メモ</strong>: ドキュメントの {{htmlelement("head")}} には、 <code><meta name="viewport" content="width=device-width"></code> という行があります。 これは、モバイルブラウザーがウェブページを読み込むために実際のビューポート幅を使用するように強制します。 (一部のモバイルブラウザーでは、ビューポート幅について嘘をつき、大きなビューポート幅でページを読み込み、読み込んだページを縮小するため、レスポンシブ画像やデザインにはあまり役に立ちません。 これについては、今後のモジュールで詳しく説明します。)</p> +</div> + +<h3 id="Useful_developer_tools" name="Useful_developer_tools">便利な開発者ツール</h3> + +<p>ブラウザーには、必要なスロット幅などの作業に役立ついくつかの便利な<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツール</a>があります。 私がそれらを作業していたとき、私は最初にサンプルの非レスポンシブ版(<code>not-responsive.html</code>)を読み込んでから<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a>(ツール → ウェブ開発 → レスポンシブデザインモード)に行きました。 まるでさまざまなデバイスの画面サイズで表示されているかのようにウェブページのレイアウトを見ることができます。</p> + +<p>ビューポート幅を 320px から 480px に設定して、それぞれのために私は<a href="/ja/docs/Tools/Page_Inspector">インスペクタ</a>へ行き、私たちが興味を持っている <img> 要素をクリックしてから、画面の右側にある [レイアウト] タブの [ボックスモデル] でそのサイズを調べました。 これはあなたが必要とする固有の画像幅を与えるはずです。</p> + +<p><img alt="インスペクタで強調表示された画像要素を持つfirefox開発者ツールのスクリーンショット。サイズは440 x 293ピクセルです。" src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;">次に、ビューポート幅を任意に設定して(たとえば、幅を狭く設定する)、ネットワークインスペクタ(ツール → ウェブ開発 → ネットワーク)を開き、ページを再読み込みすることで、<code>srcset</code> が機能しているかどうかを確認できます。 これにより、ウェブページを構成するためにダウンロードされた資産のリストが表示されます。 ここでダウンロード用に選択された画像ファイルを確認できます。</p> + +<div class="note"> +<p><strong>メモ</strong>: Chrome でテストするときは、[その他ツール] → [デベロッパー ツール] → [ネットワーク] タブの [Disable cache (when DevTools is open)] チェックボックスをオンにして、開発者ツールが開いているときにキャッシュを無効にします。 そうしないと、Chrome はキャッシュされた画像をより適切なものより優先します。</p> +</div> + +<p><img alt="firefox開発者ツールのネットワークインスペクタのスクリーンショット。ページのHTMLがダウンロードされていることと、レスポンシブ画像の2つの800ワイドバージョンを含む3つの画像" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Resolution_switching_Same_size_different_resolutions" name="Resolution_switching_Same_size_different_resolutions">解像度の切り替え: 同じサイズ、異なる解像度</h3> + +<p>複数の画面解像度をサポートしていても、誰もが画面上で同じ実世界サイズで画像を見る場合は、<code>sizes</code> を指定せずに x 記述子を指定した <code>srcset</code> を使用してブラウザーに適切な解像度の画像を選択させることができます — やや簡単な構文です！ これは <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> のようなものです(<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">ソースコード</a>も参照してください)。<br> + </p> + +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg, + elva-fairy-480w.jpg 1.5x, + elva-fairy-640w.jpg 2x" + src="elva-fairy-640w.jpg" alt="妖精の衣装を着たエルバ"> +</pre> + +<p><img alt="妖精の衣装を着た小さな女の子の絵、古いカメラのフィルム効果が画像に適用される" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">この例では、次の CSS が画像に適用され、画面上に 320 ピクセルの幅が設定されます(CSS ピクセルとも呼ばれます)。</p> + +<pre class="brush: css">img { + width: 320px; +}</pre> + +<p>この場合、<code>sizes</code> は必要ありません。ブラウザーは、表示されている画面がどの解像度であるかを単純に調べ、<code>srcset</code> で参照される最も適切な画像を提供します。 したがって、ページにアクセスするデバイスが標準解像度や低解像度の画面を持っていて、1つのデバイスピクセルが各 CSS ピクセルを表している場合、<code>elva-fairy-320w.jpg</code> の画像が読み込まれます(1x は暗黙のため、含める必要はありません)。 デバイスが CSS ピクセルあたり2つのデバイスピクセルの高解像度を持つ場合、<code>elva-fairy-640w.jpg</code> の画像が読み込まれます。 640px の画像は 93KB ですが、320px の画像は 39KB です。</p> + +<h3 id="Art_direction" name="Art_direction">アートディレクション</h3> + +<p>要約すると、<strong>アートディレクションの問題</strong>は、表示される画像を異なる画像表示サイズに合うように変更したいことを含みます。 たとえば、デスクトップブラウザーで見たときに中央に人がいる大きな風景をウェブサイトに表示している場合、モバイルブラウザーでウェブサイトを表示すると縮小され、人がとても小さくて見えにくいので格好悪くなります。 モバイルでは、人にズームインしたより小型のポートレイト画像を表示するほうがよいでしょう。 {{htmlelement("picture")}} 要素は、この種の解決法を実装することを可能にします。<br> + <br> + オリジナルの <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> の例に戻ると、アートディレクションがひどく必要な画像があります。</p> + +<pre class="brush: html"><img src="elva-800w.jpg" alt="クリスは立って彼の娘エルバを保持します"></pre> + +<p>{{htmlelement("picture")}} でこれを修正しましょう！ <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code>や<code><audio></code></a>と同様に、<code><picture></code> 要素はラッパーで、ブラウザーが選択できるいくつかの異なるソースを提供するいくつかの {{htmlelement("source")}} 要素を含み、次に極めて重要な {{htmlelement("img")}} 要素が続きます。 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> のコードは次のようになります。</p> + +<pre class="brush: 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> +</pre> + +<ul> + <li><code><source></code> 要素にはメディア条件が含まれている <code>media</code> 属性が含まれています。 最初の srcset の例のように、これらの条件はどの画像が表示されるかを決定するテストであり、最初に真を返すものが表示されます。 この場合、ビューポート幅が 799 ピクセル幅以下の場合、最初の <code><source></code> 要素の画像が表示されます。 ビューポート幅が 800 ピクセル以上であれば、2番目のものになります。<br> + </li> + <li><code>srcset</code> 属性には、表示する画像へのパスが含まれます。 上記の <code><img> </code>で見たように、<code><source></code> は複数の画像を参照する <code>srcset</code> 属性と <code>sizes</code> 属性をとることができます。 したがって、<code><picture></code> 要素で複数の画像を提供することもできますが、それぞれの画像も複数の解像度で提供することができます。 現実的には、この種のことを非常に頻繁にやりたいとは思わないでしょう。</li> + <li>すべての場合で、<code><img></code> 要素に <code>src</code> と <code>alt</code> を付けて <code></picture></code> の直前に置く必要があります。 そうしないと画像は表示されません。 これはメディア条件のどれも true を返さない場合(この例では2番目の <code><source></code>要素を実際に削除できる)や、<code><picture></code> 要素をサポートしないブラウザーの代替に適用されるデフォルトのケースを提供します。</li> +</ul> + +<p>このコードでは、以下に示すように、広い画面と狭い画面の両方に適切な画像を表示することができます。</p> + +<p><img alt="広い画面で表示された私たちのサンプルサイト - ここでは最初の画像は大丈夫です。中央のディティールを見るのに十分です。" src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="最初の画像をポートレートに切り替えるために使用されるpicture要素を使用した狭い画面で表示されたサンプルサイトは、ディティールをクローズアップし、狭い画面でより便利になりました" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: <code>media</code> 属性は、アートディレクションのシナリオでのみ使用してください。 <code>media</code> を使用する場合は、<code>sizes</code> 属性内でメディア条件も指定しないでください。</p> +</div> + +<h3 id="Why_can't_we_just_do_this_using_CSS_or_JavaScript" name="Why_can't_we_just_do_this_using_CSS_or_JavaScript">なぜ CSS や JavaScript を使ってこれを行うことができないのですか？</h3> + +<p>ブラウザーがページの読み込みを開始すると、メインのパーサーがページの CSS と JavaScript を読み込んで解釈する前に、画像のダウンロード(先読み)を開始します。 これは便利なテクニックで、平均してページ読み込み時間の 20％ を削減します。 しかし、レスポンシブ画像では役に立ちません。 そのため、<code>srcset</code> のような解決法を実装する必要があります。 たとえば、 {{htmlelement("img")}} 要素を読み込んでから JavaScript でビューポートの幅を検出し、必要に応じて元の画像をより小さなものに動的に変更することはできません。 それまでには、元の画像が既に読み込まれていて、さらに小さい画像も読み込むことになります。 これは、レスポンシブ画像の条件ではさらに悪化します。</p> + +<ul> +</ul> + +<h3 id="Use_modern_image_formats_boldly" name="Use_modern_image_formats_boldly">現代の画像フォーマットを大胆に使用する</h3> + +<p>小さなファイルサイズと高品質を同時に維持できる、エキサイティングな新しい画像フォーマット(WebP や PEG-2000 など)がいくつかあります。 しかし、ブラウザーのサポートにはむらがあります。</p> + +<p><code><picture></code> は、古いブラウザーにも対応しています。 MIME タイプを <code>type</code> 属性内に指定すると、ブラウザーはサポートしていないファイルタイプを直ちに拒否できます。</p> + +<pre class="brush: html"><picture> + <source type="image/svg+xml" srcset="pyramid.svg"> + <source type="image/webp" srcset="pyramid.webp"> + <img src="pyramid.png" alt="4つの正三角形から構築された通常のピラミッド"> +</picture> +</pre> + +<ul> + <li>アートディレクションが必要な場合を除き、<code>media</code> 属性を使用しないでください。</li> + <li><code><source></code> 要素では、<code>type</code> で宣言された型の画像のみを参照できます。</li> + <li>前と同じように、必要に応じて、<code>srcset</code> と <code>sizes</code> をカンマで区切ったリストを使用することもできます。</li> +</ul> + +<h2 id="Active_learning_Implementing_your_own_responsive_images" name="Active_learning_Implementing_your_own_responsive_images">能動的学習: あなた自身のレスポンシブ画像の実装</h2> + +<p>この能動的学習では、私たちはあなたが勇敢に(ほとんど)一人で行くことを期待しています。 <code><picture></code> を使って、あなた自身の適切なアートディレクションの狭い画面や広い画面と、<code>srcset</code> を使用する解像度切り替えの例を実装してください。</p> + +<ol> + <li>あなたのコードを格納するためのシンプルな HTML を書く(必要に応じて <code>not-responsive.html</code> を出発点として使用する)</li> + <li>どこかから細かいディテールが入った素晴らしい広い画面のランドスケープ画像を探してきましょう。 グラフィックスエディタを使用してウェブサイズの画像を作成し、それをトリミングしてディテールを拡大した小さな部分を表示し、2番目の画像を作成します(約 480px の幅がこれに適しています)。</li> + <li><code><picture></code> 要素を使用して、アートディレクション画像切り替えを実装します。</li> + <li>サイズの異なる複数の画像ファイルを作成し、それぞれが同じ画像を表示します。</li> + <li><code>srcset</code> や <code>sizes</code> を使用して、異なる解像度で同じサイズの画像を提供するか、異なるビューポートの幅で異なる画像サイズを提供するかのいずれかの解像度切り替えの例を作成します。</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: 上記のように、ブラウザーの開発者ツールの助けを借りて、必要なサイズにしてください。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>それはレスポンシブ画像のラップです — あなたはこれらの新しいテクニックで遊ぶことを楽しんでください。 要約すると、私たちがここで議論してきた2つの明確な問題があります。</p> + +<ul> + <li><strong>アートディレクション</strong>: 異なるレイアウトのためにトリミングされた画像を提供したいという問題 — 例えば、デスクトップレイアウトのフルシーンを示すランドスケープ画像や、モバイルレイアウトのためにズームインした主な被写体を示すポートレート画像などがあります。 これは、 {{htmlelement("picture")}} 要素を使用して解決できます。</li> + <li><strong>解像度切り替え</strong>: デスクトップ画面のような巨大な画像を必要としないため、小さな画像ファイルを狭い画面のデバイスに配信したいという問題 — 必要に応じて異なる解像度の画像を高密度や低密度の画面に表示したい場合もあります。 これは、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ベクターグラフィックス</a>(SVG 画像)と {{htmlattrxref("srcset", "img")}} と {{htmlattrxref("sizes", "img")}} 属性を使用して解決できます。</li> +</ul> + +<p>これはまた、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアと埋め込み</a>のモジュール全体を閉じます！ 先に進む前に行うべき唯一のことは、マルチメディアの評価を試み、あなたがどのように乗り出すかを見ることです。 楽しんでください。</p> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby のレスポンシブ画像の優れた紹介</a>(英語)</li> + <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">レスポンシブ画像: 解像度を変更するだけの場合は、srcset を使う</a> — ブラウザーがどの画像を使用するかの詳細な説明が含まれています(英語)</li> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("picture")}}</li> + <li>{{htmlelement("source")}}</li> +</ul> + +<div>{{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")}}</div> + +<div> +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Web にベクターグラフィックスを追加する</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li> +</ul> +</div> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">Webページに簡単な画像を追加するのができるようになったので、次のステップは HTML 文書に動画と音声のプレイヤーを追加することです! この記事では {{htmlelement("video")}} と {{htmlelement("audio")}} 要素を使ってそうすることを見ていきます。それから動画にキャプションや字幕を追加する方法を見て完了します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされた基本ソフトウェア</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基本知識、HTML の基礎知識(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a>)、および <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>動画や音声のコンテンツをWebページに埋め込み、動画にキャプションや字幕を追加する方法を学びます。</td> + </tr> + </tbody> +</table> + +<h2 id="Audio_and_video_on_the_web" name="Audio_and_video_on_the_web">Webでの動画と音声</h2> + +<p>Web 開発者は、あらゆる種類の動画 (動画ファイルはテキストや画像よりもはるかに大きい) をサポートするのに十分な速さがある帯域幅を使い始めた2000年代初頭以来、Web 上で動画や音声を長時間使用したいと考えていました。初期段階では、HTML などのネイティブな Web テクノロジーでは動画や音声を Web に埋め込むことができなかったため、<a href="https://ja.wikipedia.org/wiki/Adobe_Flash">Flash</a> (および後で <a href="https://ja.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) などの独自技術 (またはプラグインベース) が一般的になりました。この種の技術はうまくいきましたが、HTML/CSS の機能、セキュリティの問題、アクセシビリティの問題でうまく機能しないなど、さまざまな問題がありました。</p> + +<p>もし正しく行っていれば、ネイティブな解決策はこれの多くを解決します。幸いにも、数年後、{{glossary("HTML5")}} 仕様には、{{htmlelement("video")}} 要素と {{htmlelement("audio")}} 要素、およびそれらを制御するためのいくつかのぴかぴかの新しい {{Glossary("JavaScript")}} {{Glossary("API")}} が追加されました。ここでは JavaScript を見ていません — HTML で実現できる基本的な基礎だけです。</p> + +<p>音声や動画のファイルを作成する方法は教えません — 完全に異なる知識や技能が必要です。あなたが実験のための<a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">音声や動画のファイルとサンプルコード</a>を手に入れることができない場合に備えて、それを提供しています。</p> + +<div class="note"> +<p><strong>メモ</strong>: ここから始める前に、<a href="https://www.youtube.com/">YouTube</a>、<a href="http://www.dailymotion.com">Dailymotion</a>、<a href="https://vimeo.com/">Vimeo </a>のような {{glossary("OVP")}} (オンライン動画プロバイダ) と <a href="https://soundcloud.com/">Soundcloud</a> のようなオンライン音声プロバイダがあることも知っておく必要があります。そのような企業は、動画をホストして消費するための便利で簡単な方法を提供するので、莫大な帯域幅の消費を心配する必要はありません。OVP は通常、Web ページに動画や音声を埋め込むための既製コードを提供しています。その道を行くなら、この記事で取り上げるいくつかの困難を避けることができます。この種のサービスについては、次の記事でもう少し詳しく説明します。</p> +</div> + +<h3 id="The_<video>_element" name="The_<video>_element"><video> 要素</h3> + +<p>{{htmlelement("video")}} 要素を使用すると、動画を非常に簡単に埋め込むことができます。本当に簡単な例は次のようになります。</p> + +<pre class="brush: html"><video src="rabbit320.webm" controls> + <p>お使いのブラウザは HTML5 動画をサポートしていません。その代わりに<a href="rabbit320.webm">動画へのリンク</a>があります。</p> +</video></pre> + +<p>機能は次のとおりです。</p> + +<dl> + <dt>{{htmlattrxref("src","video")}}</dt> + <dd>{{htmlelement("img")}} 要素と同じように、<code>src</code> (ソース) 属性には、埋め込みたい動画へのパスが含まれています。これは、まったく同じように動作します。</dd> + <dt>{{htmlattrxref("controls","video")}}</dt> + <dd>ユーザは、動画や音声の再生を制御できる必要があります (特に<a href="https://ja.wikipedia.org/wiki/%E3%81%A6%E3%82%93%E3%81%8B%E3%82%93#%E7%96%AB%E5%AD%A6">てんかん</a>を患っている人にとっては重要です)。<code>controls</code> 属性を使用してブラウザ独自のコントロールインターフェイスを組み込むか、適切な <a href="/ja/docs/Web/API/HTMLMediaElement">JavaScript API</a> を使用してインターフェイスを構築する必要があります。少なくとも、インターフェイスにはメディアの開始と停止、および音量の調整が含まれている必要があります。</dd> + <dt><code><video></code> タグ内の段落</dt> + <dd>これは<strong>代替コンテンツ</strong>と呼ばれ、ページにアクセスしているブラウザが <code><video></code> 要素をサポートしていない場合に表示され、古いブラウザでの代替手段となります。これはあなたが好きなことができます。この場合、動画ファイルへの直接リンクが提供されているため、使用しているブラウザに関係なく、ユーザは少なくとも何らかの方法でアクセスできます。</dd> +</dl> + +<p>埋め込み動画は次のようになります。</p> + +<p><img alt="小さな白いウサギの動画を表示するシンプルなビデオプレーヤー" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p> + +<p>ここで<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">サンプルをライブで試す</a>ことができます(<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">ソースコード</a>も参照してください)。</p> + +<h3 id="Supporting_multiple_formats" name="Supporting_multiple_formats">複数のフォーマットをサポートする</h3> + +<p>上の例では、Safari や Internet Explorer などのブラウザで上記のライブのリンクにアクセスしたなら、すでに気づいているかもしれない問題があります。動画は再生されません! これは、さまざまなブラウザが異なる動画 (および音声) のフォーマットをサポートしているためです。</p> + +<p>用語をすばやく説明しましょう。MP3、MP4、WebM などの形式は<strong>コンテナフォーマット</strong>と呼ばれます。それらは、音声トラック、動画トラック (動画の場合)、および提示されるメディアを記述するメタデータなど、歌または動画全体を構成する異なる部分を含みます。</p> + +<p>音声トラックと動画トラックもさまざまなフォーマットになっています。たとえば:</p> + +<ul> + <li>WebM コンテナは、通常、VP8/VP9 動画で Ogg Vorbis 音声をパッケージ化します。これは主に Firefox と Chrome でサポートされています。</li> + <li>MP4 コンテナは、H.264 動画で AAC または MP3 音声をパッケージ化することがよくあります。これは主に Internet Explorer と Safari でサポートされています。</li> + <li>古い Ogg コンテナは、Ogg Vorbis 音声と Ogg Theora 動画と一緒に行く傾向があります。これは主に Firefox と Chrome でサポートされていましたが、基本的には良質の WebM フォーマットに取って代わられています。</li> +</ul> + +<p>オーディオプレーヤーは、音声トラックを直接再生する傾向があります。たとえば、MP3 または Ogg ファイル。これらはコンテナを必要としません。</p> + +<div class="note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Web/HTML/Supported_media_formats#Browser_compatibility">音声と動画のコーデックの互換性表</a>からわかるように、それほど単純ではありません。さらに、多くのモバイルプラットフォームのブラウザは、サポート対象のシステムのメディアプレーヤーに再生するためにそれを渡すことで、サポートされていないフォーマットを再生することができます。しかしこれは今のところできます。</p> +</div> + +<p>上記のフォーマットは、動画と音声を管理可能なファイルに圧縮するために存在します (生の動画と音声は非常に大きい)。ブラウザには、Vorbis や H.264 などの<strong>{{Glossary("Codec","コーデック")}}</strong>が含まれています。これらのコーデックは、圧縮された音声と動画を2進数字に変換して戻すために使用されます。上記のように、残念ながらブラウザはすべて同じコーデックをサポートしているわけではないので、メディアの制作ごとに複数のファイルを用意する必要があります。メディアをデコードするために適切なコーデックがない場合、再生されません。</p> + +<div class="note"> +<p><strong>メモ</strong>: なぜこのような状況が存在するのだろうか。<strong>MP3 </strong>(音声用)と <strong>MP4/H.264</strong> (動画用) はどちらも広くサポートされており、良質です。しかし、それらはまた、特許を握られている — 米国特許は、MP3 は2017年まで、H.264 は2027年までカバーしています。つまり、特許を保有していないブラウザは、これらのフォーマットをサポートするために膨大な金額を支払う必要があります。さらに、多くの人々は、制限されたソフトウェアを原則として避け、オープンフォーマットを支持しています。このため、さまざまなブラウザに複数のフォーマットを提供する必要があります。</p> +</div> + +<p>だから私たちはこれをどうやってやるのか? 以下の<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">更新された例</a>を見てください (それを<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">ここでライブで試して</a>みてください)。</p> + +<pre class="brush: html"><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></pre> + +<p>ここでは実際の <code><video></code> タグから <code>src</code> 属性を取り出し、独自のソースを指す別々の {{htmlelement("source")}} 要素を追加しました。この場合、ブラウザは <code><source></code> 要素を通過し、サポートするコーデックがある最初の要素を再生します。WebM や MP4 のソースを含めれば、最近のほとんどのプラットフォームやブラウザで動画を再生できるはずです。</p> + +<p>各 <code><source></code> 要素には <code>type</code> 属性もあります。これはオプションですが、動画ファイルの {{glossary("MIME type","MIME タイプ")}}が含まれており、ブラウザがこれらを読み込んで理解できない動画をすぐにスキップすることができます。それらが含まれていない場合、ブラウザは各ファイルを読み込んで再生しようとしますが、より多くの時間とリソースを必要とします。</p> + +<div class="note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Web/HTML/Supported_media_formats">サポートされているメディアフォーマットの記事</a>には、一般的な {{glossary("MIME type","MIME タイプ")}}がいくつか含まれています。</p> +</div> + +<h3 id="Other_<video>_features" name="Other_<video>_features">その他の <video> 機能</h3> + +<p>HTML5 動画に含めることができる他の多くの機能があります。以下の3番目の例を見てください。</p> + +<pre class="brush: html"><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> +</pre> + +<p>これにより、次のような出力が得られます。</p> + +<p><img alt='再生する前にポスター画像を表示するビデオプレーヤー。 ポスター画像には "HTML5 video example, OMG hell yeah!" と書いてあります。' src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">新しい機能は次のとおりです。</p> + +<dl> + <dt>{{htmlattrxref("width","video")}} と {{htmlattrxref("height","video")}}</dt> + <dd>これらの属性または {{Glossary("CSS")}} を使用して動画サイズを制御することができます。どちらの場合も、動画は元の縦横比 (<strong>アスペクト比</strong>) を維持します。アスペクト比が設定したサイズによって維持されない場合、動画は水平方向にスペースを埋めるように拡大し、デフォルトでは満たされていないスペースには無地の背景色が与えられます。</dd> + <dt>{{htmlattrxref("autoplay","video")}}</dt> + <dd>この属性は、ページの残りの部分がロードされている間に音声または動画の再生をすぐに開始します。ユーザに実際に迷惑をかけることがあるので、サイトで動画 (または音声) を自動再生することはお勧めしません。</dd> + <dt>{{htmlattrxref("loop","video")}}</dt> + <dd>この属性は、動画 (または音声) が終了するたびに再生を開始させます。これは迷惑になることもありますので、本当に必要な場合にのみ使用してください。</dd> + <dt>{{htmlattrxref("muted","video")}}</dt> + <dd>この属性を使用すると、デフォルトで音声をオフにしてメディアを再生します。</dd> + <dt>{{htmlattrxref("poster","video")}}</dt> + <dd>この属性は、動画の再生前に表示される画像の URL を値としてとります。これは、スプラッシュ画面または広告画面に使用するためのものです。</dd> + <dt>{{htmlattrxref("preload","video")}}</dt> + <dd> + <p>この属性は、大きなファイルをバッファリングする要素で使用されます。3つの値のいずれかを取ることができます。</p> + + <ul> + <li><code>"none"</code> はファイルをバッファリングしません</li> + <li><code>"auto"</code> はメディアファイルをバッファリングする</li> + <li><code>"metadata"</code> はファイルのメタデータのみをバッファリングする</li> + </ul> + </dd> +</dl> + +<p>上記の例は <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">Github でライブで再生する</a>ことができます (<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">ソースコード</a>も参照してください)。ライブバージョンには <code>autoplay</code> 属性は含まれていません — ページが読み込まれるとすぐに動画が再生され始めると、ポスターを見ることはできません!</p> + +<h3 id="The_<audio>_element" name="The_<audio>_element"><audio> 要素</h3> + +<p>{{htmlelement("audio")}} 要素は、{{htmlelement("video")}} 要素とまったく同じように動作しますが、以下に説明するように若干の違いがあります。典型的な例は次のようになります。</p> + +<pre class="brush: html"><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></pre> + +<p>これはブラウザで次のようなものを生成します。</p> + +<p><img alt="再生ボタン、タイマー、音量コントロール、および進行状況バーを備えたシンプルなオーディオプレーヤー" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: Github で<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">音声デモをライブで実行する</a>こともできます (オーディオプレーヤーの<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">ソースコード</a>も参照してください)。</p> +</div> + +<p>ビジュアルコンポーネントがないため、ビデオプレーヤーよりもスペースが少なくなります — 音声を再生するコントロールを表示するだけで済みます。HTML5 動画とのその他の相違点は次のとおりです。</p> + +<ul> + <li>{{htmlelement("audio")}} 要素は <code>width</code> 属性や <code>height</code> 属性をサポートしていません — ビジュアルコンポーネントがないため、幅や高さを割り当てることはありません。</li> + <li>また、<code>poster</code> 属性もサポートしていません — ビジュアルコンポーネントはありません。</li> +</ul> + +<p>これ以外について <code><audio></code> は、<code><video></code> と同じ機能をすべてサポートしています。詳細については、上記のセクションを参照してください。</p> + +<h2 id="Displaying_video_text_tracks" name="Displaying_video_text_tracks">動画のテキストトラックを表示する</h2> + +<p>ここでは、もっと知りたいと思う、やや高度なコンセプトについて説明します。多くの人々は、少なくともある時点では、Web上で見つけた音声や動画のコンテンツを聞くことができない、または聞きたくない。たとえば:</p> + +<ul> + <li>多くの人が聴覚障害を持っているため、音声は聞こえません。</li> + <li>他の人は、騒々しい環境 (スポーツゲームが表示されているときの混雑したバーのような) や、静かな場所 (図書館など) にいると他の人を邪魔したくないため、音声を聞くことができないことがあります。</li> + <li>動画の言語を話さない人には、テキストの写しや翻訳がメディアのコンテンツを理解するのに役立つかもしれません。</li> +</ul> + +<p>音声や動画で話されている言葉の写しをこれらの人々に提供できるのはうれしいことではないでしょうか? HTML5 動画のおかげで、<a href="/ja/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> フォーマットと {{htmlelement("track")}} 要素を使用することができます。</p> + +<div class="note"> +<p><strong>メモ</strong>: "転記" と "写し" とは、話し言葉をテキストとして書き留めることを意味します。</p> +</div> + +<p>WebVTT は、複数のテキスト文字列を含むテキストファイルを書くための形式です。動画内の何時に各テキスト文字列を表示するかや、限られたスタイリング/位置情報などのメタデータが一緒に含まれています。これらのテキスト文字列は<strong>キュー</strong>と呼ばれ、さまざまな目的のためにさまざまなタイプを表示できます。最も一般的なものは次のとおりです。</p> + +<dl> + <dt>字幕 (subtitles)</dt> + <dd>音声で話されている言葉を理解していない人々のための外国の翻訳材料。</dd> + <dt>キャプション (captions)</dt> + <dd>対話や重要な物音の描写の同期化で、音声を聞くことができない人が何が起こっているのかを理解できるようにする。</dd> + <dt>時限記述 (timed descriptions)</dt> + <dd>視覚障害者にサービスを提供するために、音声に変換するためのテキスト。</dd> +</dl> + +<p>典型的な WebVTT ファイルは次のようになります。</p> + +<pre class="eval line-numbers language-html"><code class="language-html">WEBVTT + +1 +00:00:22.230 --> 00:00:24.606</code> +<code>これが最初の字幕です。</code> +<code class="language-html"> +2 +00:00:30.739 --> 00:00:34.074</code> +<code>これは二番目です。 +<code class="language-html"> + ...</code></code> +</pre> + +<p>これを HTML メディアの再生と一緒に表示するには、以下を行う必要があります。</p> + +<ol> + <li>適切な場所に <code>.vtt</code> ファイルとして保存します。</li> + <li>{{htmlelement("track")}} 要素で <code>.vtt</code> ファイルにリンクします。<code><track></code> は <code><audio></code> または <code><video></code> 内に配置する必要がありますが、すべての <code><source> </code>要素の後に配置する必要があります。{{htmlattrxref("kind","track")}} 属性を使用して、キューが <code>subtitles</code>、<code>captions</code>、または <code>descriptions</code> のいずれであるかを指定します。さらに、{{htmlattrxref("srclang","track")}} 属性を使用して、字幕が書かれた言語をブラウザに伝えます。</li> +</ol> + +<p>ここに例があります。</p> + +<pre class="brush: html"><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></pre> + +<p>これにより、字幕が表示された動画になります。これは次のようなものです。</p> + +<p><img alt='再生、停止、音量、キャプションのオン/オフなどのスタンドコントロールを備えたビデオプレーヤー。 動画の再生には、槍のような武器を持つ男のシーンが表示され、キャプションには "Esta hoja tiene pasado oscuro." と表示されます。' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> + +<p>詳しくは、<a href="https://developer.mozilla.org/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 動画にキャプションと字幕を追加する</a>をご覧ください。Github には Ian Devlin によって書かれた<a href="http://iandevlin.github.io/mdn/video-player-with-captions/">この記事の例</a>があります (<a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">ソースコード</a>も参照してください)。この例では、JavaScript を使用してさまざまな字幕を選択できるようにしています。字幕をオンにするには、[CC] ボタンを押して、英語、ドイツ語、スペイン語のオプションを選択する必要があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: テキストトラックは検索エンジンが特にテキスト上で成功するため、{{glossary("SEO")}} にも役立ちます。テキストトラックを使用すると、検索エンジンは動画の途中地点に直接リンクすることもできます。</p> +</div> + +<h3 id="Active_learning_Embedding_your_own_audio_and_video" name="Active_learning_Embedding_your_own_audio_and_video">アクティブラーニング: 自分の音声と動画を埋め込む</h3> + +<p>この能動的学習のために、(理想的には) あなたが世界に出て自分の動画や音声を録画するのが好ましいです — 最近の携帯電話では、音声や動画を非常に簡単に録音することができ、コンピュータに転送することができれば使用できます。動画の場合は WebM と MP4、音声の場合は MP3 と Ogg に行き着くには、変換する必要があるかもしれませんが、<a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> や <a href="https://sourceforge.net/projects/audacity/">Audacity</a> など、あまり多くの手間をかけることなく、これを行うための十分なプログラムがあります。さあ、行ってください!</p> + +<p>動画や音声を入手できない場合は、この<a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">サンプル</a>を自由に使用してこの演習を行うことができます。サンプルコードを参照のために使用することもできます。</p> + +<p>次のことをしましょう。</p> + +<ol> + <li>音声と動画のファイルをコンピュータの新しいディレクトリに保存します。</li> + <li>同じディレクトリに <code>index.html</code> と呼ばれる新しい HTML ファイルを作成します。</li> + <li>ページに <code><audio></code> 要素と <code><video></code> 要素を追加します。それらにデフォルトのブラウザコントロールを表示させます。</li> + <li>両方の要素に <code><source></code> 要素を付けて、ブラウザが最もよくサポートするフォーマットを見つけて読み込むようにします。これらは <code>type</code> 属性を含むべきです。</li> + <li><code><video></code> 要素に、動画が再生される前に表示されるポスターを指定します。自分のポスターのグラフィックを作成して楽しんでください。</li> +</ol> + +<p>追加のボーナスとして、テキストトラックの研究や動画にキャプションを追加する方法などがあります。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>それはラップです。Web ページで動画や音声を楽しみながら楽しく遊びました! 次の記事では、{{htmlelement("iframe")}} や {{htmlelement("object")}} などの技術を使用して、Webにコンテンツを埋め込む他の方法について説明します。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("audio")}}</li> + <li>{{htmlelement("video")}}</li> + <li>{{htmlelement("source")}}</li> + <li>{{htmlelement("track")}}</li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 の動画へのキャプションと字幕の追加</a></li> + <li><a href="/ja/docs/Web/Guide/Audio_and_video_delivery">音声と動画の配信</a>: HTML と JavaScript を使用して音声と動画をWebページに配置することに関する詳細。</li> + <li><a href="/ja/docs/Web/Guide/Audio_and_video_manipulation">音声と動画の加工</a>: JavaScript を使用して音声や動画を操作する方法について詳しく説明します (たとえばフィルタを追加するなど)。</li> + <li><a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">マルチメディアを翻訳する</a>ための自動オプション。(英語)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Web にベクターグラフィックスを追加する</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li> +</ul> + +<dl> +</dl> + +<ul> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> + +<p class="summary">このモジュールの2番目の記事では、HTML テーブルのより高度な機能 (キャプション/要約、行をテーブルのヘッダー、本文、フッターのセクションにグループ化するなど) や、視覚障碍のあるユーザのためのテーブルのアクセシビリティについて調べます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を参照)。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>表のより高度な機能やアクセシビリティについて学ぶ</td> + </tr> + </tbody> +</table> + +<h2 id="Adding_a_caption_to_your_table_with_<caption>" name="Adding_a_caption_to_your_table_with_<caption>"><caption> を用いて表にキャプションを追加する</h2> + +<p>テーブルにキャプションを付けるには、{{htmlelement("caption")}} 要素内に配置し、それを {{htmlelement("table")}} 要素内にネストします。これは <code><table></code> 要素の開始タグすぐ下に置くべきです。</p> + +<pre class="brush: html"><table> + <caption>ジュラ紀の恐竜</caption> + + ... +</table></pre> + +<p>上記の簡単な例から推測できるように、キャプションには表の内容の説明が含まれています。 これは、ページに目を通して表が役に立つかどうかをすぐに把握したい全ての読者にとって便利ですが、特に盲目のユーザにとっては便利です。 スクリーンリーダーに表の内容を知るためだけに多くのセルの内容を読み上げさせるのではなく、キャプションを頼りにして表をより詳細に読み取るかどうかを決定できます。</p> + +<p>キャプションは <code><table></code> タグのすぐ下に配置します。</p> + +<div class="note"> +<p><strong>注</strong>: {{htmlattrxref("summary","table")}} 属性は、<code><table></code> 要素で説明を提供するためにも使用できます。 これはスクリーンリーダーによっても読み上げられます。 ただし、<code>summary</code> は HTML5 仕様では{{glossary("deprecated","推奨されておらず")}}、(ページには表示されないので)晴眼のユーザには読むことができないため、代わりに <code><caption></code> 要素を使用することをお勧めします。</p> +</div> + +<h3 id="Active_learning_Adding_a_caption" name="Active_learning_Adding_a_caption">アクティブラーニング: キャプションの追加</h3> + +<p>前の記事で最初に出会った例を再考しながら、これを試してみましょう。</p> + +<ol> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">HTML 表の基本</a>の最後から語学教師の学校の時間割を開くか、または <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> ファイルのローカルコピーを作成してください。</li> + <li>表に適切なキャプションを追加します。</li> + <li>コードを保存してブラウザで開くと、コードがどのように見えるかがわかります。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: GitHub で私たちのバージョンを見つけることができます — <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> を見てください(<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">ライブもご覧ください</a>)。</p> +</div> + +<h2 id="Adding_structure_with_<thead>_<tfoot>_and_<tbody>" name="Adding_structure_with_<thead>_<tfoot>_and_<tbody>"><thead>、<tfoot>、<tbody> を用いて構造を追加する</h2> + +<p>表の構造がもう少し複雑になったら、それらにもっと構造的な定義を与えることは有用です。 これを行う明確な方法の1つは、{{htmlelement("thead")}}、{{htmlelement("tfoot")}}、および {{htmlelement("tbody")}} を使用することです。 これにより、表のヘッダー、フッター、および本体のセクションをマークアップできます。</p> + +<p>これらの要素によって表がスクリーンリーダーのユーザにアクセスしやすくなることはなく、また視覚的な機能強化が生じることもありません。 ただし、これらはスタイリングやレイアウトに非常に役立ちます — CSS を表に追加するための便利なフックとして機能します。 いくつか興味深い例を挙げると、長い表の場合、全ての印刷ページで表のヘッダーとフッターを繰り返すようにしたり、表の本体を単一ページに表示して、上下にスクロールして内容を表示したりすることができます。</p> + +<p>それらを使用するには、</p> + +<ul> + <li><code><thead></code> 要素は、表のヘッダー部分をラップする必要があります — これは通常、列見出しを含む最初の行になりますが、必ずしもそうとは限りません。 {{htmlelement("col")}} 要素や {{htmlelement("colgroup")}} 要素を使用している場合、表のヘッダーはそれらのすぐ下にくるはずです。</li> + <li><code><tfoot></code> 要素は、表のフッター部分をラップする必要があります — これは、例えば、前の行の項目が合計された最終行になります。 表のフッターは、期待通りに表の一番下に配置することも、表のヘッダーのすぐ下に配置することもできます(ブラウザはそれを表の一番下に表示します)。</li> + <li><code><tbody></code> 要素は、表のヘッダーまたはフッターではない表のコンテンツの他の部分をラップする必要があります。 どのように構成することにしたかに応じて、表のヘッダーの下に出現するか、時にはフッターの下に出現することがあります (上記の注を参照)。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: <code><tbody></code> は常に全ての表に含まれていて、コードで指定しない場合は暗黙的に含まれます。 これを確認するには、<code><tbody></code> を含まない以前の例の1つを開き、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザ開発者ツール</a>の HTML コードを調べます — ブラウザによってこのタグが追加されたことがわかります。 なぜそれを含まないのかと疑問に思うかもしれません — すべき、表の構造とスタイリングがより細かく制御できるためです。</p> +</div> + +<h3 id="Active_learning_Adding_table_structure" name="Active_learning_Adding_table_structure">アクティブラーニング: 表構造の追加</h3> + +<p>これらの新しい要素を実行してみましょう。</p> + +<ol> + <li>まず、新しいフォルダに <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> のローカルコピーを作成します。</li> + <li>ブラウザでそれを開いてみてください — あなたはそれが問題ないように見えますが、それは改善されることになるかもしれません。 支出額の合計を含む "SUM" 行は間違った場所にあるように思われ、コードから抜けている細部がいくつかあります。</li> + <li>明白なヘッダー行を <code><thead></code> 要素内に、 "SUM" 行を <code><tfoot></code> 要素内に、そして残りの内容を <code><tbody></code> 要素内に配置します。</li> + <li>保存して更新すると、<code><tfoot></code> 要素を追加すると "SUM" 行が表の一番下に移動していることがわかります。</li> + <li>次に、{{htmlattrxref("colspan","td")}} 属性を追加して "SUM" セルを最初の4列にまたがるようにします。そのため、実際の数は "Cost" 列の下部に表示されます。</li> + <li>これらの要素が CSS を適用するためにどれほど有用であるかのアイデアをあなたに与えるために、表にいくつかの簡単な追加のスタイリングを追加しましょう。 HTML 文書の <code><head></code> の中には、空の {{htmlelement("style")}} 要素があります。 この要素内に、次の CSS コード行を追加します。 + <pre class="brush: css">tbody { + font-size: 90%; + font-style: italic; +} + +tfoot { + font-weight: bold; +} +</pre> + </li> + <li>保存して更新し、結果を確認します。 <code><tbody></code> 要素と <code><tfoot></code> 要素が適切に配置されていない場合は、同じスタイルを適用するためにはるかに複雑なセレクタ/規則を記述する必要があります。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 現時点で私たちはあなたが CSS を完全に理解しているとは思っていません。 あなたが私たちの CSS モジュールを一通り学ぶとき、これについてより多くを学ぶでしょう(<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>は始めるのに良い場所です。 <a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">スタイリングされた表</a>に関する具体的な記事もあります)。</p> +</div> + +<p>完成した表は次のようになります。</p> + +<div class="hidden"> +<h6 id="Hidden_example" name="Hidden_example">Hidden example</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My spending record</title> + <style> + + html { + font-family: sans-serif; + } + + table { + border-collapse: collapse; + border: 2px solid rgb(200,200,200); + letter-spacing: 1px; + font-size: 0.8rem; + } + + td, th { + border: 1px solid rgb(190,190,190); + padding: 10px 20px; + } + + th { + background-color: rgb(235,235,235); + } + + td { + text-align: center; + } + + tr:nth-child(even) td { + background-color: rgb(250,250,250); + } + + tr:nth-child(odd) td { + background-color: rgb(245,245,245); + } + + caption { + padding: 10px; + } + + tbody { + font-size: 90%; + font-style: italic; + } + + tfoot { + font-weight: bold; + } + </style> + </head> + <body> + <table> + <caption>How I chose to spend my money</caption> + <thead> + <tr> + <th>Purchase</th> + <th>Location</th> + <th>Date</th> + <th>Evaluation</th> + <th>Cost (€)</th> + </tr> + </thead> + <tfoot> + <tr> + <td colspan="4">SUM</td> + <td>118</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Haircut</td> + <td>Hairdresser</td> + <td>12/09</td> + <td>Great idea</td> + <td>30</td> + </tr> + <tr> + <td>Lasagna</td> + <td>Restaurant</td> + <td>12/09</td> + <td>Regrets</td> + <td>18</td> + </tr> + <tr> + <td>Shoes</td> + <td>Shoeshop</td> + <td>13/09</td> + <td>Big regrets</td> + <td>65</td> + </tr> + <tr> + <td>Toothpaste</td> + <td>Supermarket</td> + <td>13/09</td> + <td>Good</td> + <td>5</td> + </tr> + </tbody> + </table> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>注</strong>: Github では、それを <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> として見つけることもできます(<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">ライブもご覧ください</a>)。</p> +</div> + +<h2 id="Nesting_Tables" name="Nesting_Tables">ネストした表</h2> + +<p><code><table></code> 要素を含む完全な構造を含める限り、表を別の表の中にネストすることは可能です。 そのマークアップがスクリーンリーダーのユーザにとって混乱を招きやすく、アクセスしにくくなるため、これは一般的にはあまり推奨されません。 多くの場合、既存の表に追加のセル/行/列を挿入することもできます。 ただし、他のソースからコンテンツを簡単にインポートしたい場合などは、時々必要になります。</p> + +<p>次のマークアップは、単純なネストした表を示しています。</p> + +<pre class="brush: html"><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></pre> + +<p>その出力は次のようになります。</p> + +<table id="table1"> + <tbody> + <tr> + <th>title1</th> + <th>title2</th> + <th>title3</th> + </tr> + <tr> + <td id="nested"> + <table id="table2"> + <tbody> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </tbody> + </table> + </td> + <td>cell2</td> + <td>cell3</td> + </tr> + <tr> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> + </tr> + </tbody> +</table> + +<h2 id="Tables_for_visually_impaired_users" name="Tables_for_visually_impaired_users">視覚障碍者向けの表</h2> + +<p>データ表の使用方法について簡単に説明しましょう。 表は、データにすばやくアクセスし、さまざまな値を検索できるようにするための便利なツールです。例えば、昨年8月に Gent で販売された指輪 (Rings) の数を確認するには、下の表を見てください。その情報を理解するために、この表内のデータとその列ヘッダーや行ヘッダーとの間の視覚的な関連付けを行います。</p> + +<table> + <caption>Items Sold August 2016</caption> + <tbody> + <tr> + <td></td> + <td></td> + <th colspan="3" scope="colgroup">Clothes</th> + <th colspan="2" scope="colgroup">Accessories</th> + </tr> + <tr> + <td></td> + <td></td> + <th scope="col">Trousers</th> + <th scope="col">Skirts</th> + <th scope="col">Dresses</th> + <th scope="col">Bracelets</th> + <th scope="col">Rings</th> + </tr> + <tr> + <th rowspan="3" scope="rowgroup">Belgium</th> + <th scope="row">Antwerp</th> + <td>56</td> + <td>22</td> + <td>43</td> + <td>72</td> + <td>23</td> + </tr> + <tr> + <th scope="row">Gent</th> + <td>46</td> + <td>18</td> + <td>50</td> + <td>61</td> + <td>15</td> + </tr> + <tr> + <th scope="row">Brussels</th> + <td>51</td> + <td>27</td> + <td>38</td> + <td>69</td> + <td>28</td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">The Netherlands</th> + <th scope="row">Amsterdam</th> + <td>89</td> + <td>34</td> + <td>69</td> + <td>85</td> + <td>38</td> + </tr> + <tr> + <th scope="row">Utrecht</th> + <td>80</td> + <td>12</td> + <td>43</td> + <td>36</td> + <td>19</td> + </tr> + </tbody> +</table> + +<p>しかし、あなたがそれらの視覚的な関連付けをすることができないならば、どうですか？ では、どのようにして上記のような表を読むことができますか？ 視覚障碍者は、Webページの情報を読み上げるスクリーンリーダーをよく使用します。 平文を読んでいるときはこれは問題ありませんが、表を解釈することは視覚障碍者にとっては非常に困難な場合があります。 それでも、適切なマークアップを使用して、視覚的な関連付けをプログラムによる関連付けに置き換えることができます。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="http://www.who.int/mediacentre/factsheets/fs282/en/">WHO のデータ</a>によると、2017年の視覚障碍者は約253百万人です。</p> +</div> + +<p>記事のこのセクションでは、可能な限りアクセス可能な表にするためのその他の手法について説明します。</p> + +<h3 class="attTitle" id="Using_column_and_row_headers" name="Using_column_and_row_headers">列ヘッダーと行ヘッダーを使用する</h3> + +<p>スクリーンリーダーは全てのヘッダーを識別し、それらを使用してそれらのヘッダーとそれらが関連するセルとの間のプログラムによる関連付けを行います。 列ヘッダーと行ヘッダーの組み合わせにより、各セル内のデータが識別および解釈されるため、スクリーンリーダーのユーザは、晴眼のユーザの場合と同様に表を解釈できます。</p> + +<p>前の記事ですでにヘッダーについて説明しました — <a href="/ja/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements"><code><th></code> 要素によるヘッダーの追加</a>を参照してください。</p> + +<h3 class="attTitle" id="The_scope_attribute" name="The_scope_attribute">scope 属性</h3> + +<p>この記事の新しい話題は {{htmlattrxref("scope","th")}} 属性です。 これは <code><th></code> 要素に追加して、ヘッダーがどのセルのヘッダーであるかをスクリーンリーダーに正確に伝えることができます — 例えば、それが入っているのは行のヘッダーなのか、それとも列のヘッダーなのか？ 先ほどの支出記録の例を振り返ると、次のように列ヘッダーを列ヘッダーとして明確に定義できます。</p> + +<pre class="brush: html"><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></pre> + +<p>そして各行は次のように定義されたヘッダーを持つことができます(列ヘッダーと同様に行ヘッダーを追加した場合)。</p> + +<pre class="brush: html"><tr> + <th scope="row">Haircut</th> + <td>Hairdresser</td> + <td>12/09</td> + <td>Great idea</td> + <td>30</td> +</tr></pre> + +<p>スクリーンリーダーは、このように構成されたマークアップを認識し、例えば、ユーザが列全体または行全体を一度に読み上げることを可能にします。</p> + +<p><code>scope</code> には、さらに2つの可能な値、<code>colgroup</code> と <code>rowgroup</code> があります。 これらは、複数列または複数行の上に位置する見出しに使用されます。 このセクションの最初にある "Items Sold August 2016" の表を見ると、"Clothes" セルが "Trousers"、"Skirts"、"Dresses" のセルの上に位置することがわかります。 これらのセルは全てヘッダー(<code><th></code>)としてマークアップするべきで、 "Clothes" はそれらの上に位置し、他の3つの小見出しを定義する見出しです。 従って、"Clothes" は <code>scope="colgroup"</code> の属性を得るべきですが、それ以外は <code>scope="col"</code> の属性を得ます。</p> + +<h3 class="attTitle" id="The_id_and_headers_attributes" name="The_id_and_headers_attributes">id 属性と headers 属性</h3> + +<p><code>scope</code> 属性を使用する代わりに、{{htmlattrxref("id")}} 属性と {{htmlattrxref("headers", "td")}} 属性を使用して、ヘッダーとセル間の関連付けを作成することもできます。 使い方は次のとおりです。</p> + +<ol> + <li>各 <code><th></code> 要素に一意の <code>id</code> を追加します。</li> + <li>各 <code><td></code> 要素に <code>headers</code> 属性を追加します。 各 <code>headers</code> 属性には、そのセルのヘッダーとして機能する全ての <code><th></code> 要素の <code>id</code> のリストを、スペースで区切って含める必要があります。</li> +</ol> + +<p>これは HTML の表に、表内の各セルの位置の明示的な定義を与えます。 これは、それが属する各列と各行のヘッダーによって定義されます。 スプレッドシートのようなものです。 それがうまく機能するためには、表は本当に列と行の両方のヘッダーを必要とします。</p> + +<p>支出コストの例に戻ると、前の2つのコードは次のように書き直すことができます。</p> + +<pre class="brush: html"><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></pre> + +<div class="note"> +<p><strong>注</strong>: この方法では、ヘッダーとデータセルの間に非常に正確な関連付けが作成されますが、マークアップがはるかに多くなり、エラーの余地がありません。 <code>scope</code> アプローチは通常ほとんどの表に十分です。</p> +</div> + +<h3 id="Active_learning_playing_with_scope_and_headers" name="Active_learning_playing_with_scope_and_headers">アクティブラーニング: scope と headers で遊ぶ</h3> + +<ol> + <li>この最後の演習では、まず <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items-sold.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> のローカルコピーを新しいディレクトリに作成してください。</li> + <li>この表をより適切にするために適切な <code>scope</code> 属性を追加してみてください。</li> + <li>最後に、最初のファイルの別のコピーを作成して、今度は、<code>id</code> 属性と <code>headers</code> 属性を使用して表にアクセスしやすくします。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 完成した例と照らし合わせて作業内容を確認できます — <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a>(<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">ライブもご覧ください</a>)および <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a>(<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">ライブもご覧ください</a>)。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>表の HTML について他にも学べることがいくつかありますが、現時点で知っておく必要があることは全てここで説明しました。 この時点で、HTML の表のスタイリングについて学びたいと思うかもしれません — <a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">スタイリングされた表</a>を参照してください。</p> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> + +<div> +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">評価: 太陽系の惑星のデータを構造化する</a></li> +</ul> +</div> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">この記事は、 HTML の表を始めるために、行やセルなどとても基本的なところから、見出し、複数列や行のセルの結合、スタイルを適用するためにセルの列をすべてグループ化する方法などを扱います。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を参照)。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>基本的に HTML 表に親しむこと。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_table" name="What_is_a_table">テーブルとは何か</h2> + +<p>テーブルとは、行と列からなる構造化されたデータの集合 (<strong>表形式データ</strong>) です。テーブルを使用すると、さまざまな種類のデータ間のある種の関連性、たとえば人と年齢、1日または1週間、地元のプールの予定時刻などを示す値をすばやく簡単に検索できます。</p> + +<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> + +<p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> + +<p>1800 年以降のこの米国国勢調査文書で証明されているように、テーブルは人間社会で非常に一般的に使用されており、長い間使用されてきました。</p> + +<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> + +<p>したがって、HTML の作成者が Web 上で表形式データを構造化して表示するための手段を提供したことは不思議ではありません。</p> + +<h3 id="How_does_a_table_work" name="How_does_a_table_work">テーブルはどのように動作するか</h3> + +<p>テーブルの特徴は、厳密だということです。 情報は、行と列ヘッダーを視覚的に関連付けることによって簡単に解釈されます。例えば下の表を見て、62個の衛星を持つ巨大ガス惑星である木星を見つけてください。関係する行と列との見出し部分を組み合わせて考えることで答えを見つけることができます。</p> + +<table> + <caption>太陽系の惑星のデータ (<span class="tlid-translation translation" lang="ja"><span title="">惑星の事実は「<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa の惑星情報シート - メートル法</a>」から引用</span></span>)</caption> + <thead> + <tr> + <td colspan="2"></td> + <th scope="col">名前</th> + <th scope="col">質量 (10<sup>24</sup>kg)</th> + <th scope="col">直径 (km)</th> + <th scope="col">密度 (kg/m<sup>3</sup>)</th> + <th scope="col">重力 (m/s<sup>2</sup>)</th> + <th scope="col">一日の長さ (hours)</th> + <th scope="col">太陽からの距離 (10<sup>6</sup>km)</th> + <th scope="col">平均気温 (°C)</th> + <th scope="col">月の数</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2" rowspan="4" scope="rowgroup">地球型惑星</th> + <th scope="row">水星</th> + <td>0.330</td> + <td>4,879</td> + <td>5427</td> + <td>3.7</td> + <td>4222.6</td> + <td>57.9</td> + <td>167</td> + <td>0</td> + <td>太陽に一番近い</td> + </tr> + <tr> + <th scope="row">金星</th> + <td>4.87</td> + <td>12,104</td> + <td>5243</td> + <td>8.9</td> + <td>2802.0</td> + <td>108.2</td> + <td>464</td> + <td>0</td> + <td></td> + </tr> + <tr> + <th scope="row">地球</th> + <td>5.97</td> + <td>12,756</td> + <td>5514</td> + <td>9.8</td> + <td>24.0</td> + <td>149.6</td> + <td>15</td> + <td>1</td> + <td>私たちの世界</td> + </tr> + <tr> + <th scope="row">火星</th> + <td>0.642</td> + <td>6,792</td> + <td>3933</td> + <td>3.7</td> + <td>24.7</td> + <td>227.9</td> + <td>-65</td> + <td>2</td> + <td>赤い惑星</td> + </tr> + <tr> + <th rowspan="4" scope="rowgroup">木星型惑星</th> + <th rowspan="2" scope="rowgroup">巨大ガス惑星</th> + <th scope="row">木星</th> + <td>1898</td> + <td>142,984</td> + <td>1326</td> + <td>23.1</td> + <td>9.9</td> + <td>778.6</td> + <td>-110</td> + <td>67</td> + <td>最大の惑星</td> + </tr> + <tr> + <th scope="row">土星</th> + <td>568</td> + <td>120,536</td> + <td>687</td> + <td>9.0</td> + <td>10.7</td> + <td>1433.5</td> + <td>-140</td> + <td>62</td> + <td></td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">巨大氷惑星</th> + <th scope="row">天王星</th> + <td>86.8</td> + <td>51,118</td> + <td>1271</td> + <td>8.7</td> + <td>17.2</td> + <td>2872.5</td> + <td>-195</td> + <td>27</td> + <td></td> + </tr> + <tr> + <th scope="row">海王星</th> + <td>102</td> + <td>49,528</td> + <td>1638</td> + <td>11.0</td> + <td>16.1</td> + <td>4495.1</td> + <td>-200</td> + <td>14</td> + <td></td> + </tr> + <tr> + <th colspan="2" scope="rowgroup"><span class="tlid-translation translation" lang="ja"><span title="">矮星</span></span></th> + <th scope="row">冥王星</th> + <td>0.0146</td> + <td>2,370</td> + <td>2095</td> + <td>0.7</td> + <td>153.3</td> + <td>5906.4</td> + <td>-225</td> + <td>5</td> + <td>2006年に惑星として分類されなくなりましたが、これは<a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">物議を醸しています</a>。</td> + </tr> + </tbody> +</table> + +<p>正しく行われれば、盲目の人でも HTML テーブルの表形式データを解釈できます。HTML テーブルが成功すれば、晴眼者でも視覚障害者でも同様にユーザエクスペリエンスが向上するはずです。</p> + +<h3 id="Table_styling" name="Table_styling">表のスタイル付け</h3> + +<p>GitHub の<a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">ライブサンプルもご覧ください</a>。テーブルがもう少し読みやすくなっているということに気付くでしょう。これは、今までこのページで見てきたテーブルには最小限のスタイルしか施されていないからです。対して、GitHub バージョンではより特別な意味を持った CSS が適用されています。</p> + +<p>幻想にふけってはいけません。テーブルを Web 上で有効にするには、<a href="/ja/docs/Learn/CSS">CSS</a> でスタイル情報を提供し、HTML でしっかりとした構造を提供する必要があります。このモジュールでは、HTML 部分に焦点を合わせています。CSS の部分については、ここを終えた後に<a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">表のスタイリング</a>の記事を参照してください。</p> + +<p>このモジュールでは CSS に焦点を当てませんが、スタイルを設定しなくてもデフォルトのテーブルより読みやすくなるように、最小限の CSS スタイルシートを使用できます。<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">スタイルシートはここ</a>で、そしてスタイルシートを適用する <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">HTML テンプレート</a>も見つけることができます。これらを一緒にすると、HTML テーブルを試すための良い出発点になります。</p> + +<h3 id="When_should_you_NOT_use_HTML_tables" name="When_should_you_NOT_use_HTML_tables">HTML の表を使用するべきではない場面</h3> + +<p>HTML テーブルは表形式のデータに使用する必要があります - これがそれらが設計されているものです。残念ながら、HTML テーブルを使用して Web ページをレイアウトする人が多くいました。ヘッダーを含む1行、コンテンツ列を含む1行、フッターを含む1行などです。<a href="/ja/docs/Learn/Accessibility">アクセシビリティ学習モジュール</a>の<a href="/ja/docs/Learn/Accessibility/HTML#Page_layouts">ページレイアウト</a>でより多くの詳細と例を見つけることができます。これは一般的に使用されていました。ブラウザ間での CSS サポートがひどいものだったからです。テーブルレイアウトは、現在ではあまり一般的ではありませんが、Web の一部の場所ではまだ見られることがあります。</p> + +<p>つまり、<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>手法ではなく、テーブルをレイアウトに使用するのは得策ではありません。主な理由は次のとおりです。</p> + +<ol> + <li><strong>レイアウトテーブルは視覚障害のあるユーザのアクセシビリティを低下させます。</strong>視覚障害者が使用する<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">スクリーンリーダー</a>は、HTML ページに存在するタグを解釈し、その内容をユーザに読み上げます。テーブルはレイアウトに適したツールではなく、マークアップは CSS のレイアウト手法よりも複雑であるため、スクリーンリーダーの出力はユーザにとってわかりにくいものになります。</li> + <li><strong>テーブルはタグスープを生成します。</strong>前述のように、テーブルレイアウトは通常、適切なレイアウト手法よりも複雑なマークアップ構造を含みます。これにより、コードの記述、保守、およびデバッグが困難になる可能性があります。</li> + <li><strong>テーブルは自動的には応答しません。</strong>適切なレイアウトコンテナ ({{htmlelement("header")}}、{{htmlelement("section")}}、{{htmlelement("article")}}、{{htmlelement("div")}}など) を使用する場合、その幅はデフォルトで親要素の100％になります。一方、テーブルはデフォルトでは内容に応じてサイズが設定されているため、さまざまなデバイスで効果的に機能するようにテーブルレイアウトのスタイルを変更するには、追加の対策が必要です。</li> +</ol> + +<h2 id="Active_learning_Creating_your_first_table" name="Active_learning_Creating_your_first_table">アクティブラーニング: 最初の表の作成</h2> + +<p>テーブル理論については十分に説明したので、実用的な例に飛び込み、簡単なテーブルを作成しましょう。</p> + +<ol> + <li>まず最初に、ローカルマシンの新しいディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> のローカルコピーを作成します。</li> + <li>すべてのテーブルの内容は、<strong><code><a href="/ja/docs/Web/HTML/Element/table"><table></table></a></code></strong> という2つのタグで囲まれています。HTML のボディの中にこれらを追加してください。</li> + <li>テーブル内の最小のコンテナは、<strong><code><a href="/ja/docs/Web/HTML/Element/td"><td></a></code></strong> 要素によって作成されるテーブルセルです ('td' は 'table data' を表します)。テーブルタグ内に次のコードを追加します。 + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + </li> + <li>4行のセルが必要な場合は、これらのタグを3回コピーする必要があります。テーブルの内容を次のように更新します。 + <pre class="brush: html notranslate"><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></pre> + </li> +</ol> + +<p>お分かりのように、セルは互いの下に配置されているのではなく、同じ行に配置されています。 各 <code><td></code> 要素は単一のセルを作成し、それらが一緒になって最初の行を構成します。 追加するセルごとに行が長くなります。</p> + +<p>この行が大きくなるのを防ぎ、後続のセルを2行目に配置するには、<strong><code><a href="/ja/docs/Web/HTML/Element/tr"><tr></a></code></strong> 要素を使用する必要があります ('tr' は 'table row' を表します)。今これを調査しましょう。</p> + +<ol> + <li>以下のように、既に作成した4つのセルを <code><tr></code> タグ内に配置します。 + + <pre class="brush: html notranslate"><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></pre> + </li> + <li>1行作成したら、あと1、2行作成してみましょう。各行は追加の <code><tr></code> 要素で囲み、各セルを <code><td></code> に含める必要があります。</li> +</ol> + +<p>これにより、テーブルは次のようになります。</p> + +<table> + <tbody> + <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> + <tr> + <td>Second row, first cell.</td> + <td>Cell 2.</td> + <td>Cell 3.</td> + <td>Cell 4.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: GitHub では <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> としても見つけることができます (<a href="https://mdn.github.io/learning-area/html/tables/basic/simple-table.html">こちらも参照してください</a>)。</p> +</div> + +<h2 id="Adding_headers_with_<th>_elements" name="Adding_headers_with_<th>_elements"><th> 要素による見出しの追加</h2> + +<p>それでは表の見出し、つまり行または列の先頭に配置され、その行または列に含まれるデータの種類を定義する特別なセルに注目しましょう(例として、この記事の最初の例の「Person」セルと「Age」セルを参照してください)。それらがなぜ有用であるかを説明するために、次の表の例を見てください。まずはソースコードから：</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>実際にレンダリングされたテーブルは次のとおりです。</p> + +<table> + <tbody> + <tr> + <td></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> + </tbody> +</table> + +<p>ここで問題は、何が起こっているかを知ることはできますが、データを相互参照することができるほど簡単ではないことです。列と行の見出しが何らかの形で目立つ場合は、その方がはるかに良いでしょう。</p> + +<h3 id="Active_learning_table_headers" name="Active_learning_table_headers">アクティブラーニング: 表の見出し</h3> + +<p>このテーブルを改良してみましょう。</p> + +<ol> + <li>まず、あなたのローカルマシンの新しいディレクトリに <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> ファイルのローカルコピーを作ります。HTML には、上で見たのと同じ Dogs の例が含まれています。</li> + <li>テーブルのヘッダを視覚的にも意味的にもヘッダとして認識させるには、<strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> 要素を使用します ('th' は 'table header' を表します)。これは <code><td></code> とまったく同じように機能しますが、通常のセルではなくヘッダーを表す点が異なります。HTML を開き、テーブルのヘッダを囲む全ての <code><td></code> 要素を <code><th></code> 要素に変更してください。</li> + <li>HTML を保存してブラウザにロードすると、ヘッダーがヘッダーらしく見えます。</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: 完成した例は GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> にあります (<a href="https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">こちらもご覧ください</a>)。</p> +</div> + +<h3 id="Why_are_headers_useful" name="Why_are_headers_useful">なぜ見出しは便利なのか</h3> + +<p>私たちはすでにこの質問に部分的に答えました — ヘッダーがはっきり目立つときには探しているデータを見つけやすく、デザインは一般的に見栄えがよくなります。</p> + +<div class="note"> +<p><strong>メモ</strong>: テーブルの見出しにはデフォルトのスタイルがいくつかあります。テーブルに独自のスタイルを追加しなくても、目立つように太字で中央に配置されています。</p> +</div> + +<p>テーブルヘッダには、<code>scope</code> 属性 (次の記事で学ぶことになります) とともに、追加の利点もあります。それらを使用すると、各ヘッダーを同じ行または列のすべてのデータに関連付けることで、テーブルをよりアクセスしやすくすることができます。これにより、スクリーンリーダーはデータの行全体または列全体を一度に読み取ることができます。これは非常に便利です。</p> + +<h2 id="Allowing_cells_to_span_multiple_rows_and_columns" name="Allowing_cells_to_span_multiple_rows_and_columns">セルを複数の行や列で結合できるようにする</h2> + +<p>セルを複数の行または列にまたがるようにしたい場合があるかもしれません。次の簡単な例を見てください。これは一般的な動物の名前を示しています。場合によっては、動物の名前の横にオスとメスの名前を表示したいことがあります。そうでない場合もあるでしょう。そのような場合は、動物の名前を表全体に広げたいだけです。</p> + +<p>最初のマークアップは次のようになります。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Animals<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Hippopotamus<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Horse<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Mare<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Stallion<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Crocodile<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Chicken<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Hen<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Rooster<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span></code></pre> + +<p>しかし、出力結果は私たちが望むものではありません。</p> + +<table> + <tbody> + <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> + </tbody> +</table> + +<p>"Animals"、"Hippopotamus"、および "Crocodile" を2列にまたがって作成し、"Horse" と "Chicken" を2列にまたがって作成する方法が必要です。幸いなことに、テーブルのヘッダーとセルには <code>colspan</code> 属性と <code>rowspan</code> 属性があり、それを使って実行できます。どちらも単位なしの数値を受け入れます。これはスパンする行数または列数と同じです。たとえば、<code>colspan="2"</code> を指定すると、セルは2列にまたがります。</p> + +<p>このテーブルを改善するために <code>colspan</code> と <code>rowspan</code> を使用しましょう。</p> + +<ol> + <li>まず、ご使用のローカルマシンの新しいディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> ファイルと <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> ファイルのローカルコピーを作成します。HTML には、上記と同じ動物の例が含まれています。</li> + <li>次に、<code>colspan</code> を使用して "Animals"、"Hippopotamus"、および "Crocodile" を2列にまたがって作成します。</li> + <li>最後に、<code>rowspan</code> を使用して "Horse" と "Chicken" を2行にまたがるようにします。</li> + <li>改善を確認するには、ブラウザでコードを保存して開きます。</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: 完成した例は GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> にあります (<a href="https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">こちらもご覧ください</a>)。</p> +</div> + +<h2 id="Providing_common_styling_to_columns" name="Providing_common_styling_to_columns">列への共通のスタイル付け</h2> + +<p><span class="tlid-translation translation" lang="ja"><span title="">先に進む前に、この記事で最後に紹介する機能があります。</span><br> + <span title="">HTML では、データの列全体のスタイル情報を1か所にまとめて定義することができます</span></span> — <strong><code><a href="/ja/docs/Web/HTML/Element/col"><col></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素と</span></span> <strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素です。</span><span title="">列にスタイルを指定するのは少々面倒で非効率的な場合があるためです。列内の</span></span> <code><td></code> <span class="tlid-translation translation" lang="ja"><span title="">や</span></span> <code><th></code> <span class="tlid-translation translation" lang="ja"><span title="">ごとにスタイル情報を指定するか、</span></span>{{cssxref(":nth-child()")}}<span class="tlid-translation translation" lang="ja"><span title=""> などの複雑なセレクタを使用する必要があります。</span></span></p> + +<p>次の簡単な例を見てください。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>これにより、次のような出力結果が得られます。</p> + +<table> + <tbody> + <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> + </tbody> +</table> + +<p>列内の3つすべてのセルにわたってスタイル情報を繰り返す必要があるため、これは理想的ではありません (実際のプロジェクトでは3つすべてに <code>class</code> を設定し、別のスタイルシートでスタイルを指定することになります)。これを行う代わりに、<code><col></code> 要素で情報を1回指定できます。<code><col></code> 要素は、開始 <code><table></code> タグのすぐ下の <code><colgroup></code> コンテナ内で指定されます。次のようにテーブルを指定することで、上と同じ効果を生み出すことができます。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>事実上、2つの "スタイル列" を定義しています。1つは各列のスタイル情報を指定しています。最初の列にはスタイルを設定していませんが、空白の <code><col></code> 要素を含める必要があります。そうでない場合、スタイルは最初の列にも適用されます。</p> + +<p>両方の列にスタイル情報を適用する場合は、次のように span 属性を持つ1つの <code><col></code> 要素を含めるだけで済みます。</p> + +<pre class="brush: html notranslate"><colgroup> + <col style="background-color: yellow" span="2"> +</colgroup></pre> + +<p><code>colspan</code> や <code>rowspan</code> と同じように、<code>span</code> はスタイルを適用したい列の数を指定する単位なしの数値を取ります。</p> + +<h3 id="Active_learning_colgroup_and_col" name="Active_learning_colgroup_and_col">アクティブラーニング: colgroup と col</h3> + +<p>今こそ自分でやってみるべき時です。</p> + +<p>以下に言語教師のタイムテーブルを見ることができます。金曜日に、彼女は一日中オランダ語を教える新しいクラスを持っていますが、彼女はまた火曜日と木曜日に数期間ドイツ語を教えています。彼女は教えている日を含むコラムをハイライトしたいと思います。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p> + +<p>以下の手順に従ってテーブルを再作成してください。</p> + +<ol> + <li>まず、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> ファイルのローカルコピーをあなたのローカルマシンの新しいディレクトリに作成してください。HTML には、上で見たのと同じ表から、列のスタイル情報を除いたものが含まれています。</li> + <li><code><col></code> 要素を追加することができる <code><table></code> タグのすぐ下のテーブルの上部に <code><colgroup></code> 要素を追加します (以下の残りの手順を参照)。</li> + <li>最初の2つの列はスタイルなしのままにする必要があります。</li> + <li>3列目に背景色を追加します。<code>style</code> 属性の値は<code>background-color:#97DB9A;</code> です。</li> + <li>4列目に別の幅を設定します。<code>style</code> 属性の値は <code>width: 42px;</code> です。</li> + <li>5列目に背景色を追加します。<code>style</code> 属性の値は <code>background-color: #97DB9A;</code> です。</li> + <li>これは特別な日であり、彼女は新しいクラスを教えていることを示すために、6番目の列に異なる背景色と境界線を追加します。<code>style</code> <span class="tlid-translation translation" lang="ja"><span title="">属性の値は </span></span><code>background-color:#DCC48E; border:4px solid #C1437A;</code><span class="tlid-translation translation" lang="ja"><span title=""> です。</span></span></li> + <li>The last two days are free days, so just set them to no background color but a set width; the value for the <code>style</code> attribute is <code>width: 42px;</code><br> + 最後の2日間は空き日なので、背景色を設定せずに幅を設定します。<code>style</code> 属性の値は <code>width: 42px;</code> です。</li> +</ol> + +<p>例でどのようにして上手くいくかを見てください。どうしていいか分からなくなったり、作業をチェックしたい場合は、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> として GitHub に私たちのバージョンを見つけることができます (<a href="https://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">それもライブを見てください</a>)。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>HTML テーブルの基本はこれで終わりです。次の記事では、もう少し高度なテーブルの機能を見て、視覚障害者にとってそれらがどれほどアクセシブルであるかを考えます。</p> + +<p>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> + +<div> +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">評価: 太陽系の惑星のデータを構造化する</a></li> +</ul> +</div> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">HTML でのとてもよくある仕事はテーブルデータの構造化で、数々の要素と属性がこの目的のためにあります。スタイリング用の <a href="/ja/docs/Learn/CSS">CSS</a> と組み合わせて、HTML は Web 上に、学校の授業の計画や、水泳の時間割や、好きな恐竜やフットボールチームの統計情報といった、情報のテーブルを簡単に表示できます。このモジュールではHTMLを使ってテーブルデータを構造化するのに必要な知識を一通り案内します。</p> + +<h2 id="Prerequisites" name="Prerequisites">必要となる知識</h2> + +<p>このモジュールを学習する前に、HTMLの基本について既に理解している必要があります。もしまだ理解が足りていないと感じているならば <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を参照してください。</p> + +<div class="note"> +<p><strong>注</strong>: もしあなたが自分のファイルを作成することのできないコンピュータ・タブレット端末そのほかのデバイスで作業をしているならば、 インターネット上の <a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a>といったコーディングプログラムを用いてほとんどのコードの例を試してみることができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<p>このモジュールは以下の話題を含んでいます。:</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML テーブルの基本</a></dt> + <dd>この記事を読めば、HTMLのテーブルについてのイロハを知ることができます。行や列、見出しやカラムと行を複数に分割するセルの作成を扱い、またいかにしてカラムにあるセルをまとめて見栄えを整えるかについて扱います。</dd> + <dt><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML テーブルの高度な機能とアクセシビリティ</a></dt> + <dd>このモジュールの2つ目の記事では、 HTMLのもう少し発展的な機能について扱います。 たとえば、見出しや要約、そして行をまとめて表のhead,bodyそしてフッターのsectionにすることです。同時に視覚にハンディキャップを有する人びとのために表のアクセシビリティについても記事で扱います。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">惑星データの構造化</a></dt> + <dd>テーブルについての記事を理解できたかの評価として、太陽系の星についてのいくつかのデータを提供し、あなたにHTMLを用いて表にしてもらいます。</dd> +</dl> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">テーブルの評価では、太陽系の惑星に関するいくつかのデータを提供し、それを HTML テーブルに構造化しましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>この評価を行う前に、このモジュールのすべての記事について学んでいるべきです。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>HTML の表やそれに付随する機能に関する理解を確認する。</td> + </tr> + </tbody> +</table> + +<h2 id="はじめに">はじめに</h2> + +<p>この評価を開始するには、ローカルコンピュータの新しいディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>、および <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> のローカルコピーを作成します。</p> + +<div class="note"> +<p><strong>メモ</strong>: 代わりとして、<a class="external external-icon" href="https://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> のようなサイトを使って評価することもできます。HTML、CSS、および JavaScript をこれらのオンラインエディタのいずれかに貼り付けることができます。使用しているオンラインエディタに個別の JavaScript/CSS パネルがない場合は、それらを HTML ページ内に <code><script></code>/<code><style></code> 要素をインラインで配置してください。</p> +</div> + +<h2 id="やることの概要">やることの概要</h2> + +<p>あなたは学校で働いています。現在生徒たちは私たちの太陽系の惑星を研究しています、そしてあなたは彼らに惑星についての事実と数字を調べるために分かりやすいデータのセットを提供したいです。HTML データテーブルが理想的です — 利用可能な生データを取得し、それをテーブルに変換する必要があります。以下の手順に従ってください。</p> + +<p>完成した表は次のような外観を備えているはずです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p> + +<p>また、<a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">ここに掲載されている例を見る</a>こともできます (ソースコードを見ないでください — チートしないでください)。</p> + +<ul> +</ul> + +<h2 id="手順">手順</h2> + +<p>次の手順では、表の例を完成させるために必要な作業について説明します。必要なすべてのデータは <code>planets-data.txt</code> ファイルに含まれています。データをうまく視覚化できない場合は、上記の実際の例を見てみるか、図を描いてみてください。</p> + +<ol> + <li><code>blank-template.html</code> のコピーを開き、外部コンテナ、テーブルヘッダー、およびテーブル本体を指定してテーブルを作成します。この例ではテーブルフッターは必要ありません。</li> + <li>提供されたキャプションを自分のテーブルに追加します。</li> + <li>すべての列ヘッダーを含む行をテーブルヘッダーに追加します。</li> + <li>すべての行見出しを意味的に見出しにすることを忘れずに、テーブル本体内にすべてのコンテンツ行を作成します。</li> + <li>すべてのコンテンツが正しいセルに挿入されていることを確認してください — 生データでは、惑星データの各行が関連する惑星の隣に表示されます。</li> + <li>行ヘッダーと列ヘッダーを、それらが見出しとして機能する行、列、または行グループと明確に関連付けられるように属性を追加します。</li> + <li>すべての惑星名行ヘッダーを含む列のすぐ周りに黒い枠線を追加します。</li> +</ol> + +<h2 id="ヒントとTIPS">ヒントとTIPS</h2> + +<ul> + <li>ヘッダー行の最初のセルは空白で、2列にまたがる必要があります。</li> + <li>惑星名の行見出し (例: <em>土星</em>) の左側にあるグループの行見出し (例: <em>木星型惑星</em>) は、整理するのが少し面倒です。それぞれが正しい行数と列数にまたがるようにする必要があります。</li> + <li>ヘッダーを行/列に関連付ける1つの方法は、他の方法よりもはるかに簡単です。</li> +</ul> + +<h2 id="評価">評価</h2> + +<p>あなたが組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もし自己学習しているのであれば、<a href="https://discourse.mozilla.org/t/structuring-planet-data-assessment/24680">この練習問題についてのディスカッションスレッド</a>、または <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください。不正をすることによって得られるものは何もありません！</p> + +<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">評価: 太陽系の惑星のデータを構造化する</a></li> +</ul> |