19 files changed, 351 insertions, 86 deletions
diff --git a/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html b/files/ja/learn/css/building_blocks/a_cool_looking_box/index.html
index 32aa19ca2e..32aa19ca2e 100644
--- a/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html
+++ b/files/ja/learn/css/building_blocks/a_cool_looking_box/index.html
diff --git a/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html b/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html
index 6d793d69ff..6d793d69ff 100644
--- a/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html
+++ b/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html
diff --git a/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html
index c8012c9a8a..c8012c9a8a 100644
--- a/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html
+++ b/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html
diff --git a/files/ja/learn/css/howto/css_faq/index.html b/files/ja/learn/css/howto/css_faq/index.html
new file mode 100644
index 0000000000..4307266923
--- /dev/null
+++ b/files/ja/learn/css/howto/css_faq/index.html
@@ -0,0 +1,231 @@
+---
+title: CSS の一般的な質問
+slug: Web/CSS/Common_CSS_Questions
+tags:
+  - CSS
+  - FAQ
+  - Web
+  - questions
+  - ガイド
+  - 例
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<p><span class="seoSummary">この記事には、 CSS に関するいくつかのよくある質問（FAQ）とその解答が見つかり、ウェブ開発者になるための道で役に立つでしょう。</span></p>
+
+<h2 id="Why_doesn't_my_CSS_which_is_valid_render_correctly" name="Why_doesn't_my_CSS_which_is_valid_render_correctly">なぜ CSS が妥当なのに正しくレンダリングされないのか？</h2>
+
+<p>ブラウザーは <code>DOCTYPE</code> 宣言を使用して、文書の表示ににウェブ標準とより互換性があるモードを使用するか、あるいは古いブラウザーのバグに互換性があるモードを使用するかを選択します。正しく新しい <code>DOCTYPE</code> 宣言を HTML の先頭で使用すると、ブラウザーの標準への準拠度が向上します。</p>
+
+<p>現代のブラウザーは、2つの主要なレンダリングモードを備えています。</p>
+
+<ul>
+ <li><em>Quirks Mode</em>: 後方互換モードとも呼ばれます。古いウェブページが制作者の意図したとおりにレンダリングされるようにして、古いブラウザーが用いていた非標準のレンダリング規則に従います。 <code>DOCTYPE</code> 宣言が不完全、不正確、あるいは存在しない、または 2001 年より前に一般的であった既知の <code>DOCTYPE</code> 宣言であるドキュメントは、 Quirks Mode でレンダリングされます。</li>
+ <li><em>Standards Mode</em>: ブラウザーは W3C 標準へ厳密に従おうとします。新しい HTML ページは標準に準拠したブラウザー向けに設計されていると考えられるため、新しい <code>DOCTYPE</code> 宣言を持つページは Standards Mode でレンダリングされます。</li>
+</ul>
+
+<p>Gecko ベースのブラウザーには、いくつかの小さな調整のみを行う第3のモードであります<em><a href="/ja/docs/Gecko's_&quot;Almost_Standards&quot;_Mode" title="Gecko's_&quot;Almost_Standards&quot;_Mode">Almost Standards Mode</a></em> があります。</p>
+
+<p>以下は Standards Mode または Almost Standards Mode になる <code>DOCTYPE</code> 宣言で、もっとも一般的に使用されるものの一覧です:</p>
+
+<pre>&lt;!DOCTYPE html&gt; /* これは HTML5 の doctype です。HTML5 パーサーを使用する新しいブラウザーでは、
+                   この doctype が推奨されます */
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd"&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+</pre>
+
+<p>可能な限り、 HTML5 の doctype を使用するべきです。</p>
+
+<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">なぜ CSS が妥当なのにまったくレンダリングされないのか?</h2>
+
+<p>以下のような可能性があります。</p>
+
+<ul>
+ <li>CSS ファイルへのパスが間違っている。</li>
+ <li>適用されるためには、 CSS スタイルシートを MIME タイプ <code>text/css</code> で提供しなければなりません。ウェブサーバがこのタイプで提供していない場合、スタイルシートは適用されません。</li>
+</ul>
+
+<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class"><code>id</code> と <code>class</code> の違いは何か?</h2>
+
+<p>HTML の要素は、 <code>id</code> 属性と <code>class</code> 属性の片方または両方を持つことができます。 <code>id</code> 属性は要素に適用する名前を割り当てます。妥当なマークアップでは、ある名前を持つ要素はひとつだけです。 <code>class</code> 属性は要素にクラス名を割り当てます。一つのクラス名を、ページ内の多数の要素で使用できます。 CSS は特定の <code>id</code> または <code>class</code> 名に対してスタイルを設定できます。</p>
+
+<ul>
+ <li>ページ内のたくさんのブロックや要素にスタイルのルールを適用したい場合や、スタイルを適用したい要素が1つしかないものの、後で追加したい場合は、 class 指定によるスタイルを使用してください。</li>
+ <li>適用されるスタイルのルールを1つの特定のブロックや要素に限定する必要がある場合は、 id 指定によるスタイルを使用してください。このスタイルは特定の id を持った特定の要素にのみ使用されます。</li>
+</ul>
+
+<p>一般的にはできるだけ class を使用し、 id は特定の用途で絶対的に必要な場合（ラベルとフォーム要素を接続したり、スタイルをつける要素が意味的に独自の場合など）に限り使用することが推奨されます。</p>
+
+<ul>
+ <li>class を使用するとスタイルの用途が広げられるようになり、現在は特定のルールセットのスタイルを1つの要素にしか適用しなくても、後から追加したくなる可能性があります</li>
+ <li>class を使用すると、複数の要素のスタイルを設定できるため、id セレクタを使用する複数のルールで同じスタイル設定情報を書き出す必要がなくなり、より短いスタイルシートを作成できます。より短いスタイルシートはより高性能です</li>
+ <li>class セレクタは id セレクタよりも特異性が低いため、必要に応じてオーバーライドする方が簡単です</li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: 詳しくは <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a> もご覧ください。</p>
+</div>
+
+<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">プロパティの既定値に戻すにはどうすればよいのか?</h2>
+
+<p>当初 CSS には "default" キーワードがなく、プロパティの既定値を戻す唯一の方法は、そのプロパティを明示的に宣言し直すことでした。</p>
+
+<pre class="brush: css">/* 見出しの既定の色は黒 */
+h1 { color: red; }
+h1 { color: black; }</pre>
+
+<p>これは CSS 2 で変わり、<a href="/ja/docs/CSS/initial" title="initial">initial</a> キーワードが CSS プロパティの正当な値になりました。これはプロパティを既定値にリセットします。この既定値は、当該プロパティの CSS 仕様で定義されています。</p>
+
+<pre class="brush: css">/* 見出しの既定の色は黒 */
+h1 { color: red; }
+h1 { color: initial; }</pre>
+
+<h2 id="Derived_styles" name="Derived_styles">スタイルを他のスタイルから派生させるにはどうすればよいか?</h2>
+
+<p>CSS では、あるスタイルが他の表現で定義されることを許可していません (<a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Working Group のスタンスに関する、Eric Meyer 氏のコメント</a>をご覧ください)。ただし、ひとつの要素に複数のクラスを割り当てることで、同様の効果を得られます。また、複数の場所で再利用できるスタイル情報を1ヶ所で定義する方法として、 <a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS 変数</a> が導入されました。</p>
+
+<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">ひとつの要素に複数のクラスを割り当てる方法は?</h2>
+
+<p>HTML の要素は <code>class</code> 属性に空白区切りでクラスを並べることで、複数のクラスを割り当てることができます。</p>
+
+<pre>&lt;style type="text/css"&gt;
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;div class="news today"&gt;
+... content of today's news ...
+&lt;/div&gt;
+</pre>
+
+<p>同じプロパティが双方の規則内で宣言されている場合は、その競合がまずは詳細度によって、そして CSS 宣言の順序に従って解決されます。<code>class</code> 属性内のクラスの順序は関係がありません。</p>
+
+<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">なぜ私のスタイル規則は正しく動作しないのか?</h2>
+
+<p>構文が正しいスタイル規則が、ある状況下で適用されないことがあります。この種類の問題をデバッグするために <a href="/ja/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> の <em>CSS Style Rules</em> ビューを活用できますが、スタイルが無視される事例でもっとも頻発するものは以下のとおりです。</p>
+
+<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML 要素の階層</h3>
+
+<p>CSS スタイルを HTML 要素に適用する方法は、要素の階層にも依存します。CSS 規則の詳細度や優先度にかかわらず、子孫に適用された規則は親のスタイルをオーバーライドすることを覚えておくことが重要です。</p>
+
+<pre>.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+&lt;!-- ニュース項目は黒色ですが、社名は赤色かつ太字です --&gt;
+&lt;div class="news"&gt;
+   (Reuters) &lt;span class="corpName"&gt;General Electric&lt;/span&gt; (GE.NYS) announced on Thursday...
+&lt;/div&gt;
+</pre>
+
+<p>複雑な HTML 階層で規則が無視されているように見える場合は、異なるスタイルが設定された別の要素の内部にその要素がないかを確認してください。</p>
+
+<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">明示的に再定義されたスタイル規則</h3>
+
+<p>CSS スタイルシートでは、順序<strong>こそが</strong>重要です。ある規則を定義した後に同じ規則を再定義した場合は、最後の定義が使用されます。</p>
+
+<pre>#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  他の規則             */
+/*  他の規則             */
+/*  他の規則             */
+.stockSymbol { font-weight: normal; }
+
+&lt;!-- ほとんどのテキストは太字ですが、"GE" は赤色で太字ではありません --&gt;
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>このような誤りを避けるには、あるセレクタに対する規則は 1 回だけ定義するようにして、セレクタに所属するすべての規則をグループ化してください。</p>
+
+<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">ショートハンドプロパティの使用</h3>
+
+<p>ショートハンドプロパティを使用したスタイル規則の定義は、構文がとてもコンパクトになることからよいことです。一部の属性だけを持つショートハンドプロパティの使用は可能かつ正当ですが、宣言していない属性は自動的に既定値へリセットされることを覚えておくべきです。すなわち、単独の属性に対する以前の規則は暗黙的にオーバーライドされます。</p>
+
+<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>前の例では別の要素に属する規則で問題が発生していますが、同一の要素でも問題が起こりえます。これは、規則の順序<strong>こそが</strong>重要であるためです。</p>
+
+<pre>#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now set to normal */
+}
+</pre>
+
+<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector"><code>*</code> セレクタの使用</h3>
+
+<p>ワイルドカードセレクタ <code>*</code> はすべての要素を参照するものであり、特に注意して使用しなければなりません。</p>
+
+<pre>body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+&lt;div id="section"&gt;
+   NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>この例では、<code>body *</code> セレクタで body 要素内の全要素に対して規則を適用しており、それは .stockUp クラスも含むすべての階層レベルです。よって .corpName クラスに適用した <code>font-weight: bold;</code> は、body 内の全要素に適用した <code>font-weight: normal;</code> にオーバーライドされます。</p>
+
+<p>特にセレクタの最初の要素として使用しない場合に、* セレクタは遅いセレクタであるため使用は最小限にするべきです。このような使い方はできるだけ避けるべきです。</p>
+
+<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">CSS の詳細度</h3>
+
+<p>ある要素に複数の規則を適用すると、スタイルの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity" title="Specificity">詳細さ</a>に従って規則が選ばれます。インラインスタイル（HTML の <code>style</code> 属性）が最上位の詳細さで他のあらゆるセレクタを上書きし、次に ID セレクタ、それからクラスセレクタ、要素名セレクタの順となります。よって、以下の {{htmlelement("div")}} の文字色は赤になります。</p>
+
+<pre>div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;
+</pre>
+
+<p>セレクタが複数の範囲を持つ場合、規則はより複雑になります。セレクタの詳細度がどのように算出されるかについて、詳しくは <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a> でご覧いただけます。</p>
+
+<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">-moz-*、-ms-*、-webkit-*、-o-*、-khtml-* プロパティは何をするものか?</h2>
+
+<p>これらのプロパティは<em>接頭辞付きプロパティ</em>と呼ばれ、CSS 標準を拡張したものです。これらは正規の名前空間を乱すことなく実験的で非標準の機能を使用するために用いられ、標準仕様が拡張したときに機能の不整合が発生することを防ぎます。</p>
+
+<p>本番 Web サイトでこのようなプロパティを使用することはお勧めできません。これらのプロパティは既に Web との互換性に大きな問題を引き起こしています。たとえば、接頭辞のないバージョンがすべてのブラウザでサポートされている場合に、接頭辞のないバージョンがプロパティの <code>-webkit-</code> 接頭辞バージョンのみを使用するということは、Webkit ベースでないブラウザではそのプロパティに依存する機能が完全に不要になるということです。この問題はひどく悪くなったため、Compatibility Living Standard で指定されているように、Webの互換性を向上させるために他のブラウザが <code>-webkit-</code> プレフィックスエイリアスを実装し始めました。</p>
+
+<p>実際のところ、ほとんどのブラウザは実験的機能を実装するときに CSS プレフィックスを使用せず、代わりに Nightly ブラウザバージョンなどでのみそれらの機能を実装しています。</p>
+
+<p>作業でプレフィックスを使用する必要がある場合は、最初にプレフィックス付きのバージョンを使用するようにコードを書くことをお勧めします。ただし、サポートされている場合はプレフィックス付きのバージョンを自動的に上書きできます。 例えば：</p>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="property token">-ms-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">-webkit-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p><strong>メモ</strong>: 接頭辞付きプロパティの処理の詳細については、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザテスト</a>モジュールの<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes">一般的な HTML および CSS の問題の処理 - CSS プレフィックスの処理</a>を参照してください。</p>
+</div>
+
+<div class="note">
+<p><strong>メモ</strong>: Mozilla をプレフィックスとする CSS プロパティの詳細については、<a href="/ja/docs/Web/CSS/Mozilla_Extensions">CSS の Mozilla 拡張</a>ページを参照してください。</p>
+</div>
+
+<h2 id="How_does_z-index_relate_to_positioning.3F" name="How_does_z-index_relate_to_positioning.3F">z-index は位置指定へどのように関係するのか?</h2>
+
+<p>z-index プロパティは、要素を積み重ねる順序を指定します。</p>
+
+<p>z-index/stack の順序が高い要素は、常に z-index/stack の順序が低い要素の前に表示されます。z-index は指定された位置 (<code>position:absolute</code>、<code>position:relative</code>、または  <code>position:fixed</code>) を持つ要素に対してのみ機能します。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">ポジショニング</a>学習の記事、特に <a href="/ja/docs/Learn/CSS/CSS_layout/Positioning#Introducing_z-index">z-index の紹介</a>セクションを参照してください。</p>
+</div>
diff --git a/files/ja/learn/css/styling_text/ウェブフォント/index.html b/files/ja/learn/css/styling_text/web_fonts/index.html
index d96b610029..d96b610029 100644
--- a/files/ja/learn/css/styling_text/ウェブフォント/index.html
+++ b/files/ja/learn/css/styling_text/web_fonts/index.html
diff --git a/files/ja/learn/forms/advanced_styling_for_html_forms/index.html b/files/ja/learn/forms/advanced_form_styling/index.html
index 9e6cf26d94..9e6cf26d94 100644
--- a/files/ja/learn/forms/advanced_styling_for_html_forms/index.html
+++ b/files/ja/learn/forms/advanced_form_styling/index.html
diff --git a/files/ja/learn/forms/the_native_form_widgets/index.html b/files/ja/learn/forms/basic_native_form_controls/index.html
index f0ddcdc09d..f0ddcdc09d 100644
--- a/files/ja/learn/forms/the_native_form_widgets/index.html
+++ b/files/ja/learn/forms/basic_native_form_controls/index.html
diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_1/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/example_1/index.html
index 1515dc573f..1515dc573f 100644
--- a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_1/index.html
+++ b/files/ja/learn/forms/how_to_build_custom_form_controls/example_1/index.html
diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_2/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/example_2/index.html
index 7a547909ce..7a547909ce 100644
--- a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_2/index.html
+++ b/files/ja/learn/forms/how_to_build_custom_form_controls/example_2/index.html
diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_3/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/example_3/index.html
index ac3763cb80..ac3763cb80 100644
--- a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_3/index.html
+++ b/files/ja/learn/forms/how_to_build_custom_form_controls/example_3/index.html
diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_4/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/example_4/index.html
index 51fa53c27a..51fa53c27a 100644
--- a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_4/index.html
+++ b/files/ja/learn/forms/how_to_build_custom_form_controls/example_4/index.html
diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_5/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/example_5/index.html
index 4bad8016bb..4bad8016bb 100644
--- a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_5/index.html
+++ b/files/ja/learn/forms/how_to_build_custom_form_controls/example_5/index.html
diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/index.html
index 7bbd20b511..7bbd20b511 100644
--- a/files/ja/learn/forms/how_to_build_custom_form_widgets/index.html
+++ b/files/ja/learn/forms/how_to_build_custom_form_controls/index.html
diff --git a/files/ja/learn/forms/how_to_structure_an_html_form/example/index.html b/files/ja/learn/forms/how_to_structure_a_web_form/example/index.html
index 2c97485087..2c97485087 100644
--- a/files/ja/learn/forms/how_to_structure_an_html_form/example/index.html
+++ b/files/ja/learn/forms/how_to_structure_a_web_form/example/index.html
diff --git a/files/ja/learn/forms/how_to_structure_an_html_form/index.html b/files/ja/learn/forms/how_to_structure_a_web_form/index.html
index ca3865643f..ca3865643f 100644
--- a/files/ja/learn/forms/how_to_structure_an_html_form/index.html
+++ b/files/ja/learn/forms/how_to_structure_a_web_form/index.html
diff --git a/files/ja/learn/forms/styling_html_forms/index.html b/files/ja/learn/forms/styling_web_forms/index.html
index 71d463f0c7..71d463f0c7 100644
--- a/files/ja/learn/forms/styling_html_forms/index.html
+++ b/files/ja/learn/forms/styling_web_forms/index.html
diff --git a/files/ja/learn/getting_started_with_the_web/ウェブサイトを公開する/index.html b/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.html
index df7bdd555e..df7bdd555e 100644
--- a/files/ja/learn/getting_started_with_the_web/ウェブサイトを公開する/index.html
+++ b/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.html
diff --git a/files/ja/learn/how_to_contribute/index.html b/files/ja/learn/how_to_contribute/index.html
deleted file mode 100644
index bd269dd210..0000000000
--- a/files/ja/learn/how_to_contribute/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: MDN の学習エリアに貢献するには
-slug: Learn/How_to_contribute
-tags:
-  - Beginner
-  - Contribute
-  - Documentation
-  - Guide
-  - Learn
-  - MDN Meta
-  - 'l10n:priority'
-translation_of: Learn/How_to_contribute
----
-<div>{{LearnSidebar}}</div>
-
-<p>あなたがこのページに初めて、あるいはたくさん検索した末に辿り着いたのなら、それはきっとあなたが MDN の学習エリアへの貢献に興味を持って下さったからでしょう。素晴らしいことです！</p>
-
-<p><span class="seoSummary">このページでは、 MDN の学習コンテンツの改良に協力し始めるのに必要となる全てが見つかるでしょう。できることはたくさんあって、それはあなたがどれくらい時間を使えるか、<a href="/ja/Learn/How_to_contribute#I'm_a_beginner">初心者</a>か<a href="/ja/Learn/How_to_contribute#I'm_a_web_developer">ウェブ開発者</a>か<a href="/ja/Learn/How_to_contribute#I'm_a_teacher">教師</a>かによって決まります。</span></p>
-
-<div class="note">
-<p><strong>メモ</strong>: 学習エリアの記事を書くためのガイドは、<a href="/ja/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">ウェブを学習する人に役立つ記事の書き方</a>にあります。</p>
-</div>
-
-<h2 id="特定のタスクを探す">特定のタスクを探す</h2>
-
-<p><strong>学習エリアに貢献する共通の方法は、記事を読み、誤字を直し、改良を提案することです。<a href="https://github.com/mdn/learning-area/">GitHub repo</a>へのサンプル追加も、何が必要か聞きたいと思って連絡頂くのも歓迎です。</strong></p>
-
-<p>新しいことを学習するときに、貢献することは楽しめる良い方法です。道に迷った気になったり、質問があった場合は、<a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> や <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a> いずれも英語ベース (詳しくはページ最下部を見てください)。<a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> が Learning Area (学習エリア) のトピックドライバーです — 彼に直接 ping してもいいでしょう。</p>
-
-<p>下記の節では一般的なアイデアとして、やることの種類を挙げています。</p>
-
-<h2 id="初心者の方なら">初心者の方なら</h2>
-
-<p>すばらしい！初心者は学習エリアの中身にフィードバックを作るのに重要かつ貴重です。あなたにはこの記事のターゲット読者の一員で、われわれのチームの貴重なメンバーになりうるという独特の視点があります。実際に、記事を何かの学習に使ってつまったり、誤解を招く記事を見かけた場合、自分で修正するか、または我々が確実に修正できるように問題点を連絡することができます。</p>
-
-<p>次のように、貢献できるいくつかの方法があります:</p>
-
-<dl>
- <dt><a href="/ja/docs/MDN/Contribute/Howto/Tag">記事にタグを追加する</a> (<em>5分</em>)</dt>
- <dd>MDN のコンテンツをタグ付けするのは、 MDN に協力する最も簡単な方法です。タグによって状況にあわせた機能を提供できるようになるため、タグ付けはとても意味ある貢献です。タグ付けを始める前に、<a href="/ja/docs/MDN/Doc_status/Glossary#No_tags">用語集の記事</a>と<a href="/ja/docs/MDN/Doc_status/Learn#No_tags">学習記事</a>の一覧をご覧ください。</dd>
- <dt><a href="/ja/docs/Glossary">用語集の記事を読んでレビューする</a> (<em>5分</em>)</dt>
- <dd>コンテンツを初心者の目線で見てもらう必要があります。用語集の記事に分かりにくい箇所があれば改善が必要なため、気軽に変更してください。自分には必要なスキルが無いと感じたら、<a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">私たちのメーリングリスト</a>に連絡してください。</dd>
- <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">用語集の記事を書く</a> (<em>20分</em>)</dt>
- <dd>これは新しいことを学ぶ最良の方法です。理解したい概念を選び、それについて学んだら、用語集の記事を書きましょう。何かを他人に説明することは、頭の中で知識を「定着」させ、物事を自分自身で良く理解できるようになり、さらに他人のために役立ちます。みんなが得をします！</dd>
- <dt><a href="/ja/Learn/Index">学習記事を読んでレビューする</a> (<em>2時間</em>)</dt>
- <dd>これは用語集の記事のレビューとよく似ています（上記参照）。こういった記事は通常かなり長いため、より時間を要するだけです。</dd>
-</dl>
-
-<h2 id="ウェブ開発者なら">ウェブ開発者なら</h2>
-
-<p>素敵です！あなたの技術スキルは、初心者向けの技術的に正確なコンテンツを提供するために、まさに我々が必要としているものです。ここは MDN の特定の箇所としてウェブの学習専用であり、説明はできるだけ簡潔であり、簡潔すぎて役立たないのは避けないといけません。過度に正確であることよりも、理解できることがもっと重要です。</p>
-
-<dl>
- <dt><a href="/ja/docs/Glossary">用語集の記事を読んでレビューする</a> (<em>5分</em>)</dt>
- <dd>ウェブ開発者であるあなたには、私たちのコンテンツが複雑になりすぎずに技術的に正確であるかを確認していただく必要があります。必要に応じて気軽に変更を加えてください。編集の前に内容を議論したい場合は、<a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">私たちのメーリングリスト</a>または <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>でコンタクトしてください。</dd>
- <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">用語集の記事を書く</a> (<em>20分</em>)</dt>
- <dd>技術的な専門用語を明確にすることは、学習するのと、技術的に正確かつシンプルであるためのとても良い方法です。初心者からは感謝されるでしょう。注目すべき<a href="/ja/docs/Glossary#Contribute">未定義の用語</a>がたくさんあります。都合が良いものを選んでください。</dd>
- <dt><a href="/ja/Learn/Index">学習記事を読んで</a><a href="/en-US/Learn/Index">レビューする</a> (<em>2時間</em>)</dt>
- <dd>これは用語集の記事のレビュー（上記）と同じことです。この記事は少し長い時間がかかるだけです。</dd>
- <dt><a href="/ja/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">新しい学習記事を書く</a> (<em>4時間以上</em>)</dt>
- <dd>MDN には、ウェブ技術（<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>など）についてのシンプルで直言的な記事が欠けています。また MDN にはレビューや作り直しをするべき古いコンテンツもあります。あなたのスキルの限界までふりしぼって、ウェブ技術が初心者でも使えるようにしてください。</dd>
- <dt><a href="/ja/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">練習、コードサンプル、インタラクティブな学習ツールの作成</a> (<em>?時間</em>)</dt>
- <dd>全ての学習記事は「アクティブラーニング」と呼ぶ記事を必要としています。その理由は人は自分で何かやってみるのが学ぶのに最良だからです。この素材は、ユーザーが記事に述べられる概念を適用・操作するのを助ける、練習やインタラクティブコンテンツです。アクティブラーニングのコンテンツを作るには多数の方法があり、 <a href="http://jsfiddle.net" rel="external">JSFiddle</a> や同等品でコードサンプルを作ることから、<a href="https://thimble.mozilla.org/" rel="external">Thimble</a> で完全にハック可能なインタラクティブコンテンツを作ることまであります。創造性を解き放って！</dd>
-</dl>
-
-<h2 id="教師なら">教師なら</h2>
-
-<p>MDN は技術的な卓越性において長い歴史がありますが、新人に概念を教える最良の方法についての理解は十分ではありません。ここは教師・教育者であるあなたを必要とするところです。私たちの教材が読者にとって優れた、実践的な学びの道筋を提供できるよう手助けできます。</p>
-
-<dl>
- <dt><a href="/ja/docs/Glossary">用語集の記事を読んでレビューする </a>(<em>15分</em>)</dt>
- <dd>用語集の記事を確認して、必要に応じて気軽に変更を加えてください。編集の前に内容を議論したい場合は<a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">私たちのメーリングリスト</a>または <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>でコンタクトしてください</dd>
- <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">用語集の記事を書く</a> (<em>1時間</em>)</dt>
- <dd>用語集にて、明確でシンプルな言葉の定義と、概念の基本的な説明は、初心者の要求を満たすのに重要です。教育者としての経験がすばらしい用語集の記事の作成に役立ちます。注目すべき<a href="/ja/docs/Glossary#Contribute">未定義の用語</a>がたくさんあります。都合が良いものを選んでください。</dd>
- <dt><a href="/ja/docs/tag/needsSchema">記事のイラストや図を描く</a> (<em>1時間</em>)</dt>
- <dd>ご存知のように、イラストはあらゆる学習コンテンツの中で有益な部分です。これは MDN でよく不足しているもので、あなたのスキルがそのエリアを違ったものにします。<a href="/en-US/docs/tag/needsSchema">図示コンテンツが不足している記事</a>を確認して、絵を作りたいものを選びます。</dd>
- <dt><a href="/ja/Learn/Index">学習記事を読んでレビューする</a> (<em>2時間</em>)</dt>
- <dd>これは用語集の記事（上記）のレビューと同じことです。この記事は少し長い時間がかかるだけです。</dd>
- <dt><a href="/ja/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">新しい学習記事を書く</a> (<em>4時間</em>)</dt>
- <dd>ウェブのエコシステムとその周りの機能的なトピックについてのシンプルで直言的な記事が必要です。学習記事では知るべきことを全て網羅するよりも、教育的である必要があるため、何をどのように網羅すべきかを知っているあなたの経験は良い資産になるでしょう。</dd>
- <dt><a href="/ja/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">練習、クイズ、インタラクティブな学習ツールの作成</a> (<em>?時間</em>)</dt>
- <dd>全ての学習記事は「アクティブラーニング」と呼ぶ記事を必要としています。その理由は人は自分で何かやってみるのが学ぶのに最良だからです。この素材は、ユーザーが記事に述べられる概念を適用・操作するのを助ける、練習やインタラクティブコンテンツです。アクティブラーニングのコンテンツを作るには多数の方法があり、クイズを作ることから、<a href="https://thimble.mozilla.org/" rel="external">Thimble</a> で完全にハック可能なインタラクティブコンテンツを作ることまであります。創造性を解き放って！</dd>
- <dt></dt>
- <dt><a href="/ja/docs/MDN/Contribute/Howto/Create_learning_pathways">学習の進路を作る</a> (<em>?時間</em>)</dt>
- <dd>進歩的で理解できるチュートリアルを提供するため、コンテンツを学習進路に形付ける必要があります。既存のコンテンツを集めて、学習記事を作成するのに何がたりないか理解するのに良い方法です。</dd>
-</dl>
diff --git a/files/ja/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ja/learn/html/howto/author_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..1a41de9469
--- /dev/null
+++ b/files/ja/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -0,0 +1,120 @@
+---
+title: Tips for Authoring Fast-loading HTML Pages
+slug: Tips_for_Authoring_Fast-loading_HTML_Pages
+tags:
+  - HTML
+---
+<p>
+</p><p><br>
+<span class="comment">Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction.</span>
+これらの秘訣は、よく知られた知識や実験を元にしています。ウェブページの読込のパフォーマンスを向上させる助けとなる、さらなる助言をお持ちであれば、<a>Discussion page of this article</a>にて提案してください。
+</p><p>最適化されたウェブページは、訪問者により素早く反応するサイトをもたらすだけでなく、ウェブサーバやインターネットへの接続負荷を軽減します。これは、大規模なサイト、あるいはニュース速報などの例外的な状況によってトラフィックが急増するサイトにとって、とても重大なことです。
+</p><p>ページの読込パフォーマンスの最適化とは、単に、低速なダイアルアップ回線の訪問者が見るであろうコンテンツを用意することではありません。高速回線向けのコンテンツについても同じくらい重要であり、最高速の回線を持つ訪問者にとってさえ、劇的な向上をもたらすことができます。
+</p><p><br>
+</p>
+<h3 id=".E6.97.A9.E3.81.8F.E8.AA.AD.E3.81.BF.E8.BE.BC.E3.81.BE.E3.82.8C.E3.82.8BHTML.E3.83.9A.E3.83.BC.E3.82.B8.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B.E7.A7.98.E8.A8.A3" name=".E6.97.A9.E3.81.8F.E8.AA.AD.E3.81.BF.E8.BE.BC.E3.81.BE.E3.82.8C.E3.82.8BHTML.E3.83.9A.E3.83.BC.E3.82.B8.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B.E7.A7.98.E8.A8.A3"> 早く読み込まれるHTMLページを作成する秘訣 </h3>
+<h4 id=".E3.83.9A.E3.83.BC.E3.82.B8.E5.AE.B9.E9.87.8F.E3.82.92.E6.B8.9B.E3.82.89.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86" name=".E3.83.9A.E3.83.BC.E3.82.B8.E5.AE.B9.E9.87.8F.E3.82.92.E6.B8.9B.E3.82.89.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86"> ページ容量を減らしましょう </h4>
+<p>ページ容量は、ページの読込パフォーマンスにおいて圧倒的に最重要の要因です。
+</p><p>不要な空白やコメントを除去したり、HTMLに直接書き込まれたスクリプトやCSSを外部ファイルに移すことで、ページの構造の変化は最小限で、ダウンロードのパフォーマンスを向上できます。
+</p><p><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a>のようなツールは、validなHTMLソースから、先頭の空白や余計な空行を自動的に取り除きます。そのほかのツールは、JavaScriptを、再フォーマット、あるいはソースの難読化や長い識別子を短いものへ縮めることにより、「圧縮」することができます。
+</p><p><br>
+</p>
+<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AE.E6.95.B0.E3.82.92.E3.81.A7.E3.81.8D.E3.82.8B.E3.81.A0.E3.81.91.E5.B0.91.E3.81.AA.E3.81.8F.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AE.E6.95.B0.E3.82.92.E3.81.A7.E3.81.8D.E3.82.8B.E3.81.A0.E3.81.91.E5.B0.91.E3.81.AA.E3.81.8F.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86"> ファイルの数をできるだけ少なくしましょう </h4>
+<p>一つのページ内で参照されるファイルの数を減らせば、ページのダウンロードに必要なHTTP接続の数が減ります。
+</p><p>ブラウザのキャッシュの設定によっては、CSS、JavaScriptあるいは画像ファイルのそれぞれについて、最後にダウンロードされたときから更新されているかどうかを確かめるため、サーバに<code>If-Modified-Since</code>リクエストを送信するかもしれません。
+</p><p>ウェブページ内で参照されるファイルの数を減らすことにより、ブラウザからこれらのリクエストが送られ、それに対する返答が届くまでに必要となる時間が減ります。
+</p><p>ファイルの最終更新日時についての問い合わせに多くの時間が費やされると、ウェブページの最初の表示が遅れます。ブラウザはページのレンダリングを行う前に、CSSやJavaScriptファイルそれぞれの更新日時を問い合わせねばならないためです。
+</p><p><br>
+</p>
+<h4 id=".E3.83.89.E3.83.A1.E3.82.A4.E3.83.B3.E6.A4.9C.E6.9F.BB.E3.82.92.E6.B8.9B.E3.82.89.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86" name=".E3.83.89.E3.83.A1.E3.82.A4.E3.83.B3.E6.A4.9C.E6.9F.BB.E3.82.92.E6.B8.9B.E3.82.89.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86"> ドメイン検査を減らしましょう </h4>
+<p>分割された別々のドメイン一つ一つについてDNS検査するのは時間がかかるため、CSS、JavaScript、または画像を参照するのに用いる異なるドメインの数を減らすことで、ページ読込の時間が減ります。
+</p><p>これは必ずしも実用的であるとは限りません。しかしながら、ページにおける異なるドメインの数は、可能な限り最小で使うよう常に気をつけておくべきです。
+</p>
+<h4 id=".E5.86.8D.E5.88.A9.E7.94.A8.E3.81.95.E3.82.8C.E3.82.8B.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.84.E3.82.92.E3.82.AD.E3.83.A3.E3.83.83.E3.82.B7.E3.83.A5.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86" name=".E5.86.8D.E5.88.A9.E7.94.A8.E3.81.95.E3.82.8C.E3.82.8B.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.84.E3.82.92.E3.82.AD.E3.83.A3.E3.83.83.E3.82.B7.E3.83.A5.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86"> 再利用されるコンテンツをキャッシュしましょう </h4>
+<p>キャッシュされうるどのようなコンテンツでも、適切な期限切れまでの間、キャッシュされているかを確かめてください。
+</p><p>具体的には<code>Last-Modified</code>ヘッダに注意してください。これは効率的なページのキャッシュを可能にします。このヘッダを用いると、ロードしようとしているファイルが最後にいつ更新されたかについての情報が、ユーザ・エージェントに伝えられます。ほとんどのウェブサーバーは、静的なページ（例えば.htmlや.css）については、ファイルシステムに記録されている最終更新日時に基づき、自動的に<code>Last-Modified</code> headerを付加します。
+動的なページ（例えば.phpや.aspx）については、これは行われず、ヘッダは送られません。
+</p><p>従って、特に動的に生成されるページでは、この件について少し調べるだけでも有益です。多少複雑になることもありますが、通常はキャッシュされえないページへの多くのリクエストを抑えてくれるでしょう。
+</p><p>さらなる情報:
+</p>
+<ol><li> <a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a>
+</li><li> <a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a>
+</li><li> <a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a>
+</li></ol>
+<h4 id=".E3.83.9A.E3.83.BC.E3.82.B8.E3.81.AE.E6.A7.8B.E6.88.90.E8.A6.81.E7.B4.A0.E3.82.92.E4.B8.A6.E3.81.B9.E6.9B.BF.E3.81.88.E3.81.BE.E3.81.97.E3.82.87.E3.81.86" name=".E3.83.9A.E3.83.BC.E3.82.B8.E3.81.AE.E6.A7.8B.E6.88.90.E8.A6.81.E7.B4.A0.E3.82.92.E4.B8.A6.E3.81.B9.E6.9B.BF.E3.81.88.E3.81.BE.E3.81.97.E3.82.87.E3.81.86"> ページの構成要素を並べ替えましょう </h4>
+<p>初めにページの内容をダウンロードさせることで、利用者はページ読込のさい明白に最も早い応答を得られます。
+</p><p>最初の表示に必要ないかなるCSSやJavaScriptよりも、ページの内容が第一にダウンロードされるべきです。この内容は通常は本文（htmlファイル）であり、これを圧縮することで、利用者に素早い応答を返すという恩恵が得られます。
+</p><p>どのようなDHTMLの機能も、それが実行される前にページが完全に読み込まれている必要があるので、初めは無効にしておき、読込の後になって有効にするべきです。
+</p><p><br>
+</p>
+<h4 id=".E3.82.A4.E3.83.B3.E3.83.A9.E3.82.A4.E3.83.B3.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.81.AE.E6.95.B0.E3.82.92.E6.B8.9B.E3.82.89.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86" name=".E3.82.A4.E3.83.B3.E3.83.A9.E3.82.A4.E3.83.B3.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.81.AE.E6.95.B0.E3.82.92.E6.B8.9B.E3.82.89.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86"> インラインスクリプトの数を減らしましょう </h4>
+<p>インラインスクリプト（HTMLに直接書き込まれたスクリプト）は、パーサが「インラインスクリプトはページ構造を修正する」と仮定してしまうので、ページの読込に高くつきます。一般に、インラインスクリプトわけても内容を出力する<code>document.write()</code>の利用を減らすことは、総合的なページの読込を向上させます。
+</p><p>最新のブラウザでページの内容を操作するには、<code>document.write()</code>に基づいた古い手法ではなく、
+最新のW3C DOMメソッドを用いましょう。
+</p>
+<h4 id=".E6.9C.80.E6.96.B0.E3.81.AECSS.E3.81.A8.E5.A6.A5.E5.BD.93.E3.81.AA.E3.83.9E.E3.83.BC.E3.82.AF.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E7.94.A8.E3.81.84.E3.81.BE.E3.81.97.E3.82.87.E3.81.86" name=".E6.9C.80.E6.96.B0.E3.81.AECSS.E3.81.A8.E5.A6.A5.E5.BD.93.E3.81.AA.E3.83.9E.E3.83.BC.E3.82.AF.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E7.94.A8.E3.81.84.E3.81.BE.E3.81.97.E3.82.87.E3.81.86"> 最新のCSSと妥当なマークアップを用いましょう </h4>
+<p>最新のCSSの利用は、マークアップの量を減らし、レイアウトに関する画像の必要性を減らすことができます。また、実質的には文章を画像にしただけで、それと同等の見た目を得られるCSSと文章よりも負担の大きい画像を、多くの場合に差し替えることができます。
+</p><p>妥当なマークアップの利用には、そのほかの利点があります。妥当なマークアップは、ブラウザがHTMLを構文解析する際に「誤り訂正」を行わせないばかりでなく、ウェブページの前処理を行うことができる他のツールを自由に利用することも可能にします。例えば、<a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a>は、空白や任意の終了タグを省略することができますが、深刻なマークアップの誤りのあるページでは動作するのを拒みます。
+</p>
+<h4 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.84.E3.82.92.E5.88.86.E5.89.B2.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.84.E3.82.92.E5.88.86.E5.89.B2.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86"> コンテンツを分割しましょう </h4>
+<p>ページの内容が完全にダウンロードされる前にページを表示できるように、<code>&lt;table&gt;</code>で作られたレイアウトを<code>&lt;div&gt;</code>のブロックに置き換えるか、表をより小さな表に分割しましょう。
+</p><p>次のような、深く入れ子になったtableよりも、
+</p>
+<pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;</pre>
+<p>次のような、入れ子になっていないtableやdivを使いましょう。
+</p>
+<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;</pre>
+<h4 id=".E7.94.BB.E5.83.8F.E3.82.84.E8.A1.A8.E3.81.AE.E3.82.B5.E3.82.A4.E3.82.BA.E3.82.92.E6.8C.87.E5.AE.9A.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86" name=".E7.94.BB.E5.83.8F.E3.82.84.E8.A1.A8.E3.81.AE.E3.82.B5.E3.82.A4.E3.82.BA.E3.82.92.E6.8C.87.E5.AE.9A.E3.81.97.E3.81.BE.E3.81.97.E3.82.87.E3.81.86"> 画像や表のサイズを指定しましょう </h4>
+<p>もしブラウザが画像や表の高さか幅あるいはその両方を即座に決定できたら、内容をリフローする必要なくウェブページを表示することができるでしょう。これはページの表示を早めるだけでなく、読み込みが完了するときにページのレイアウトがうっとうしく変化するのを防ぎます。
+</p><p>画像（<code>img</code>）は、<code>height</code>や<code>width</code>を指定されるべきです。
+</p><p>表（<code>table</code>）は、CSSの<code>table-layout: fixed</code>規則を用い、縦列の幅を<code>COL</code>や<code>COLGROUP</code>タグを用いることで指定しておくべきです。
+</p>
+<h4 id=".E3.83.A6.E3.83.BC.E3.82.B6.E3.83.BC.E3.83.BB.E3.82.A8.E3.83.BC.E3.82.B8.E3.82.A7.E3.83.B3.E3.83.88.E3.81.AE.E5.BF.85.E8.A6.81.E6.9D.A1.E4.BB.B6.E3.82.92.E8.B3.A2.E3.81.8F.E9.81.B8.E3.81.B3.E3.81.BE.E3.81.97.E3.82.87.E3.81.86" name=".E3.83.A6.E3.83.BC.E3.82.B6.E3.83.BC.E3.83.BB.E3.82.A8.E3.83.BC.E3.82.B8.E3.82.A7.E3.83.B3.E3.83.88.E3.81.AE.E5.BF.85.E8.A6.81.E6.9D.A1.E4.BB.B6.E3.82.92.E8.B3.A2.E3.81.8F.E9.81.B8.E3.81.B3.E3.81.BE.E3.81.97.E3.82.87.E3.81.86"> ユーザー・エージェントの必要条件を賢く選びましょう </h4>
+<p>ページデザインで最大の改善を達成するために、そのプロジェクトに適切なユーザー・エージェントの必要条件が特定されているかを確かめてください。
+</p><p>コンテンツが、すべてのブラウザとりわけ下位のブラウザで、１ピクセルのずれもなく同じに見えるようには要求しないでください。
+</p><p>理想的には、必要最小限の環境は、同じ標準に対応している現代的なブラウザに基づくべきです。それには次のブラウザが含まれます。すべてのプラットフォームのNetscape 7/Gecko 1.0.2+、WindowsのInternet Explorer（バージョン5.5以上）、WindowsのOpera（バージョン7以上）、Mac OS XのSafariです。
+</p><p>しかしながら、この技術文書に列挙されている秘訣の多くが、常識的な技法であることを気にとめておいてください。これらは、どのようなユーザー・エージェントにも適用されるし、あるページがブラウザの必要条件を満たしているかどうかに関係なく、どのようなページにも適用されうるのです。
+</p>
+<h3 id=".E3.83.9A.E3.83.BC.E3.82.B8.E6.A7.8B.E9.80.A0.E3.81.AE.E4.BE.8B" name=".E3.83.9A.E3.83.BC.E3.82.B8.E6.A7.8B.E9.80.A0.E3.81.AE.E4.BE.8B"> ページ構造の例 </h3>
+<p>· <code>HTML</code>
+</p>
+<dl><dd> · <code>HEAD</code>
+</dd></dl>
+<dl><dd><dl><dd> · <code>LINK </code>...<br>ページの外観に必要なCSSファイル。ファイルの数は、パフォーマンスのために最小限に抑えましょう。ただし関連のないCSSは、保全のため別々のファイルにしておきましょう。
+</dd></dl>
+</dd></dl>
+<dl><dd><dl><dd> · <code>SCRIPT </code>...<br>ページ読込の間に「必要」な機能のためのJavaScriptファイル。ただし、ページが読み込まれたあとでようやく動作できるDHTMLではありません。
+</dd><dd> ·ファイルの数は、パフォーマンスのために最小限に抑えましょう。ただし関連のないJavaScriptは、保全のため別々のファイルにしておきましょう。
+</dd></dl>
+</dd></dl>
+<dl><dd> · <code>BODY</code>
+</dd><dd> 小さな塊（複数のtable / 複数のdiv）に分けられた、ページの内容。ページ全体がダウンロードされるのを待たずに表示されます。
+</dd></dl>
+<dl><dd><dl><dd> · <code>SCRIPT </code>...<br>DHTMLを実行するために使われうる、あらゆるスクリプト。DHTMLは通常は、ページが完全に読み込まれ、全ての必要なオブジェクトが初期化された後に、ようやく動作できます。ページ内容の前にこれらのスクリプトを読み込む必要はありません。読込の初期のページ表示を遅くするだけです。
+</dd><dd> ファイルの数は、パフォーマンスのために最小限に抑えましょう。ただし関連のないJavaScriptは、保全のため別々のファイルにしておきましょう。
+</dd><dd> ロールオーバー効果のために画像を用いるときは、ページ内容がダウンロードされた後に、ここでそれらを先読みしておくべきです。
+</dd></dl>
+</dd></dl>
+<h3 id=".E9.96.A2.E9.80.A3.E3.83.AA.E3.83.B3.E3.82.AF" name=".E9.96.A2.E9.80.A3.E3.83.AA.E3.83.B3.E3.82.AF"> 関連リンク </h3>
+<ul><li> Book: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a>
+</li><li> <a class="external" href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html">Site Optimization Tutorial</a> (WebMonkey)
+</li></ul>
+<div class="originaldocinfo">
+<h3 id=".E5.85.83.E3.81.AB.E3.81.AA.E3.81.A3.E3.81.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1" name=".E5.85.83.E3.81.AB.E3.81.AA.E3.81.A3.E3.81.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1"> 元になった文書の情報 </h3>
+<ul><li> Author(s): Bob Clary, Technology Evangelist, Netscape Communications
+</li><li> Last Updated Date: Published 04 Apr 2003
+</li><li> Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
+</li><li> Note: This reprinted article was originally part of the DevEdge site.
+</li></ul>
+</div>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/Tips_for_Authoring_Fast-loading_HTML_Pages", "pl": "pl/Porady_odno\u015bnie_tworzenia_szybko_\u0142aduj\u0105cych_si\u0119_stron_HTML", "zh-cn": "cn/Tips_for_Authoring_Fast-loading_HTML_Pages" } ) }}