MDN/Structures/Live_samples を更新

- 2021/05/18 時点の英語版に同期
- 訳注マクロを削除

1 files changed, 23 insertions, 26 deletions

diff --git a/files/ja/mdn/structures/live_samples/index.html b/files/ja/mdn/structures/live_samples/index.html
index 7bc8972e8a..018cffd3f5 100644
--- a/files/ja/mdn/structures/live_samples/index.html
+++ b/files/ja/mdn/structures/live_samples/index.html
@@ -2,6 +2,7 @@
 title: ライブサンプル
 slug: MDN/Structures/Live_samples
 tags:
+  - Guide
   - Intermediate
   - MDN Meta
   - Structures
@@ -10,35 +11,35 @@ translation_of: MDN/Structures/Live_samples
 ---
 <div>{{MDNSidebar}}</div>
 
-<p><span class="seoSummary">MDN は、記事に表示されているサンプルコードを、実際に見ている実行可能なサンプルに変換することをサポートしています。これらのライブサンプルには、HTML、CSS、およびJavaScriptを任意の組み合わせで含めることができます。</span>「ライブ」サンプルはインタラクティブではありません。ただし、実際にコードサンプルによって生成されるため、サンプルの表示出力はサンプルのコードと正確に一致します。</p>
+<p><span class="seoSummary">MDN は、記事に表示されているサンプルコードを、実際に見ている実行可能なサンプルに変換することをサポートしています。これらのライブサンプルには、HTML、CSS、JavaScript を任意の組み合わせで含めることができます。</span>「ライブ」サンプルは<em>インタラクティブではありません</em>。ただし、実際にコードサンプルによって生成されるため、サンプルの表示出力はサンプルのコードと正確に一致します。</p>
 
 <h2 id="How_does_the_live_sample_system_work">ライブサンプルシステムの仕組み</h2>
 
-<p>ライブサンプルシステムは、グループ内のすべてのコードを集め、1 つの HTML ファイルにマージし、その HTML を {{HTMLElement("iframe")}} にレンダリングします。このためライブサンプルは2つの部分で構成されています。</p>
+<p>ライブサンプルシステムは、グループ内のすべてのコードを集め、1 つの HTML ファイルにマージし、その HTML を {{HTMLElement("iframe")}} にレンダリングします。このためライブサンプルは 2 つの部分で構成されています。</p>
 
 <ul>
  <li>コードブロックのグループ</li>
  <li>コードブロックの結果を表示する (フレームまたはリンクを作成する) マクロ</li>
 </ul>
 
-<p>このコンテキストでは、コードブロックの「グループ」は、見出しまたはブロック要素 ( {{HTMLElement("div")}} など) の ID によって識別されます。</p>
+<p>このコンテキストでは、コードブロックの「グループ」は、見出しまたはブロック要素 ({{HTMLElement("div")}} など) の ID によって識別されます。</p>
 
 <ul>
  <li>ID がブロック要素に属する場合、そのグループは、その ID が使用される囲むブロック要素内のすべてのコードブロックを含む。</li>
- <li>ID が見出しに属する場合、その見出しの後ろで同じ見出しレベルの次の見出しの前にあるすべてのコードブロックがグループに含まれます。指定された見出しの小見出しのコードブロックはすべて使用されていることに注意してください。これがあなたが望む効果でない場合は、代わりにブロック要素に ID を使用してください。</li>
+ <li>ID が見出しに属する場合、その見出しの後ろで同じ見出しレベルの次の見出しの前にあるすべてのコードブロックがグループに含まれます。指定された見出しの小見出しのコードブロックはすべて使用されていることに注意してください。これが望ましい効果でない場合は、代わりにブロック要素に ID を使用してください。</li>
 </ul>
 
 <p>このマクロは特別な URL を使用して、指定されたグループのサンプルコード、例えば <code>https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/animation/_samples_/Cylon_Eye</code> を取得します。一般的な構造は <code>https://<em>url-of-page</em>_samples/<em>group-id</em></code> で、 <code>group-id</code> はコードが配置されている見出しまたはブロックの ID です。</p>
 
-<p>結果として得られるフレーム (またはページ) はサンドボックスで保護されており、技術的にはウェブ上で動作するものすべてを行う可能性があります。もちろん、実際の問題として、コードはそのページの要点に貢献しなければなりません。MDN 上で実行されているランダムなものは、エディターコミュニティによって削除されます。</p>
+<p>結果として得られるフレーム (またはページ) はサンドボックスで保護されており、技術的にはウェブ上で動作するものすべてを行う可能性があります。もちろん、実際の問題として、そのコードがそのページの要点に貢献していなければなりません。無関係なものが MDN 上で実行されている場合は、編集者コミュニティが削除します。</p>
 
 <div class="note notecard">
