diff options
Diffstat (limited to 'files/ja/learn')
26 files changed, 398 insertions, 357 deletions
diff --git a/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html index 4c3499402f..57245cc7a3 100644 --- a/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html +++ b/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -58,7 +58,7 @@ translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_pr <p>サーバは、リクエストを受信するたびにステータスメッセージで応答します。最も一般的なステータスは次のとおりです。</p> <dl> - <dt><strong><span id="cke_bm_110S" style="display: none;"> </span>200: OK</strong></dt> + <dt><strong><span id="cke_bm_110S" class="hidden"> </span>200: OK</strong></dt> <dd>求めているリソースが配信されました。</dd> <dt><strong>301: Moved permanently</strong></dt> <dd>リソースは新しい場所に移動しました。あなたのブラウザでこれをあまり見ないでしょう、しかし検索エンジンがインデックスを更新するのにこの情報をたくさん使うので "301" について知るのは良いことです。</dd> 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..aaeaca5741 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 @@ -1,6 +1,6 @@ --- title: かっこいいボックス -slug: Learn/CSS/Styling_boxes/A_cool_looking_box +slug: Learn/CSS/Building_blocks/A_cool_looking_box tags: - Assessment - Beginner @@ -12,6 +12,7 @@ tags: - box model - effects translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +original_slug: Learn/CSS/Styling_boxes/A_cool_looking_box --- <div>{{LearnSidebar}}</div> 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..11a7da7dd3 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 @@ -1,6 +1,6 @@ --- title: 装飾的なレターヘッド付きの便箋の作成 -slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper +slug: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper tags: - Assessment - Background @@ -15,6 +15,7 @@ tags: - letterheaded - paper translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +original_slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper --- <div>{{LearnSidebar}}</div> 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..eb4b8446b0 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 @@ -1,6 +1,6 @@ --- title: 基本的な CSS の理解 -slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension tags: - Assessment - Beginner @@ -13,6 +13,7 @@ tags: - ボックスモデル - ルール translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +original_slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension --- <div>{{LearnSidebar}}</div> 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..fd76929d99 --- /dev/null +++ b/files/ja/learn/css/howto/css_faq/index.html @@ -0,0 +1,232 @@ +--- +title: CSS の一般的な質問 +slug: Learn/CSS/Howto/CSS_FAQ +tags: + - CSS + - FAQ + - Web + - questions + - ガイド + - 例 +translation_of: Learn/CSS/Howto/CSS_FAQ +original_slug: Web/CSS/Common_CSS_Questions +--- +<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_"Almost_Standards"_Mode" title="Gecko's_"Almost_Standards"_Mode">Almost Standards Mode</a></em> があります。</p> + +<p>以下は Standards Mode または Almost Standards Mode になる <code>DOCTYPE</code> 宣言で、もっとも一般的に使用されるものの一覧です:</p> + +<pre><!DOCTYPE html> /* これは HTML5 の doctype です。HTML5 パーサーを使用する新しいブラウザーでは、 + この doctype が推奨されます */ + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" +"http://www.w3.org/TR/html4/loose.dtd"> + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" +"http://www.w3.org/TR/html4/strict.dtd"> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +</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><style type="text/css"> +.news { background: black; color: white; } +.today { font-weight: bold; } +</style> + +<div class="news today"> +... content of today's news ... +</div> +</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; } + +<!-- ニュース項目は黒色ですが、社名は赤色かつ太字です --> +<div class="news"> + (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday... +</div> +</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; } + +<!-- ほとんどのテキストは太字ですが、"GE" は赤色で太字ではありません --> +<div id="stockTicker"> + NYS: <span class="stockSymbol">GE</span> +1.0 ... +</div> +</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; } + +<div id="stockTicker"> + NYS: <span class="stockSymbol">GE</span> +1.0 ... +</div> +</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; } + +<div id="section"> + NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ... +</div> +</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; } + +<div id="orange" class="green" style="color: red;">This is red</div> +</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/styling_lists/index.html b/files/ja/learn/css/styling_text/styling_lists/index.html index 0690271d64..3d4617b15b 100644 --- a/files/ja/learn/css/styling_text/styling_lists/index.html +++ b/files/ja/learn/css/styling_text/styling_lists/index.html @@ -131,7 +131,7 @@ dd { <li>規則1はサイト全体のフォントと <code>10px</code> の基準フォントサイズを設定します。 これらはページ上のすべてのものに継承されます。</li> <li>規則2と3では、見出し、さまざまなリストの種類（リスト要素の子はこれらを継承）、および段落に相対フォントサイズを設定します。 つまり、各段落とリストのフォントサイズ、上下の間隔は同じになり、バーティカルリズムを一定に保つのに役立ちます。</li> <li>規則4では、段落とリスト項目に同じ {{cssxref("line-height")}} を設定しているため、段落と各個々のリスト項目のラインの間隔は同じになります。 これは、バーティカルリズムを一定に保つのにも役立ちます。</li> - <li>説明リストには規則5と6が適用されます。 説明リストの用語と説明には、段落とリスト項目の場合と同じ <code>line-height</code> を設定します。 繰り返しますが、一貫性があることは良いことです！ また、説明する用語は太字にして、視覚的に目立つようにしています。<span id="cke_bm_126E" style="display: none;"> </span></li> + <li>説明リストには規則5と6が適用されます。 説明リストの用語と説明には、段落とリスト項目の場合と同じ <code>line-height</code> を設定します。 繰り返しますが、一貫性があることは良いことです！ また、説明する用語は太字にして、視覚的に目立つようにしています。<span id="cke_bm_126E" class="hidden"> </span></li> </ul> <h2 id="List-specific_styles" name="List-specific_styles">リスト固有の装飾</h2> diff --git a/files/ja/learn/css/styling_text/ウェブフォント/index.html b/files/ja/learn/css/styling_text/web_fonts/index.html index d96b610029..73e2560309 100644 --- a/files/ja/learn/css/styling_text/ウェブフォント/index.html +++ b/files/ja/learn/css/styling_text/web_fonts/index.html @@ -1,6 +1,6 @@ --- title: ウェブフォント -slug: Learn/CSS/Styling_text/ウェブフォント +slug: Learn/CSS/Styling_text/Web_fonts tags: - '@font-face' - Article @@ -16,6 +16,7 @@ tags: - font-family - web fonts translation_of: Learn/CSS/Styling_text/Web_fonts +original_slug: Learn/CSS/Styling_text/ウェブフォント --- <div>{{LearnSidebar}}</div> 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..aa82c80611 100644 --- a/files/ja/learn/forms/advanced_styling_for_html_forms/index.html +++ b/files/ja/learn/forms/advanced_form_styling/index.html @@ -1,6 +1,6 @@ --- title: HTML フォームへの高度なスタイル設定 -slug: Learn/Forms/Advanced_styling_for_HTML_forms +slug: Learn/Forms/Advanced_form_styling tags: - Advanced - CSS @@ -10,6 +10,7 @@ tags: - ガイド - 例 translation_of: Learn/Forms/Advanced_form_styling +original_slug: Learn/Forms/Advanced_styling_for_HTML_forms --- <div>{{LearnSidebar}}</div> 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..c70f746b3b 100644 --- a/files/ja/learn/forms/the_native_form_widgets/index.html +++ b/files/ja/learn/forms/basic_native_form_controls/index.html @@ -1,6 +1,6 @@ --- title: 基本的なネイティブフォームコントロール -slug: Learn/Forms/The_native_form_widgets +slug: Learn/Forms/Basic_native_form_controls tags: - Example - Forms @@ -9,6 +9,7 @@ tags: - Intermediate - Web translation_of: Learn/Forms/Basic_native_form_controls +original_slug: Learn/Forms/The_native_form_widgets --- <div>{{LearnSidebar}}</div> 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..9367da3906 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 @@ -1,7 +1,8 @@ --- title: 例 1 -slug: Learn/Forms/How_to_build_custom_form_widgets/Example_1 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_1 translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 +original_slug: Learn/Forms/How_to_build_custom_form_widgets/Example_1 --- <p>これは、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する最初のコード例です。</p> 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..f68e64c3a0 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 @@ -1,10 +1,11 @@ --- title: 例 2 -slug: Learn/Forms/How_to_build_custom_form_widgets/Example_2 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_2 tags: - Forms - HTML translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 +original_slug: Learn/Forms/How_to_build_custom_form_widgets/Example_2 --- <p>これは、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する2番目の例です。</p> 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..e650b78cc3 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 @@ -1,10 +1,11 @@ --- title: 例 3 -slug: Learn/Forms/How_to_build_custom_form_widgets/Example_3 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_3 tags: - Forms - HTML translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 +original_slug: Learn/Forms/How_to_build_custom_form_widgets/Example_3 --- <p>これは、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する3番目の例です。</p> 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..3682793426 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 @@ -1,6 +1,6 @@ --- title: 例 4 -slug: Learn/Forms/How_to_build_custom_form_widgets/Example_4 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_4 tags: - Advanced - Example @@ -9,6 +9,7 @@ tags: - HTML - Web translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 +original_slug: Learn/Forms/How_to_build_custom_form_widgets/Example_4 --- <p>これは、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する4番目の例です。</p> 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..afac562910 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 @@ -1,10 +1,11 @@ --- title: 例 5 -slug: Learn/Forms/How_to_build_custom_form_widgets/Example_5 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_5 tags: - Forms - HTML translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_5 +original_slug: Learn/Forms/How_to_build_custom_form_widgets/Example_5 --- <p>これが、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する最後の例です。</p> 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..4034b1998b 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 @@ -1,6 +1,6 @@ --- title: カスタムフォームコントロールの作成方法 -slug: Learn/Forms/How_to_build_custom_form_widgets +slug: Learn/Forms/How_to_build_custom_form_controls tags: - Advanced - Example @@ -9,6 +9,7 @@ tags: - HTML - Web translation_of: Learn/Forms/How_to_build_custom_form_controls +original_slug: Learn/Forms/How_to_build_custom_form_widgets --- <div>{{LearnSidebar}}</div> 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..c37a3291ef 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 @@ -1,7 +1,8 @@ --- title: '例: お支払いフォーム' -slug: Learn/Forms/How_to_structure_an_HTML_form/Example +slug: Learn/Forms/How_to_structure_a_web_form/Example translation_of: Learn/Forms/How_to_structure_a_web_form/Example +original_slug: Learn/Forms/How_to_structure_an_HTML_form/Example --- <p>これは記事 <a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a>の基本的なお支払いフォームの例です。</p> 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..e8a28fae20 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 @@ -1,6 +1,6 @@ --- title: フォームの構築方法 -slug: Learn/Forms/How_to_structure_an_HTML_form +slug: Learn/Forms/How_to_structure_a_web_form tags: - CodingScripting - HTML @@ -12,6 +12,7 @@ tags: - 学習 - 構造 translation_of: Learn/Forms/How_to_structure_a_web_form +original_slug: Learn/Forms/How_to_structure_an_HTML_form --- <div>{{LearnSidebar}}</div> diff --git a/files/ja/learn/forms/styling_html_forms/index.html b/files/ja/learn/forms/styling_web_forms/index.html index 71d463f0c7..c64d5f4622 100644 --- a/files/ja/learn/forms/styling_html_forms/index.html +++ b/files/ja/learn/forms/styling_web_forms/index.html @@ -1,6 +1,6 @@ --- title: HTML フォームへのスタイル設定 -slug: Learn/Forms/Styling_HTML_forms +slug: Learn/Forms/Styling_web_forms tags: - CSS - Example @@ -10,6 +10,7 @@ tags: - Intermediate - Web translation_of: Learn/Forms/Styling_web_forms +original_slug: Learn/Forms/Styling_HTML_forms --- <p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}</p> 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..effc83ae06 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 @@ -1,19 +1,20 @@ --- title: Web サイトの公開 -slug: Learn/Getting_started_with_the_web/ウェブサイトを公開する +slug: Learn/Getting_started_with_the_web/Publishing_your_website tags: - FTP - GitHub - Google App Engine - Learn - Web - - 'l10n:priority' + - l10n:priority - publishing - web server - コードスクリプティング - 初心者 - 学習 translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +original_slug: Learn/Getting_started_with_the_web/ウェブサイトを公開する --- <div>{{LearnSidebar}}</div> 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..0a2b8dc697 --- /dev/null +++ b/files/ja/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,121 @@ +--- +title: Tips for Authoring Fast-loading HTML Pages +slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages +tags: + - HTML +original_slug: Tips_for_Authoring_Fast-loading_HTML_Pages +--- +<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><table></code>で作られたレイアウトを<code><div></code>のブロックに置き換えるか、表をより小さな表に分割しましょう。 +</p><p>次のような、深く入れ子になったtableよりも、 +</p> +<pre><TABLE> + <TABLE> + <TABLE> + ... + </TABLE> + </TABLE> +</TABLE></pre> +<p>次のような、入れ子になっていないtableやdivを使いましょう。 +</p> +<pre><TABLE>...</TABLE> +<TABLE>...</TABLE> +<TABLE>...</TABLE></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" } ) }} diff --git a/files/ja/learn/html/howto/index.html b/files/ja/learn/html/howto/index.html index a7e7f54478..43d6b5bf8b 100644 --- a/files/ja/learn/html/howto/index.html +++ b/files/ja/learn/html/howto/index.html @@ -138,4 +138,4 @@ translation_of: Learn/HTML/Howto </div> </div> -<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></p> +<p><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></p> 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 index 15394f6e79..7fb1f1101f 100644 --- 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 @@ -165,7 +165,7 @@ started with developing web sites and applications."></pre> <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"> +<pre class="brush: html notranslate"><meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.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."> @@ -199,15 +199,15 @@ and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> <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"> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.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"> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.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"> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.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"> +<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"> <!-- basic favicon --> -<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"></pre> +<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"></pre> <p>コメントはそれぞれのアイコンの用途を説明しています。 — この要素は、ウェブサイトが iPad のホーム画面に保存された時のすばらしい高解像度なアイコンの提供といったことをカバーしています。</p> diff --git a/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html b/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html deleted file mode 100644 index f3a62d8b6e..0000000000 --- a/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: PWS/Cloud Foundry に LocalLibrary をインストールする -slug: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry -translation_of: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">この記事では Pivotal Web Services の PaaS クラウドに<em>地域図書館</em>をインストールする方法の実際的なデモンストレーションを提供します。これは、チュートリアルのパート7で使用されている PaaS クラウドサービスである Heroku のフル機能のオープンソース代替です。PWS/Cloud Foundry は、Heroku (または別の PaaS クラウドサービス) に代わるものを探している場合、または単に何か違うことを試したい場合には、絶対にチェックする価値があります。</p> - -<h2 id="Why_PWS">Why PWS?</h2> - -<p>Pivotal Web Services is a public instance of the <a href="https://www.cloudfoundry.org/">Open Source Cloud Foundry Platform</a>. It is a polyglot platform supporting many different languages including Node.js, Java, PHP, Python, Staticfiles, and Ruby. It has a introductory free trial and is incredibly efficient for running Node applications! As Node and Express are open source projects, there is consistency with working with an open deployment platform such as Cloud Foundry. You can get under the <a href="https://github.com/cloudfoundry">hood</a> and see how an application is hosted.</p> - -<p>There are multiple reasons to use PWS!</p> - -<ul> - <li>PWS has a <a href="https://run.pivotla.io/pricing">flexible pricing</a> that is extremely well tuned for small runtimes such as node. It's possible to run a redundant pair of your app for less than $5 per month. That includes a standby failover system to take over running your app if the main server fails at any point.</li> - <li>As a PaaS, PWS takes care of a lot of the web infrastructure for us. This makes it much easier to get started, because you don't worry about servers, load balancers, reverse proxies, restarting your website on a crash, or any of the other web infrastructure that PWS provides for us under the hood.</li> - <li>Because PWS is using Cloud Foundry, an open platform. You can therefore easily deploy your application to other Cloud Foundry providers such as <a href="https://www.ibm.com/cloud-computing/bluemix/">IBM BlueMix</a>, <a href="https://www.anynines.com/">AnyNines</a> and <a href="https://www.swisscom.ch/en/business/enterprise/offer/cloud-data-center-services/paas/application-cloud.html">Swisscomm Application Cloud</a>. The below instructions will work with any standard Cloud Foundry deployment with minor modifications.</li> - <li>While it does have some limitations, these will not affect this particular application. For example: - <ul> - <li>PWS and Cloud Foundry provide only short-lived storage so user-uploaded files cannot safely be stored on PWS itself.</li> - <li>The free trial is good for a year and only up to $87 of app usage. For a typical Node app that means you can run an app for an entire year.</li> - </ul> - </li> - <li>Mostly it just works, and if you end up loving it and want to upgrade, scaling your app is very easy.</li> - <li>PWS and other Cloud Foundry applications are used for production apps. </li> -</ul> - -<h2 id="How_does_PWS_work_2">How does PWS work?</h2> - -<p>PWS runs websites and applications using containers and has been for many years. Cloud Foundry started using a container technology called Warden and is now using a container system called Garden. These are very similar to the popular Docker container and in fact, many installations of Cloud Foundry support deploying Docker containers.</p> - -<p>One of the advantages of using Cloud Foundry is that you do not need to create the container spec, as Cloud Foundry's buildpacks will manufacture them based on the latest components. Apps on Cloud Foundry should follow 12 Factor guidelines as the containers deployed are ephemeral and may be cleaned up at anytime and redeployed somewhere else in the cloud. This ensures that your apps and platform have the latest software. An application can consist of multiple instances where the application is placed into redundant containers that enable high availability of your app. Cloud Foundry will automatically handle all the load balancing between identical instances. This allows you to scale your application for performance and availability</p> - -<p>Since the file system is ephemeral any temporary storage or services should be located elsewhere using backing services. This can be done using marketplace services available on different providers or by bringing your own via <a href="https://docs.run.pivotal.io/devguide/services/user-provided.html">User Provided Services</a>.</p> - -<h2 id="What_do_we_cover_below">What do we cover below?</h2> - -<p>This post covers how to modify the LocalLibrary application from the tutorial for deployment on PWS and Cloud Foundry. In doing so, it covers the basics of deploying any node.js application to PWS with the following steps.</p> - -<ul> - <li>Configuring the package.json file to run with the engines available on PWS.</li> - <li>Adding and installing the<a href="https://github.com/cloudfoundry-community/node-cfenv"> 'cfenv' node module</a> to make working with services easier.</li> - <li>Using the cfenv module to connect to a MongoDB instance from mLab that was created and bound using the PWS marketplace.</li> - <li>Using the <a href="https://github.com/cloudfoundry/cli">cf CLI</a> tool to create a new mongoDB service instance and bind it to the local library application.</li> - <li>How to set environment variables for Node using the cf CLI.</li> - <li>How to look at logs, again using the cf CLI tool.</li> -</ul> - -<p>So let's get started. You have two options, you can go through the tutorial from the <a href="<https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website>">beginning</a> or you can just download the completed project and modify it from there for use on PWS. To do the latter, you can do the following from a terminal:</p> - -<pre class="brush: bash"><code>git clone https://github.com/mdn/express-locallibrary-tutorial</code></pre> - -<p>You'll then need to follow the preparation steps listed in the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment#Getting_your_website_ready_to_publish">Getting your website ready to publish</a> section of <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a>, before then following the steps listed below.</p> - -<div class="note"> -<p><strong>Note</strong>: This work flow is based on the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment#Example_Installing_LocalLibrary_on_Heroku">Mozilla Heroku work flow in the main Express/Node tutorial series</a> for consistency, to help readers compare and contrast. </p> -</div> - -<h2 id="Modifying_the_LocalLibrary_for_PWS">Modifying the LocalLibrary for PWS</h2> - -<p id="How_does_PWS_work">Deployment of a Node application on Cloud Foundry takes the following steps. Using the downloaded 'cf' CLI tool on your environment, your source code and supporting metadata files are uploaded to Cloud Foundry which will assemble and package the components of your application. Note that your files need to be located on your system to deploy or as a zip archive somewhere accessible on the internet. We'll assume the former.</p> - -<p>This means, no assumptions about which source control system is used. As long as you have a complete source tree in your local file system you can deploy the app. There are some things you have to make available to ensure the correctly assembly of your Node application. First Cloud Foundry cf CLI will look for the presence of the 'package.json' file to determine the dependencies and download the necessary components. The rules of this assembly are defined in Cloud Foundry's <a href="http://docs.run.pivotal.io/buildpacks/node/">nodejs buildpack</a>. An optional cloud foundry manifest file can specify information about your application such as name, size and start command if non-standard. In addition to deploying the application, the cf CLI tool can also configure services, set environment variables and view logs. That's all the overview you need in order to get started (see <a href="https://docs.run.pivotal.io">Getting Started on Pivotal Web Services</a> for a more comprehensive guide). Let's start making the changes so you'll need to deploy the <em>LocalLibrary</em> application to PWS.</p> - -<h3 id="Set_node_version">Set node version</h3> - -<p>The <strong>package.json</strong> contains everything needed to work out your application dependencies and what file should be launched to start your site. Cloud Foundry and PWS detects the presence of this file, and will use it to provision your app environment. The only useful information missing in our current <strong>package.json</strong> is the version of node. We can find the version of node we're using for development by entering the command:</p> - -<pre class="brush: bash">node --version -# <em>will return version e.g. v6.10.3</em></pre> - -<p>Open <strong>package.json</strong> with a text editor, and add this information as an <strong>engines > node</strong> section as shown (using the version number retrieved above).</p> - -<pre class="brush: json">{ - "name": "express-locallibrary-tutorial", - "version": "0.0.0", -<strong> "engines": { - "node": "6.10.3" - },</strong> - "private": true, - ... -</pre> - -<h3 id="Database_configuration">Database configuration</h3> - -<p>So far in this tutorial we've used a single database that is hard coded into the <strong>app.js </strong>file. Normally we'd like to be able to have a different database for production and development, so next we'll modify the LocalLibrary website to get the database URI from the OS environment, and otherwise use our development database that we added manually earlier. Cloud Foundry has a very flexible services model that enables multiple services of the same type to exist in the environment. It stores all services related configurations in a single parseable JSON object called <code>VCAP_SERVICES</code>. A typical <code>VCAP_SERVICES</code> variable looks like this:</p> - -<pre class="brush: json">{ - "VCAP_SERVICES": { - "mlab": [ - { - "credentials": { - "uri": "mongodb://CloudFoundry_test_dev:somecr8zypassw0rd@dbhost.mlab.com:57971/CloudFoundry_dbname" - }, - "label": "mlab", - "name": "node-express-tutorial-mongodb", - "plan": "sandbox", - "provider": null, - "syslog_drain_url": null, - "tags": [ - "Cloud Databases", - "Developer Tools", - "Web-based", - "Data Store", - ], - "volume_mounts": [] - } - ] - } -} - -</pre> - -<p>Writing the code to extract and parse this environment variable is not hard, but it doesn't add a lot of value when others have written libraries to do this. In this case, there is a node.js package we can use called <a href="https://github.com/cloudfoundry-community/node-cfenv"><em>cfenv</em></a>.</p> - -<p>This will download the cfenv module and its dependencies, and modify the package.json file as required. Open <strong>app.js</strong> and find the block with all the 'requires' that load the modules into your application. In this example look for the line that looks something like this:</p> - -<pre class="brush: js">var expressValidator = require('express-validator');</pre> - -<p>If you cannot find that exact line, look for the blocks of 'requires' and look for the last one. Add the following text after it:</p> - -<pre class="brush: js">var cfenv = require('cfenv');</pre> - -<ol> - <li> - <p>To install the package, go to your terminal and make sure you are in the directory where the <code>package.json</code> file for LocalLibrary is. From the command line, type:</p> - - <pre class="brush: bash">npm install cfenv</pre> - </li> - <li> - <p>Now that you have loaded the module, this next line will instantiate an object that will contain the app and services information required for deployment. Add the following after the line that contains <code>app.use(helmet());</code></p> - - <pre class="brush: js">// Set up CF environment variables -var appEnv = cfenv.getAppEnv(); -</pre> - - <p>When this line executes, all the Cloud Foundry application environment information will become available to the application in the <code>appEnv</code> object.</p> - </li> - <li> - <p>Now it is time to update the application to use the database configured by the platform. Find the line that sets the mongoDB connection variable. It will look something like this:</p> - - <pre class="brush: js">var mongoDB = process.env.MONGODB_URI || dev_db_url;</pre> - </li> - <li> - <p>You will now modify the line with the following code <code>appEnv.getServiceURL('node-express-tutorial-mongodb')</code> to get the connection string from an environment variable that is being managed by the <code>cfenv</code> module. If no service has been created and bound it will use your own database URL you created as part of the tutorial instead of the one from the environment. So replace the line above with the following:</p> - - <pre class="brush: js">var mongoDB = appEnv.getServiceURL('node-express-tutorial-mongodb') || dev_db_url; -</pre> - </li> - <li> - <p>Now run the site locally (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and check that the site still behaves as you expect. At this point your app is ready to use with Cloud Foundry and Pivotal Web Services.</p> - </li> -</ol> - -<h2 id="Get_a_Pivotal_Web_Services_account">Get a Pivotal Web Services account</h2> - -<p>To start using Pivotal Web Services you will first need to create an account (skip ahead to <a href="#Create_and_upload_the_website">Create and upload the website</a> if you've already got an account and have already installed the PWS cf CLI client).</p> - -<ul> - <li>Go to <a href="https://run.pivotal.io">https://run.pivotal.io</a> and click the <strong>SIGN UP FOR FREE</strong> button.</li> - <li>Enter your details and then press <strong>CREATE FREE ACCOUNT</strong>. You'll be asked to check your email for a sign-up email.</li> - <li>Click the account activation link in the signup email. You'll be taken back to your account on the web browser and you will complete the registration.</li> - <li>You will set your password and go through the rest of the new user sign up and how to claim your free trial account. Note you need a mobile phone to confirm your account. You will receive an "org" account funded with $87 of application usage credit. Note your email account can be in multiple orgs on PWS. This is similar to your user account on services like GitHub.</li> - <li>Go to <a href="https://login.run.pivotal.io">https://console.run.pivotal.io</a> and login in. You'll then be logged in and taken to the PWS dashboard: <a href="https://console.run.pivotal.io">https://console.run.pivotal.io</a>.</li> -</ul> - -<h2 id="Install_the_cf_CLI_client">Install the cf CLI client</h2> - -<p>The cf CLI client is a software tool for managing and deploying your application. Download and install the PWS cf CLI client by following the <a href="https://console.run.pivotal.io/tools">instructions on Pivotal Web Services</a> or downloading directly from <a href="https://github.com/cloudfoundry/cli">GIthub</a>. Be sure to download the correct version for your computer. After the client is installed you will be able run commands, for example to get help on the client:</p> - -<pre class="brush: bash">cf help -</pre> - -<p>We'll now go through the steps to login to PWS using the CLI and deploy — or in Cloud Foundry parlance "push" your app.</p> - -<h2 id="Create_and_upload_the_website">Create and upload the website</h2> - -<p>To create the app we navigate to the directory where our modified files are. This is the same directory where the LocalLibrary package.json file is located. First, let's tell the cf CLI which Cloud Foundry instance you want to use. We need to do this, since the cf CLI tool can be used with any standard Cloud Foundry system, so this command indicates which specific Cloud Foundry you are using. Enter the following terminal command now:</p> - -<pre class="brush: bash">cf api api.run.pivotal.io</pre> - -<p>Next login using the following command (enter your email and password when prompted):</p> - -<pre class="brush: bash">cf login -Email: enter your email -Password: enter your password</pre> - -<p>We can now push our app to PWS. In the below example. replace 'some-unique-name' with something you can remember that is likely to be unique. If it isn't unique, the system will let you know. The reason this name has to be unique to the PWS system is it is the address we will use to to access your LocalLibrary application. I used <em>mozilla-express-tutorial-xyzzy</em>. You should use something else.</p> - -<pre class="brush: bash">cf push some-unique-name -m 256MB</pre> - -<p>Note the <code>-m</code> flag we added is not required. We just included it so that we only use 256MB of memory to run the app. Node apps typically can run in 128 MB, but we are being safe. If we didn't specify the memory, the CLI would use the default 1 GB of memory, but we want to make sure your trial lasts longer. You should now see a bunch of text on the screen. It will indicate that the CLI is uploading all your files, that it's using the node buildpack, and it will start the app. If we're lucky, the app is now "running" on the site at the URL <code>https://some-unique-name.cfapps.io</code>. Open your browser and run the new website by going to that URL.</p> - -<div class="note"><strong>Note</strong>: The site will be running using our hardcoded development database at this time. Create some books and other objects, and check out whether the site is behaving as you expect. In the next section we'll set it to use our new database.</div> - -<h2 id="Setting_configuration_variables">Setting configuration variables</h2> - -<p>You will recall from a preceding section that we need to <a href="#NODE_ENV">set NODE_ENV to 'production'</a> in order to improve our performance and generate less-verbose error messages.</p> - -<ol> - <li> - <p>Do this by entering the following command:</p> - - <pre class="brush: bash">cf set-env some-unique-name NODE_ENV production -</pre> - </li> - <li> - <p>We should also use a separate database for production. Cloud Foundry can take advantage of a marketplace to create a new service and automatically bind it to your app. Bind means place the service database credentials in the environment variable space of the container running your application for you to access. Enter the following commands:</p> - - <pre class="brush: bash">cf create-service mlab sandbox node-express-tutorial-mongodb -cf bind-service some-unique-name node-express-tutorial-mongodb -</pre> - </li> - <li> - <p>You can inspect your configuration variables at any time using the <code>cf env some-unique-name</code> command — try this now:</p> - - <pre class="brush: bash">cf env some-unique-name -</pre> - </li> - <li> - <p>In order for your applications to use the new credentials you will have to restage your application, meaning that it will restart and apply the new environment variables. This can be done using the following — enter this command now:</p> - - <pre class="brush: bash">cf restage some-unique-name -</pre> - </li> - <li> - <p>If you check the home page now it should show zero values for your object counts, as the changes above mean that we're now using a new (empty) database.</p> - </li> -</ol> - -<h2 id="Debugging">Debugging</h2> - -<p>The PWS cf client provides a few tools for debugging:</p> - -<pre class="brush: bash">>cf logs some-unique-name --recent # Show current logs ->cf logs some-unique-name # Show current logs and keep updating with any new results</pre> - -<h2 id="Summary">Summary</h2> - -<p>If you followed the above steps, you should have now deployed the LocalLibrary app to PWS. Well done! If the deployment wasn't successful, double check all the steps.</p> diff --git a/files/ja/learn/server-side/first_steps/client-server_overview/index.html b/files/ja/learn/server-side/first_steps/client-server_overview/index.html index a99e34eff0..188c3e1713 100644 --- a/files/ja/learn/server-side/first_steps/client-server_overview/index.html +++ b/files/ja/learn/server-side/first_steps/client-server_overview/index.html @@ -54,7 +54,7 @@ translation_of: Learn/Server-side/First_steps/Client-Server_overview <ul> <li>URL パラメータ: <code>GET</code> リクエストは、サーバに送信された URL に名前と値のペアを末尾に追加することで、データをエンコードします (例：<code>http://mysite.com<strong>?name=Fred&age=11</strong></code>)。URL パラメータから URL の残りの部分を区切る疑問符 (<code>?</code>)、関連する値から各名前を区切る等号 (<code>=</code>)、および各ペアを区切るアンパサンド (<code>&</code>) が常にあります。URL パラメータは、ユーザが変更して再送信することができるため、本質的に「安全ではありません」。結果として、URL パラメータの <code>GET</code> リクエストは、サーバ上のデータを更新するリクエストには使用されません。</li> <li><code>POST</code> データ: <code>POST</code> リクエストは新しいリソースを追加し、そのデータはリクエストボディ内にエンコードされます。</li> - <li><span style="display: none;"> </span>クライアントサイド Cookie : Cookie には、クライアントに関するセッションデータが含まれており、サーバはそれをログイン状態とリソースへの権限/アクセスを判断するために使用できます。</li> + <li><span class="hidden"> </span>クライアントサイド Cookie : Cookie には、クライアントに関するセッションデータが含まれており、サーバはそれをログイン状態とリソースへの権限/アクセスを判断するために使用できます。</li> </ul> </li> </ul> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html index ffdd4984a0..06f93804ce 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html @@ -675,9 +675,9 @@ driver.quit();</pre> -<div id="simple-translate-button" style="display: none;"></div> +<div id="simple-translate-button" class="hidden"></div> -<div id="simple-translate-panel" style="display: none;"> +<div id="simple-translate-panel" class="hidden"> <p>...</p> </div> |