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/introduction_to_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/introduction_to_html')
10 files changed, 3562 insertions, 0 deletions
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> |