-<p><strong>注意:</strong> ライブサンプルの出力を表示するには、マクロを使用する<strong>必要があります。</strong>MDN のエディターは、セキュリティを確保するために <code>&lt;iframe&gt;</code> 要素の直接使用を取り除きます。</p>
+<p><strong>注:</strong> ライブサンプルの出力を表示するには、マクロを使用する<strong>必要があります</strong>。</p>
 </div>
 
-<p>サンプルのコードを含む各 {{HTMLElement("pre")}} ブロックには、HTML、CSS、または JavaScript コードのいずれかを示すクラスがあり、それぞれ「brush:html」、「brush:css」、「brush:js」です。これらのクラスは、wiki が正しく使うために、対応するコードブロック上になければなりません。幸いにも、各クラスはエディターのツールバーで構文ハイライト機能を使用すると自動的に追加されます。</p>
+<p>サンプルのコードを含む各 {{HTMLElement("pre")}} ブロックには、HTML、CSS、または JavaScript コードのいずれかを示すクラスがあり、それぞれ "brush: html"、"brush: css"、"brush: js" です。これらのクラスは、対応するコードブロック上になければなりません。</p>
 
-<p>ライブサンプルシステムには多数のオプションが用意されており、少しずつ見ていきます。</p>
+<p>ライブサンプルシステムにはたくさんのオプションが用意されていますが、それらを少しずつ分解して見ていきたいと思います。</p>
 
 <h3 id="Live_sample_macros">ライブサンプルのマクロ</h3>
 
@@ -55,19 +56,15 @@ translation_of: MDN/Structures/Live_samples
 
 <pre class="brush: js"> \{{EmbedLiveSample(<em>block_ID</em>, <em>width</em>, <em>height</em>, <em>screenshot_URL</em>, <em>page_slug</em>)}}</pre>
 
-<div class="note notecard">
-<p><strong>Note</strong>: 見出しが翻訳されている場合、その ID 属性が自動的に翻訳されたテキストに合わせてアップデートされます。そのため、翻訳記事ではマクロが正しく動作するために、マクロ内で呼び出される <em>block_ID</em> の値を変更しなくていけません。</p>
-</div>
-
 <dl>
  <dt>block_ID</dt>
- <dd>必須: コードを描画する見出しまたは囲みブロックの ID。適切な ID であるかどうかを確認する最善の方法は、ページの目次のセクションの URL を見ることです。<strong>注記:</strong> 見出しが翻訳されている場合、その ID 属性が自動的に翻訳されたテキストに合わせてアップデートされます。そのため、マクロ内で呼び出される <em>block_ID</em> の値を変更しなくていけません。 {{訳注("日本語では見出し要素には <code>name</code> 属性を追加して英語版と同じ ID となるようにしています。")}}</dd>
+ <dd>必須: コードを描画する見出しまたは囲みブロックの ID。適切な ID であるかどうかを確認する最善の方法は、ページの目次でそのセクションの URL を見ることです。ページのソースを見ることで確認することもできます。</dd>
  <dt>width</dt>
- <dd>作成する {{HTMLElement("iframe")}} の幅で、<code>px</code> で指定します。これはオプションで、省略すると合理的なデフォルト幅が使用されます。特定の幅を使用する場合は、height パラメーターも指定する<em>必要があります。</em></dd>
+ <dd>作成する {{HTMLElement("iframe")}} の幅で、<code>px</code> で指定します。これは省略可能で、省略すると合理的な既定の幅が使用されます。特定の幅を使用する場合は、height 引数も指定する<em>必要があります</em>。</dd>
  <dt>height</dt>
- <dd>作成する {{HTMLElement("iframe")}} の高さで、<code>px</code> で指定します。これはオプションで、省略すると合理的なデフォルトの高さが使用されます。特定の高さを使用する場合は、width パラメーターも指定する<em>必要があります。</em>どちらか一方しか使用しない場合は、デフォルトのフレームサイズが使用されます。</dd>
+ <dd>作成する {{HTMLElement("iframe")}} の高さで、<code>px</code> で指定します。これは省略可能で、省略すると合理的な既定の高さが使用されます。特定の高さを使用する場合は、width 引数も指定する<em>必要があります</em>。どちらか一方しか使用しない場合は、既定のフレームサイズが使用されます。</dd>
  <dt>screenshot_URL</dt>
- <dd>ライブサンプルの外観を示すスクリーンショットの URL。これはオプションですが、新しいテクノロジが動作しないユーザのブラウザに対して役立つ可能性があるため、サンプルがブラウザーでサポートされている場合の様子を確認できます。このパラメータを含めると、ライブサンプルの横に、適切な見出し付きのスクリーンショットが表示されます。</dd>
+ <dd>ライブサンプルの外観を示すスクリーンショットの URL。これは省略可能ですが、新しい技術が動作しないユーザーのブラウザーではサンプルがブラウザーでサポートされている場合の様子を確認できるので有用です。この引数を含めると、ライブサンプルの横に、適切な見出し付きのスクリーンショットが表示されます。</dd>
  <dt>page_slug</dt>
  <dd>
    <p>サンプルが入っているページのスラッグです。これは省略可能で、指定されていない場合、サンプルはマクロが使用されたのと同じページから取得されます。</p>
