---
title: コードサンプルを「ライブ」に変換するには
slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live
tags:
  - Beginner
  - Howto
  - MDN Meta
translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live
---
<div>{{MDNSidebar}}</div>

<p class="summary">MDN には「<a href="/ja/docs/MDN/Structures/Live_samples">ライブサンプル</a>」システムがあり、ここではコードサンプルが、そのサンプルの出力を直接表示するのに使われます。しかし、既存の記事にはこのシステムをまだ使っていないコードサンプルが多々あり、変換する必要があります。</p>

<p><span class="seoSummary">ライブサンプルは、サンプルの出力がどのようなものかを見ることができ、ドキュメントをよりダイナミックで教育的なものにできます。このガイドは既存サンプルを取り上げて、「ライブ」動作を追加する方法を掲載します。</span></p>

<dl>
 <dt><strong>行う必要のあるページ</strong></dt>
 <dd>静的なコード例 (単なる HTML、CSS、JavaScript のブロック) を掲載している記事で、実際に動いているところを見せた方が良いと思われるもの。</dd>
 <dt><strong>タスクを行うのに必要な知識</strong></dt>
 <dd>
 <ul>
  <li>コードサンプルに応じて、 HTML, CSS 及び/あるいは JavaScript を理解すること</li>
  <li>MDN 記事内の <a href="/ja/docs/MDN/Tools/KumaScript">KumaScript</a> マクロを使う能力</li>
 </ul>
 </dd>
 <dt><strong>タスクを実行するステップ</strong></dt>
 <dd>
 <ol>
  <li>「ライブ」に変換すべきだと思うコード例を見つけてください。</li>
  <li>コードサンプルが「ライブ」となるよう変換してください。</li>
  <li>以前にサンプル出力を表示するために使われていた、コードや画像を削除してください。</li>
 </ol>
 </dd>
</dl>

<p>ライブサンプルの作成と編集についての詳細情報は、 <a href="/ja/docs/MDN/Structures/Live_samples">ライブサンプルシステムの使用</a>を参照してください。</p>