initial commit

5 files changed, 607 insertions, 0 deletions

diff --git a/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
new file mode 100644
index 0000000000..b53798c7d6
--- /dev/null
+++ b/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html
@@ -0,0 +1,126 @@
+---
+title: 画像にヒットマップを追加する
+slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
+tags:
+  - Graphics
+  - Guide
+  - HTML
+  - Intermediate
+  - Navigation
+translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
+---
+<div class="summary">
+<p>ここでは、イメージマップを設定する方法と、最初に検討すべきいくつかの欠点を説明します。</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td><a href="/ja/docs/Learn/Getting_started_with_the_web">基本的な HTML 文書の作成方法</a>と、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">アクセス可能な画像をウェブページに追加する方法</a>について、理解している必要があります。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>1つの画像の異なる領域を異なるページにリンクする方法を学びます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="warning">
+<p>この記事では、クライアント側のイメージマップについてのみ説明します。 ユーザーにマウスが必要なサーバー側のイメージマップは使用しないでください。</p>
+</div>
+
+<h2 id="Image_maps_and_their_drawbacks" name="Image_maps_and_their_drawbacks">イメージマップとその欠点</h2>
+
+<p>{{htmlelement('a')}} 内に画像をネストすると、画像全体が1つのウェブページにリンクします。 一方、イメージマップは、それぞれが異なるリソースにリンクするいくつかのアクティブな領域（「ホットスポット」と呼ばれます）を含みます。</p>
+
+<p>以前は、イメージマップは一般的なナビゲーションデバイスでしたが、そのパフォーマンスとアクセシビリティの影響を徹底的に検討することが重要です。</p>
+
+<p>いくつかの理由から<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">テキストリンク</a>（CSS でスタイル付けされたもの）がイメージマップよりも好ましい。 テキストリンクは軽量でメンテナンス可能で、多くの場合 SEO に優しく、アクセシビリティのニーズをサポートしています（スクリーンリーダー、テキストのみのブラウザ、翻訳サービスなど）。</p>
+
+<h2 id="How_to_insert_an_image_map_properly" name="How_to_insert_an_image_map_properly">イメージマップを正しく挿入する方法</h2>
+
+<h3 id="Step_1_The_image" name="Step_1_The_image">ステップ 1: 画像</h3>
+
+<p>どんな画像でも受け入れられるわけではありません。</p>
+
+<ul>
+ <li>画像は、人々が画像のリンクをたどったときに何が起こるかを明確にする必要があります。 <code>alt</code> テキストはもちろん必須ですが、多くの人々は決してそれを見ません。</li>
+ <li>画像には、ホットスポットの始まりと終わりを明示する必要があります。</li>
+ <li>ホットスポットは、どのビューポートサイズでも快適にタップするのに十分な大きさでなければなりません。 どれくらいの大きさか？ <a href="http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">72 × 72 CSS ピクセルは良好な最小値</a>（英語）で、タッチターゲット間の間隔に余裕もあります。 <a href="http://www.goethe-verlag.com/book2/">50languages.com</a> の世界地図（執筆時点）は、問題を完全に示しています。 アルバニアやエストニアよりもロシアや北米をタップする方がはるかに簡単です。</li>
+</ul>
+
+<p>{{htmlelement("img")}} 要素と {{htmlattrxref("alt",'img')}} テキストを使用して、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">常に同じ方法</a>で画像を挿入します。 画像がナビゲーションデバイスとしてのみ存在する場合、後で {{htmlelement('area')}} 要素に適切な {{htmlattrxref("alt",'area')}} テキストを指定すると <code>alt=""</code> と書くことができます。</p>
+
+<p>特殊な {{htmlattrxref("usemap","img")}} 属性が必要です。 イメージマップには、スペースを含まない一意の名前を考えてください。 次に、<code>usemap</code> 属性の値としてその名前（# が先行する）を割り当てます。</p>
+
+<pre class="brush: html">&lt;img
+  src="image-map.png"
+  alt=""
+  usemap="#example-map-1" /&gt;</pre>
+
+<h3 id="Step_2_Activate_your_hotspots" name="Step_2_Activate_your_hotspots">ステップ 2: ホットスポットを有効にする</h3>
+
+<p>このステップでは、すべてのコードを {{htmlelement('map')}} 要素内に配置します。 <code>&lt;map&gt;</code> には、上の <code>usemap</code> 属性で使用したのと同じマップ名の {{htmlattrxref("name","map")}} 属性だけが必要です。</p>
+
+<pre class="brush: html">&lt;map name="example-map-1"&gt;
+
+&lt;/map&gt;</pre>
+
+<p><code>&lt;map&gt;</code> 要素の中に {{htmlelement('area')}} 要素が必要です。 <code>&lt;area&gt;</code> 要素はそれぞれが1つのホットスポットに対応します。 キーボードでのナビゲーションを直観的に保つには、<code>&lt;area&gt;</code> 要素のソースでの順序がホットスポットの視覚的順序に対応していることを確認してください。</p>
+
+<p><code>&lt;area&gt;</code> 要素は空要素ですが、次の4つの属性が必要です。</p>
+
+<dl>
+ <dt>{{htmlattrxref('shape','area')}}</dt>
+ <dt>{{htmlattrxref('coords','area')}}</dt>
+ <dd>
+ <p><code>shape</code> は、<code>circle</code>（円）、<code>rect</code>（四角形）、<code>poly</code>（ポリゴン）、<code>default</code>（デフォルト）の4つの値のいずれかをとります。 （<code>default</code> の <code>&lt;area&gt;</code> は画像全体から、あなたが定義した他のホットスポットを除いたものです。） 選択した <code>shape</code> によって、<code>coords</code> で指定する必要がある座標情報が決まります。</p>
+
+ <ul>
+  <li>円の場合は、中心の x 座標と y 座標を指定し、その後に半径の長さを指定します。</li>
+  <li>四角形の場合は、左上角と右下角の x/y 座標を指定します。</li>
+  <li>ポリゴンの場合は、各角の x/y 座標を指定します（したがって、少なくとも6つの値）。</li>
+ </ul>
+
+ <p>座標は CSS ピクセルで与えます。</p>
+
+ <p>重なり合っている場合、ソースでの順序で選ばれます。</p>
+ </dd>
+ <dt>{{htmlattrxref('href','area')}}</dt>
+ <dd>リンク先のリソースの URL。 現在の領域をどこにもリンクさせたくない場合は、この属性を空白のままにしておくことができます（空白の円を描いている場合など）。</dd>
+ <dt>{{htmlattrxref('alt','area')}}</dt>
+ <dd>
+ <p>リンクがどこにあるのか、それが何をするのかを人に伝える必須の属性。 <code>alt</code> テキストは、画像が利用できない場合にのみ表示されます。 <a href="/ja/docs/Learn/Accessibility/HTML#Text_alternatives">アクセス可能なリンクテキストを書くためのガイドライン</a>を参照してください。</p>
+
+ <p><code>href</code> 属性が空白で、画像全体に既に <code>alt</code> 属性がある場合、<code>alt=""</code> と書くことができます。</p>
+ </dd>
+</dl>
+
+<pre class="brush: html">&lt;map name="example-map-1"&gt;
+  &lt;area shape="circle" coords="200,250,25"
+    href="page-2.html" alt="circle example" /&gt;
+
+
+  &lt;area shape="rect" coords="10, 5, 20, 15"
+    href="page-3.html" alt="rectangle example" /&gt;
+
+&lt;/map&gt;</pre>
+
+<h3 id="Step_3_Make_sure_it_works_for_everybody" name="Step_3_Make_sure_it_works_for_everybody">ステップ 3: 誰にとっても効果があることを確認する</h3>
+
+<p>多くのブラウザやデバイスでイメージマップを厳密にテストするまで、あなたは完了していません。 キーボードだけでリンクをたどってみてください。 画像をオフにしてみてください。</p>
+
+<p>イメージマップが約 240 px より広い場合は、ウェブサイトをレスポンシブにするためにさらに調整する必要があります。 座標が同じままでは、もはや画像と一致しないので、小さな画面の場合は画像のサイズを変更するだけでは不十分です。</p>
+
+<p>イメージマップを使用する必要がある場合は、Matt Stow の <a href="https://github.com/stowball/jQuery-rwdImageMaps">jQuery プラグイン</a>（英語）を調べることができます。 また、Dudley Storey は、<a href="http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps">イメージマップエフェクトとして SVG を使用する方法</a>（英語）と、その後にビットマップ画像用に <a href="http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG">SVG とラスターを組み合わせる方法</a>（英語）を示しています。</p>
+
+<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2>
+
+<ul>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("map")}}</li>
+ <li>{{htmlelement("area")}}</li>
+ <li><a href="http://www.maschek.hu/imagemap/imgmap">オンラインイメージマップエディター</a>（英語）</li>
+ <li><a href="http://blog.goolara.com/2014/06/05/image-maps-revisited/">Advice on handling email clients</a>（リンク切れ）</li>
+</ul>
diff --git a/files/ja/learn/html/howto/define_terms_with_html/index.html b/files/ja/learn/html/howto/define_terms_with_html/index.html
new file mode 100644
index 0000000000..4c2f87f8a2
--- /dev/null
+++ b/files/ja/learn/html/howto/define_terms_with_html/index.html
@@ -0,0 +1,151 @@
+---
+title: HTML で用語を定義する
+slug: Learn/HTML/Howto/Define_terms_with_HTML
+tags:
+  - Beginner
+  - Guide
+  - HTML
+  - Learn
+translation_of: Learn/HTML/Howto/Define_terms_with_HTML
+---
+<div class="summary">
+<p>HTML は、インラインであろうと構造化された用語集であろうと、記述の意味を伝達するいくつかの方法を提供します。 この記事では、キーワードを定義する際に適切にマークアップする方法について説明します。</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td><a href="/ja/docs/Learn/Getting_started_with_the_web">基本的な HTML 文書の作成方法</a>に精通している必要があります。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>新しいキーワードを導入する方法と説明リストを作成する方法を学びます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>用語の意味が必要なときは、おそらくまっすぐに辞書や用語集に行くでしょう。 辞書や用語集は、キーワードを1つ以上の説明と正式に関連付けます。 この場合は次のようになります。</p>
+
+<blockquote>
+<dl>
+ <dt>Blue (<em>Adjective</em>)</dt>
+ <dd>Of a color like the sky in a sunny day.<br>
+ <em><q>The clear blue sky</q></em></dd>
+ <dd>Of a subtle sadness, melancholy.<br>
+ <em><q>I'm feeling blue</q></em></dd>
+</dl>
+</blockquote>
+
+<p>しかし、私たちは常に次のように非公式にキーワードを定義しています。</p>
+
+<blockquote>
+<p><strong><dfn>Firefox</dfn></strong> は、Mozilla Foundation によって作成されたウェブブラウザです。</p>
+</blockquote>
+
+<p>これらのユースケースに対処するために、{{Glossary("HTML")}} には説明と説明された単語をマークするための{{Glossary("tag","タグ")}}が用意されているので、読者に意味が適切に伝わるようになります。</p>
+
+<h2 id="How_to_mark_informal_description" name="How_to_mark_informal_description">非公式の説明をマークする方法</h2>
+
+<p>教科書では、キーワードが初めて出てきたときに、キーワードを太字にしてすぐに定義するのが一般的です。</p>
+
+<p>私たちは HTML でもそうしていますが、HTML は視覚的なメディアではないので太字を使いません。 {{htmlelement("dfn")}} は、初めて出現するキーワードをマークするための特別な要素です。 <code>&lt;dfn&gt;</code> タグは、定義ではなく定義される単語の周りにあり、定義は段落全体で構成されています。</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;dfn&gt;Firefox&lt;/dfn&gt; は、Mozilla Foundation によって作成されたウェブブラウザです。&lt;/p&gt;
+</pre>
+
+<div class="note">
+<p>太字のもう1つの用途はコンテンツを強調することです。 太字自体は HTML の概念ではありませんが、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">強調を示すタグ</a>があります。</p>
+</div>
+
+<h3 id="Special_case_Abbreviations" name="Special_case_Abbreviations">特別な場合: 略語</h3>
+
+<p>{{htmlelement("abbr")}} で<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/%E9%AB%98%E5%BA%A6%E3%81%AA%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E6%88%90%E5%9E%8B#Abbreviations">略語を特別にマーク</a>することが最適です。 これにより、スクリーンリーダーが適切に読むことができ、すべての略語を統一的に操作できるようになります。 新しいキーワードの場合と同様に、初めて出現したときに略語を定義する必要があります。</p>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;dfn&gt;&lt;abbr&gt;HTML&lt;/abbr&gt; (hypertext markup language、ハイパーテキストマークアップ言語)&lt;/dfn&gt;
+   は、ウェブ上のドキュメントを構造化するために使用される記述言語です。
+&lt;/p&gt;</pre>
+
+<div class="note">
+<p>HTML 仕様は実際には略語を拡張するために <a href="http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element"><code>title</code> 属性を用意しています</a>（英語）。 ただし、これはインライン展開を提供するための許容可能な代替方法ではありません。 <code>title</code> の内容は、マウスを使用していない限り、ユーザーには完全に隠されています。 この仕様も同様に<a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">これを認めています</a>（英語）。</p>
+</div>
+
+<h3 id="Improve_accessibility" name="Improve_accessibility">アクセシビリティの向上</h3>
+
+<p>{{HTMLElement('dfn')}} は定義されたキーワードをマークし、現在の段落がキーワードを定義していることを示します。 言い換えれば、<code>&lt;dfn&gt;</code> 要素とそのコンテナの間に暗黙の関係があります。 より正式な関係を望む場合、または定義が段落全体ではなく1つの文で構成されている場合は、<code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> 属性を使用して、より正式に定義に関連付けることができます。</p>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;span id="ff"&gt;
+    &lt;dfn aria-describedby="ff"&gt;Firefox&lt;/dfn&gt;
+    は、Mozilla Foundation によって作成されたウェブブラウザです。
+  &lt;/span&gt;
+  &lt;a href="http://www.mozilla.org"&gt;mozilla.org&lt;/a&gt; からダウンロードできます。
+&lt;/p&gt;</pre>
+
+<p>支援技術は、この属性を使用して、指定された用語の代替テキストを見つけることができます。 <code>&lt;dfn&gt;</code> 要素だけでなく、キーワードを囲む任意のタグで <code>aria-describedby</code> を使用して定義できます。 <code>aria-describedby</code> は、説明を含む要素の {{htmlattrxref('id')}} を参照します。</p>
+
+<h2 id="How_to_build_a_description_list" name="How_to_build_a_description_list">説明リストを作成する方法</h2>
+
+<p>説明リストは、用語とそれに対応する説明のリスト（例: 定義リスト、辞書エントリ、よくある質問、およびキーと値のペア）です。</p>
+
+<div class="note">
+<p>説明リストは、対話が話し手を直接記述しないため、<a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">対話をマークアップするのには適していません</a>（英語）。 ここには、<a href="http://www.w3.org/TR/html5/common-idioms.html#conversations">対話をマークアップするための推奨事項</a>（英語）があります。</p>
+</div>
+
+<p>説明された用語は、{{htmlelement("dt")}} 要素内にあります。 対応する説明は直ちに続き、1つ以上の {{htmlelement("dd")}} 要素に含まれています。 説明リスト全体を {{htmlelement("dl")}} 要素で囲みます。</p>
+
+<h3 id="A_simple_example" name="A_simple_example">簡単な例</h3>
+
+<p>ここでは簡単な例として、食べ物と飲み物の種類を説明します。</p>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;jambalaya&lt;/dt&gt;
+    &lt;dd&gt;
+      rice-based entree typically containing chicken,
+      sausage, seafood, and spices
+    &lt;/dd&gt;
+
+  &lt;dt&gt;sukiyaki&lt;/dt&gt;
+    &lt;dd&gt;
+      Japanese specialty consisting of thinly sliced meat,
+      vegetables, and noodles, cooked in sake and soy sauce
+    &lt;/dd&gt;
+
+  &lt;dt&gt;chianti&lt;/dt&gt;
+    &lt;dd&gt;
+      dry Italian red wine originating in Tuscany
+    &lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<div class="note">
+<p>ご覧のとおり、基本パターンは <code>&lt;dt&gt;</code> の用語を <code>&lt;dd&gt;</code> の説明で置き換えることです。 行内に2つ以上の用語が存在する場合は、以下の説明はそれらのすべてに適用されます。 行内に2つ以上の説明が存在する場合、それらはすべて最後に指定された用語に適用されます。</p>
+</div>
+
+<h3 id="Improving_the_visual_output" name="Improving_the_visual_output">視覚的な出力を改善する</h3>
+
+<p>グラフィカルブラウザに前述のリストが表示される方法は次のとおりです。</p>
+
+<p>{{EmbedLiveSample("A_simple_example", 600, 180)}}</p>
+
+<p>キーワードをより際立たせたい場合は、それらを強調することができます。 HTML は視覚的な媒体ではないことを忘れないでください。 すべての視覚効果に対して {{glossary("CSS")}} が必要です。 CSS の {{cssxref("font-weight")}} プロパティは、ここで必要なものです。</p>
+
+<pre class="brush: css">dt {
+  font-weight: bold;
+}
+</pre>
+
+<p>これにより、以下のわずかに読みやすい結果が生成されます。</p>
+
+<p>{{EmbedLiveSample("How_to_build_a_description_list", 600, 180)}}</p>
+
+<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2>
+
+<ul>
+ <li>{{htmlelement("dfn")}}</li>
+ <li>{{htmlelement("dl")}}</li>
+ <li>{{htmlelement("dt")}}</li>
+ <li>{{htmlelement("dd")}}</li>
+ <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby 属性の使用方法</a></li>
+</ul>
diff --git a/files/ja/learn/html/howto/index.html b/files/ja/learn/html/howto/index.html
new file mode 100644
index 0000000000..a7e7f54478
--- /dev/null
+++ b/files/ja/learn/html/howto/index.html
@@ -0,0 +1,141 @@
+---
+title: 一般的な問題解決に HTML を使う
+slug: Learn/HTML/Howto
+tags:
+  - CodingScripting
+  - HTML
+translation_of: Learn/HTML/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">下記のリンクは、日常の解決すべき問題を HTML を使って解決する解決法を指しています。</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basic_structure" name="Basic_structure">基本構造</h3>
+
+<p>HTML の最も基本的な適用は文書の構造化です。HTML に慣れていないならここから始めるべきです。</p>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">基本的な HTML 文書を作成する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Web ページを論理的なセクションに分割する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">見出しと段落の適切な構成を設定する方法</a></li>
+</ul>
+
+<h3 id="Basic_text-level_semantics" name="Basic_text-level_semantics">基本的なテキストレベルのセマンティクス</h3>
+
+<p>HTML は文書の意味的な情報を提供することに特化しているので、HTML 文書内でメッセージをうまく伝える方法についてあなたが抱えるかもしれない多くの質問に答えます。</p>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">HTML を使ってリスト項目を作成する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">コンテンツを強調する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">テキストが重要だと示す方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Representing_computer_code">HTML でコンピュータコードを表示する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">画像やグラフィックに注釈を付ける方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Abbreviations">略語をマークして理解しやすくする方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Quotations">Web ページに引用を追加する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Howto/Define_terms_with_HTML">HTML で用語を定義する方法</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Hyperlinks" name="Hyperlinks">ハイパーリンク</h3>
+
+<p>HTML のための主な理由は {{Glossary("hyperlink", "ハイパーリンク")}}, を使ってナビゲーションを簡単にすることで、それは色々な方法で使われます:</p>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">HTML を使って目次を作成する方法</a></li>
+</ul>
+
+<h3 id="Images_multimedia" name="Images_multimedia">画像とマルチメディア</h3>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">Web ページに画像を追加する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Web ページにビデオコンテンツを追加する方法</a></li>
+</ul>
+
+<h3 id="Scripting_styling" name="Scripting_styling">スクリプトとスタイリング</h3>
+
+<p>HTML は文書の構造だけを解決します。表現の問題は {{glossary("CSS")}} を使うか、ページをインタラクティブにしたいならスクリプトを使います。</p>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Web ページで CSS を使用する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Web ページで JavaScript を使用する方法</a></li>
+</ul>
+
+<h3 id="Embedded_content" name="Embedded_content">埋め込みコンテンツ</h3>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Web ページに他の Web ページを埋め込む方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_&lt;embed>_and_&lt;object>_elements">Web ページに Flash コンテンツを追加する方法</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_or_advanced_problems" name="Uncommon_or_advanced_problems">あまりない、または上級の問題</h2>
+
+<p>基本を超えると、HTML はとてもリッチで複雑な問題を解決する高度な機能を提供します。この記事は直面するかもしれないあまりないユースケースに取り組むのに役立ちます。</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Forms" name="Forms">フォーム</h3>
+
+<p>フォームは、Web ページから Web サーバにデータを送信するために作成された複雑な HTML 構造です。<a href="/ja/docs/Learn/HTML/Forms">完全な専用ガイド</a>に目を通すことをお勧めします。ここから始めましょう。</p>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">簡単な Web フォームを作成する方法</a></li>
+ <li><a href="/ja/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Web フォームを構築化する方法</a></li>
+</ul>
+
+<h3 id="Tabular_information" name="Tabular_information">表の情報</h3>
+
+<p>表形式データという情報は、行と列のある表で整理する必要があります。これは最も複雑な HTML 構造の1つで、習得するのは簡単ではありません。</p>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Tables/Basics">データテーブルの作り方</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML テーブルをアクセシブルにする方法</a></li>
+</ul>
+
+<h3 id="Data_representation" name="Data_representation">データ表現</h3>
+
+<ul>
+ <li>数値とコード値をHTMLで表現する方法 - <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Superscript_and_subscript">上付き文字と下付き文字</a>、および<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Representing_computer_code">コンピュータコードの表現</a>を参照してください</li>
+ <li><a href="/ja/docs/Learn/HTML/Howto/Use_data_attributes">データ属性の使い方</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Advanced_text_semantics" name="Advanced_text_semantics">上級テキストセマンティクス</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/HTML/Element/br">HTMLの改行をコントロールする方法</a></li>
+ <li>変更をマークする方法 (追加および削除されたテキスト) - {{htmlelement("ins")}} と {{htmlelement("del")}} 要素を参照してください</li>
+</ul>
+
+<h3 id="Advanced_images_multimedia" name="Advanced_images_multimedia">上級の画像やマルチメディア</h3>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像を Web ページに追加する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Web ページにベクター画像を追加する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">画像の上にヒットマップを追加する方法</a></li>
+</ul>
+
+<h3 id="Internationalization" name="Internationalization">国際化</h3>
+
+<p>HTML は単一言語ではありません。一般的な国際化の問題を処理するためのツールを提供します。</p>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Setting_the_primary_language_of_the_document">単一の Web ページに複数の言語を追加する方法</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Marking_up_times_and_dates">HTML で日時を表示する方法</a></li>
+</ul>
+
+<h3 id="パフォーマンス">パフォーマンス</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages">高速ロードの HTML ページを作成する方法</a></li>
+</ul>
+</div>
+</div>
+
+<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></p>
diff --git a/files/ja/learn/html/howto/use_data_attributes/index.html b/files/ja/learn/html/howto/use_data_attributes/index.html
new file mode 100644
index 0000000000..fdcaf2ade1
--- /dev/null
+++ b/files/ja/learn/html/howto/use_data_attributes/index.html
@@ -0,0 +1,82 @@
+---
+title: データ属性の使用
+slug: Learn/HTML/Howto/Use_data_attributes
+tags:
+  - HTML
+  - HTML5
+  - ウェブ
+  - ガイド
+  - 例
+  - 独自データ属性
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<div>{{LearnSidebar}}</div>
+
+<p><a href="/ja/docs/Web/Guide/HTML/HTML5">HTML5</a> は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 <a href="/ja/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-*</code> 属性</a>により、標準外の属性、 DOM の追加プロパティ、 {{domxref("Node.setUserData()")}} のような特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。</p>
+
+<h2 id="HTML_syntax" name="HTML_syntax">HTML の構文</h2>
+
+<p>構文は単純です。あらゆる要素上で、名前が <code>data-</code> で始まるあらゆる属性がデータ属性です。例えば、記事 (article) があり、視覚表現を行わない追加情報を格納したいとします。 <code>data</code> 属性を使用するとこれだけです。</p>
+
+<pre class="brush: html">&lt;article
+  id="electric-cars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="JavaScript_access" name="JavaScript_access">JavaScript からのアクセス</h2>
+
+<p><a href="/ja/docs/Web/JavaScript">JavaScript</a> でこれらの属性の値を読み出すことも、とても簡単です。 {{domxref("Element.getAttribute", "getAttribute()")}} で完全な HTML での名前を使用して読むこともできますが、もっと簡単な方法が標準で定義されています。 {{domxref("HTMLElement.dataset", "dataset")}} プロパティを通して {{domxref("DOMStringMap")}} で読み出すことができます。</p>
+
+<p><code>dataset</code> オブジェクトを通して <code>data</code> 属性を取得するには、属性名の <code>data-</code> より後の部分を使用して取得します (なお、ダッシュは camelCase に変換されます)。</p>
+
+<pre class="brush: js">const article = document.getElementById('electric-cars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</pre>
+
+<p>それぞれのプロパティは文字列であり、読み書きができます。上記の場合、 <code>article.dataset.columns = 5</code> を設定すると、その属性が <code>"5"</code> に変わります。</p>
+
+<h2 id="CSS_access" name="CSS_access">CSS からのアクセス</h2>
+
+<p>データ属性はプレーンな HTML 属性であるため、<a href="/ja/docs/Web/CSS">CSS</a> からもアクセスできることに注意してください。 例えば、記事の親データを表示するには、次のように {{cssxref("attr")}} 関数を使用して CSS で<a href="/ja/docs/Web/CSS/content">生成したコンテンツ</a>を使用できます。</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>CSS の<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクタ</a>を使用して、次のようにデータに応じてスタイルを変更することもできます。</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p><a href="https://jsbin.com/ujiday/2/edit">この JSBin の例</a>では、これらすべてが一緒に機能していることがわかります。</p>
+
+<p>データ属性を保存して、ゲームのスコアなど、絶えず変化する情報を含めることもできます。 ここで CSS セレクタと JavaScript アクセスを使用すると、独自の表示ルーチンを作成することなく、気の利いたエフェクトを作成できます。 生成したコンテンツと CSS トランジション（transition、遷移）を使用した例については、<a href="https://www.youtube.com/watch?v=On_WyUB1gOk">このスクリーンキャスト</a>を参照してください（<a href="https://jsbin.com/atawaz/3/edit">JSBin の例</a>）。</p>
+
+<p>データ値は文字列です。 スタイリングを有効にするには、セレクタで数値を引用符で囲む必要があります。</p>
+
+<h2 id="Issues" name="Issues">問題</h2>
+
+<p>支援技術がアクセスできない可能性があるため、データ属性に表示およびアクセス可能なコンテンツを保存しないでください。 さらに、検索クローラーはデータ属性の値にインデックスを付けない場合があります。</p>
+
+<p>考慮すべき主な問題は、Internet Explorer のサポートとパフォーマンスです。 Internet Explorer 11 以降は標準のサポートを提供しますが、以前のバージョンはすべて <a href="https://caniuse.com/#feat=dataset"><code>dataset</code> をサポートしていません</a>（英語）。 IE 10 以下をサポートするには、代わりに {{domxref("Element.getAttribute", "getAttribute()")}} を使用してデータ属性にアクセスする必要があります。 また、通常の JS オブジェクトにこのデータを保存する場合と比較して、<a href="https://jsperf.com/data-dataset">データ属性の読み取りパフォーマンス</a>（英語）が低下します。</p>
+
+<p>ただし、カスタム要素に関連付けられたメタデータの場合、それらは優れたソリューションです。</p>
+
+<p>Firefox 49.0.2（およびおそらくそれに前後したバージョン）では、1022 文字を超えるデータ属性は Javascript（EcmaScript 4）によって読み取られません。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>この記事は、<a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">hacks.mozilla.org の JavaScript および CSS でのデータ属性の使用</a>（英語）から改編されました。</li>
+ <li>カスタム属性は SVG 2 でもサポートされています。 詳細については、{{domxref("SVGElement.dataset")}} および {{SVGAttr("data-*")}} を参照してください。</li>
+ <li><a href="https://www.sitepoint.com/use-html5-data-attributes/">HTML5 データ属性の使用方法</a>（Sitepoint、英語）</li>
+</ul>
diff --git a/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.html b/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.html
new file mode 100644
index 0000000000..598818ab3d
--- /dev/null
+++ b/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.html
@@ -0,0 +1,107 @@
+---
+title: ウェブページで JavaScript を使う方法
+slug: Learn/HTML/Howto/Use_JavaScript_within_a_webpage
+tags:
+  - Beginner
+  - HTML
+  - JavaScript
+  - OpenPractices
+translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage
+---
+<div class="summary">
+<p>Take your webpages to the next level by harnessing JavaScript. Learn in this article how to trigger JavaScript right from your HTML documents.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td><a href="/ja//Learn/HTML/Write_a_simple_page_in_HTML">基本的な HTML 文書の作成</a>方法を習熟している必要があります。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>HTMLファイルからJavaScript を起動する方法と、JavaScript にアクセスできるようにする最も良い習慣を学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="About_JavaScript" name="About_JavaScript">JavaScript について</h2>
+
+<p>{{Glossary("JavaScript")}} はウェブページをインタラクティブにするための、主にクライアントサイドで使われるプログラミング言語です。 JavaScript を使わなくてもすばらしいウェブページを作ることが<em>できます</em>が、JavaScript は全く新しいレベルの可能性を開きます。</p>
+
+<div class="note">
+<p>In this article we're going over the HTML code you need to make JavaScript take effect. If you want to learn JavaScript itself, you can start with our <a href="/ja//Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a> article. If you already know something about JavaScript or if you have a background with other プログラミング言語s, we suggest you jump directly into our <a href="/ja//docs/Web/JavaScript/Guide">JavaScript Guide</a>.</p>
+</div>
+
+<h2 id="How_to_trigger_JavaScript_from_HTML" name="How_to_trigger_JavaScript_from_HTML">HTML から JavaScript を起動する方法</h2>
+
+<p>Within a browser, JavaScript doesn't do anything by itself. You run JavaScript from inside your HTML webpages. To call JavaScript code from within HTML, you need the {{htmlelement("script")}} element. There are two ways to use <code>script</code>, depending on whether you're linking to an external script or embedding a script right in your webpage.</p>
+
+<h3 id="Linking_an_external_script" name="Linking_an_external_script">Linking an external script</h3>
+
+<p>Usually, you'll be writing scripts in their own .js files. If you want to execute a .js script from your webpage, just use {{HTMLElement ('script')}} with an <code>src</code> attribute pointing to the script file, using its <a href="/ja//Learn/Understanding_URLs">URL</a>:</p>
+
+<pre class="brush: html">&lt;script src="path/to/my/script.js"&gt;&lt;/script&gt;</pre>
+
+<div class="note">
+<p><strong>Pro tip:</strong> In many cases it's a good idea to put your {{HTMLElement('script')}} elements at the end of your HTML document (right before the <code>&lt;/body&gt;</code> closing {{Glossary("tag")}}).</p>
+
+<p>Loading and running scripts is blocking and immediate. That means, every time the browser comes across a <code>&lt;script&gt;</code> element, the browser stops reading the HTML and instead loads and runs the script. The browser continues reading and rendering the HTML code after running the script.</p>
+
+<p>When you put {{htmlelement("script")}} elements at the end, you don't run the risk of manipulating {{Glossary("DOM")}} nodes that are not yet initialized. In addition, your webpages will finish displaying faster.</p>
+</div>
+
+<h3 id="Writing_JavaScript_within_HTML" name="Writing_JavaScript_within_HTML">Writing JavaScript within HTML</h3>
+
+<p>You may also add JavaScript code between <code>&lt;script&gt;</code> tags rather than providing an <code>src</code> attribute.</p>
+
+<pre class="brush: html">&lt;script&gt;
+window.addEventListener('load', function () {
+  console.log('This function is executed once the page is fully loaded');
+});
+&lt;/script&gt;</pre>
+
+<p>That's convenient when you just need a small bit of JavaScript, but if you keep JavaScript in separate files you'll find it easier to</p>
+
+<ul>
+ <li>focus on your work</li>
+ <li>write self-sufficient HTML</li>
+ <li>write structured JavaScript applications</li>
+</ul>
+
+<h2 id="Use_scripting_accessibly" name="Use_scripting_accessibly">Use scripting accessibly</h2>
+
+<p>Accessibility is a major issue in any software development. JavaScript can make your website more accessible if you use it wisely, or it can become a disaster if you use scripting without care. To make JavaScript work in your favor, it's worth knowing about certain best practices for adding JavaScript:</p>
+
+<ul>
+ <li><strong>Make all content available as (structured) text.</strong> Rely on HTML for your content as much as possible. 例えば、 if you've implemented a nice JavaScript progress bar, make sure to supplement it with matching text percentages inside the HTML. Likewise, your drop-down menus should be structured as <a href="/ja//Learn/HTML/Howto/Create_list_of_items_with_HTML">unordered lists</a> of <a href="/ja//Learn/HTML/Howto/Create_a_hyperlink">links</a>.</li>
+ <li><strong>Make all functionality accessible from the keyboard.</strong>
+  <ul>
+   <li>Let users Tab through all controls (e.g., links and form input) in a logical order.</li>
+   <li>If you use pointer events (like mouse events or touch events), duplicate the functionality with keyboard events.</li>
+   <li>Test your site using a keyboard only.</li>
+  </ul>
+ </li>
+ <li><strong>Don't set nor even guess time limits.</strong> It takes extra time to navigate with the keyboard or hear content read out. You can hardly ever predict just how long it will take for users or browsers to complete an process (especially asynchronous actions such as loading resources).</li>
+ <li><strong>Keep animations subtle and brief with no flashing.</strong> Flashing is annoying and can <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">cause seizures</a>. Additionally, if an animation lasts more than a couple seconds, give the user a way to cancel it.</li>
+ <li><strong>Let users initiate interactions.</strong> That means, don't update content, redirect, or refresh automatically. Don't use carousels or display popups without warning.</li>
+ <li><strong>Have a plan B for users without JavaScript.</strong> People may have JavaScript turned off to improve speed and security, and users often face network issues that prevent loading scripts. Moreover, third-party scripts (ads, tracking scripts, browser extensions) might break your scripts.
+  <ul>
+   <li>At a minimum, leave a short message with {{HTMLElement("noscript")}} like this: <code>&lt;noscript&gt;To use this site, please enable JavaScript.&lt;/noscript&gt;</code></li>
+   <li>Ideally, replicate the JavaScript functionality with HTML and server-side scripting when possible.</li>
+   <li>If you're only looking for simple visual effects, CSS can often get the job done even more intuitively.</li>
+   <li>
+    <p><em>Since almost everybody <strong>does</strong> have JavaScript enabled, <code>&lt;noscript&gt;</code> is no excuse for writing inaccessible scripts.</em></p>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Learn_more" name="Learn_more">Learn more</h2>
+
+<ul>
+ <li>{{htmlelement("script")}}</li>
+ <li>{{htmlelement("noscript")}}</li>
+ <li><a href="http://www.sitepoint.com/javascript-accessibility-101/">James Edwards' introduction to using JavaScript accessibly</a></li>
+ <li><a href="http://www.w3.org/TR/WCAG20/">Accessibility guidelines from W3C</a></li>
+</ul>