@@ -83,7 +80,7 @@ translation_of: MDN/Structures/Live_samples
 
 <dl>
  <dt>block_ID</dt>
- <dd>コードを引っ張ってくる見出しまたは囲みブロックの ID。正しいIDであるかどうかを確認する最善の方法は、ページの目次のセクションの URL を見ることです。<strong>注記:</strong> 見出しが翻訳されている場合、その ID 属性が自動的に翻訳されたテキストに合わせてアップデートされます。そのため、マクロ内で呼び出される <em>block_ID</em> の値を変更しなくていけません。{{訳注("日本語では見出し要素には <code>name</code> 属性を追加して英語版と同じ ID となるようにしています。")}}</dd>
+ <dd>コードの引用元となる見出しまたは囲みブロックの ID。正しい ID であるかどうかを確認する最善の方法は、ページの目次でそのセクションの URL を見ることです。ページのソースを見ることで確認することもできます。</dd>
  <dt>link_text</dt>
  <dd>リンクテキストとして使用する文字列。</dd>
 </dl>
@@ -132,22 +129,22 @@ translation_of: MDN/Structures/Live_samples
 
 <pre class="brush: css">.box {
   width: 200px;
-  height: 100 px;
   border-radius: 6px;
+  padding: 20px;
   background-color: #ffaabb;
 }
 
 #item {
-  width: 100%;
   font-weight: bold;
   text-align: center;
-  font-size: 2em;
+  font-family: sans-serif;
+  font-size: 1.5em;
 }
 </pre>
 
 <h3 id="JavaScript">JavaScript</h3>
 
-<p>このコードは非常に簡単です。クリックすると警告が表示されるテキスト「Hello world!」にイベントハンドラーをアタッチするだけです。</p>
+<p>このコードはとても簡単です。クリックすると警告が表示されるテキスト「Hello world!」にイベントハンドラーをアタッチするだけです。</p>
 
 <pre class="brush: js">var el = document.getElementById('item');
 el.onclick = function() {
@@ -155,15 +152,15 @@ el.onclick = function() {
 }
 </pre>
 
-<h3 id="Result">結果</h3>
+<h3 id="結果">結果</h3>
 
 <p>下記は <code>\{{EmbedLiveSample('Live_sample_demo')}}</code> を通じて、上のコードブロックを実行した結果です。</p>
 
 <p>{{EmbedLiveSample('Live_sample_demo')}}</p>
 
-<p>下記は <code>\{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}</code> を通じて、これらのコードブロックを経由して呼び出される結果のリンクです。</p>
+<p>下記は <code>\{{LiveSampleLink('Live_sample_demo', 'ライブサンプルデモへのリンク')}}</code> を通じて、これらのコードブロックを経由して呼び出される結果のリンクです。</p>
 
-<p>{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}</p>
+<p>{{LiveSampleLink('Live_sample_demo', 'ライブサンプルデモへのリンク')}}</p>
 
 <h2 id="Conventions_regarding_live_samples">ライブサンプルに関する取り決め</h2>
 
@@ -172,6 +169,6 @@ el.onclick = function() {
  <dd>ライブサンプルを追加する場合、コードブロックは最初のものがこのサンプルのメイン言語に対応するようにソートする必要があります。たとえば、HTML リファレンスのライブサンプルを追加する場合、最初のブロックは HTML でなければならず、CSS リファレンスのライブサンプルを追加するときは CSS でなければなりません。</dd>
  <dt>見出しの名前付け</dt>
  <dd>曖昧さがない場合 (例: サンプルが「Examples」セクションの下にある場合)、見出しは対応する言語の唯一の名前である HTML、CSS、JavaScript、SVG など (上記参照) で直接的に表します。「HTML コンテンツ」や「JavaScript コンテンツ」のような見出しは使用しないでください。しかし、そのような短い見出しがコンテンツを不明瞭にする場合、より思慮深いタイトルを使用することができます。</dd>
- <dt>「Result」ブロックを使用する</dt>
- <dd>異なるコードブロックの後、<code>EmbedLiveSample</code> マクロを使用する直前に、「Result」ブロックを使用してください (上記参照)。このようにすると、この例の意味は、読者とページを解析するツール (スクリーンリーダー、ウェブクローラーなど) の両方にとってより明確になります。</dd>
+ <dt>「結果」ブロックを使用する</dt>
+ <dd>異なるコードブロックの後、<code>EmbedLiveSample</code> マクロを使用する直前に、「結果」ブロックを使用してください (上記参照)。このようにすると、この例の意味は、読者とページを解析するツール (画面リーダー、ウェブクローラーなど) の両方にとってより明確になります。</dd>
 </dl>