unslug ja: move

author: Florian Merz <me@fiji-flo.de> 2021-02-11 12:07:59 +0100
committer: Florian Merz <me@fiji-flo.de> 2021-02-11 12:07:59 +0100
commit: 6ef1fa4618e08426b874529619a66adbd3d1fcf0 (patch)
tree: 890e3e27131be010d82ef957fa68db495006cb0e /files/ja/web/guide
parent: 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
download: translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.gz
translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.bz2
translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.zip
29 files changed, 81 insertions, 7792 deletions
diff --git a/files/ja/web/guide/ajax/other_resources/index.html b/files/ja/web/guide/ajax/other_resources/index.html
deleted file mode 100644
index 1475956d30..0000000000
--- a/files/ja/web/guide/ajax/other_resources/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: AJAX に関するその他の資料
-slug: Web/Guide/AJAX/Other_Resources
-tags:
-  - AJAX
-translation_of: Web/Guide/AJAX/Other_Resources
----
-<ul>
-  <li><a href="http://www.ajaxreview.com/">AJAX Review</a></li>
-  <li><a href="http://www.maxkiesler.com/index.php/mhub/">mHub : Ajax and rails examples &amp; how-to's</a></li>
-  <li><a href="http://www.maxkiesler.com/">AJAX Blog at maxkiesler.com</a></li>
-  <li><a href="http://ajaxblog.com/">AJAX Blog</a></li>
-  <li><a href="http://www.ajaxian.com/">Ajaxian Blog</a></li>
-  <li><a href="http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest">AJAX Blog at fiftyfoureleven.com</a></li>
-  <li><a href="http://www.ajaxmatters.com/">AJAX Matters</a></li>
-  <li><a href="http://www.ajaxpatterns.org/Main_Page">AJAX Patterns</a></li>
-  <li><a href="http://www.ajaxtoday.com">AJAX Today Your ajax tutorials, articles, patterns, blogs</a></li>
-  <li><a href="http://www.ajaxlines.com/">AJAX Lines</a></li>
-  <li><a href="http://explash.com/" title="http://explash.com/">eXplash - Ajax and Web 2.0 applications directory</a></li>
-  <li><a href="http://www.afterhoursprogramming.com/tutorial/JavaScript/XMLHttpRequest-Object/" title="http://www.afterhoursprogramming.com/tutorial/JavaScript/XMLHttpRequest-Object/">XMLHttpRequest Object</a></li>
-</ul>
diff --git a/files/ja/web/guide/api/gamepad/index.html b/files/ja/web/guide/api/gamepad/index.html
deleted file mode 100644
index 1cd391adb2..0000000000
--- a/files/ja/web/guide/api/gamepad/index.html
+++ /dev/null
@@ -1,347 +0,0 @@
----
-title: ゲームパッド API の使用
-slug: Web/Guide/API/Gamepad
-tags:
-  - API
-  - Advanced
-  - Gamepad API
-  - Games
-  - Guide
-translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API
----
-<p>{{DefaultAPISidebar("Gamepad API")}}</p>
-
-<p><span class="seoSummary">HTML5 はリッチでインタラクティブなゲームを開発するために必要なコンポーネントを多く搭載しています。 <code>&lt;canvas&gt;</code> や WebGL、 <code>&lt;audio&gt;</code> に <code>&lt;video&gt;</code> などの技術は、今までネイティブコードを書く必要のあった機能をサポートできるほどに成長しました。ゲームパッド API は開発者とデザイナーにゲームパッドやコントローラーへのアクセスを提供するものです。</span></p>
-
-<p><a href="/ja/docs/Web/API/Gamepad_API">ゲームパッドAPI</a> は {{ domxref("Window") }} オブジェクトにゲームパッドとコントローラー (以下、ゲームパッド) の状態を読み取る新しいイベントをいくつか追加します。さらに、 {{ domxref("Gamepad") }} というゲームパッドの接続状態が得られるオブジェクトと {{ domxref("navigator.getGamepads") }} というゲームパッドの一覧を取得できるメソッドが追加されます。</p>
-
-<h2 id="conntecting" name="conntecting">ゲームパッドの接続</h2>
-
-<p>新しいゲームパッドが接続された時、アクティブなページは {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントを受け取ります。ページ読み込み時にゲームパッドがすでに接続されている場合、ゲームパッドのボタンを押すなどの操作をした時に {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントがアクティブなページに対して発生します。</p>
-
-<div class="blockIndicator geckoVersionNote">
-<p>Firefox では、ページが見える状態でかつユーザーによるゲームパッドの操作を受け付けたときにのみ、ゲームパッドが利用可能になります。これによって、ユーザーを特定する Fingerprinting に利用されることを防止しています。一度一つのコントローラーが操作されれば、他のコントローラーも自動で接続され利用可能になります。</p>
-</div>
-
-<p>以下のようにして {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} を使用します:</p>
-
-<pre class="brush: js; notranslate">window.addEventListener("gamepadconnected", function(e) {
-  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
-    e.gamepad.index, e.gamepad.id,
-    e.gamepad.buttons.length, e.gamepad.axes.length);
-});
-</pre>
-
-<p>ゲームパッドはそれぞれ固有の ID を <code>gamepad</code> プロパティの中に持っています。</p>
-
-<h2 id="disconnecting" name="disconnecting">ゲームパッドの切断</h2>
-
-<p>ゲームパッドが切断されると、ゲームパッドが以前に受信したデータ(例: {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} )があると、2番目のイベント(例: {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} )がフォーカスされたウィンドウにディスパッチします:</p>
-
-<pre class="brush: js notranslate">window.addEventListener("gamepaddisconnected", function(e) {
-  console.log("Gamepad disconnected from index %d: %s",
-    e.gamepad.index, e.gamepad.id);
-});</pre>
-
-<p>ゲームパッドの {{domxref("Gamepad.index", "index")}} というプロパティは同じタイプの複数のコントローラーが使用されている場合であっても、システムに接続されたデバイスごとにユニークになります。 <code>Index</code> プロパティもまた {{ domxref("Navigator.getGamepads()") }} として戻される {{jsxref("Array")}} の index として機能します。</p>
-
-<pre class="brush: js notranslate">var gamepads = {};
-
-function gamepadHandler(event, connecting) {
-  var gamepad = event.gamepad;
-  // Note:
-  // gamepad === navigator.getGamepads()[gamepad.index]
-
-  if (connecting) {
-    gamepads[gamepad.index] = gamepad;
-  } else {
-    delete gamepads[gamepad.index];
-  }
-}
-
-window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
-window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
-</pre>
-
-<p>この前の例ではイベントが完了した後に <code>gamepad</code> プロパティがどのように保持できるかを示しています - 後でデバイスの状態照会のために使用する技術となります。</p>
-
-<h2 id="querying" name="querying">Gamepad オブジェクトの問い合わせ</h2>
-
-<p>ご覧のように、上述の <strong>gamepad</strong> イベントは {{ domxref("Gamepad") }} オブジェクトを返すイベントオブジェクト、上の <code>gamepad</code> のプロパティが含まれています。複数のゲームパッド(すなわち、そのID ) を一度に接続される可能性があるため、イベントを発生させたのはどのゲームパッドを決定するためにこれらを使用することができます。それへの参照を保持し、それがボタンや軸のいずれかの時点で押されているかを知るために照会するなど、{{ domxref("Gamepad") }} オブジェクトから様々なことを行うことができます。そうすることで、多くの場合、今回と次回のイベント発生とゲームパッドの状態を知っておく必要があり、ゲームやその他のインタラクティブな Web ページであることが望ましいです。</p>
-
-<p>このようなチェックを実行すると、開発者はゲームパッドやゲームパッドの状態に基づいて、現在のフレームのための意思決定を行うために必要なアニメーションループ (例 : {{ domxref("Window.requestAnimationFrame","requestAnimationFrame") }}) と一緒に {{ domxref("Gamepad") }} オブジェクトを使用して関与する傾向があります。</p>
-
-<p>{{ domxref("Navigator.getGamepads()") }} メソッドは現在 Web ページから見える {{ domxref("Gamepad") }} オブジェクト (ゲームパッドが繋がっていない時は毎回 null が返される ) のような、すべてのデバイスを配列として戻します。これは、同じ情報を得るために使用することができます。例えば、 以下に示すように上記の最初のコード例を書き換えます。</p>
-
-<pre class="brush: js notranslate">window.addEventListener("gamepadconnected", function(e) {
-  var gp = navigator.getGamepads()[e.gamepad.index];
-  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
-    gp.index, gp.id,
-    gp.buttons.length, gp.axes.length);
-});</pre>
-
-<p>{{ domxref("Gamepad") }} オブジェクトの機能は以下の通りです。</p>
-
-<ul>
- <li><code>id</code>: コントローラーに関する情報を含んだ文字列です。これは厳密には指定されていなく、Firefox では、コントローラーのUSBベンダと製品IDを含んでいる2つの4桁16進数字列、およびドライバーから提供されるようなコントローラーの名前といった3つの情報が、ダッシュ (<code>-</code>) により分離され含まれています。この情報はユーザーへの有益なフィードバックを表示するとともに、デバイスのコントロールのマッピングを見つけることができるようにします。</li>
- <li><code>index</code>: 現在システムに接続されているゲームパッドごとに固有の整数。この値は複数のコントローラーを区別するために使用できます。デバイスを切断してから新しいデバイスを接続すると、以前のインデックスが再利用されることに注意してください。</li>
- <li><code>mapping</code>: ブラウザがデバイス上のコントロールを既知のレイアウトに再マップしたかどうかを示す文字列。現在、サポートされている既知のレイアウト - <a href="https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping">標準のゲームパッド</a>は1つしかありません。ブラウザがデバイス上のコントロールをそのレイアウトにマッピングできる場合、 <code>mapping</code> プロパティは文字列 <code>standard</code> に設定されます。</li>
- <li><code>connected</code>:ゲームパッドがシステムに接続されているかどうかを示すブール値。もし接続されている場合は <code>True</code>。接続されていない場合は <code>False</code> が設定されます。</li>
- <li><code>buttons</code>: デバイス上に存在するボタンを表す {{ domxref("GamepadButton") }} オブジェクトの配列。各 {{ domxref("GamepadButton") }} には、<code>pressed</code> プロパティと <code>value</code> のプロパティがあります。
-  <ul>
-   <li><code>pressed</code> プロパティは、ボタンが現在押されている (<code>true</code>) か押されていない (<code>false</code>) かを示すブール値です。&gt;</li>
-   <li><code>value</code> プロパティは、現代の多くのゲームパッドのトリガなど、アナログボタンの表示を有効にするために使用される浮動小数点値です。値は 0.0..1.0 の範囲に正規化され、 0.0 は押されていないボタンを表し、 1.0 は完全に押されたボタンを表します。</li>
-  </ul>
- </li>
- <li><code>axes</code>: デバイス上に軸があるコントロールを表す配列 (例：アナログサムスティック)。 配列の各エントリは-1.0〜1.0の範囲の浮動小数点値で、最小値 (-1.0) から最大値 (1.0) までの軸の位置を表します。</li>
- <li><code>timestamp</code>: このゲームパッドのデータが最後に更新された時刻を表す {{ domxref("DOMHighResTimeStamp") }} を返します。この値により、開発者は <code>axes</code> と <code>button</code> のデータがハードウェアから更新されたかどうかを判断できます。 値は、 {{ domxref("PerformanceTiming") }} インターフェースの <code>navigationStart</code> 属性との相対値でなければなりません。 値は単調に増加します。つまり、更新の順序を決定するために比較することができます。新しい値は常に古い値よりも大きいか等しいためです。このプロパティは現在 Firefox ではサポートされていません。</li>
-</ul>
-
-<div class="note">
-<p><strong>注</strong>: Gamepadオブジェクトは、セキュリティ上の理由から {{ domxref("Window") }} オブジェクトではなく {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントで使用できます。一度リファレンスを取得すると、そのプロパティでゲームパッドの現在の状態に関する情報を照会できます。 このオブジェクトは、ゲームパッドの状態が変わるたびに更新されます。</p>
-</div>
-
-<h3 id="Using_button_information" name="Using_button_information">ボタン情報の使用</h3>
-
-<p>1つのゲームパッドの接続情報を表示する簡単な例を見てみましょう (後続のゲームパッド接続を無視します)。ゲームパッドの右側にある4つのゲームパッドボタンを使用してボールを画面の周りに移動できます。<a href="http://chrisdavidmills.github.io/gamepad-buttons/">デモをライブで見ることができ</a>ことができ、Githubで<a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">ソースコードを見つけることができます</a>。</p>
-
-<p>まず、いくつかの変数を宣言します: 接続情報が書き込まれる <code>gamepadInfo</code> のパラグラフ、移動する <code>ball</code>、<code>requestAnimation Frame</code> の ID として機能する <code>start</code> 変数、ボールを移動するための位置変更子として機能する a および b 変数、および短縮形変数 これは、　{{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} および {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} クロスブラウザフォークで使用されます。</p>
-
-<pre class="brush: js notranslate">var gamepadInfo = document.getElementById("gamepad-info");
-var ball = document.getElementById("ball");
-var start;
-var a = 0;
-var b = 0;
-</pre>
-
-<p>次に {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントを使用して、接続されているゲームパッドを確認します。接続されると {{ domxref("Navigator.getGamepads()") }}<code>[0]</code> を使用してゲームパッドを取得し、ゲームパッドに関する情報をゲームパッドの情報 <code>div</code> に出力し、全体のボールの動きが始まる <code>gameLoop()</code> 関数が呼び出されます。</p>
-
-<pre class="brush: js notranslate">window.addEventListener("gamepadconnected", function(e) {
-  var gp = navigator.getGamepads()[e.gamepad.index];
-  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
-
-  gameLoop();
-});</pre>
-
-<p>これで {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} イベントを使用して、ゲームパッドが再び切断されたかどうかを確認します。 もしそうならば、 {{DOMxRef("Window.requestAnimationFrame", "requestAnimationFrame()")}} ループ (下記参照) を停止し、ゲームパッドの情報を元の状態に戻します。</p>
-
-<pre class="brush: js notranslate">window.addEventListener("gamepaddisconnected", function(e) {
-  gamepadInfo.innerHTML = "Waiting for gamepad.";
-
-  cancelRequestAnimationFrame(start);
-});</pre>
-
-<p>Chrome では異なる挙動になります。変数にゲームパッドの最新の状態を常に保存するのではなく、スナップショットを保存するだけなので、 Chrome で同じことを行うにはポーリングしてから {{ domxref("Gamepad") }} オブジェクトをコードで使用する必要があり、それは利用可能です。私たちはこれを {{ domxref("Window.setInterval()") }} オブジェクトが利用可能になると、ゲームパッド情報が出力され、ゲームループが開始され、 {{ domxref("Window.clearInterval()") }} を使用して間隔がクリアされます。 Chrome {{ domxref("Navigator.getGamepads()") }} の古いバージョンでは、 Webkit 接頭辞を使用して実装されています。下位互換性のために、接頭辞付きのバージョンと関数の標準バージョンの両方を検出して処理しようとします。</p>
-
-<pre class="brush: js notranslate">var interval;
-
-if (!('ongamepadconnected' in window)) {
-  // No gamepad events available, poll instead.
-  interval = setInterval(pollGamepads, 500);
-}
-
-function pollGamepads() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
-  for (var i = 0; i &lt; gamepads.length; i++) {
-    var gp = gamepads[i];
-    if (gp) {
-      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id +
-        ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
-      gameLoop();
-      clearInterval(interval);
-    }
-  }
-}</pre>
-
-<p>今度はメインのゲームループです。ループが実行されるたびに、4つのボタンの1つが押されているかどうかがチェックされます。そうすると、<code>a</code> と <code>b</code> の移動変数の値を適切に更新し、 {{ cssxref("left") }} と {{ cssxref("top") }} のプロパティを更新し、その値を <code>a</code> および <code>b</code> とする。これはボールを画面の周りに動かす効果があります。 現在のバージョンの Chrome (この記事の執筆時点ではバージョン34) では、ボタンの値は {{ domxref("GamepadButton") }} オブジェクトではなく、 double 値の配列として保存されます。</p>
-
-<p>この作業がすべて完了したら、 <code>requestAnimationFrame()</code> を使用して <code>gameLoop()</code> を再び実行して次のアニメーションフレームを要求します。</p>
-
-<pre class="brush: js notranslate">function buttonPressed(b) {
-  if (typeof(b) == "object") {
-    return b.pressed;
-  }
-  return b == 1.0;
-}
-
-function gameLoop() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
-  if (!gamepads) {
-    return;
-  }
-
-  var gp = gamepads[0];
-  if (buttonPressed(gp.buttons[0])) {
-    b--;
-  } else if (buttonPressed(gp.buttons[2])) {
-    b++;
-  }
-  if (buttonPressed(gp.buttons[1])) {
-    a++;
-  } else if (buttonPressed(gp.buttons[3])) {
-    a--;
-  }
-
-  ball.style.left = a * 2 + "px";
-  ball.style.top = b * 2 + "px";
-
-  start = requestAnimationFrame(gameLoop);
-}</pre>
-
-<h2 id="Complete_example_Displaying_gamepad_state" name="Complete_example_Displaying_gamepad_state">完全な例: ゲームパッドの状態を表示する</h2>
-
-<p>この例では、 {{ domxref("Gamepad") }} オブジェクト、 {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベント、 {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} イベントを使用してシステムに接続されているすべてのゲームパッドの状態を表示します。<a href="http://luser.github.io/gamepadtest/">デモを見て</a>、Githubの<a href="https://github.com/luser/gamepadtest">完全なソースコード</a>を見ることができます。</p>
-
-<pre class="brush: js notranslate">var haveEvents = 'ongamepadconnected' in window;
-var controllers = {};
-
-function connecthandler(e) {
-  addgamepad(e.gamepad);
-}
-
-function addgamepad(gamepad) {
-  controllers[gamepad.index] = gamepad;
-
-  var d = document.createElement("div");
-  d.setAttribute("id", "controller" + gamepad.index);
-
-  var t = document.createElement("h1");
-  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
-  d.appendChild(t);
-
-  var b = document.createElement("div");
-  b.className = "buttons";
-  for (var i = 0; i &lt; gamepad.buttons.length; i++) {
-    var e = document.createElement("span");
-    e.className = "button";
-    //e.id = "b" + i;
-    e.innerHTML = i;
-    b.appendChild(e);
-  }
-
-  d.appendChild(b);
-
-  var a = document.createElement("div");
-  a.className = "axes";
-
-  for (var i = 0; i &lt; gamepad.axes.length; i++) {
-    var p = document.createElement("progress");
-    p.className = "axis";
-    //p.id = "a" + i;
-    p.setAttribute("max", "2");
-    p.setAttribute("value", "1");
-    p.innerHTML = i;
-    a.appendChild(p);
-  }
-
-  d.appendChild(a);
-
-  // See https://github.com/luser/gamepadtest/blob/master/index.html
-  var start = document.getElementById("start");
-  if (start) {
-    start.style.display = "none";
-  }
-
-  document.body.appendChild(d);
-  requestAnimationFrame(updateStatus);
-}
-
-function disconnecthandler(e) {
-  removegamepad(e.gamepad);
-}
-
-function removegamepad(gamepad) {
-  var d = document.getElementById("controller" + gamepad.index);
-  document.body.removeChild(d);
-  delete controllers[gamepad.index];
-}
-
-function updateStatus() {
-  if (!haveEvents) {
-    scangamepads();
-  }
-
-  var i = 0;
-  var j;
-
-  for (j in controllers) {
-    var controller = controllers[j];
-    var d = document.getElementById("controller" + j);
-    var buttons = d.getElementsByClassName("button");
-
-    for (i = 0; i &lt; controller.buttons.length; i++) {
-      var b = buttons[i];
-      var val = controller.buttons[i];
-      var pressed = val == 1.0;
-      if (typeof(val) == "object") {
-        pressed = val.pressed;
-        val = val.value;
-      }
-
-      var pct = Math.round(val * 100) + "%";
-      b.style.backgroundSize = pct + " " + pct;
-
-      if (pressed) {
-        b.className = "button pressed";
-      } else {
-        b.className = "button";
-      }
-    }
-
-    var axes = d.getElementsByClassName("axis");
-    for (i = 0; i &lt; controller.axes.length; i++) {
-      var a = axes[i];
-      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
-      a.setAttribute("value", controller.axes[i] + 1);
-    }
-  }
-
-  requestAnimationFrame(updateStatus);
-}
-
-function scangamepads() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
-  for (var i = 0; i &lt; gamepads.length; i++) {
-    if (gamepads[i]) {
-      if (gamepads[i].index in controllers) {
-        controllers[gamepads[i].index] = gamepads[i];
-      } else {
-        addgamepad(gamepads[i]);
-      }
-    }
-  }
-}
-
-window.addEventListener("gamepadconnected", connecthandler);
-window.addEventListener("gamepaddisconnected", disconnecthandler);
-
-if (!haveEvents) {
- setInterval(scangamepads, 500);
-}</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}</td>
-   <td>{{Spec2("Gamepad")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div class="hidden">
-<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
-</div>
-
-<p>{{Compat("api.Gamepad")}}</p>
diff --git a/files/ja/web/guide/api/vibration/index.html b/files/ja/web/guide/api/vibration/index.html
deleted file mode 100644
index 49ab486128..0000000000
--- a/files/ja/web/guide/api/vibration/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Vibration API
-slug: Web/Guide/API/Vibration
-tags:
-  - API
-  - Beginner
-  - Mobile
-  - Vibration
-translation_of: Web/API/Vibration_API
----
-<div>{{DefaultAPISidebar("Vibration API")}}</div>
-
-<p class="summary">現代のモバイル端末は、たいていバイブレーションハードウェアを内蔵しており、ソフトウェアのコードが端末を振動させることによりユーザーに物理的なフィードバックを与えることができます。 <strong>Vibration API</strong> はウェブアプリに、このハードウェアが存在すればアクセスすることができるようにし、端末が対応していない場合は何もしません。</p>
-
-<h2 id="Describing_vibrations" name="Describing_vibrations">バイブレーションの表現</h2>
-
-<p>バイブレーションはオン・オフのパルスのパターンで表され、様々な長さになることがあります。パターンは振動するミリ秒数を示す整数 1 つ、あるいはバイブレーションと休止時間のパターンを示す整数の配列で構成します。バイブレーションは {{domxref("Navigator.vibrate()")}} という単一のメソッドで制御します。</p>
-
-<h3 id="A_single_vibration" name="A_single_vibration">1 回のバイブレーション</h3>
-
-<p>1 個の値、または 1 個だけの値で構成される配列を指定することにより、バイブレーションハードウェアを 1 回振動させることができます:</p>
-
-<pre class="brush:js">window.navigator.vibrate(200);
-window.navigator.vibrate([200]);
-</pre>
-
-<p>どちらの例も、デバイスを 200 ミリ秒間振動させます。</p>
-
-<h3 id="Vibration_patterns" name="Vibration_patterns">バイブレーションパターン</h3>
-
-<p>値の配列は、デバイスが振動する時間と振動しない時間を交互に示します。配列内の各値は整数値に変換されて、デバイスを振動させるミリ秒数および振動させないミリ秒数として交互に解釈されます。例えば以下のようにします。</p>
-
-<pre class="brush: js">window.navigator.vibrate([200, 100, 200]);
-</pre>
-
-<p>これはデバイスを 200 ミリ秒間振動させて、その後再び 200 ミリ秒間振動させる前に 100 ミリ秒間振動を止めます。</p>
-
-<p>バイブレーション/休止のペアは好きなだけ多く指定でき、またエントリ数は偶数・奇数のどちらでも可能です。各バイブレーション時間の終端で自動的にバイブレーションを止めますので、休止時間を最後のエントリとして与えなくてもよいことは注目に値します。</p>
-
-<h3 id="Canceling_existing_vibrations" name="Canceling_existing_vibrations">実行中のバイブレーションを取り消す</h3>
-
-<p>値 <code>0</code>、空の配列、あるいはすべての値が <code>0</code> の配列 を指定して {{domxref("Navigator.vibrate()")}} を呼び出すと、現在進行中のバイブレーションパターンを取り消します。</p>
-
-<h3 id="Continued_vibrations" name="Continued_vibrations">継続的なバイブレーション</h3>
-
-<p>基本的な <code>setInterval</code> および <code>clearInterval</code> のアクションにより、継続的なバイブレーションを生成できます:</p>
-
-<pre class="brush: js">var vibrateInterval;
-
-// 渡されたレベルでバイブレーションを開始
-function startVibrate(duration) {
-    navigator.vibrate(duration);
-}
-
-// バイブレーションを停止
-function stopVibrate() {
-    // インターバルをクリアして継続的なバイブレーションを停止
-    if(vibrateInterval) clearInterval(vibrateInterval);
-    navigator.vibrate(0);
-}
-
-// 与えられた時間とインターバルによる継続的なバイブレーションを開始
-// 数値が与えられるものとする
-function startPersistentVibrate(duration, interval) {
-    vibrateInterval = setInterval(function() {
-        startVibrate(duration);
-    }, interval);
-}</pre>
-
-<p>当然ながら、上記のコードスニペットは配列によるバイブレーションを考慮していません。配列に基づく継続的なバイブレーションでは、配列のアイテムの総数を計算して、その値を基にしてインターバル (おそらく、遅延時間を付加して) を作成することが必要でしょう。</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Vibration API")}}</td>
-   <td>{{Spec2("Vibration API")}}</td>
-   <td>リンク先は最新の編集者草稿です。 W3C 版は勧告になりました。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
-
-<p>{{Compat("api.Navigator.vibrate")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{DOMxRef("Navigator.vibrate()")}}</li>
-</ul>
diff --git a/files/ja/web/guide/css/getting_started/boxes/index.html b/files/ja/web/guide/css/getting_started/boxes/index.html
deleted file mode 100644
index 379b38949d..0000000000
--- a/files/ja/web/guide/css/getting_started/boxes/index.html
+++ /dev/null
@@ -1,331 +0,0 @@
----
-title: Boxes
-slug: Web/Guide/CSS/Getting_started/Boxes
-tags:
-  - CSS
-  - 'CSS:Getting_Started'
-translation_of: Learn/CSS/Building_blocks
-translation_of_original: Web/Guide/CSS/Getting_started/Boxes
----
-<div>{{CSSTutorialTOC}}</div>
-
-<p>{{previousPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。</p>
-
-<h2 class="clearLeft" id="ボックスについて">ボックスについて</h2>
-
-<p>ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。</p>
-
-<p>中央に、<em>要素（element）</em>がその内容を表示するのに必要なスペースがあります。その周りに パディング（<em>padding）</em> があり、その周りに <em>ボーダー（border）</em> があります。その周りには <em>マージン（margin）</em> があって、他要素とその要素を隔てています。</p>
-
-<table>
- <tbody>
-  <tr>
-   <td style="width: 22em;">
-    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
-    <p style="text-align: center; margin: 0px;">マージン</p>
-
-    <p style="text-align: center; margin: 0px 0px -.75em 0px;">ボーダー</p>
-
-    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
-    <p style="text-align: center;">パディング</p>
-
-    <div style="background-color: #eee;">
-    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">要素</p>
-    </div>
-    </div>
-    </div>
-
-    <p><em>薄い灰色がレイアウトの部品を示します。</em></p>
-   </td>
-   <td>
-    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
-    <p style="text-align: center; margin: 0px;"> </p>
-
-    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
-
-    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
-    <p style="text-align: center;"> </p>
-
-    <div style="background-color: #fff;">
-    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">要素</p>
-    </div>
-    </div>
-    </div>
-
-    <p><em>ブラウザではこう見えます。</em></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。</p>
-
-<h3 id="Coloring" name="Coloring">彩色</h3>
-
-<p>パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。</p>
-
-<table>
- <tbody>
-  <tr>
-   <td style="width: 22em;">
-    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
-    <p style="text-align: center; margin: 0px;">マージン</p>
-
-    <p style="text-align: center; margin: 0px 0px -.75em 0px;">ボーダー</p>
-
-    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
-    <p style="text-align: center;">パディング</p>
-
-    <div style="background-color: #ded;">
-    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">要素</p>
-    </div>
-    </div>
-    </div>
-
-    <p><em>要素の背景色は緑です。</em></p>
-   </td>
-   <td>
-    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
-    <p style="text-align: center; margin: 0px;"> </p>
-
-    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
-
-    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
-    <p style="text-align: center;"> </p>
-
-    <div style="background-color: #efe;">
-    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">要素</p>
-    </div>
-    </div>
-    </div>
-
-    <p><em>ブラウザではこう見えます</em>。</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Borders" name="Borders">ボーダー</h3>
-
-<p>ボーダーを使って、要素を線や枠囲みで装飾できます。</p>
-
-<p>要素の境界線をすべて同じにするには、{{cssxref("border")}} プロパティを使います。幅（画面表示されるときの単位は通常 pixel です）、スタイル、色を定義します。</p>
-
-<p>選べるスタイル:</p>
-
-<table style="margin-left: 2em;">
- <tbody>
-  <tr>
-   <td style="width: 6em;">
-    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
-   </td>
-  </tr>
-  <tr>
-   <td style="width: 6em;">
-    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
-   </td>
-   <td style="width: 6em;">
-    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>また、スタイルを <code>none</code> か <code>hidden</code> にして、明示的にボーダーを消したり、色を <code>transparent</code> にして、レイアウトを変えずにボーダーを透明にしたりできます。</p>
-
-<p>一辺ずつボーダーを定義するには、次のプロパティを使います: {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}}。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。</p>
-
-<div class="tuto_example">
-<div class="tuto_type">例</div>
-
-<p>次のルールは、見出し要素の背景色と上辺のボーダーを定義します:</p>
-
-<pre class="brush:css">h3 {
-  border-top: 4px solid #7c7; /* mid green */
-  background-color: #efe;     /* pale green */
-  color: #050;                /* dark green */
-}</pre>
-
-<p>結果は次のようになります:</p>
-
-<table>
- <tbody>
-  <tr>
-   <td>
-    <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">スタイルつきの見出し</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:</p>
-
-<pre class="brush:css">img {border: 2px solid #ccc;}
-</pre>
-</div>
-
-<p>結果は次のようになります:</p>
-
-<table>
- <tbody>
-  <tr>
-   <td>画像:</td>
-   <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" src="/@api/deki/files/47/=Blue-rule.png"></td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Margins_and_padding" name="Margins_and_padding">マージンとパディング</h3>
-
-<p>マージンとパディングで要素の位置を調整し、周りに余白を作ります。</p>
-
-<p>{{cssxref("margin")}} プロパティと {{cssxref("padding")}} プロパティでそれぞれ、マージンの幅、パディングの幅を設定します。</p>
-
-<p>幅を一つだけ記述すると、要素の全ての枠（top（上辺）、right（右辺）、bottom（下辺）、left（左辺））に適用されます。</p>
-
-<p>幅を2つ記述すると、1番目が top と bottom に、2番めが right と left に適用されます。</p>
-
-<p>4つすべての幅を定義するには、次の順番で記述します: top、 right、bottom、left</p>
-
-<div class="tuto_example">
-<div class="tuto_type">例</div>
-
-<p>次のルールは、<code>remark</code> クラスを持つ段落に、四辺すべてを囲むような赤い枠を与えます。</p>
-
-<p>パディングで囲むことで、テキストから枠が少し離れます。</p>
-
-<p>左マージンは段落を他のテキストからインデントします:</p>
-
-<pre class="brush:css">p.remark {
-  border: 2px solid red;
-  padding: 4px;
-  margin-left: 24px;
-  }
-</pre>
-
-<p>結果は次のようになります:</p>
-
-<table>
- <tbody>
-  <tr>
-   <td>
-    <p>ここは通常の段落です。</p>
-
-    <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">ここは remark 用の段落です。</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type">さらに詳しく</div>
-
-<p>マージンとパディングで要素の配置方法を調整すると、そのスタイルのルールとブラウザのデフォルトが、複雑な方法で相互作用します。</p>
-
-<p>ブラウザによって、要素の配置方法が異なります。スタイルシートで変えなければ、結果は同じに見えるかもしれません。このため、時折スタイルシートのもたらす結果に驚くことがあります。</p>
-
-<p>望む結果を得るには、文書のマークアップを変更する必要があるかもしれません。このチュートリアルの次のページで、このことについてもっと触れています。</p>
-
-<p>パディング、マージン、ボーダーについての詳しい情報は、リファレンスの <a href="/ja/docs/CSS/box_model" title="CSS/box model"><span>ボックスモデル</span></a> をご覧ください。</p>
-</div>
-
-<h2 id="Action.3A_Adding_borders" name="Action.3A_Adding_borders">実習: ボーダーの追加</h2>
-
-<p>CSS ファイル <code>style2.css を編集します。次のルールを追加して、見出しのそれぞれで、ページを横切る線を描くようにしてください</code>:</p>
-
-<pre class="brush:css">h3 {border-top: 1px solid gray;}
-</pre>
-
-<p>前のページのチャレンジを終えていれば、そこで作ったルールを編集するか、次の新しいルールを追加して、各リスト項目の真下にスペースを置くようにしてください:</p>
-
-<pre class="brush:css">li {
-  list-style: lower-roman;
-  margin-bottom: 8px;
-  }
-</pre>
-
-<p>ブラウザを更新すると次の結果になります:</p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
- <tbody>
-  <tr>
-   <td>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
-
-    <ul style="">
-     <li style="margin-bottom: 8px;">Arctic</li>
-     <li style="margin-bottom: 8px;">Atlantic</li>
-     <li style="margin-bottom: 8px;">Pacific</li>
-     <li style="margin-bottom: 8px;">Indian</li>
-     <li style="margin-bottom: 8px;">Southern</li>
-    </ul>
-
-    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-
-    <p><strong>1: </strong>Lorem ipsum</p>
-
-    <p><strong>2: </strong>Dolor sit</p>
-
-    <p><strong>3: </strong>Amet consectetuer</p>
-
-    <p><strong>4: </strong>Magna aliquam</p>
-
-    <p><strong>5: </strong>Autem veleum</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<div class="tuto_example">
-<div class="tuto_type">チャレンジ</div>
-
-<p>スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:</p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
- <tbody>
-  <tr>
-   <td>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
-
-    <div style="border: 12px solid #69b; padding-left: 1em;">
-    <ul style="">
-     <li style="margin-bottom: 8px;">Arctic</li>
-     <li style="margin-bottom: 8px;">Atlantic</li>
-     <li style="margin-bottom: 8px;">Pacific</li>
-     <li style="margin-bottom: 8px;">Indian</li>
-     <li style="margin-bottom: 8px;">Southern</li>
-    </ul>
-    </div>
-
-    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-
-    <p><strong>. . .</strong></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>（幅や色を正確に同じにする必要はありません。）</p>
-</div>
-
-<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Challenge_solutions#Boxes">このチャレンジの解答を見る。</a></p>
-
-<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2>
-
-<p>{{nextPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}マージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の <a href="/ja/docs/CSS/Getting_Started/Layout" title="CSS/Getting_Started/Layout">レイアウト</a> を変えます。</p>
diff --git a/files/ja/web/guide/css/getting_started/color/index.html b/files/ja/web/guide/css/getting_started/color/index.html
deleted file mode 100644
index 4d080bc3a4..0000000000
--- a/files/ja/web/guide/css/getting_started/color/index.html
+++ /dev/null
@@ -1,349 +0,0 @@
----
-title: 色
-slug: Web/Guide/CSS/Getting_started/Color
-tags:
-  - CSS
-  - 'CSS:Getting_Started'
-  - Getting_Started
-translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
-translation_of_original: Web/Guide/CSS/Getting_started/Color
----
-<p>この文書では、CSS 中でどのように色を指定するかについて詳細に説明します。</p>
-
-<p>サンプルスタイルシートに、背景色を指定出来るようになります。</p>
-
-<p>{{ 英語版章題("Information: Color") }}</p>
-
-<h3 id=".E8.A7.A3.E8.AA.AC:_.E8.89.B2" name=".E8.A7.A3.E8.AA.AC:_.E8.89.B2">解説: 色</h3>
-
-<p>このチュートリアルでは、限られた名前付きの色だけを利用してきました。 CSS 2 では 17 個しか名前付きの色が定義されていません。 それらのいくつかの名前は、想像と異なるかもしれません。</p>
-
-<table style="border: 0px; margin-left: 2em; text-align: right;">
- <tbody>
-  <tr>
-   <td> </td>
-   <td>black</td>
-   <td style="width: 2em; height: 2em; background-color: black;"> </td>
-   <td>gray</td>
-   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
-   <td>silver</td>
-   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
-   <td>white</td>
-   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
-  </tr>
-  <tr>
-   <td>プライマリー</td>
-   <td>red</td>
-   <td style="width: 2em; height: 2em; background-color: red;"> </td>
-   <td>lime</td>
-   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
-   <td>blue</td>
-   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
-  </tr>
-  <tr>
-   <td>セカンダリー</td>
-   <td>yellow</td>
-   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
-   <td>aqua</td>
-   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
-   <td>fuchsia</td>
-   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
-  </tr>
-  <tr>
-   <td> </td>
-   <td>maroon</td>
-   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
-   <td>orange</td>
-   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
-   <td>olive</td>
-   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
-   <td>purple</td>
-   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
-   <td>green</td>
-   <td style="width: 2em; height: 2em; background-color: green;"> </td>
-   <td>navy</td>
-   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
-   <td>teal</td>
-   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
-
-<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;">
- <caption>詳細情報</caption>
- <tbody>
-  <tr>
-   <td>ブラウザが上記以上の名前付きの色をサポートしている可能性もあります
-    <table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;">
-     <tbody>
-      <tr>
-       <td>dodgerblue</td>
-       <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
-       <td>peachpuff</td>
-       <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
-       <td>tan</td>
-       <td style="width: 2em; height: 2em; background-color: tan;"> </td>
-       <td>firebrick</td>
-       <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
-       <td>aquamarine</td>
-       <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
-      </tr>
-     </tbody>
-    </table>
-
-    <p>拡張された色の名前リストについては、CSS 3 カラーモジュールの <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG 色キーワード</a> を参照してください。利用者のブラウザがサポートしていない色を利用しないように注意してください。</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>より広い色空間を利用するためには、赤、緑、青の各色の割合を、# の後に 3 文字の<em>16 進数</em> 、0 – 9 か a – f、a – f は 10 – 15 を意味します、で指定してください。</p>
-
-<table style="border: 0px; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td>black</td>
-   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
-   <td><code>#000</code></td>
-  </tr>
-  <tr>
-   <td>pure red</td>
-   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
-   <td><code>#f00</code></td>
-  </tr>
-  <tr>
-   <td>pure green</td>
-   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
-   <td><code>#0f0</code></td>
-  </tr>
-  <tr>
-   <td>pure blue</td>
-   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
-   <td><code>#00f</code></td>
-  </tr>
-  <tr>
-   <td>white</td>
-   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
-   <td><code>#fff</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>完全な色空間を利用するためには、それぞれの色について 2 文字の 16 進数を利用します。</p>
-
-<table style="border: 0px; margin-left: 2em;">
- <tbody>
-  <tr>
-   <td>black</td>
-   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
-   <td><code>#000000</code></td>
-  </tr>
-  <tr>
-   <td>pure red</td>
-   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
-   <td><code>#ff0000</code></td>
-  </tr>
-  <tr>
-   <td>pure green</td>
-   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
-   <td><code>#00ff00</code></td>
-  </tr>
-  <tr>
-   <td>pure blue</td>
-   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
-   <td><code>#0000ff</code></td>
-  </tr>
-  <tr>
-   <td>white</td>
-   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
-   <td><code>#ffffff</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>これらの 6 桁の 16 進数は画像ソフトやその他のツールで取得可能です。</p>
-
-<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em;">
- <caption>Examples</caption>
- <tbody>
-  <tr>
-   <td>少し練習すると、ほとんどの場面で 3 文字色指定は手動で調整できるようになります。
-    <table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
-     <tbody>
-      <tr>
-       <td>赤から始めます</td>
-       <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
-       <td><code>#f00</code></td>
-      </tr>
-      <tr>
-       <td>桃色に近づけるため、緑・青を追加</td>
-       <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
-       <td><code>#f77</code></td>
-      </tr>
-      <tr>
-       <td>橙に近づけるため、緑を追加</td>
-       <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
-       <td><code>#fa7</code></td>
-      </tr>
-      <tr>
-       <td>暗くするため、全ての色を減らす</td>
-       <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
-       <td><code>#c74</code></td>
-      </tr>
-      <tr>
-       <td>飽和を減らすため、色の値を近づける</td>
-       <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
-       <td><code>#c98</code></td>
-      </tr>
-      <tr>
-       <td>色同士を完全に同じにすると、灰色</td>
-       <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
-       <td><code>#ccc</code></td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
-  <tr>
-   <td>空色のようなパステル調を出すには:
-    <table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
-     <tbody>
-      <tr>
-       <td>白から始めます:</td>
-       <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
-       <td><code>#fff</code></td>
-      </tr>
-      <tr>
-       <td>他の色の値を少し減らします:</td>
-       <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
-       <td><code>#eef</code></td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
-
-<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;">
- <caption>More details</caption>
- <tbody>
-  <tr>
-   <td>色の指定は、上記以外にでも、RGB 値を 0 – 255 の 10 進数やパーセント値で指定できます。
-    <p>たとえば、次の色はマロン (濃い赤) になります :</p>
-
-    <div style="width: 24em;">
-    <pre>
-rgb(128, 0, 0)
-</pre>
-    </div>
-
-    <p><br>
-     色指定の詳細については、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">色</a> をご覧ください。</p>
-
-    <p>メニューや ThreeDFace のようなシステム色とあわせるための情報として、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 システム色</a> があります。</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p><br>
- {{ 英語版章題("Color properties") }}</p>
-
-<h4 id=".E8.89.B2.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.BC" name=".E8.89.B2.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.BC">色のプロパティー</h4>
-
-<p><code>color</code> プロパティーをすでに利用しました。</p>
-
-<p>同様に <code>background-color</code> プロパティーを指定することで、要素の背景色を変えることができます。</p>
-
-<p>背景色には <code>transparent</code> を指定でき、明示的に親要素の背景色を透過して、明示的に上書きすることも可能です。</p>
-
-<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em;">
- <caption>Example</caption>
- <tbody>
-  <tr>
-   <td>このチュートリアルの <strong>サンプル</strong> ボックスは、このような 淡黄色を背景色にしています。
-    <div style="width: 24em;">
-    <pre>
-background-color: #fffff4;
-</pre>
-    </div>
-
-    <p><strong>より詳細は</strong> のボックスは淡灰色を使っています。</p>
-
-    <div style="width: 24em;">
-    <pre>
-background-color: #f4f4f4;
-</pre>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{ 英語版章題("Action: Using color codes") }}</p>
-
-<h3 id=".E8.A9.A6.E3.81.97.E3.81.A6.E3.81.BF.E3.81.BE.E3.81.97.E3.82.87.E3.81.86:_.E3.82.AB.E3.83.A9.E3.83.BC.E3.82.B3.E3.83.BC.E3.83.89.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B" name=".E8.A9.A6.E3.81.97.E3.81.A6.E3.81.BF.E3.81.BE.E3.81.97.E3.82.87.E3.81.86:_.E3.82.AB.E3.83.A9.E3.83.BC.E3.82.B3.E3.83.BC.E3.83.89.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B">試してみましょう: カラーコードを利用する</h3>
-
-<p>CSS ファイルを編集します。 以下で太字で書かれている変更を付け加え、最初の文字を淡青色の背景にしてください。 (ファイルのレイアウトとコメントは以下のものとは異なるとは思いますが、 好みのレイアウトやコメントの形式を利用してください。)</p>
-
-<div style="width: 32em;">
-<pre class="eval">/*** CSS Tutorial: Color page ***/
-
-/* page font */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* paragraphs */
-p {color: blue;}
-#first {font-style: italic;}
-
-/* initial letters */
-strong {
-  color: red;
-  <strong>background-color: #ddf;</strong>
-  font: 200% serif;
-  }
-
-.carrot {color: red;}
-.spinach {color: green;}
-</pre>
-</div>
-
-<p>ブラウザを再読み込みして結果を見てみましょう。</p>
-
-<table>
- <tbody>
-  <tr>
-   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>heets</td>
-  </tr>
-  <tr>
-   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>heets</td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
-
-<table style="background-color: #ffe; border: 1px solid #36b; padding: 1em; width: 100%;">
- <caption>Challenge</caption>
- <tbody>
-  <tr>
-   <td>結果を変えずに、CSS ファイルの全ての色の名前を 3 桁の数字のカラーコードにしてみましょう。
-    <p>(完全に同じに出来ないかもしれませんが、近い色にできると思います。 完全に同じにするには 6 桁のカラーコードが必要ですが、選択には CSS 仕様書を参照するか、画像ツールを利用する必要があるかもしれません。)</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p><br>
- {{ 英語版章題("What next?") }}</p>
-
-<h4 id=".E6.AC.A1.E3.81.AF_.3F" name=".E6.AC.A1.E3.81.AF_.3F">次は ?</h4>
-
-<p>あなたのサンプルは完全にスタイルと中身に分離されました。</p>
-
-<p>次のページでは、この完全分離の状態に例外を作る方法を説明します。 <strong><a href="Content">Content</a></strong></p>
diff --git a/files/ja/web/guide/css/getting_started/javascript/index.html b/files/ja/web/guide/css/getting_started/javascript/index.html
deleted file mode 100644
index fc2fa7a3b4..0000000000
--- a/files/ja/web/guide/css/getting_started/javascript/index.html
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: JavaScript and CSS
-slug: Web/Guide/CSS/Getting_started/JavaScript
-tags:
-  - CSS
-  - 'CSS:Getting_Started'
-translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
-translation_of_original: Web/Guide/CSS/Getting_started/JavaScript
----
-<div>
- {{CSSTutorialTOC}}</div>
-<p>これは <a href="/ja/docs/CSS/Getting_Started" title="https://developer.mozilla.org/ja/CSS/Getting_Started">CSS チュートリアル</a> 第2部の、第 1 章です。第 2 部には、他のウェブや Mozilla の技術とともに使われる CSS の応用例があります。</p>
-<p>第 2 部の各ページで、 CSS とその他の技術を相互作用させる方法を説明します。これらのページは、その他の技術の使い方を学べるようには作られていません。その他の技術の詳細を学ぶなら、他のチュートリアルを探してみてください。</p>
-<p>代わりに CSS の数々の用途を解説していきます。読むために CSS の知識が少し必要ですが、その他の技術について何も知っている必要はありません。</p>
-<p>前の章（第 1 部）: <a href="/ja/docs/CSS/Getting_Started/Media" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Media">メディア</a><br>
- 次の章: <a href="/ja/docs/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/ja/CSS/Getting_Started/SVG_graphics">SVG</a></p>
-<h2 id="Information:_JavaScript" name="Information:_JavaScript">JavaScriptについて</h2>
-<p>JavaScript は<em>プログラミング言語</em> です。JavaScript はウェブサイトやアプリケーションで、インタラクティブ性を作るのに広く使われています。</p>
-<p>JavaScript はスタイルシートと相互に作用でき、文書のスタイルを動的に変えるプログラムを書けます。</p>
-<p>3 つの方法があります:</p>
-<ul>
- <li>文書内のスタイルシートの一覧を扱う方法—例: スタイルシートの追加、削除、編集</li>
- <li>スタイルシート内のルールを扱う方法—例: ルールの追加、削除、編集</li>
- <li>DOM 内の 個々の要素を扱う方法—文書のスタイルシートと関係なしに、スタイルシートを編集します</li>
-</ul>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
- <caption>
-  さらに詳しく</caption>
- <tbody>
-  <tr>
-   <td>JavaScript, についてのさらに詳しい情報は、この wiki の <a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> のページをご覧ください。</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">実習: JavaScript の実演</h2>
-<p>新規 HTML 文書 <code>doc5.html</code> を作ってください。以下の内容をコピー＆ペーストしてください（スクロールしてすべてをコピーできているか確認してください）:</p>
-<div style="width: 48em;">
- <pre class="brush:html;">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-
-&lt;head&gt;
-&lt;title&gt;Mozilla CSS Getting Started - JavaScript demonstration&lt;/title&gt;
-&lt;link rel="stylesheet" type="text/css" href="style5.css" /&gt;
-&lt;script type="text/javascript" src="script5.js"&gt;&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-&lt;h1&gt;JavaScript sample&lt;/h1&gt;
-
-&lt;div id="square"&gt;&lt;/div&gt;
-
-&lt;button type="button" onclick="doDemo(this);"&gt;Click Me&lt;/button&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-<p>新規 CSS ファイル <code>style5.css</code> を作り、次の内容をコピー＆ペーストしてください:</p>
-<div style="width: 48em;">
- <pre class="brush:css;">/*** JavaScript demonstration ***/
-#square {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  margin-bottom: 1em;
-}
-
-button {
-  padding: .5em 2em;
-}
-</pre>
-</div>
-<p>新規テキストファイル <code>script5.js</code> を作り、以下の内容をコピー＆ペーストしてください:</p>
-<div style="width: 48em;">
- <pre class="brush:js;">// JavaScript demonstration
-function doDemo (button) {
-  var square = document.getElementById("square");
-  square.style.backgroundColor = "#fa4";
-  button.setAttribute("disabled", "true");
-  setTimeout(clearDemo, 2000, button);
-}
-
-function clearDemo (button) {
-  var square = document.getElementById("square");
-  square.style.backgroundColor = "transparent";
-  button.removeAttribute("disabled");
-}
-</pre>
-</div>
-<p>ブラウザで HTML 文書を開いて、ボタンを押してください。</p>
-<p>この wiki はページ内に JavaScript を含められないため、ここで実際の表示をお見せすることはできません。ボタンを押す前と押した後で、結果は次のような感じになるでしょう:</p>
-<table>
- <tbody>
-  <tr>
-   <td style="padding-right: 2em;">
-    <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
-     <tbody>
-      <tr>
-       <td>
-        <p><strong>JavaScript sample</strong></p>
-       </td>
-      </tr>
-      <tr>
-       <td> </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td>
-    <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
-     <tbody>
-      <tr>
-       <td>
-        <p><strong>JavaScript sample</strong></p>
-       </td>
-      </tr>
-      <tr>
-       <td style="background: #fa4;"> </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-  </tr>
- </tbody>
-</table>
-<div class="note">
- この実演についての<strong>重要な補足</strong>:
- <ul>
-  <li>HTML 文書からは、いつものようにスタイルシートがリンクされ、スクリプトもリンクされています</li>
-  <li>スクリプトは DOM の個々の要素を扱います。正方形のスタイルを直接編集しています。ボタンのスタイルは属性を変更することで、間接的に編集しています。</li>
-  <li>JavaScript では、<code>document.getElementById("square")</code> は CSS セレクタ <code>#square</code> と、機能的に同義です。</li>
-  <li>JavaScript では、<code>backgroundColor</code> は CSSのプロパティ <code>background-color</code> に相当します。JavaScriptでは名前にハイフンを含めることができないので、"キャメルケース" が代わりに使われます。</li>
-  <li>ブラウザ内蔵の CSS ルールには<br>
-   <code>button{{mediawiki.external('disabled=\"true\"')}}</code> に対するものがあり、ボタンが使用不可にされるとボタンの外見を変更します。</li>
- </ul>
-</div>
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
- <caption>
-  チャレンジ</caption>
- <tbody>
-  <tr>
-   <td>スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。</td>
-  </tr>
- </tbody>
-</table>
-<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Challenge_solutions#JavaScript">チャレンジの解答を見る。</a></p>
-<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2>
-<p>このページにわかりづらいところやご意見があれば <a href="/Talk:ja/CSS/Getting_Started/JavaScript" title="Talk:ja/CSS/Getting_Started/JavaScript">Discussion</a> ページに参加してください。</p>
-<p>この実演では、ボタン要素だけがスクリプトを使っているのに、HTML 文書にスクリプトがリンクされていました。Mozilla は CSS を拡張して、JavaScript コード（あるいはコンテンツや他のスタイルシート）を選択した要素にリンクできるようにしています。次のページではこの実演を行います: <strong><a href="/ja/docs/CSS/Getting_Started/XBL_bindings" title="CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p>
diff --git a/files/ja/web/guide/css/getting_started/layout/index.html b/files/ja/web/guide/css/getting_started/layout/index.html
deleted file mode 100644
index e8bd18d944..0000000000
--- a/files/ja/web/guide/css/getting_started/layout/index.html
+++ /dev/null
@@ -1,285 +0,0 @@
----
-title: Layout
-slug: Web/Guide/CSS/Getting_started/Layout
-tags:
-  - CSS
-  - 'CSS:Getting_Started'
-translation_of: Learn/CSS/CSS_layout
-translation_of_original: Web/Guide/CSS/Getting_started/Layout
----
-<div>
- {{CSSTutorialTOC}} {{previousPage("/ja/docs/CSS/Getting_Started/Boxes", "Boxes")}}</div>
-<p>これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第 12 章です。ここでは、文書のレイアウトを調整する方法をいくつか述べます。サンプル文書のレイアウトを変えてみましょう。</p>
-<h2 class="clearLeft" id="レイアウトについて">レイアウトについて</h2>
-<p>CSS を使うと、文書のレイアウトを変えるような様々な視覚効果を定義できます。レイアウト定義の手法には、上級者向けで、この基本チュートリアルの範疇を超えるようなものもあります。</p>
-<p>多くのブラウザで同じ見た目になるようレイアウトを設計すると、スタイルシートはブラウザのデフォルトのスタイルシートやレイアウトエンジンと、入り組んだ方法で相互作用します。これもまた基本チュートリアルの範疇を超えた、上級者向けの話題です。</p>
-<p>このページでは、あなたが試せるような簡単な技法をいくつか述べます。</p>
-<h3 id="Document_structure" name="Document_structure">文書の構造</h3>
-<p>文書のレイアウトを操作するなら、その構造を変える必要があるかもしれません。</p>
-<p>お使いのマークアップ言語には、構造化のための汎用タグがあるかもしれません。たとえば、HTML では構造化に {{HTMLElement("div")}} 要素を使うことができます。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>サンプル文書では、2 番目の見出しの下にある、番号づけされた段落はどれも、入れ物に入っていません。</p>
- <p>セレクタで指定する要素がないため、スタイルシートでこれらの段落の周囲に枠を描くことができません。</p>
- <p>この構造的な問題を直すために、段落の周りに {{HTMLElement("div")}} タグを一つ追加します。このタグは一意で、<code>id</code> 属性で見分けられます。</p>
- <pre class="brush:html;highlight:[2,8]">&lt;h3&gt;Numbered paragraphs&lt;/h3&gt;
-&lt;div id="numbered"&gt;
-  &lt;p&gt;Lorem ipsum&lt;/p&gt;
-  &lt;p&gt;Dolor sit&lt;/p&gt;
-  &lt;p&gt;Amet consectetuer&lt;/p&gt;
-  &lt;p&gt;Magna aliquam&lt;/p&gt;
-  &lt;p&gt;Autem veleum&lt;/p&gt;
-&lt;/div&gt;
-</pre>
- <p>これで、両方のリストの周りに枠を定義するルールをスタイルシートに追加できます。</p>
- <pre class="brush:css">ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-}
-</pre>
- <p>結果は次のようになります:</p>
- <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
-     <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;">
-      <ul style="">
-       <li>Arctic</li>
-       <li>Atlantic</li>
-       <li>Pacific</li>
-       <li>Indian</li>
-       <li>Southern</li>
-      </ul>
-     </div>
-     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-     <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
-      <p><strong>1: </strong>Lorem ipsum</p>
-      <p><strong>2: </strong>Dolor sit</p>
-      <p><strong>3: </strong>Amet consectetuer</p>
-      <p><strong>4: </strong>Magna aliquam</p>
-      <p><strong>5: </strong>Autem veleum</p>
-     </div>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<h3 id="Size_units" name="Size_units">サイズの単位（Size units）</h3>
-<p>このチュートリアルではこれまで、サイズを pixels (<code>px</code>) で定義してきました。これはコンピューターの画面のようなディスプレイデバイスでの用途にはふさわしいものです。しかし、ユーザがフォントサイズを変えると、レイアウトがおかしくなる可能性があります。</p>
-<p>多くの用途で、サイズをパーセンテージか ems (<code>em</code>) で定義するのがよいでしょう。em は通常、現在のフォントサイズを指します（文字 m の幅）。ユーザがフォントサイズを変えると、レイアウトが自動的に調整されます。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>次のテキストの左辺のボーダーは pixel 単位のサイズで定義されています。</p>
- <p>右辺のボーダーは ems 単位のサイズで定義されています。</p>
- <p>ブラウザの表示フォントサイズを変えて、右辺のボーダーが調整されることと、左辺のボーダーはされないことを確認してください:</p>
- <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <div style="">
-      僕の大きさを変えてお願い</div>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<div class="tuto_details">
- <div class="tuto_type">
-  さらに詳しく</div>
- <p>その他のデバイスには、これ以外の長さの単位が適しています。</p>
- <p>これについては、このチュートリアルの後半のページにもっと情報があります。</p>
- <p>すべての利用可能な値と単位の詳細は、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> をご覧ください。</p>
-</div>
-<h3 id="Text_layout" name="Text_layout">テキストのレイアウト</h3>
-<p>2 つのプロパティで、要素の内容がどのように文字寄せされるか定義します。これは、単純なレイアウトの調整にも使えます。</p>
-<dl>
- <dt>
-  {{cssxref("text-align")}}</dt>
- <dd>
-  文字寄せを行います。次のうちいずれかの値を使います: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd>
- <dt>
-  {{cssxref("text-indent")}}</dt>
- <dd>
-  指定した幅でインデントを行います。</dd>
-</dl>
-<p>これらのプロパティは要素内のテキストだけではなく、テキストに似たコンテンツにも適用されます。これらのルールが要素の子に継承されることを忘れないでください。結果を見て驚かないように、子要素で明示的にこれらをオフにする必要があるかもしれません。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例: 見出しを中央寄せする</div>
- <pre class="brush:css">h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-}
-</pre>
- <p>表示結果:</p>
- <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p>
-    </td>
-   </tr>
-  </tbody>
- </table>
- <p>HTML 文書では、見出しの下に見える内容は構造的には見出しに含まれていません。したがって見出しを文字寄せしても、見出しの下にあるタグにそのスタイルは継承されません。</p>
-</div>
-<h3 id="Floats" name="Floats">フロート（Floats、浮動体）</h3>
-<p>{{cssxref("float")}} プロパティは、要素を左または右に押しつけます。これは要素の位置やサイズを操作する簡単な方法です（以降、float 指定された要素のことをフローティング要素と呼びます）。</p>
-<p>文書の残りのコンテンツは通常、フローティング要素の周囲に流れ込み（flow）ます。{{cssxref("clear")}} プロパティを使うと、残りの要素をフローティング要素から離して、この流れを制御できます。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>サンプル文書では、リストはウィンドウいっぱいに広がります。これは、左側に浮動させると回避できます。</p>
- <p>見出しを定位置に留めるには、その左側にあるフローティング要素から、見出しを離れさせるような定義も必要です。</p>
- <pre class="brush:css">ul,
-#numbered { float: left; }
-h3 { clear: left; }
-</pre>
-</div>
-<p>結果は次のようになります:</p>
-<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
- <tbody>
-  <tr>
-   <td>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
-    <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
-     <ul style="">
-      <li>Arctic</li>
-      <li>Atlantic</li>
-      <li>Pacific</li>
-      <li>Indian</li>
-      <li>Southern</li>
-     </ul>
-    </div>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-    <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
-     <p><strong>1: </strong>Lorem ipsum</p>
-     <p><strong>2: </strong>Dolor sit</p>
-     <p><strong>3: </strong>Amet consectetuer</p>
-     <p><strong>4: </strong>Magna aliquam</p>
-     <p><strong>5: </strong>Autem veleum</p>
-    </div>
-   </td>
-  </tr>
- </tbody>
-</table>
-<p>（ボックスの右側でボーダーがテキストに近すぎるので、少しパディングが必要です）</p>
-<h3 id="Positioning" name="Positioning">位置取り</h3>
-<p>{{cssxref("position")}} プロパティと次の値のうちの 1 つを指定すると、要素の位置を 4 つの方法で定義できます。</p>
-<p>これは高度なプロパティです。基本チュートリアルで取り上げるのは、これが簡単に使えるためです。しかし、複雑なレイアウトに使うなら難しくなります。</p>
-<dl>
- <dt>
-  <code>relative</code></dt>
- <dd>
-  相対的。要素の位置は通常位置に比べて相対的に移動します。指定量だけ要素を動かす場合にこれを使ってください。場合によっては、要素のマージンを使って同じ効果が得られることがあります。</dd>
- <dt>
-  <code>fixed</code></dt>
- <dd>
-  固定。要素の位置は固定されます。文書のウィンドウに対する相対値で指定してください。文書の他の部分がスクロールしても、要素は固定されたままです。</dd>
- <dt>
-  <code>absolute</code></dt>
- <dd>
-  絶対的。要素は祖先要素の内、直近のポジショニング要素 (<code>position</code> プロパティの値が <code>relative</code>、<code>fixed</code> 、<code>absolute</code> の何れかの要素 ) に対する絶対位置に、もしくはポジショニング要素が無い場合はルート要素に対する絶対位置に配置されます。親要素自身に位置指定が必要無い場合には <code>position:relative</code> を用いる事により親要素自身への影響を回避できます。</dd>
- <dt>
-  <code>static</code></dt>
- <dd>
-  静止。デフォルトです。明示的に位置づけをオフにしたいときにこの値を使ってください。</dd>
-</dl>
-<p><code>position</code> プロパティ（<code>static</code> を除く）の値といっしょに、次のプロパティから一つかそれ以上を指定します: <code>top</code> 、 <code>right</code> 、 <code>bottom</code> 、 <code>left</code> 、 <code>width</code> 、 <code>height</code> これにより、要素の現れる場所やおそらくはそのサイズも指定します。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例: 複数の要素を重ねる</div>
- <p>2 つの要素を重なり合うように位置づけるには、文書に入れ物になる親要素を作り、その中に 2 つの要素を入れます:</p>
- <pre class="brush:html">&lt;div id="parent-div"&gt;
-  &lt;p id="forward"&gt;/&lt;/p&gt;
-  &lt;p id="back"&gt;\&lt;/p&gt;
-&lt;/div&gt;
-</pre>
- <p>スタイルシートで、親要素の <code>position</code> を <code>relative</code> にします。移動量を指定する必要はありません。子要素の <code>position</code> を <code>absolute</code> にします。</p>
- <pre class="brush:css">#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-}
-
-#forward, #back {
-  position: absolute;
-  margin: 0; /* 要素の周囲のマージンを 0 に */
-  top: 0; /* 上部からの距離 */
-  left: 0; /*  左部からの距離 */
-}
-
-#forward {
-  color: blue;
-}
-
-#back {
-  color: red;
-}
-</pre>
- <p>結果は、スラッシュの上にバックスラッシュが乗り、次のようになります。</p>
- <div style="position: relative; left: .33em; font: bold 300% sans-serif;">
-  <p style="position: absolute; margin: 0; top: 0; left: 0; color: blue;">/</p>
-  <p style="position: absolute; margin: 0; top: 0; left: 0; color: red;">\</p>
- </div>
- <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;">
-  <tbody>
-   <tr>
-    <td> </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<div class="tuto_details">
- <div class="tuto_type">
-  さらに詳しく</div>
- <p>位置決めに関する完全な記事は、 CSS 仕様書の複雑な 2 つの章: <a href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> と <a href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a> にあります。</p>
- <p>多くのブラウザで機能するようにスタイルシートをデザインするつもりなら、ブラウザごとの標準の解釈の仕方や、おそらくは特定ブラウザの特定バージョンのバグについても考慮する必要があります。</p>
-</div>
-<h2 id="Action.3A_Specifying_layout" name="Action.3A_Specifying_layout">実習: レイアウトの定義</h2>
-<ol>
- <li>サンプル文書 <code>doc2.html</code> と スタイルシート <code>style2.css</code> を、上の『<a href="#Document_structure" title="#Document structure"><strong>文書の構造</strong></a>』と『<a href="#Floats" title="#Floats"><strong>フロート</strong></a>』の各章にある例を使って変更してください。</li>
- <li><a href="#Floats" title="#Floats"><strong>フロート</strong></a> の例にパディングを追加し、右のボーダーからテキストを <code>0.5em</code> 離してください。</li>
-</ol>
-<div class="tuto_example">
- <div class="tuto_type">
-  チャレンジ</div>
- <p>サンプル文書 <code>doc2.html</code> を変更して、文書の末尾近く、<code>&lt;/body&gt; の直前に次のタグを追加します。</code></p>
- <pre class="brush:html">&lt;img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
-</pre>
- <p>もし初めの方のチュートリアルで画像ファイルをダウンロードしていなければ、いま行なって、他のサンプルファイルと同じディレクトリに置いてください。</p>
- <p><img height="25" src="/@api/deki/files/490/=Yellow-pin.png" style="border: 3px solid #ccc;" width="20"></p>
- <p>画像が文書内のどこに現れるか予測してみてください。ブラウザを更新して、予測が正しかったかどうかを見ます。</p>
- <p>スタイルシートにルールを追加して、文書の右上に画像が置かれるようにしてください。</p>
- <p>ブラウザを更新し、ウィンドウを小さくします。文書をスクロールしても、画像が右上に留まることを確認しましょう。</p>
- <div style="position: relative; width: 29.5em; height: 18em;">
-  <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
-   <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
-   <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
-    <ul style="">
-     <li>Arctic</li>
-     <li>Atlantic</li>
-     <li>Pacific</li>
-     <li>Indian</li>
-     <li>Southern</li>
-    </ul>
-   </div>
-   <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
-   <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
-    <p><strong>1: </strong>Lorem ipsum</p>
-    <p><strong>2: </strong>Dolor sit</p>
-    <p><strong>3: </strong>Amet consectetuer</p>
-    <p><strong>4: </strong>Magna aliquam</p>
-    <p><strong>5: </strong>Autem veleum</p>
-   </div>
-   <p style=""> </p>
-   <div style="position: absolute; top: 2px; right: 0px;">
-    <img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div>
-  </div>
- </div>
-</div>
-<p><a class="button liveSample" href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Layout" title="CSS/Getting_Started/Challenge_solutions#Layout">このチャレンジの解答を見る</a></p>
-<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2>
-<p>{{nextPage("/ja/docs/CSS/Getting_Started/Tables", "Tables")}} あなたは、この基本チュートリアルのほとんどすべてのトピックスを踏破しました。次のページでは CSS ルールのもっと高度なセレクタと、<a href="/ja/docs/CSS/Getting_Started/Tables" title="CSS/Getting_Started/Tables">テーブル</a> のスタイルづけに特有のやり方をいくつか述べます。</p>
diff --git a/files/ja/web/guide/css/getting_started/lists/index.html b/files/ja/web/guide/css/getting_started/lists/index.html
deleted file mode 100644
index 212947f4f6..0000000000
--- a/files/ja/web/guide/css/getting_started/lists/index.html
+++ /dev/null
@@ -1,246 +0,0 @@
----
-title: Lists
-slug: Web/Guide/CSS/Getting_started/Lists
-tags:
-  - CSS
-  - 'CSS:Getting_Started'
-translation_of: Learn/CSS/Styling_text/Styling_lists
-translation_of_original: Web/Guide/CSS/Getting_started/Lists
----
-<p>{{ CSSTutorialTOC() }}</p>
-<p>{{ previousPage("/ja/docs/CSS/Getting_Started/Content", "Content") }} これは <a href="/ja/CSS/Getting_Started" title="ja/CSS/Getting Started">CSS Getting Started</a> チュートリアルの第10章です。CSS を使ってリストの外見を決める方法について述べます。リストを含む新しいサンプル文書と、リストの体裁を決めるスタイルシートを作ってください。</p>
-<h2 class="clearLeft" id="リストについて">リストについて</h2>
-<p><a href="/ja/docs/CSS/Getting_Started/Content" title="/ja/docs/CSS/Getting_Started/Content">前章</a> のチャレンジでは、どの要素の直前にでも、コンテンツを追加してリスト項目のように表示する方法がわかりました。</p>
-<p>CSS にはリスト用に作られた特別なプロパティがあります。使えるときには使ったほうがたいてい便利です。</p>
-<p>リストにスタイルを定義するには、{{ cssxref("list-style") }} プロパティを使ってマーカーの種類を指定します。</p>
-<p>CSS ルールでは、セレクタにリスト項目要素を選ぶこともできますし（例：{{ HTMLElement("li") }}）、親のリスト要素を選んで、リスト要素がスタイルを継承するようにもできます（例：{{ HTMLElement ("ul") }}））。</p>
-<h3 id="箇条書きリスト（unordered_list）">箇条書きリスト（unordered list）</h3>
-<p><em>箇条書きリスト</em>では、すべてのリスト項目に同じ方法でマーカーがつきます。</p>
-<p>CSS には3種類のマーカーがあり、ブラウザは次のように表示します:</p>
-<ul style="padding-left: 2em;">
- <li style="list-style-type: disc;"><code>disc</code></li>
- <li style="list-style-type: circle;"><code>circle</code></li>
- <li style="list-style-type: square;"><code>square</code></li>
-</ul>
-<p>もしくは、画像の URL を指定できます。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>次のルールはリスト項目のクラス別に異なったマーカーを定義します:</p>
- <pre class="brush:css">li.open {list-style: circle;}
-li.closed {list-style: disc;}
-</pre>
- <p>リスト内でこれらのクラスを使うと、open と closed の項目の区別がはっきりします（例：to-doリスト):</p>
- <pre class="brush:css">&lt;ul&gt;
-  &lt;li class="open"&gt;Lorem ipsum&lt;/li&gt;
-  &lt;li class="closed"&gt;Dolor sit&lt;/li&gt;
-  &lt;li class="closed"&gt;Amet consectetuer&lt;/li&gt;
-  &lt;li class="open"&gt;Magna aliquam&lt;/li&gt;
-  &lt;li class="closed"&gt;Autem veleum&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
- <p>結果は次のようになるでしょう:</p>
- <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <ul style="padding-right: 6em;">
-      <li style="list-style-type: circle;">Lorem ipsum</li>
-      <li style="list-style-type: disc;">Dolor sit</li>
-      <li style="list-style-type: disc;">Amet consectetuer</li>
-      <li style="list-style-type: circle;">Magna aliquam</li>
-      <li style="list-style-type: disc;">Autem veleum</li>
-     </ul>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<h3 id="番号順リスト（ordered_lists）">番号順リスト（ordered lists）</h3>
-<p><em>番号順リスト</em>では、リスト項目は各々違ったマーカーをつけられ、順番を表します。</p>
-<p>マーカーの種類を定義するには {{ cssxref("list-style") }} プロパティを使ってください:</p>
-<ul style="padding-left: 2em;">
- <li style=""><code>decimal</code></li>
- <li style=""><code>lower-roman</code></li>
- <li style=""><code>upper-roman</code></li>
- <li style=""><code>lower-latin</code></li>
- <li style=""><code>upper-latin</code></li>
-</ul>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>これは <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: inherit;">info クラスの </span><span style="line-height: inherit;">{{ HTMLElement("ol") }} 要素についてのルールで、項目が大文字のアルファベット</span><span style="line-height: inherit;">で識別されます。</span></p>
- <pre class="brush:css">ol.info {list-style: upper-latin;}
-</pre>
- <p>リスト内の {{ HTMLElement("li") }} 要素はこのスタイルを継承します:</p>
- <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <ul>
-      <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li>
-      <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li>
-      <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li>
-      <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li>
-      <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li>
-     </ul>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<div class="tuto_details">
- <div class="tuto_type">
-  さらに詳しく</div>
- <p>{{ cssxref("list-style") }} は略記用のプロパティです。複雑なスタイルシートでは、値ごとに個別のプロパティを使いたくなるかもしれません。これら個別のプロパティや、CSS がリストを定義する方法については、リファレンス {{ cssxref("list-style") }} をご覧ください。</p>
- <p>箇条書きリスト ({{ HTMLElement("ul") }}) や番号リスト ({{ HTMLElement("ol") }}) の慣例的なタグを定めている HTML のようなマークアップ言語を使うなら、その意図通りにタグを使うのはよい練習になります。しかしながら、CSSでは お望みであれば {{ HTMLElement("ul") }} に番号リストを表示させたり、{{ HTMLElement("ol") }} に箇条書きリストを表示させたりもできます。</p>
- <p>リストのスタイルづけはブラウザによって実装方法が異なります。どのブラウザでも同じ結果が出るとは思わないでください。</p>
-</div>
-<h3 id="カウンター">カウンター</h3>
-<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;">
- <p><strong>注: </strong> 一部のブラウザーはカウンターをサポートしていません。<a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/">Quirks Mode site</a> の <a class="external" href="http://www.quirksmode.org/css/contents.html" style="line-height: inherit;" title="http://www.quirksmode.org/css/contents.html">CSS contents and browser compatibility</a><span style="line-height: inherit;"> ページに、カウンターや他の CSS 機能についてのブラウザの実装状況の詳しい表があります。このサイトの </span><a href="/ja/CSS_Reference" style="line-height: inherit;" title="https://developer.mozilla.org/ja/CSS_Reference">CSS Reference</a><span style="line-height: inherit;"> の各ページにもブラウザ実装状況の表があります。</span></p>
-</div>
-<p>カウンターはリスト項目だけでなく、どの要素にも番号をつけられます。例えば、ある文書では見出しや章を数えたいかもしれません。</p>
-<p>通し番号を定義するには、独自に名前をつけた <em>counter</em> が必要です。</p>
-<p>カウントが開始されるより前の要素のいずれかで、{{ cssxref("counter-reset") }} プロパティとカウンター名を使ってカウンターをリセットしてください。これは数える要素の親で行うのが適していますが、リスト項目より前に現れる要素ならどれでも使えます。</p>
-<p>番号が増える要素の各々に {{ cssxref("counter-increment") }} プロパティとカウンター名を使ってください。</p>
-<p>カウンターを表示するには、セレクタに {{ cssxref(":before") }} または {{ cssxref(":after") }} を追加し、<code>content</code> プロパティを使います（前のページ <strong><a href="/ja/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">コンテンツ</a></strong> で行った要領です）。</p>
-<p><code>content</code> プロパティの値として、<code>counter()</code> とカウンター名を記述します。オプションとして種類を記述します。種類は上の <strong>番号順リスト</strong> の欄にあるものと同じです。</p>
-<p>通常、カウンターを表示する要素もまたカウンターを増やします。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>次のルールは <code>numbered</code> クラスを持つ <span style="line-height: inherit;">{{ HTMLElement("h3") }} 要素が現れるたびにカウンターを初期化します:</span></p>
- <pre class="brush:css">h3.numbered {counter-reset: mynum;}
-</pre>
- <p> </p>
- <p>次のルールは<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">numbered クラスを持つ </code><span style="line-height: inherit;">{{ HTMLELement("p") }} 要素が現れるたびにカウンターを表示し、番号を増やします:</span></p>
- <pre class="brush:css">p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-</pre>
- <p>結果は次のようになります:</p>
- <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td><strong>Heading</strong><br>
-     <p><strong>1: </strong>Lorem ipsum</p>
-     <p><strong>2: </strong>Dolor sit</p>
-     <p><strong>3: </strong>Amet consectetuer</p>
-     <p><strong>4: </strong>Magna aliquam</p>
-     <p><strong>5: </strong>Autem veleum</p>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<div class="tuto_details">
- <div class="tuto_type">
-  さらに詳しく</div>
- <p>読者がみな、カウンターをサポートするブラウザを使っているとわからなければ、カウンターは使えません。</p>
- <p>カウンターを使えると、リストの項目と切り離してカウンターにスタイルをつけられる利点があります。上の例では、カウンターは太字ですがリスト項目は違います。</p>
- <p>もっと複雑な方法でカウンターを使えます — 例えば、様式に沿う文書の章、見出し、サブ見出し、段落を数えます。詳しくは、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> をご覧ください。</p>
-</div>
-<h2 id="実習_スタイルづけされたリスト">実習: スタイルづけされたリスト</h2>
-<p>新しいHTML文書、<code>doc2.html</code> を作成してください。次の内容をコピー＆ペーストします:</p>
-<pre class="brush:html;">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="UTF-8"&gt;
-    &lt;title&gt;Sample document 2&lt;/title&gt;
-    &lt;link rel="stylesheet" href="style2.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-
-    &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
-    &lt;ul&gt;
-      &lt;li&gt;Arctic&lt;/li&gt;
-      &lt;li&gt;Atlantic&lt;/li&gt;
-      &lt;li&gt;Pacific&lt;/li&gt;
-      &lt;li&gt;Indian&lt;/li&gt;
-      &lt;li&gt;Southern&lt;/li&gt;
-    &lt;/ul&gt;
-
-    &lt;h3 class="numbered"&gt;Numbered paragraphs&lt;/h3&gt;
-    &lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
-    &lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
-    &lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
-    &lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
-    &lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
-
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-<p>新しいスタイルシート、<code>style2.css を作成してください。次の内容をコピー＆ペーストします</code>:</p>
-<pre class="brush:css;">/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}
-</pre>
-<p>レイアウトやコメントが気に入らなければ変えてください。</p>
-<p>ブラウザで文書を開きます。カウンター対応のブラウザなら下の例に似たものが見えるでしょう。非対応のブラウザなら、数字が見えません（おそらくコロンも）:</p>
-<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
- <tbody>
-  <tr>
-   <td>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
-    <ul style="">
-     <li>Arctic</li>
-     <li>Atlantic</li>
-     <li>Pacific</li>
-     <li>Indian</li>
-     <li>Southern</li>
-    </ul>
-    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p>
-    <p><strong>1: </strong>Lorem ipsum</p>
-    <p><strong>2: </strong>Dolor sit</p>
-    <p><strong>3: </strong>Amet consectetuer</p>
-    <p><strong>4: </strong>Magna aliquam</p>
-    <p><strong>5: </strong>Autem veleum</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-<div class="tuto_example">
- <div class="tuto_type">
-  チャレンジ</div>
- <p>スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください:</p>
- <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
-     <ul style="">
-      <li>Arctic</li>
-      <li>Atlantic</li>
-      <li>Pacific</li>
-      <li>Indian</li>
-      <li>Southern</li>
-     </ul>
-    </td>
-   </tr>
-  </tbody>
- </table>
- <p> </p>
- <p>次のように、見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください:</p>
- <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p>
-     <p><strong>. . .</strong></p>
-     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p>
-     <p><strong>. . .</strong></p>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<p><a href="/ja/CSS/Getting_Started/Challenge_solutions#Lists" title="en/CSS/Getting started/Challenge solutions#Lists">チャレンジの解答を見る。</a></p>
-<h2 id="さて次は？">さて次は？</h2>
-<p>{{ nextPage("/ja/docs/CSS/Getting_Started/Boxes", "ボックス") }} 文書を表示するとき、ブラウザは要素をページ上に並べる際に、要素を囲むようにスペースを作ります。次のページでは、要素の基礎となる形である <a href="/ja/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">ボックス（boxes）</a>を CSS で扱う方法について述べます。</p>
diff --git a/files/ja/web/guide/css/getting_started/tables/index.html b/files/ja/web/guide/css/getting_started/tables/index.html
deleted file mode 100644
index 1f0905d1ec..0000000000
--- a/files/ja/web/guide/css/getting_started/tables/index.html
+++ /dev/null
@@ -1,478 +0,0 @@
----
-title: Tables
-slug: Web/Guide/CSS/Getting_started/Tables
-tags:
-  - CSS
-  - 'CSS:Getting_Started'
-translation_of: Learn/CSS/Building_blocks/Styling_tables
-translation_of_original: Web/Guide/CSS/Getting_started/Tables
----
-<div>
- {{CSSTutorialTOC}}{{previousPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}</div>
-<p>これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第 13 章です。ここではさらに高度なセレクタと、テーブルのスタイルづけに特有の方法を述べます。テーブルを含む新しいサンプル文書と、スタイルシートを作ってください。</p>
-<h2 class="clearLeft" id="Information.3A_Tables" name="Information.3A_Tables">表（テーブル）について</h2>
-<p>テーブルは、縦軸 / 横軸のデータ構造を持つ情報の並びです。テーブルは複雑になることがあり、複雑なテーブルはブラウザによって違った表示になる場合があります。</p>
-<p>文書を設計する際には、テーブルを細かな情報同士の <a href="/ja/docs/CSS/Getting_Started/Selectors#relselectors" title="CSS/Getting_Started/Selectors#relselectors">関係性</a> を示すのに使ってください。そうすれば、ブラウザによって少し違った表示がされても問題ありません。目的が依然はっきりしているためです。</p>
-<p>精密な視覚的レイアウトを作るために、テーブルの変わった使い方をしないでください。そういった目的には、このチュートリアルの前のページにある技法（<strong><a href="/ja/docs/CSS/Getting_Started/Layout" title="CSS/Getting_Started/Layout">レイアウト</a></strong>）のほうが適しています。</p>
-<h3 id="Table_structure" name="Table_structure">テーブルの構造</h3>
-<p>テーブルでは、情報の一つ一つが <em>セル（cell）</em> に入れて表示されます。</p>
-<p>ページを横切るように並ぶセルが、 行（<em>row</em>）を作ります。</p>
-<p>テーブルによっては、行はグループ化されているかもしれません。テーブルの初めにある特殊な行グループが、<em>ヘッダー（header）</em>です。テーブルの終わりにある特殊な行グループが、<em>フッター（footer）</em>です。テーブルの中心的な行が <em>ボディ（body）</em>で、これも、グループに入っているかもしれません。</p>
-<p>ページ下方に向けて並ぶセルは<em>列（column）</em>を作りますが、CSS のテーブルでは、列の用途には制限があります。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p><a href="/ja/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors">Selectors</a> ページの <a href="/ja/docs/CSS/Getting_Started/Selectors#relselectors" title="CSS/Getting_Started/Selectors#relselectors">Selectors based on relationships</a> の表には、行が 5 つ、セルが 10 個あります。</p>
- <p>最初の行はヘッダーです。残りの 4 つの行はボディです。フッターはありません。</p>
- <p>列は 2 つあります。</p>
-</div>
-<p>このチュートリアルでは結果が予測できるような、簡単なテーブルしか扱いません。簡単なテーブルでは、各セルがどれも 1 つの行と 1 つの列を占めます。セルが 1 行や 1 列以上に <em>伸びた（span）</em>複雑なテーブルにも CSS を使えますが、そういったテーブルはこの基本チュートリアルの範疇を超えています。</p>
-<h3 id="Borders" name="Borders">ボーダー</h3>
-<p>セルにはマージンがありません。</p>
-<p>セルにはボーダーとパディングがあります。デフォルトでは、ボーダーはテーブルの {{cssxref("border-spacing")}} プロパティで決められます。テーブルの {{cssxref("border-collapse")}} プロパティを <code>collapse</code> にすると、間隔を完全に取り除くことができます。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>テーブルが 3 つあります。</p>
- <p>左のテーブルには 0.5em 幅のボーダーがあります。中央のテーブルには幅ゼロのボーダーがあります。右のテーブルには 折り畳まれた（collapsed）ボーダーがあります:<br>
-  （表示例は、この wiki の制限により、正しく表示されていないかもしれません）</p>
- <table style="border: 2px outset #36b ; padding: 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td style="padding-right: 2em;">
-     <table style="border-collapse: separate;">
-      <tbody>
-       <tr>
-        <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
-        <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
-       </tr>
-       <tr>
-        <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
-        <td style="border: 1px solid #c00; text-align: center;">Spades</td>
-       </tr>
-      </tbody>
-     </table>
-    </td>
-    <td style="padding-right: 2em;">
-     <table style="border-collapse: separate;">
-      <tbody>
-       <tr>
-        <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
-        <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
-       </tr>
-       <tr>
-        <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
-        <td style="border: 1px solid #c00; text-align: center;">Spades</td>
-       </tr>
-      </tbody>
-     </table>
-    </td>
-    <td style="padding-right: 6em;">
-     <table style="border-collapse: collapse;">
-      <tbody>
-       <tr>
-        <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
-        <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
-       </tr>
-       <tr>
-        <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
-        <td style="border: 1px solid #c00; text-align: center;">Spades</td>
-       </tr>
-      </tbody>
-     </table>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<h3 id="Captions" name="Captions">キャプション</h3>
-<p>{{HTMLElement("caption")}} 要素はテーブル全体に当てられるラベルです。デフォルトでは、テーブルの一番上に表示されます。</p>
-<p>底部に移動させるには、{{cssxref("caption-side")}} プロパティを <code>bottom</code> にします。プロパティは継承されるので、テーブルに設定することも、祖先要素に設定することもできます。</p>
-<p>キャプションの文字にスタイルをつけるには、通常のテキスト用のプロパティを使ってください。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>このテーブルは底部にキャプションがあります</p>
- <p>（表示例は、この wiki の制限により、正しく表示されていないかもしれません）</p>
- <pre class="brush: css">#demo-table &gt; caption {
-  caption-side: bottom;
-  font-style: italic;
-  text-align: right;
-}
-</pre>
- <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <table>
-      <caption>
-       Suits</caption>
-      <tbody>
-       <tr>
-        <td>
-         <table style="border-collapse: collapse;">
-          <tbody>
-           <tr>
-            <td style="border: 1px solid gray; text-align: center;">Clubs</td>
-            <td style="border: 1px solid gray; text-align: center;">Hearts</td>
-           </tr>
-           <tr>
-            <td style="border: 1px solid gray; text-align: center;">Diamonds</td>
-            <td style="border: 1px solid gray; text-align: center;">Spades</td>
-           </tr>
-          </tbody>
-         </table>
-        </td>
-       </tr>
-      </tbody>
-     </table>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<h3 id="Empty_cells" name="Empty_cells">空のセル</h3>
-<p>テーブル要素に {{cssxref("empty-cells")}}: show; と定義すると、空のセル（これはつまりセルのボーダーと背景です）を表示できます。</p>
-<p>隠すには <code>empty-cells: hide;</code> と定義します。こうすると、セルの親要素に背景があるとき、空のセル越しに見ることができます。</p>
-<div class="tuto_example">
- <div class="tuto_type">
-  例</div>
- <p>次のテーブルは薄い緑の背景を持っています。各セルは薄い灰色の背景と濃い灰色のボーダーを持っています。</p>
- <p>左のテーブルでは、空セルが見えています。右のテーブルでは隠されています:</p>
- <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td style="padding-right: 2em;">
-     <table style="border-collapse: separate; background-color: #dfd;">
-      <tbody>
-       <tr>
-        <td style="border: 1px solid #555; background-color: #eee;"> </td>
-        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
-       </tr>
-       <tr>
-        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
-        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
-       </tr>
-      </tbody>
-     </table>
-    </td>
-    <td style="padding-right: 6em;">
-     <table style="border-collapse: separate; background-color: #dfd;">
-      <tbody>
-       <tr>
-        <td> </td>
-        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
-       </tr>
-       <tr>
-        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
-        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
-       </tr>
-      </tbody>
-     </table>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<div class="tuto_details">
- <div class="tuto_type">
-  詳細</div>
- <p>テーブルについての詳しい情報は、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> をご覧ください。</p>
- <p>そこにある情報はこのチュートリアルを超えたものになりますが、そこでは、複雑なテーブルに影響する、ブラウザ間の相違については触れていません。</p>
-</div>
-<h2 id="Action.3A_Styling_a_table" name="Action.3A_Styling_a_table">実習: テーブルのスタイルづけ</h2>
-<ol>
- <li>新しい HTML 文書 <code>doc3.html</code> を作ってください。次の内容をコピー＆ペーストしてください。スクロールさせて、コピー漏れがないか確認してください:
-  <div style="height: 36em; overflow: auto;">
-   <pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;title&gt;Sample document 3&lt;/title&gt;
-    &lt;link rel="stylesheet" href="style3.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;table id="demo-table"&gt;
-      &lt;caption&gt;Oceans&lt;/caption&gt;
-      &lt;thead&gt;
-        &lt;tr&gt;
-          &lt;th&gt;&lt;/th&gt;
-          &lt;th&gt;Area&lt;/th&gt;
-          &lt;th&gt;Mean depth&lt;/th&gt;
-        &lt;/tr&gt;
-        &lt;tr&gt;
-          &lt;th&gt;&lt;/th&gt;
-          &lt;th&gt;million km&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
-          &lt;th&gt;m&lt;/th&gt;
-        &lt;/tr&gt;
-      &lt;/thead&gt;
-      &lt;tbody&gt;
-        &lt;tr&gt;
-          &lt;th&gt;Arctic&lt;/th&gt;
-          &lt;td&gt;13,000&lt;/td&gt;
-          &lt;td&gt;1,200&lt;/td&gt;
-        &lt;/tr&gt;
-        &lt;tr&gt;
-          &lt;th&gt;Atlantic&lt;/th&gt;
-          &lt;td&gt;87,000&lt;/td&gt;
-          &lt;td&gt;3,900&lt;/td&gt;
-        &lt;/tr&gt;
-        &lt;tr&gt;
-          &lt;th&gt;Pacific&lt;/th&gt;
-          &lt;td&gt;180,000&lt;/td&gt;
-          &lt;td&gt;4,000&lt;/td&gt;
-        &lt;/tr&gt;
-        &lt;tr&gt;
-          &lt;th&gt;Indian&lt;/th&gt;
-          &lt;td&gt;75,000&lt;/td&gt;
-          &lt;td&gt;3,900&lt;/td&gt;
-        &lt;/tr&gt;
-        &lt;tr&gt;
-          &lt;th&gt;Southern&lt;/th&gt;
-          &lt;td&gt;20,000&lt;/td&gt;
-          &lt;td&gt;4,500&lt;/td&gt;
-        &lt;/tr&gt;
-      &lt;/tbody&gt;
-      &lt;tfoot&gt;
-        &lt;tr&gt;
-          &lt;th&gt;Total&lt;/th&gt;
-          &lt;td&gt;361,000&lt;/td&gt;
-          &lt;td&gt;&lt;/td&gt;
-        &lt;/tr&gt;
-        &lt;tr&gt;
-          &lt;th&gt;Mean&lt;/th&gt;
-          &lt;td&gt;72,000&lt;/td&gt;
-          &lt;td&gt;3,800&lt;/td&gt;
-        &lt;/tr&gt;
-      &lt;/tfoot&gt;
-    &lt;/table&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-  </div>
- </li>
- <li>新しいスタイルシート <code>style3.css</code> を作ります。次の内容をコピー＆ペーストしてください。スクロールして、コピー漏れがないことを確認します:
-  <pre class="brush: css">/*** Style for doc3.html (Tables) ***/
-
-#demo-table {
-  font: 100% sans-serif;
-  background-color: #efe;
-  border-collapse: collapse;
-  empty-cells: show;
-  border: 1px solid #7a7;
-}
-
-#demo-table &gt; caption {
-  text-align: left;
-  font-weight: bold;
-  font-size: 200%;
-  border-bottom: .2em solid #4ca;
-  margin-bottom: .5em;
-}
-
-
-/* basic shared rules */
-#demo-table th,
-#demo-table td {
-  text-align: right;
-  padding-right: .5em;
-}
-
-#demo-table th {
-  font-weight: bold;
-  padding-left: .5em;
-}
-
-
-/* header */
-#demo-table &gt; thead &gt; tr:first-child &gt; th {
-  text-align: center;
-  color: blue;
-}
-
-#demo-table &gt; thead &gt; tr + tr &gt; th {
-  font-style: italic;
-  color: gray;
-}
-
-/* fix size of superscript */
-#demo-table sup {
-  font-size: 75%;
-}
-
-/* body */
-#demo-table td {
-  background-color: #cef;
-  padding:.5em .5em .5em 3em;
-}
-
-#demo-table tbody th:after {
-  content: ":";
-}
-
-
-/* footer */
-#demo-table tfoot {
-  font-weight: bold;
-}
-
-#demo-table tfoot th {
-  color: blue;
-}
-
-#demo-table tfoot th:after {
-  content: ":";
-}
-
-#demo-table &gt; tfoot td {
-  background-color: #cee;
-}
-
-#demo-table &gt; tfoot &gt; tr:first-child td {
-  border-top: .2em solid #7a7;
-}
-</pre>
- </li>
- <li>文書をブラウザで開きます。次の内容に似たものになるでしょう:
-  <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
-   <tbody>
-    <tr>
-     <td>
-      <div>
-       <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p>
-       <div style="border: 1px solid #7a7; background-color: #efe;">
-        <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
-         <tbody>
-          <tr style="text-align: center; color: blue;">
-           <th> </th>
-           <th>Area</th>
-           <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
-          </tr>
-          <tr style="font-style: italic; color: gray;">
-           <th> </th>
-           <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
-           <th style="padding-left: .5em; padding-right: .5em;">m</th>
-          </tr>
-          <tr>
-           <th style="padding-right: .5em;">Arctic:</th>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
-          </tr>
-          <tr>
-           <th style="padding-right: .5em;">Atlantic:</th>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
-          </tr>
-          <tr>
-           <th style="padding-right: .5em;">Pacific:</th>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
-          </tr>
-          <tr>
-           <th style="padding-right: .5em;">Indian:</th>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
-          </tr>
-          <tr>
-           <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
-           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
-          </tr>
-          <tr>
-           <th style="padding-right: .5em; color: blue;">Total:</th>
-           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
-           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
-          </tr>
-          <tr>
-           <th style="padding-right: .5em; color: blue;">Mean:</th>
-           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
-           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
-          </tr>
-         </tbody>
-        </table>
-       </div>
-      </div>
-     </td>
-    </tr>
-   </tbody>
-  </table>
- </li>
- <li>表示されたテーブルとスタイルシートにあるルールを比較して、各行の働きを理解できているか確かめてください。自信のないルールを見つけたら、そのルールをコメントアウトしてブラウザを更新し、何が起きるか見てみましょう。このテーブルに関する注意点は次のとおりです:
-  <ul>
-   <li>キャプションはテーブルのボーダーより外側に置かれています。</li>
-   <li>もしオプションでフォントの最小値を設定していれば、 km<sup>2</sup> の上付き文字に影響します。</li>
-   <li>空セルが 3 つあります。そのうち2つは、テーブルの背景を透過しています。 3 つ目は背景と上辺にボーダーを持ちます。</li>
-   <li>コロンはスタイルシートで追加しています。</li>
-  </ul>
- </li>
-</ol>
-<div class="tuto_example">
- <div class="tuto_type">
-  チャレンジ</div>
- <p>スタイルシートを、テーブルが次のようになるように変えてください:</p>
- <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
-  <tbody>
-   <tr>
-    <td>
-     <div>
-      <div style="border: 1px solid #7a7; background-color: #efe;">
-       <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
-        <tbody>
-         <tr style="text-align: center; color: blue;">
-          <th> </th>
-          <th>Area</th>
-          <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
-         </tr>
-         <tr style="font-style: italic; color: gray;">
-          <th> </th>
-          <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
-          <th style="padding-left: .5em; padding-right: .5em;">m</th>
-         </tr>
-         <tr>
-          <th style="padding-right: .5em;">Arctic:</th>
-          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td>
-          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td>
-         </tr>
-         <tr>
-          <th style="padding-right: .5em;">Atlantic:</th>
-          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td>
-          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
-         </tr>
-         <tr>
-          <th style="padding-right: .5em;">Pacific:</th>
-          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td>
-          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td>
-         </tr>
-         <tr>
-          <th style="padding-right: .5em;">Indian:</th>
-          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td>
-          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
-         </tr>
-         <tr>
-          <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
-          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td>
-          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td>
-         </tr>
-         <tr>
-          <th style="padding-right: .5em; color: blue;">Total:</th>
-          <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
-          <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
-         </tr>
-         <tr>
-          <th style="padding-right: .5em; color: blue;">Mean:</th>
-          <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
-          <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
-         </tr>
-        </tbody>
-       </table>
-      </div>
-      <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p>
-     </div>
-    </td>
-   </tr>
-  </tbody>
- </table>
-</div>
-<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Tables" title="CSS/Getting started/Challenge solutions#Tables">チャレンジの解答を見る。</a></p>
-<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2>
-<p>{{nextPage("/ja/docs/CSS/Getting_Started/Media", "Media")}} このページは、CSS のプロパティと値に主眼を置いたチュートリアルの最後のページです。プロパティと値についてのすべての概要については、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> をご覧ください。</p>
-<p>次のページでは、CSS スタイルシートの目的と構造を<a href="/ja/docs/CSS/Getting_Started/Media" title="CSS/Getting_Started/Media">もう一度見ていきます</a>。</p>
diff --git a/files/ja/web/guide/css/media_queries/index.html b/files/ja/web/guide/css/media_queries/index.html
deleted file mode 100644
index 961536b070..0000000000
--- a/files/ja/web/guide/css/media_queries/index.html
+++ /dev/null
@@ -1,412 +0,0 @@
----
-title: メディアクエリ
-slug: Web/Guide/CSS/Media_queries
-tags:
-  - CSS
-  - CSS Reference
----
-<p>{{ gecko_minversion_header("1.9.1") }}</p>
-
-<p>CSS 3 ではメディア依存のスタイルシートのサポートが強化され、よりメディアの特性に適したスタイルシートを適用できます。メディアクエリは、メディアタイプと、メディア特性を利用してスタイルシートの適用条件を決定 (limits the style sheets' scope) する一つ以上の式からなります。メディア特性には、メディアの幅と高さ、色数などがあります。メディアクエリにより、コンテンツそのものを変更せずに、出力デバイスに合わせてコンテンツを表現することができます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p>メディアクエリは、<a class="internal" href="/ja/CSS/@media" title="ja/CSS/@media">メディアタイプ</a>と、メディア特性を必要とする一つ以上の式からなります。この式の結果は、true または false になります。クエリの結果は、ドキュメントが表示されるデバイスの種類がメディアクエリで指定されたメディアタイプにマッチし、<strong>さらに</strong>メディアクエリのすべての式が true のとき、true になります。</p>
-
-<h3 id="Logical operators" name="Logical operators">論理演算子</h3>
-
-<p>論理演算子を使用して複雑なメディアクエリを記述できます。論理演算子には、<code>not</code> および <code>and</code>, <code>only</code> があります。</p>
-
-<p>また、複数のメディアクエリをカンマ区切りのリスト形式で併記することもできます。リスト内のいずれかのメディアクエリが true であれば、関連付けられたスタイルシートが適用されます。これは論理演算子の "or" と等価です。</p>
-
-<p><code>not</code> キーワードは、クエリの結果を否定します。例えば、"<span style="font-family: monospace;">all</span><code> and (not color)</code>" のクエリは、モノクロデバイスではメディアタイプに関係なく true になります。</p>
-
-<p><code>only</code> キーワードは、メディアクエリに対応していない古いブラウザからスタイルシートを隠します:</p>
-
-<pre>&lt;link rel="stylesheet" media="only screen and (color)" href="example.css" /&gt;
-</pre>
-
-<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)" name="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">擬似 BNF (この表記を好む方のために)</h3>
-
-<pre>media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
-media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
-  | &lt;expression&gt; [ and &lt;expression&gt; ]*
-expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
-media_type: all | aural | braille | handheld | print |
-  projection | screen | tty | tv | embossed
-media_feature: width | min-width | max-width
-  | height | min-height | max-height
-  | device-width | min-device-width | max-device-width
-  | device-height | min-device-height | max-device-height
-  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
-  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
-  | color | min-color | max-color
-  | color-index | min-color-index | max-color-index
-  | monochrome | min-monochrome | max-monochrome
-  | resolution | min-resolution | max-resolution
-  | scan | grid</pre>
-
-<p>メディアクエリは大文字と小文字を区別しません。メディアクエリに書かれた未知のメディアタイプは常に false になります。</p>
-
-<div class="note"><strong>注記:</strong> 式 (expression) の前後には括弧が必要です。括弧を書かないとエラーになります。</div>
-
-<h2 id="Media features" name="Media features">メディア特性</h2>
-
-<p>ほとんどのメディア特性には、特性が式の値 "以上" または "以下" であることを明示的に制約する "min-" または "max-" 前置詞を付けられます。これは、HTML や XML に干渉する "&lt;" および "&gt;" 記号の使用を避けるためのものです。値を指定せずにメディア特性を使用した場合、特性の値が 0 でなくても、式の結果は true になります。</p>
-
-<div class="note"><strong>注記:</strong> メディア特性がブラウザを実行中のデバイスに適用されない場合、メディア特性に記述された式の値は常に false になります。例えば、音声デバイスに対するアスペクト比の問い合わせは常に false になります。</div>
-
-<h3 id="color">color</h3>
-
-<p><strong>値:</strong> {{cssxref("&lt;color&gt;")}}<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 可</p>
-
-<p>出力デバイスのカラーコンポーネントあたりのビット数を指示します。デバイスがカラー表示可能なものでない場合、この値は 0 になります。</p>
-
-<div class="note"><strong>注記:</strong> カラーコンポーネントがカラーコンポーネントごとに異なるビット数を持つ場合、最も小さな数値が使用されます。例えば、ディスプレイが、青は 5 ビット、赤と緑は 6 ビットのカラーコンポーネントで構成されている場合、デバイスはカラーコンポーネントあたり 5 ビット使用するものとみなされ、color テーブルではビット数の最小値が使用されます。</div>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<p>すべてのカラー表示可能なデバイスにスタイルシートを適用するには:</p>
-
-<pre>@media all and (color) { ... }
-</pre>
-
-<p>カラーコンポーネントあたり最低 4 ビットのデバイスにスタイルシートを適用するには:</p>
-
-<pre>@media all and (min-color: 4) { ... }
-</pre>
-
-<h3 id="color-index">color-index</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 可</p>
-
-<p>出力デバイスのカラー検索テーブルのエントリ数を指示します。</p>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<p>インデックス化されたカラーを使用するすべてのデバイスにスタイルシートを適用するよう指示するには:</p>
-
-<pre>@media all and (color-index) { ... }
-</pre>
-
-<p>最低 256 色を持つインデックス化されたカラーデバイスにスタイルシートを適用するには:</p>
-
-<pre>&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /&gt;
-</pre>
-
-<h3 id="aspect-ratio">aspect-ratio</h3>
-
-<p><strong>値:</strong> 整数 / 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br>
- <strong>min/max 前置詞の使用:</strong> 可</p>
-
-<p>出力デバイスの対象とする表示領域のアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。</p>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<p>以下は、表示領域が、その高さよりも幅が広い場合に使用される、特別なスタイルシートを選択します。</p>
-
-<pre>@media screen and (min-aspect-ratio: 1/1) { ... }</pre>
-
-<p>これは、アスペクト比が 1:1 以上の場合のスタイルを選択します。</p>
-
-<h3 id="device-aspect-ratio">device-aspect-ratio</h3>
-
-<p><strong>値:</strong> 整数 / 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br>
- <strong>min/max 前置詞の使用:</strong> 可</p>
-
-<p>出力デバイスのアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。</p>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<p>以下は、ワイドスクリーンディスプレイに使用する特別なスタイルシートを選択します。</p>
-
-<pre>@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>
-
-<p>これは、アスペクト比が 16:9 または 16:10 の場合のスタイルを選択します。</p>
-
-<h3 id="device-height">device-height</h3>
-
-<p><strong>値:</strong> {{cssxref("&lt;length&gt;")}}<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br>
- <strong>min/max 前置詞の使用:</strong> 可</p>
-
-<p>出力デバイスの高さを記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。</p>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<p>幅 800 ピクセル未満のスクリーンに表示されるドキュメントにスタイルシートを適用するには:</p>
-
-<pre>&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" /&gt;
-</pre>
-
-<h3 id="device-width">device-width</h3>
-
-<p><strong>値:</strong> {{cssxref("&lt;length&gt;")}}<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br>
- <strong>min/max 前置詞の使用:</strong> 可</p>
-
-<p>出力デバイスの幅を記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。</p>
-
-<h3 id="grid">grid</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> all<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>出力デバイスがグリッドデバイスとビットマップデバイスのどちらなのかを決定します。デバイスがグリッドベース (tty ターミナルや電話機のディスプレイなど表示部が一行ずつ) の場合、値は 1 になります。ビットマップデバイスの場合は 0 になります。</p>
-
-<div class="note"><strong>注記:</strong> Gecko (および Firefox) は現在グリッドデバイスに対応していないため、このメディア特性はサポートされていません。</div>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<p>ディスプレイの表示幅が 15 文字以下の handheld デバイスにスタイルを適用するには:</p>
-
-<pre>@media handheld and (grid) and (max-width: 15em) { ... }
-</pre>
-
-<div class="note"><strong>注記:</strong> "em" 単位はグリッドデバイスで特別な意味を持ちます。"em" 単位の正確な幅を特定することができないため、1em はグリッドセル一つ分の幅と高さであると仮定されます。</div>
-
-<h3 id="height">height</h3>
-
-<p><strong>値:</strong> {{cssxref("&lt;length&gt;")}}<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br>
- <strong>min/max 前置詞の使用:</strong> 可</p>
-
-<p><code>height</code> メディア特性には、出力デバイスの描画域の高さを記述します (viewport の高さやプリンタのページ印刷領域の高さなど)。</p>
-
-<div class="note"><strong>注記:</strong> ユーザがウィンドウの大きさを変更すると、<code>width</code> や <code>height</code> メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。</div>
-
-<h3 id="monochrome">monochrome</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 可</p>
-
-<p>モノクロ (グレースケール) デバイス上のピクセルあたりのビット数を指示します。デバイスがモノクローム表示でない場合、デバイスの値は 0 になります。</p>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<p>すべてのモノクロデバイスにスタイルシートを適用するには:</p>
-
-<pre>@media all and (monochrome) { ... }
-</pre>
-
-<p>ピクセルあたり最低 8 ビットのモノクロデバイスにスタイルシートを適用するには:</p>
-
-<pre>@media all and (min-monochrome: 8) { ... }
-</pre>
-
-<h3 id="orientation">orientation</h3>
-
-<p><strong>値:</strong> <code>landscape</code> | <code>portrait</code><br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>デバイスが横置き (landscape: 高さより幅が広い表示) と縦置き (portrait: 幅より高さが高い表示) のどちらのモードなのかを指示します。</p>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<p>縦置き方向のときにだけスタイルシートを適用するには:</p>
-
-<pre>@media all and (orientation: portrait) { ... }</pre>
-
-<h3 id="resolution">resolution</h3>
-
-<p><strong>値:</strong> {{cssxref("&lt;resolution&gt;")}}<br>
- <strong>メディア:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br>
- <strong>min/max 前置詞の使用:</strong> 可</p>
-
-<p>出力デバイスの解像度 (ピクセル密度) を指示します。解像度は、1 インチあたりのドット数 (dpi) または 1 センチメートルあたりのドット数 (dpcm) で指定されます。</p>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<p>解像度が最低 300 dpi のデバイスにスタイルシートを適用するには:</p>
-
-<pre>@media print and (min-resolution: 300dpi) { ... }
-</pre>
-
-<h3 id="scan">scan</h3>
-
-<p><strong>値:</strong> <code>progressive</code> | <code>interlace</code><br>
- <strong>メディア:</strong> {{cssxref("Media/TV", "tv")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>テレビ出力デバイスの走査方式を記述します。</p>
-
-<div class="note"><strong>注記:</strong> Gecko (および Firefox) は現在 <code>tv</code> メディアタイプをサポートしていないため、このメディア特性も同様にサポートされていません。</div>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<p>プログレッシブ方式で走査するテレビにだけスタイルシートを適用するには:</p>
-
-<pre>@media tv and (scan: progressive) { ... }
-</pre>
-
-<h3 id="width">width</h3>
-
-<p><strong>値:</strong> {{cssxref("&lt;length&gt;")}}<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br>
- <strong>min/max 前置詞の使用:</strong> 可</p>
-
-<p><code>width</code> メディア特性には、出力デバイスの描画域の幅を記述します (viewport の幅やプリンタのページ印刷領域の幅など)。</p>
-
-<div class="note"><strong>注記:</strong> ユーザがウィンドウの大きさを変更すると、<code>width</code> や <code>height</code> メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。</div>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<p>幅 20 em 以上の handheld デバイスまたは screen デバイスにスタイルシートを指定したいときは:</p>
-
-<pre>@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
-</pre>
-
-<p>次のメディアクエリは、印刷された幅が 8.5 インチ以上のメディアに適用されるスタイルシートを指定します:</p>
-
-<pre>&lt;link rel="stylesheet" media="print and (min-width: 8.5in)"
-    href="http://foo.com/mystyle.css" /&gt;
-</pre>
-
-<p>次のメディアクエリは、viewport の幅が 500 ピクセルから 800 ピクセルの場合に使用されるスタイルシートを指定します:</p>
-
-<pre>@media screen and (min-width: 500px) and (max-width: 800px) { ... }
-</pre>
-
-<h2 id="Mozilla-specific media features" name="Mozilla-specific media features">Mozilla 独自のメディア特性</h2>
-
-<p>{{ gecko_minversion_header("1.9.2") }}</p>
-
-<p>Mozilla はいくつかの Gecko 独自のメディア特性を提供しています。これらの一部は公式のメディア特性として提案される予定です。</p>
-
-<h3 id="-moz-images-in-menus">-moz-images-in-menus</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>メニューに画像が表示できるデバイスの場合、この値は 1 になります。そうでない場合は 0 になります。これは、{{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS 擬似クラスに相当します。</p>
-
-<h3 id="-moz-mac-graphite-theme">-moz-mac-graphite-theme</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>Mac OS X で、ユーザがデバイスのアピアランスを "Graphite" に設定している場合、この値は 1 になります。ユーザが標準の青色のアピアランスを使用しているか Mac OS X でない場合、この値は 0 になります。</p>
-
-<p>これは、{{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS 擬似クラスに相当します。</p>
-
-<h3 id="-moz-maemo-classic">-moz-maemo-classic</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>ユーザが Maemo でオリジナルのテーマを使用している場合、この値は 1 になります。新しい Fremantle テーマを使用している場合は 0 になります。</p>
-
-<p>これは、{{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS 擬似クラスに相当します。</p>
-
-<h3 id="-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p>
-
-<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS 擬似クラスに相当します。</p>
-
-<h3 id="-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p>
-
-<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS 擬似クラスに相当します。</p>
-
-<h3 id="-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p>
-
-<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS 擬似クラスに相当します。</p>
-
-<h3 id="-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p>
-
-<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS 擬似クラスに相当します。</p>
-
-<h3 id="-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>デバイスのユーザインタフェースが、スクロールバーのトンボのサイズを変化させる (ドキュメント全体に対する表示部分の割り合いによる) 場合、この値は 1 になります。そうでない場合は 0 になります。</p>
-
-<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS 擬似クラスに相当します。</p>
-
-<h3 id="-moz-touch-enabled">-moz-touch-enabled</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>デバイスが (タッチスクリーンの) タッチイベントをサポートしている場合、この値は 1 になります。そうでない場合は 0 になります。</p>
-
-<p>これは、{{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS 擬似クラスに相当します。</p>
-
-<h4 id="Examples" name="Examples">例</h4>
-
-<p>例えば、ユーザがタッチスクリーンデバイスで操作している場合に、指で押しやすくするため、ボタンを大きめに描画することが考えられます。</p>
-
-<h3 id="-moz-windows-classic">-moz-windows-classic</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>ユーザが Windows でテーマを適用していない (uxtheme を使用する代わりにクラシックモードで使用している) 場合、この値は 1 になります。そうでない場合は 0 になります。</p>
-
-<p>これは、{{ cssxref(":-moz-system-metric(windows-classic)") }} CSS 擬似クラスに相当します。</p>
-
-<h3 id="-moz-windows-compositor">-moz-windows-compositor</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>ユーザが Windows で DWM compositor を使用している場合、この値は 1 になります。そうでない場合は 0 になります。</p>
-
-<p>これは、{{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS 擬似クラスに相当します。</p>
-
-<h3 id="-moz-windows-default-theme">-moz-windows-default-theme</h3>
-
-<p><strong>値:</strong> 整数<br>
- <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br>
- <strong>min/max 前置詞の使用:</strong> 不可</p>
-
-<p>ユーザが現在 Windows の既定のテーマ (Luna, Royale, Zune または Vista Basic, Vista Advanced, Aero Glass を含む Aero) の一つを使用している場合、この値は 1 になります。そうでない場合は 0 になります。</p>
-
-<p>これは、{{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS 擬似クラスに相当します。</p>
-
-<h2 id="See_also" name="See_also">参照</h2>
-
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li>
- <li><a class="internal" href="/ja/CSS/@media" title="ja/CSS/@media">Media types</a></li>
-</ul>
diff --git a/files/ja/web/guide/dom/index.html b/files/ja/web/guide/dom/index.html
deleted file mode 100644
index dcee4acf84..0000000000
--- a/files/ja/web/guide/dom/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: DOM developer guide
-slug: Web/Guide/DOM
-tags:
-  - API
-  - DOM
-  - Guide
-  - NeedsTranslation
-  - TopicStub
-translation_of: Web/API/Document_Object_Model
-translation_of_original: Web/Guide/API/DOM
----
-<p>{{draft}}</p>
-
-<p><a href="/docs/DOM">Document Object Model</a> は<a href="/en-US/docs/HTML">HTML</a> と <a href="/en-US/docs/XML">XML</a> ドキュメントのための API です。 DOM はドキュメントの構造的表現を提供しており、開発者がコンテンツ自身や、ドキュメントの表示を変更することができるようになります。基本的に、スクリプトやプログラミング言語を通して、ページを繋げています。</p>
-
-<p>obuject（例、ドキュメントオブジェクトはドキュメント自身を表したり、テーブルオブジェクトはhtmlのテーブル要素を表す、など）内に組み込まれているウェブページを作成したり、操作するためのすべてのプロパティやメソッド、イベントはweb開発者が使用可能です。これらのオブジェクトにはjavascript等のスクリプト言語でアクセス可能です。</p>
-
-<p> </p>
-
-<p>DOMはほぼ大抵 <a href="/en-US/docs/JavaScript">JavaScript</a> と合わせて使用されます。しかし、DOMはどんなプログラミング言語にも非依存なものとして設計されました。 <a href="/en-US/docs/DOM/DOM_Reference">a single, consistent API </a>を使用してドキュメントの構造的な表現を作ることが可能です。このサイトでは私たちはJavaScriptにフォーカスを当てていますが、DOMを実装するのはどのような言語でも可能です。</p>
-
-<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from <a href="/en-US/docs/DOM/DOM_Reference">a single, consistent API</a>. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p>
-
-<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p>
-
-<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">DOMはなぜ重要なのか?</h2>
-
-<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>).</p>
-
-<p>As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers. The user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="https://developer.mozilla.org/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="https://developer.mozilla.org/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p>
-
-<p> </p>
-
-<h2 id="DOMについてもっと知る">DOMについてもっと知る</h2>
-
-<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ja/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/ja/web/guide/html/canvas_tutorial/advanced_animations/index.html
deleted file mode 100644
index d8cf43a362..0000000000
--- a/files/ja/web/guide/html/canvas_tutorial/advanced_animations/index.html
+++ /dev/null
@@ -1,380 +0,0 @@
----
-title: 高度なアニメーション
-slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations
-tags:
-  - Canvas
-  - Graphics
-  - Tutorial
-translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
----
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div>
-
-<div class="summary">
-<p>前の章では、いくつかの<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">基本的なアニメーション</a>を作成して、物の動かし方を学びました。このパートでは、 運動そのものをより詳細に見て、 アニメーションをより高度にするための物理を追加していきましょう。</p>
-</div>
-
-<h2 id="ボールを描く">ボールを描く</h2>
-
-<p>アニメーションの勉強のために、ボールを使おうと思うので、最初にボールを canvas 上に描きましょう。次のコードは私たちの準備をしてくれるでしょう。</p>
-
-<pre class="notranslate">&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
-</pre>
-
-<p>普通は、まず描画コンテキストが必要になります。 ボールを描くため、 <code>プロパティと canvas にボールを描くための draw() </code>メソッドを持つ ball オブジェクトを作りましょう。</p>
-
-<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-var ball = {
-  x: 100,
-  y: 100,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-ball.draw();</pre>
-
-<p>ここでは特別なことはなく、ball は本当に単純な円で、{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} メソッドの助けを借りて描かれています。</p>
-
-<h2 id="速度の追加">速度の追加</h2>
-
-<p>ボールが手に入りましたので、このチュートリアルの<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">前の章</a>で習ったように、基本的なアニメーションを加えていきましょう。また {{domxref("window.requestAnimationFrame()")}} がアニメーションの制御を手助けしてくれます。The ball gets moving by adding a velocity vector to the position. For each frame, we also {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} the canvas to remove old circles from prior frames.</p>
-
-<pre class="brush: js; highlight:[8,9,24,25] notranslate">var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e){
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();
-</pre>
-
-<h2 id="境界線">境界線</h2>
-
-<p>Without any boundary collision testing our ball runs out of the canvas quickly. We need to check if the <code>x</code> and <code>y</code> position of the ball is out of the canvas dimensions and invert the direction of the velocity vectors. To do so, we add the following checks to the <code>draw</code> method:</p>
-
-<pre class="brush: js notranslate">if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
-  ball.vy = -ball.vy;
-}
-if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
-  ball.vx = -ball.vx;
-}</pre>
-
-<h3 id="最初のデモ">最初のデモ</h3>
-
-<p>これまでで、実際にどのように動くか見てみましょう。canvas にマウスを移動させて、アニメーションを開始してます。</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-
-  if (ball.y + ball.vy &gt; canvas.height ||
-      ball.y + ball.vy &lt; 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx &gt; canvas.width ||
-      ball.x + ball.vx &lt; 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e){
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p>
-
-<h2 id="加速">加速</h2>
-
-<p>動きをよりリアルにするために、このような速度で再生できます。たとえば：</p>
-
-<pre class="brush: js notranslate">ball.vy *= .99;
-ball.vy += .25;</pre>
-
-<p>This slows down the vertical velocity each frame, so that the ball will just bounce on the floor in the end.</p>
-
-<div class="hidden">
-<h6 id="Second_demo">Second demo</h6>
-
-<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-  ball.vy *= .99;
-  ball.vy += .25;
-
-  if (ball.y + ball.vy &gt; canvas.height ||
-      ball.y + ball.vy &lt; 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx &gt; canvas.width ||
-      ball.x + ball.vx &lt; 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e){
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p>
-
-<h2 id="後引きの効果">後引きの効果</h2>
-
-<p>Until now we have made use of the {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} method when clearing prior frames. If you replace this method with a semi-transparent {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, you can easily create a trailing effect.</p>
-
-<pre class="brush: js notranslate">ctx.fillStyle = 'rgba(255,255,255,0.3)';
-ctx.fillRect(0,0,canvas.width,canvas.height);</pre>
-
-<div class="hidden">
-<h6 id="Third_demo">Third demo</h6>
-
-<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.fillStyle = 'rgba(255,255,255,0.3)';
-  ctx.fillRect(0,0,canvas.width,canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-  ball.vy *= .99;
-  ball.vy += .25;
-
-  if (ball.y + ball.vy &gt; canvas.height ||
-      ball.y + ball.vy &lt; 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx &gt; canvas.width ||
-      ball.x + ball.vx &lt; 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e){
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p>
-
-<h2 id="マウスコントロールの追加">マウスコントロールの追加</h2>
-
-<p>ボールに対するちょっとした制御をするために、たとえば <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code> イベントを使用してボールをマウスの動きに従わせる。といったことができます。<code><a href="/en-US/docs/Web/Events/click">click </a></code>イベントでボールを開放して、またバウンドさせる。といったことも可能です。</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
-</div>
-
-<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-var running = false;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 1,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function clear() {
-  ctx.fillStyle = 'rgba(255,255,255,0.3)';
-  ctx.fillRect(0,0,canvas.width,canvas.height);
-}
-
-function draw() {
-  clear();
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-
-  if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mousemove', function(e){
-  if (!running) {
-    clear();
-    ball.x = e.clientX;
-    ball.y = e.clientY;
-    ball.draw();
-  }
-});
-
-canvas.addEventListener("click",function(e){
-  if (!running) {
-    raf = window.requestAnimationFrame(draw);
-    running = true;
-  }
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-  running = false;
-});
-
-ball.draw();
-</pre>
-
-<p>マウスを使ってボールを動かして、クリックで開放してください。</p>
-
-<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p>
-
-<h2 id="ブロック崩し">ブロック崩し</h2>
-
-<p>This short chapter only explains some techniques to create more advanced animations. There are many more! How about adding a paddle, some bricks, and turn this demo into a <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a> game? Checkout our <a href="/en-US/docs/Games">Game development</a> area for more gaming related articles.</p>
-
-<h2 id="関連項目">関連項目</h2>
-
-<ul>
- <li>{{domxref("window.requestAnimationFrame()")}}</li>
- <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li>
-</ul>
-
-<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p>
diff --git a/files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html
deleted file mode 100644
index c23a5e1ce1..0000000000
--- a/files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html
+++ /dev/null
@@ -1,725 +0,0 @@
----
-title: スタイルと色を適用する
-slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors
-translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
----
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div>
-
-<div class="summary">
-<p>「<a href="https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">canvas に図形を描く</a>」の章ではデフォルトの線と塗りのスタイルのみを使いました。ここではより魅力的に描くために使うことのできるcanvasのオプションについて見ていきます。具体的には、色、線のスタイル、グラデーション、パターンや影を追加する方法について学びます。</p>
-</div>
-
-<h2 id="Colors" name="Colors">色</h2>
-
-<p>これまでは<strong>描画コンテキスト</strong>の方法についてのみ見てきました。色を図形に適用するために、"<code>fillStyle"と<font face="Open Sans, Arial, sans-serif">"</font></code><code>strokeStyle"という</code>2つの重要なプロパティを利用することができます。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt>
- <dd>図形の塗りつぶしのスタイルを記述する</dd>
- <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt>
- <dd>図形のアウトラインのスタイルを記述する。</dd>
-</dl>
-
-<p><code>color</code>の部分にはCSSでの{{cssxref("&lt;color&gt;")}}表現やグラデーションオブジェクトまたはパターンオブジェクトが入ります。グラデーションオブジェクトとパターンオブジェクトについては後ほど学ぶことにします。 デフォルトでは、輪郭線・塗りつぶしの色は黒に設定されています。 (CSS色では<code>#000000</code>)</p>
-
-<div class="note">
-<p><strong>注記:</strong> <code>strokeStyle</code>および<code>fillStyle</code>プロパティを設定すると、その設定した値がデフォルトとなって、それ以降に描かれる図形の線や塗りはその色で行なわれるようになります。それぞれの図形をそれぞれ別の色で描きたい場合は、シェイプを描くごとに<code>strokeStyle</code>および<code>fillStyle</code>プロパティを設定する必要があります。</p>
-</div>
-
-<p>入力できる有効な文字列は、CSS {{cssxref("&lt;color&gt;")}}表現の値である必要があります。 下記の例では同じ色について説明しています。</p>
-
-<pre class="brush: js notranslate">// これらは全てfillStyleにオレンジ色を代入します
-
-ctx.fillStyle = "orange";
-ctx.fillStyle = "#FFA500";
-ctx.fillStyle = "rgb(255,165,0)";
-ctx.fillStyle = "rgba(255,165,0,1)";
-</pre>
-
-<h3 id="A_fillStyle_example" name="A_fillStyle_example">プロパティ <code>fillStyle</code> の例</h3>
-
-<p>この例では二重のforループを使って正方形からなるグリッドを作ってみたい。そしてその正方形の一つひとつは違った色になるようにしたい。結果は下のスクリーンショットのようになるだろう。かなり面白い画像ができているだろう。それぞれのブロックで別々な色を表現するために、２つの変数<code>i</code>,<code>j</code>を用いている。変数<code>i</code>は赤成分を、変数<code>j</code>は緑成分を変化させている。青成分は固定されている。By modifying the channels, you can generate all kinds of palettes. By increasing the steps, you can achieve something that looks like the color palettes Photoshop uses.</p>
-
-<pre class="brush: js;highlight[5,6] notranslate">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i &lt; 6; i++) {
-    for (var j = 0; j &lt; 6; j++) {
-      ctx.fillStyle = `rgb(${Math.floor(255-42.5*i)}, ${Math.floor(255-42.5*j)}, 0)`;
-      ctx.fillRect(j*25, i*25, 25, 25);
-    }
-  }
-}</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">draw();</pre>
-</div>
-
-<p>結果は以下のようになる:</p>
-
-<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
-
-<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">プロパティ <code>strokeStyle</code> の例</h3>
-
-<p>This example is similar to the one above, but uses the <code>strokeStyle</code> property to change the colors of the shapes' outlines. We use the <code>arc()</code> method to draw circles instead of squares.</p>
-
-<pre class="brush: js;highlight[5,6] notranslate">  function draw() {
-    var ctx = document.getElementById('canvas').getContext('2d');
-    for (var i=0;i&lt;6;i++){
-      for (var j=0;j&lt;6;j++){
-        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
-                         Math.floor(255-42.5*j) + ')';
-        ctx.beginPath();
-        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
-        ctx.stroke();
-      }
-    }
-  }
-</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">draw();</pre>
-</div>
-
-<p>The result looks like this:</p>
-
-<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
-
-<h2 id="Transparency" name="Transparency">透明度のコントロール</h2>
-
-<p>canvasに不透明な形状を描画するだけでなく、半透明の形状を描画することもできます。 これは、<code>globalAlpha</code>プロパティを設定するか、輪郭線や塗りつぶしのスタイルに半透明の色を割り当てることによって行われます。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt>
- <dd>代入された透明度の値を、代入後にcanvasに描画されるすべての図形に適用します。値は0.0（完全に透明）から1.0（完全に不透明）の間でなければなりません。デフォルトでは1.0（完全に不透明）が設定されています。</dd>
-</dl>
-
-<p><code>globalAlpha</code>プロパティは、同様の透明度でcanvasにいくつもの図形を描画する場合に役に立ちますが、それ以外の場合は、色を設定するときにそれぞれの図形に透明度を設定する方が一般的に便利です。</p>
-
-<p><code>strokeStyle</code>プロパティと<code>fillStyle</code>プロパティはCSSのrgba表現を利用できるため、次のような表記を使用して透明な色を割り当てることもできます。</p>
-
-<pre class="brush: js notranslate">// 輪郭線と塗りつぶしの色に透明色を割り当てる
-
-ctx.strokeStyle = "rgba(255,0,0,0.5)";
-ctx.fillStyle = "rgba(255,0,0,0.5)";
-</pre>
-
-<p><code>rgba()</code>関数は<code>rgb()</code>関数によく似ていますが、1つ引数が増加します。最後の引数には、この色の透明度の値を設定します。有効な値の範囲は、0.0（完全に透明）から1.0（完全に不透明）です。</p>
-
-<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">プロパティ <code>globalAlpha</code> の例</h3>
-
-<p>In this example, we'll draw a background of four different colored squares. On top of these, we'll draw a set of semi-transparent circles. The <code>globalAlpha</code> property is set at <code>0.2</code> which will be used for all shapes from that point on. Every step in the <code>for</code> loop draws a set of circles with an increasing radius. The final result is a radial gradient. By overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. By increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.</p>
-
-<pre class="brush: js;highlight[15] notranslate">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  // draw background
-  ctx.fillStyle = '#FD0';
-  ctx.fillRect(0,0,75,75);
-  ctx.fillStyle = '#6C0';
-  ctx.fillRect(75,0,75,75);
-  ctx.fillStyle = '#09F';
-  ctx.fillRect(0,75,75,75);
-  ctx.fillStyle = '#F30';
-  ctx.fillRect(75,75,75,75);
-  ctx.fillStyle = '#FFF';
-
-  // set transparency value
-  ctx.globalAlpha = 0.2;
-
-  // Draw semi transparent circles
-  for (i=0;i&lt;7;i++){
-    ctx.beginPath();
-    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
-    ctx.fill();
-  }
-}</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
-
-<h3 id="An_example_using_rgba" name="An_example_using_rgba()">An example using <code>rgba()</code></h3>
-
-<p>In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using <code>rgba()</code> gives you a little more control and flexibility because we can set the fill and stroke style individually.</p>
-
-<pre class="brush: js;highlight[16] notranslate">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Draw background
-  ctx.fillStyle = 'rgb(255,221,0)';
-  ctx.fillRect(0,0,150,37.5);
-  ctx.fillStyle = 'rgb(102,204,0)';
-  ctx.fillRect(0,37.5,150,37.5);
-  ctx.fillStyle = 'rgb(0,153,255)';
-  ctx.fillRect(0,75,150,37.5);
-  ctx.fillStyle = 'rgb(255,51,0)';
-  ctx.fillRect(0,112.5,150,37.5);
-
-  // Draw semi transparent rectangles
-  for (var i=0;i&lt;10;i++){
-    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
-    for (var j=0;j&lt;4;j++){
-      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
-    }
-  }
-}</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
-
-<h2 id="Line_styles" name="Line_styles">Line styles</h2>
-
-<p>There are several properties which allow us to style lines.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt>
- <dd>Sets the width of lines drawn in the future.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt>
- <dd>Sets the appearance of the ends of lines.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt>
- <dd>Sets the appearance of the "corners" where lines meet.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt>
- <dd>Establishes a limit on the miter when two lines join at a sharp angle, to let you control how thick the junction becomes.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt>
- <dd>Returns the current line dash pattern array containing an even number of non-negative numbers.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt>
- <dd>Sets the current line dash pattern.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt>
- <dd>Specifies where to start a dash array on a line.</dd>
-</dl>
-
-<p>You'll get a better understanding of what these do by looking at the examples below.</p>
-
-<h3 id="A_lineWidth_example" name="A_lineWidth_example">A <code>lineWidth</code> example</h3>
-
-<p>This property sets the current line thickness. Values must be positive numbers. By default this value is set to 1.0 units.</p>
-
-<p>The line width is the thickness of the stroke centered on the given path. In other words, the area that's drawn extends to half the line width on either side of the path. Because canvas coordinates do not directly reference pixels, special care must be taken to obtain crisp horizontal and vertical lines.</p>
-
-<p>In the example below, 10 straight lines are drawn with increasing line widths. The line on the far left is 1.0 units wide. However, the leftmost and all other odd-integer-width thickness lines do not appear crisp, because of the path's positioning.</p>
-
-<pre class="brush: js;highlight[4] notranslate">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i &lt; 10; i++){
-    ctx.lineWidth = 1+i;
-    ctx.beginPath();
-    ctx.moveTo(5+i*14,5);
-    ctx.lineTo(5+i*14,140);
-    ctx.stroke();
-  }
-}
-</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p>
-
-<p>Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.</p>
-
-<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p>
-
-<p>If you consider a path from (3,1) to (3,5) with a line thickness of <code>1.0</code>, you end up with the situation in the second image. The actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path. An approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. This is what happens with the <code>1.0</code> width line in the previous example code.</p>
-
-<p>To fix this, you have to be very precise in your path creation. Knowing that a <code>1.0</code> width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the <code>1.0</code> line width ends up completely and precisely filling a single pixel vertical line.</p>
-
-<div class="note">
-<p><strong>Note:</strong> Be aware that in our vertical line example, the Y position still referenced an integer gridline position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current <code>lineCap</code> style whose default value is <code>butt</code>; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the <code>lineCap</code> style to <code>square</code>, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).</p>
-
-<p>Note also that only start and final endpoints of a path are affected: if a path is closed with <code>closePath()</code>, there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the <code>lineJoin</code> style, whose default value is <code>miter</code>, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical). See the next two sections for demonstrations of these additional line styles.</p>
-</div>
-
-<p>For even-width lines, each half ends up being an integer amount of pixels, so you want a path that is between pixels (that is, (3,1) to (3,5)), instead of down the middle of pixels.</p>
-
-<p>While slightly painful when initially working with scalable 2D graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved. A 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position.</p>
-
-<h3 id="A_lineCap_example" name="A_lineCap_example">A <code>lineCap</code> example</h3>
-
-<p>The <code>lineCap</code> property determines how the end points of every line are drawn. There are three possible values for this property and those are: <code>butt</code>, <code>round</code> and <code>square</code>. By default this property is set to <code>butt</code>.</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p>
-
-<dl>
- <dt><code>butt</code></dt>
- <dd>The ends of lines are squared off at the endpoints.</dd>
- <dt><code>round</code></dt>
- <dd>The ends of lines are rounded.</dd>
- <dt><code>square</code></dt>
- <dd>The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.</dd>
-</dl>
-
-<p>In this example, we'll draw three lines, each with a different value for the <code>lineCap</code> property. I also added two guides to see the exact differences between the three. Each of these lines starts and ends exactly on these guides.</p>
-
-<p>The line on the left uses the default <code>butt</code> option. You'll notice that it's drawn completely flush with the guides. The second is set to use the <code>round</code> option. This adds a semicircle to the end that has a radius half the width of the line. The line on the right uses the <code>square</code> option. This adds a box with an equal width and half the height of the line thickness.</p>
-
-<pre class="brush: js;highlight[18] notranslate">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineCap = ['butt','round','square'];
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.beginPath();
-  ctx.moveTo(10,10);
-  ctx.lineTo(140,10);
-  ctx.moveTo(10,140);
-  ctx.lineTo(140,140);
-  ctx.stroke();
-
-  // Draw lines
-  ctx.strokeStyle = 'black';
-  for (var i=0;i&lt;lineCap.length;i++){
-    ctx.lineWidth = 15;
-    ctx.lineCap = lineCap[i];
-    ctx.beginPath();
-    ctx.moveTo(25+i*50,10);
-    ctx.lineTo(25+i*50,140);
-    ctx.stroke();
-  }
-}
-</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
-
-<h3 id="A_lineJoin_example" name="A_lineJoin_example">A <code>lineJoin</code> example</h3>
-
-<p>The <code>lineJoin</code> property determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped).</p>
-
-<p>There are three possible values for this property: <code>round</code>, <code>bevel</code> and <code>miter</code>. By default this property is set to <code>miter</code>. Note that the <code>lineJoin</code> setting has no effect if the two connected segments have the same direction, because no joining area will be added in this case.</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
-
-<dl>
- <dt><code>round</code></dt>
- <dd>Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to half the line width.</dd>
- <dt><code>bevel</code></dt>
- <dd>Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.</dd>
- <dt><code>miter</code></dt>
- <dd>Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is effected by the <code>miterLimit</code> property which is explained below.</dd>
-</dl>
-
-<p>The example below draws three different paths, demonstrating each of these three <code>lineJoin</code> property settings; the output is shown above.</p>
-
-<pre class="brush: js;highlight[6] notranslate">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineJoin = ['round','bevel','miter'];
-  ctx.lineWidth = 10;
-  for (var i=0;i&lt;lineJoin.length;i++){
-    ctx.lineJoin = lineJoin[i];
-    ctx.beginPath();
-    ctx.moveTo(-5,5+i*40);
-    ctx.lineTo(35,45+i*40);
-    ctx.lineTo(75,5+i*40);
-    ctx.lineTo(115,45+i*40);
-    ctx.lineTo(155,5+i*40);
-    ctx.stroke();
-  }
-}
-</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
-
-<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property">A demo of the <code>miterLimit</code> property</h3>
-
-<p>As you've seen in the previous example, when joining two lines with the <code>miter</code> option, the outside edges of the two joining lines are extended up to the point where they meet. For lines which are at large angles with each other, this point is not far from the inside connection point. However, as the angles between each line decreases, the distance (miter length) between these points increases exponentially.</p>
-
-<p>The <code>miterLimit</code> property determines how far the outside connection point can be placed from the inside connection point. If two lines exceed this value, a bevel join gets drawn instead. Note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this <code>miterLimit</code> property (whose default value is 10.0 in the HTML {{HTMLElement("canvas")}}), so the <code>miterLimit</code> can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges.</p>
-
-<p>More exactly, the miter limit is the maximum allowed ratio of the extension length (in the HTML canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. It can equivalently be defined as the maximum allowed ratio of the distance between the inside and outside points of jonction of edges, to the total line width. It is then equal to the cosecant of half the minimum inner angle of connecting segments below which no miter join will be rendered, but only a bevel join:</p>
-
-<ul>
- <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li>
- <li>The default miter limit of 10.0 will strip all miters for sharp angles below about 11 degrees.</li>
- <li>A miter limit equal to √2 ≈ 1.4142136 (rounded up) will strip miters for all acute angles, keeping miter joins only for obtuse or right angles.</li>
- <li>A miter limit equal to 1.0 is valid but will disable all miters.</li>
- <li>Values below 1.0 are invalid for the miter limit.</li>
-</ul>
-
-<p>Here's a little demo in which you can set <code>miterLimit</code> dynamically and see how this effects the shapes on the canvas. The blue lines show where the start and endpoints for each of the lines in the zig-zag pattern are.</p>
-
-<p>If you specify a <code>miterLimit</code> value below 4.2 in this demo, none of the visible corners will join with a miter extension, but only with a small bevel near the blue lines; with a <code>miterLimit</code> above 10, most corners in this demo should join with a miter far away from the blue lines, and whose height is decreasing between corners from left to right because they connect with growing angles; with intermediate values, the corners on the left side will only join with a bevel near the blue lines, and the corners on the right side with a miter extension (also with a decreasing height).</p>
-
-<pre class="brush: js;highlight[18] notranslate">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Clear canvas
-  ctx.clearRect(0,0,150,150);
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5,50,160,50);
-
-  // Set line styles
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // check input
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // Draw lines
-  ctx.beginPath();
-  ctx.moveTo(0,100);
-  for (i=0;i&lt;24;i++){
-    var dy = i%2==0 ? 25 : -25 ;
-    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
-  }
-  ctx.stroke();
-  return false;
-}
-</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td&gt;&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;&lt;/td&gt;
-    &lt;td&gt;Change the &lt;code&gt;miterLimit&lt;/code&gt; by entering a new value below and clicking the redraw button.&lt;br&gt;&lt;br&gt;
-      &lt;form onsubmit="return draw();"&gt;
-        &lt;label&gt;Miter limit&lt;/label&gt;
-        &lt;input type="text" size="3" id="miterLimit"/&gt;
-        &lt;input type="submit" value="Redraw"/&gt;
-      &lt;/form&gt;
-    &lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<pre class="brush: js notranslate">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
-draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p>
-
-<h3 id="Using_line_dashes">Using line dashes</h3>
-
-<p>The <code>setLineDash</code> method and the <code>lineDashOffset</code> property specify the dash pattern for lines. The <code>setLineDash</code> method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the <code>lineDashOffset</code> property sets an offset where to start the pattern.</p>
-
-<p>In this example we are creating a marching ants effect. It is an animation technique often found in <span class="new">selection</span> tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">basic animations</a>.</p>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="110" height="110"&gt;&lt;/canvas&gt;</pre>
-</div>
-
-<pre class="brush: js;highlight[6] notranslate">var ctx = document.getElementById('canvas').getContext('2d');
-var offset = 0;
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ctx.setLineDash([4, 2]);
-  ctx.lineDashOffset = -offset;
-  ctx.strokeRect(10,10, 100, 100);
-}
-
-function march() {
-  offset++;
-  if (offset &gt; 16) {
-    offset = 0;
-  }
-  draw();
-  setTimeout(march, 20);
-}
-
-march();</pre>
-
-<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p>
-
-<h2 id="Gradients" name="Gradients">Gradients</h2>
-
-<p>Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the <code>fillStyle</code> or <code>strokeStyle</code> properties.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt>
- <dd>Creates a linear gradient object with a starting point of (<code>x1</code>, <code>y1</code>) and an end point of (<code>x2</code>, <code>y2</code>).</dd>
- <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt>
- <dd>Creates a radial gradient. The parameters represent two circles, one with its center at (<code>x1</code>, <code>y1</code>) and a radius of <code>r1</code>, and the other with its center at (<code>x2</code>, <code>y2</code>) with a radius of <code>r2</code>.</dd>
-</dl>
-
-<p>For example:</p>
-
-<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
-</pre>
-
-<p>Once we've created a <code>CanvasGradient</code> object we can assign colors to it by using the <code>addColorStop()</code> method.</p>
-
-<dl>
- <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt>
- <dd>Creates a new color stop on the <code>gradient</code> object. The <code>position</code> is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the <code>color</code> argument must be a string representing a CSS {{cssxref("&lt;color&gt;")}}, indicating the color the gradient should reach at that offset into the transition.</dd>
-</dl>
-
-<p>You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.</p>
-
-<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0,0,150,150);
-lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
-</pre>
-
-<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example">A <code>createLinearGradient</code> example</h3>
-
-<p>In this example, we'll create two different gradients. As you can see here, both the <code>strokeStyle</code> and <code>fillStyle</code> properties can accept a <code>canvasGradient</code> object as valid input.</p>
-
-<pre class="brush: js;highlight[5,11] notranslate">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var lingrad = ctx.createLinearGradient(0,0,0,150);
-  lingrad.addColorStop(0, '#00ABEB');
-  lingrad.addColorStop(0.5, '#fff');
-  lingrad.addColorStop(0.5, '#26C000');
-  lingrad.addColorStop(1, '#fff');
-
-  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
-  lingrad2.addColorStop(0.5, '#000');
-  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
-
-  // assign gradients to fill and stroke styles
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
-
-  // draw shapes
-  ctx.fillRect(10,10,130,130);
-  ctx.strokeRect(50,50,50,50);
-
-}
-</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">draw();</pre>
-</div>
-
-<p>The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.</p>
-
-<p>In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.</p>
-
-<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p>
-
-<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example">A <code>createRadialGradient</code> example</h3>
-
-<p>In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).</p>
-
-<pre class="brush: js;highlight[5,10,15,20] notranslate">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
-  radgrad.addColorStop(0, '#A7D30C');
-  radgrad.addColorStop(0.9, '#019F62');
-  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
-
-  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
-  radgrad2.addColorStop(0, '#FF5F98');
-  radgrad2.addColorStop(0.75, '#FF0188');
-  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
-
-  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
-  radgrad3.addColorStop(0, '#00C9FF');
-  radgrad3.addColorStop(0.8, '#00B5E2');
-  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
-
-  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
-  radgrad4.addColorStop(0, '#F4F201');
-  radgrad4.addColorStop(0.8, '#E4C700');
-  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
-
-  // draw shapes
-  ctx.fillStyle = radgrad4;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad3;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad2;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad;
-  ctx.fillRect(0,0,150,150);
-}
-</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">draw();</pre>
-</div>
-
-<p>In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.</p>
-
-<p>The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient <code>#019F62 = rgba(1,159,98,1)</code>.</p>
-
-<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p>
-
-<h2 id="Patterns" name="Patterns">Patterns</h2>
-
-<p>In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the <code>createPattern()</code> method.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt>
- <dd>Creates and returns a new canvas pattern object. <code>image</code> is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. <code>type</code> is a string indicating how to use the image.</dd>
-</dl>
-
-<p>The type specifies how to use the image in order to create the pattern, and must be one of the following string values:</p>
-
-<dl>
- <dt><code>repeat</code></dt>
- <dd>Tiles the image in both vertical and horizontal directions.</dd>
- <dt><code>repeat-x</code></dt>
- <dd>Tiles the image horizontally but not vertically.</dd>
- <dt><code>repeat-y</code></dt>
- <dd>Tiles the image vertically but not horizontally.</dd>
- <dt><code>no-repeat</code></dt>
- <dd>Doesn't tile the image. It's used only once.</dd>
-</dl>
-
-<p>We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the <code>fillStyle</code> or <code>strokeStyle</code> properties. For example:</p>
-
-<pre class="brush: js notranslate">var img = new Image();
-img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img,'repeat');
-</pre>
-
-<div class="note">
-<p><strong>Note:</strong> Like with the <code>drawImage()</code> method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.</p>
-</div>
-
-<h3 id="A_createPattern_example" name="A_createPattern_example">A <code>createPattern</code> example</h3>
-
-<p>In this last example, we'll create a pattern to assign to the <code>fillStyle</code> property. The only thing worth noting is the use of the image's <code>onload</code> handler. This is to make sure the image is loaded before it is assigned to the pattern.</p>
-
-<pre class="brush: js;highlight[10] notranslate">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // create new image object to use as pattern
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function(){
-
-    // create pattern
-    var ptrn = ctx.createPattern(img,'repeat');
-    ctx.fillStyle = ptrn;
-    ctx.fillRect(0,0,150,150);
-
-  }
-}
-</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">draw();</pre>
-
-<p>The result looks like this:</p>
-</div>
-
-<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p>
-
-<h2 id="Shadows">Shadows</h2>
-
-<p>Using shadows involves just four properties:</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt>
- <dd>Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt>
- <dd>Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt>
- <dd>Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt>
- <dd>A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</dd>
-</dl>
-
-<p>The properties <code>shadowOffsetX</code> and <code>shadowOffsetY</code> indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.</p>
-
-<p>The <code>shadowBlur</code> property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</p>
-
-<p>The <code>shadowColor</code> property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</p>
-
-<div class="note">
-<p><strong>Note:</strong> Shadows are only drawn for <code>source-over</code> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>.</p>
-</div>
-
-<h3 id="A_shadowed_text_example">A shadowed text example</h3>
-
-<p>This example draws a text string with a shadowing effect.</p>
-
-<pre class="brush: js;highlight[4,5,6,7] notranslate">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.shadowOffsetX = 2;
-  ctx.shadowOffsetY = 2;
-  ctx.shadowBlur = 2;
-  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
-
-  ctx.font = "20px Times New Roman";
-  ctx.fillStyle = "Black";
-  ctx.fillText("Sample String", 5, 30);
-}
-</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="80"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p>
-
-<p>We will look at the <code>font</code> property and <code>fillText</code> method in the next chapter about <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">drawing text</a>.</p>
-
-<h2 id="Canvas_fill_rules">Canvas fill rules</h2>
-
-<p>When using <code>fill</code> (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.<br>
- <br>
- Two values are possible:</p>
-
-<ul>
- <li><code><strong>"nonzero</strong></code>": The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a>, which is the default rule.</li>
- <li><code><strong>"evenodd"</strong></code>: The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding rule</a>.</li>
-</ul>
-
-<p>In this example we are using the <code>evenodd</code> rule.</p>
-
-<pre class="brush: js;highlight[6] notranslate">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.beginPath();
-  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
-  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
-  ctx.fill("evenodd");
-}</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js notranslate">draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p>
-
-<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p>
diff --git a/files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html
deleted file mode 100644
index 1690518a7d..0000000000
--- a/files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html
+++ /dev/null
@@ -1,711 +0,0 @@
----
-title: Basic animations
-slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations
-tags:
-  - Canvas
-  - Graphics
-  - HTML
-  - HTML5
-  - Intermediate
-  - Tutorial
-translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
----
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</div>
-
-<div class="summary">
-<p>私たちが {{HTMLElement("canvas")}} 要素の操作に JavaScript を使うのは、とても簡単にインタラクティブなアニメーションを作成できるからです！本章では、いくつかの基本的なアニメーションで、その概要をつかんでいきます。</p>
-</div>
-
-<p>おそらく最大の制約は、キャンバスに図形を一度描画すると、その状態が維持されることです。アニメーションさせる場合にも、移動する部分と以前に描いた部分をすべて再描画する必要があります。複雑なフレームの再描画には時間がかかり、パフォーマンスは、実行しているコンピューターの速度に大きく依存します。</p>
-
-<h2 id="Basic_animation_steps" name="Basic_animation_steps">基本的なアニメーションの手順</h2>
-
-<p>フレームを描画させる手順は、このようになります。</p>
-
-<ol>
- <li><strong>キャンバスをクリアする</strong><br>
-  描画する図形がキャンバス全体 (たとえば、背景画像) に収まらない限り、以前に描画した図形をすべてクリアする必要があります。それを行う最も簡単な方法は、{{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} メソッドを使うことです。</li>
- <li><strong>キャンバスの状態を保存する</strong><br>
-  キャンバスの状態に影響を与える設定(スタイル、変形など)を変更していて、フレームを描画するたびに元の状態を使用したい場合は、その状態を保存する必要があります。</li>
- <li><strong>アニメ―ションさせる図形を描画する</strong><br>
-  実際に、フレームの描画を行います。</li>
- <li><strong>キャンバスの状態を復元する</strong><br>
-  状態を保存した場合は、新しいフレームを描画する前に状態を復元します。</li>
-</ol>
-
-<h2 id="Controlling_an_animation" name="Controlling_an_animation">アニメーションの制御</h2>
-
-<p>図形は、canvas のメソッドを直接使用するか、カスタム関数を呼び出すことによって描画されます。通常は、スクリプトの実行が終了したときにのみ、これらの結果がキャンバスに表示されます。たとえば、<code>for</code> ループ内からアニメーションを実行することはできません。</p>
-
-<p>つまり、一定の期間ごとに描画関数を実行する方法が必要です。このようなアニメーションを制御するには、2 つの方法があります。</p>
-
-<h3 id="Scheduled_updates" name="Scheduled_updates">スケジュールの更新</h3>
-
-<p>まず、{{domxref("window.setInterval()")}}、{{domxref("window.setTimeout()")}} があります。それから、{{domxref("window.requestAnimationFrame()")}} 関数があります。これらは、特定の関数を一定時間で呼び出すために使用できます。</p>
-
-<dl>
- <dt>{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}</dt>
- <dd><code>function</code> で指定した関数を <code>delay</code> ミリ秒ごとに繰り返し実行します。</dd>
- <dt>{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}</dt>
- <dd><code>function</code> で指定した関数を <code>delay</code> ミリ秒後に実行します。</dd>
- <dt>{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}</dt>
- <dd>アニメーションを実行することをブラウザーに通知し、次の再描画の前にアニメーションを更新するため、ブラウザーが指定の関数を呼び出すように要求します。</dd>
-</dl>
-
-<p>ユーザーの操作が必要ない場合は、提供されたコードを繰り返し実行する <code>setInterval()</code> 関数を使用できます。ゲームを作成したい場合、キーボードまたはマウスのイベントを使用してアニメーションを制御するため <code>setTimeout()</code> を使用できます。{{domxref( "EventListener")}}を設定することで、ユーザーの操作を取得し、アニメーション関数を実行します。</p>
-
-<div class="note">
-<p>以下の例では、{{domxref("window.requestAnimationFrame()")}} メソッドを使用してアニメーションを制御します。<code>requestAnimationFrame</code> メソッドは、フレームを描画する準備ができた時にシステムがアニメーションフレームを呼び出すことで、よりスムーズで効率的な方法でアニメーションを提供します。通常、コールバック回数は 1 秒あたり 60 回となり、バックグラウンドタブで実行している場合は、レートが低くなることがあります。特にゲームのアニメーションループの詳細については、<a href="/ja/docs/Games">ゲーム開発</a>の<a href="/ja/docs/Games/Anatomy">ビデオゲームの解剖学</a>を参照してください。</p>
-</div>
-
-<h2 id="An_animated_solar_system" name="An_animated_solar_system">アニメーションする太陽系</h2>
-
-<p>この例は、太陽系の小さなモデルをアニメーションさせます。</p>
-
-<pre class="brush: js notranslate">var sun = new Image();
-var moon = new Image();
-var earth = new Image();
-function init(){
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
-  window.requestAnimationFrame(draw);
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.globalCompositeOperation = 'destination-over';
-  ctx.clearRect(0,0,300,300); // clear canvas
-
-  ctx.fillStyle = 'rgba(0,0,0,0.4)';
-  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
-  ctx.save();
-  ctx.translate(150,150);
-
-  // Earth
-  var time = new Date();
-  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
-  ctx.translate(105,0);
-  ctx.fillRect(0,-12,50,24); // Shadow
-  ctx.drawImage(earth,-12,-12);
-
-  // Moon
-  ctx.save();
-  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
-  ctx.translate(0,28.5);
-  ctx.drawImage(moon,-3.5,-3.5);
-  ctx.restore();
-
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
-  ctx.stroke();
-
-  ctx.drawImage(sun,0,0,300,300);
-
-  window.requestAnimationFrame(draw);
-}
-
-init();
-</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
-</div>
-
-<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p>
-
-<h2 id="An_animated_clock" name="An_animated_clock">アニメ―ションする時計</h2>
-
-<p>この例は、アニメーションする時計で現在時間を表示します。</p>
-
-<pre class="brush: js notranslate">function clock(){
-  var now = new Date();
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.save();
-  ctx.clearRect(0,0,150,150);
-  ctx.translate(75,75);
-  ctx.scale(0.4,0.4);
-  ctx.rotate(-Math.PI/2);
-  ctx.strokeStyle = "black";
-  ctx.fillStyle = "white";
-  ctx.lineWidth = 8;
-  ctx.lineCap = "round";
-
-  // Hour marks
-  ctx.save();
-  for (var i=0;i&lt;12;i++){
-    ctx.beginPath();
-    ctx.rotate(Math.PI/6);
-    ctx.moveTo(100,0);
-    ctx.lineTo(120,0);
-    ctx.stroke();
-  }
-  ctx.restore();
-
-  // Minute marks
-  ctx.save();
-  ctx.lineWidth = 5;
-  for (i=0;i&lt;60;i++){
-    if (i%5!=0) {
-      ctx.beginPath();
-      ctx.moveTo(117,0);
-      ctx.lineTo(120,0);
-      ctx.stroke();
-    }
-    ctx.rotate(Math.PI/30);
-  }
-  ctx.restore();
-
-  var sec = now.getSeconds();
-  var min = now.getMinutes();
-  var hr  = now.getHours();
-  hr = hr&gt;=12 ? hr-12 : hr;
-
-  ctx.fillStyle = "black";
-
-  // write Hours
-  ctx.save();
-  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
-  ctx.lineWidth = 14;
-  ctx.beginPath();
-  ctx.moveTo(-20,0);
-  ctx.lineTo(80,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // write Minutes
-  ctx.save();
-  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
-  ctx.lineWidth = 10;
-  ctx.beginPath();
-  ctx.moveTo(-28,0);
-  ctx.lineTo(112,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // Write seconds
-  ctx.save();
-  ctx.rotate(sec * Math.PI/30);
-  ctx.strokeStyle = "#D40000";
-  ctx.fillStyle = "#D40000";
-  ctx.lineWidth = 6;
-  ctx.beginPath();
-  ctx.moveTo(-30,0);
-  ctx.lineTo(83,0);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(0,0,10,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(95,0,10,0,Math.PI*2,true);
-  ctx.stroke();
-  ctx.fillStyle = "rgba(0,0,0,0)";
-  ctx.arc(0,0,3,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.lineWidth = 14;
-  ctx.strokeStyle = '#325FA2';
-  ctx.arc(0,0,142,0,Math.PI*2,true);
-  ctx.stroke();
-
-  ctx.restore();
-
-  window.requestAnimationFrame(clock);
-}
-
-window.requestAnimationFrame(clock);</pre>
-
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-</div>
-
-<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p>
-
-<h2 id="A_looping_panorama" name="A_looping_panorama">ループする風景</h2>
-
-<p>この例は、左から右へ風景写真をスクロールさせます。Wikipedia から<a href="https://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg?uselang=ja" title="https://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg?uselang=ja">ヨセミテ国立公園の画像</a>を使いましたが、キャンバスよりも大きな任意の画像を使用できます。</p>
-
-<pre class="brush: js notranslate">var img = new Image();
-
-// User Variables - customize these to change the image being scrolled, its
-// direction, and the speed.
-
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; // lower is faster
-var scale = 1.05;
-var y = -4.5; // vertical offset
-
-// Main program
-
-var dx = 0.75;
-var imgW;
-var imgH;
-var x = 0;
-var clearX;
-var clearY;
-var ctx;
-
-img.onload = function() {
-    imgW = img.width * scale;
-    imgH = img.height * scale;
-
-    if (imgW &gt; CanvasXSize) {
-        // image larger than canvas
-        x = CanvasXSize - imgW;
-    }
-    if (imgW &gt; CanvasXSize) {
-        // image width larger than canvas
-        clearX = imgW;
-    } else {
-        clearX = CanvasXSize;
-    }
-    if (imgH &gt; CanvasYSize) {
-        // image height larger than canvas
-        clearY = imgH;
-    } else {
-        clearY = CanvasYSize;
-    }
-
-    // get canvas context
-    ctx = document.getElementById('canvas').getContext('2d');
-
-    // set refresh rate
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
-
-    // if image is &lt;= Canvas Size
-    if (imgW &lt;= CanvasXSize) {
-        // reset, start from beginning
-        if (x &gt; CanvasXSize) {
-            x = -imgW + x;
-        }
-        // draw additional image1
-        if (x &gt; 0) {
-            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
-        }
-        // draw additional image2
-        if (x - imgW &gt; 0) {
-            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
-        }
-    }
-
-    // image is &gt; Canvas Size
-    else {
-        // reset, start from beginning
-        if (x &gt; (CanvasXSize)) {
-            x = CanvasXSize - imgW;
-        }
-        // draw aditional image
-        if (x &gt; (CanvasXSize-imgW)) {
-            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
-        }
-    }
-    // draw image
-    ctx.drawImage(img, x, y,imgW, imgH);
-    // amount to move
-    x += dx;
-}
-</pre>
-
-<p>以下は、画像をスクロールする {{HTMLElement("canvas")}} です。ここで指定する幅と高さは、JavaScript コードの <code>CanvasXZSize</code> および <code>CanvasYSize</code> 変数の値と一致する必要があることに注意してください。</p>
-
-<pre class="brush: html notranslate">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
-
-<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p>
-
-<h2 id="Mouse_Following_Animation" name="Mouse_Following_Animation">マウス追跡アニメーション</h2>
-
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-    &lt;head&gt;
-        &lt;meta charset="UTF-8"&gt;
-        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
-        &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
-        &lt;title&gt;Document&lt;/title&gt;
-        &lt;script&gt;
-            var cn;
-            //= document.getElementById('cw');
-            var c;
-            var u = 10;
-            const m = {
-                x: innerWidth / 2,
-                y: innerHeight / 2
-            };
-            window.onmousemove = function(e) {
-                m.x = e.clientX;
-                m.y = e.clientY;
-
-            }
-            function gc() {
-                var s = "0123456789ABCDEF";
-                var c = "#";
-                for (var i = 0; i &lt; 6; i++) {
-                    c += s[Math.ceil(Math.random() * 15)]
-                }
-                return c
-            }
-            var a = [];
-            window.onload = function myfunction() {
-                cn = document.getElementById('cw');
-                c = cn.getContext('2d');
-
-                for (var i = 0; i &lt; 10; i++) {
-                    var r = 30;
-                    var x = Math.random() * (innerWidth - 2 * r) + r;
-                    var y = Math.random() * (innerHeight - 2 * r) + r;
-                    var t = new ob(innerWidth / 2,innerHeight / 2,5,"red",Math.random() * 200 + 20,2);
-                    a.push(t);
-                }
-                //cn.style.backgroundColor = "#700bc8";
-
-                c.lineWidth = "2";
-                c.globalAlpha = 0.5;
-                resize();
-                anim()
-            }
-            window.onresize = function() {
-
-                resize();
-
-            }
-            function resize() {
-                cn.height = innerHeight;
-                cn.width = innerWidth;
-                for (var i = 0; i &lt; 101; i++) {
-                    var r = 30;
-                    var x = Math.random() * (innerWidth - 2 * r) + r;
-                    var y = Math.random() * (innerHeight - 2 * r) + r;
-                    a[i] = new ob(innerWidth / 2,innerHeight / 2,4,gc(),Math.random() * 200 + 20,0.02);
-
-                }
-                //  a[0] = new ob(innerWidth / 2, innerHeight / 2, 40, "red", 0.05, 0.05);
-                //a[0].dr();
-            }
-            function ob(x, y, r, cc, o, s) {
-                this.x = x;
-                this.y = y;
-                this.r = r;
-                this.cc = cc;
-                this.theta = Math.random() * Math.PI * 2;
-                this.s = s;
-                this.o = o;
-                this.t = Math.random() * 150;
-
-                this.o = o;
-                this.dr = function() {
-                    const ls = {
-                        x: this.x,
-                        y: this.y
-                    };
-                    this.theta += this.s;
-                    this.x = m.x + Math.cos(this.theta) * this.t;
-                    this.y = m.y + Math.sin(this.theta) * this.t;
-                    c.beginPath();
-                    c.lineWidth = this.r;
-                    c.strokeStyle = this.cc;
-                    c.moveTo(ls.x, ls.y);
-                    c.lineTo(this.x, this.y);
-                    c.stroke();
-                    c.closePath();
-
-                }
-            }
-            function anim() {
-                requestAnimationFrame(anim);
-                c.fillStyle = "rgba(0,0,0,0.05)";
-                c.fillRect(0, 0, cn.width, cn.height);
-                a.forEach(function(e, i) {
-                    e.dr();
-                });
-
-            }
-        &lt;/script&gt;
-        &lt;style&gt;
-            #cw {
-                position: fixed;
-                z-index: -1;
-            }
-
-            body {
-                margin: 0;
-                padding: 0;
-                background-color: rgba(0,0,0,0.05);
-            }
-        &lt;/style&gt;
-    &lt;/head&gt;
-    &lt;body&gt;
-        &lt;canvas id="cw"&gt;&lt;/canvas&gt;
-    &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h5 id="OutPut" name="OutPut">表示例</h5>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td>
-    <p><a href="https://kunalverma94.github.io/gallery/gags/beyblade.html"><img alt="beyblade" src="https://kunalverma94.github.io/gallery/beyblade.jpg" style="height: 298px; width: 399px;"></a></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Snake_Game" name="Snake_Game">スネークゲーム</h2>
-
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-
-&lt;head&gt;
-    &lt;meta charset="UTF-8"&gt;
-    &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
-    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
-    &lt;title&gt;Nokia 1100:snake..Member berries&lt;/title&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-    &lt;div class="keypress hide"&gt;
-        &lt;div class="up" onclick="emit(38)"&gt;&amp;#8593;&lt;/div&gt;
-        &lt;div class="right" onclick="emit(39)"&gt;&amp;#8594;&lt;/div&gt;
-        &lt;div class="left" onclick="emit(37)"&gt;&amp;#8592;&lt;/div&gt;
-        &lt;div class="down" onclick="emit(40)"&gt;&amp;#8595;&lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="banner" id="selector"&gt;
-        &lt;div&gt;
-            Time :&lt;span id="time"&gt;0&lt;/span&gt;
-        &lt;/div&gt;
-        &lt;div&gt;LousyGames ©&lt;/div&gt;
-        &lt;div&gt;
-            Score :&lt;span id="score"&gt;0&lt;/span&gt;
-        &lt;/div&gt;
-        &lt;div class="touch off" onclick="touch(this)"&gt;touch&lt;/div&gt;
-    &lt;/div&gt;
-    &lt;canvas id="main"&gt;&lt;/canvas&gt;
-&lt;/body&gt;
-&lt;style&gt;
-    body {
-        margin: 0;
-        overflow: hidden;
-        background: #000
-    }
-
-    .banner {
-        text-align: center;
-        color: #fff;
-        background: #3f51b5;
-        line-height: 29px;
-        position: fixed;
-        left: 0;
-        top: 0;
-        right: 0;
-        font-family: monospace;
-        height: 30px;
-        opacity: .4;
-        display: flex;
-        transition: .5s
-    }
-
-    .banner:hover {
-        opacity: 1
-    }
-
-    div#selector&gt;div {
-        flex-basis: 30%
-    }
-
-    @keyframes diss {
-        from {
-            opacity: 1
-        }
-
-        to {
-            opacity: 0
-        }
-    }
-
-    .keypress&gt;div {
-        border: dashed 3px #fff;
-        height: 48%;
-        width: 48%;
-        display: flex;
-        align-content: center;
-        justify-content: center;
-        align-self: center;
-        align-items: center;
-        font-size: -webkit-xxx-large;
-        font-weight: 900;
-        color: #fff;
-        transition: .5s;
-        opacity: .1;
-        border-radius: 7px
-    }
-
-    .keypress {
-        position: fixed;
-        width: 100vw;
-        height: 100vh;
-        top: 0;
-        left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
-        opacity: 1;
-        user-select: none
-    }
-
-    .keypress&gt;div:hover {
-        opacity: 1
-    }
-
-    .touch {
-        background: #8bc34a
-    }
-
-    .off {
-        background: #f44336
-    }
-
-    .hide {
-        opacity: 0
-    }
-&lt;/style&gt;
-&lt;/html&gt;</pre>
-
-<p>Javascript</p>
-
-<pre class="brush: js notranslate">function tmz() {
-        var e = new Date(t),
-            i = new Date,
-            n = Math.abs(i.getMinutes() - e.getMinutes()),
-            o = Math.abs(i.getSeconds() - e.getSeconds());
-        return n + " : " + o
-    }
-
-    function coll(t, e) {
-        return t.x &lt; e.x + e.w &amp;&amp; t.x + t.w &gt; e.x &amp;&amp; t.y &lt; e.y + e.h &amp;&amp; t.h + t.y &gt; e.y
-    }
-
-    function snake() {
-        this.w = 15, this.h = 15, this.dx = 1, this.dy = 1, this.xf = 1, this.yf = 1, this.sn = [];
-        for (var t = {
-            x: w / 2,
-            y: h / 2
-        }, e = 0; e &lt; 5; e++) this.sn.push(Object.assign({}, t)), t.x += this.w;
-        this.draw = function () {
-            var t = d &amp;&amp; d.search("Arrow") &gt; -1,
-                e = -1;
-            if (t) {
-                var i = {
-                    ...this.sn[0]
-                };
-                if ("ArrowUp" == d &amp;&amp; (i.y -= this.h), "ArrowDown" == d &amp;&amp; (i.y += this.h), "ArrowLeft" == d &amp;&amp; (i.x -= this.w), "ArrowRight" == d &amp;&amp; (i.x += this.w), i.x &gt;= w ? i.x = 0 : i.x &lt; 0 &amp;&amp; (i.x = w - this.w), i.y &gt; h ? i.y = 0 : i.y &lt; 0 &amp;&amp; (i.y = h), e = fa.findIndex(t =&gt; coll({
-                    ...this.sn[0],
-                    h: this.h,
-                    w: this.w
-                }, t)), this.sn.unshift(i), -1 != e) return console.log(e), fa[e].renew(), void (document.getElementById("score").innerText = Number(document.getElementById("score").innerText) + 1);
-                this.sn.pop(), console.log(6)
-            }
-            this.sn.forEach((t, e, i) =&gt; {
-                if (0 == e || i.length - 1 == e) {
-                    var n = c.createLinearGradient(t.x, t.y, t.x + this.w, t.y + this.h);
-                    i.length - 1 == e ? (n.addColorStop(0, "black"), n.addColorStop(1, "#8BC34A")) : (n.addColorStop(0, "#8BC34A"), n.addColorStop(1, "white")), c.fillStyle = n
-                } else c.fillStyle = "#8BC34A";
-                c.fillRect(t.x, t.y, this.w, this.h), c.strokeStyle = "#E91E63", c.font = "30px serif", c.strokeStyle = "#9E9E9E", i.length - 1 != e &amp;&amp; 0 != e &amp;&amp; c.strokeRect(t.x, t.y, this.w, this.h), 0 == e &amp;&amp; (c.beginPath(), c.fillStyle = "#F44336", c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill()), c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill(), c.beginPath()
-            })
-        }
-    }
-
-    function gc() {
-        for (var t = "0123456789ABCDEF", e = "#", i = 0; i &lt; 6; i++) e += t[Math.ceil(15 * Math.random())];
-        return e
-    }
-
-    function food() {
-        this.x = 0, this.y = 0, this.b = 10, this.w = this.b, this.h = this.b, this.color = gc(), this.renew = function () {
-            this.x = Math.floor(Math.random() * (w - 200) + 10), this.y = Math.floor(Math.random() * (h - 200) + 30), this.color = gc()
-        }, this.renew(), this.put = (() =&gt; {
-            c.fillStyle = this.color, c.arc(this.x, this.y, this.b - 5, 0, 2 * Math.PI), c.fill(), c.beginPath(), c.arc(this.x, this.y, this.b - 5, 0, Math.PI), c.strokeStyle = "green", c.lineWidth = 10, c.stroke(), c.beginPath(), c.lineWidth = 1
-        })
-    }
-
-    function init() {
-        cc.height = h, cc.width = w, c.fillRect(0, 0, w, innerHeight);
-        for (var t = 0; t &lt; 10; t++) fa.push(new food);
-        s = new snake(w / 2, h / 2, 400, 4, 4), anima()
-    }
-
-    function anima() {
-        c.fillStyle = "rgba(0,0,0,0.11)", c.fillRect(0, 0, cc.width, cc.height), fa.forEach(t =&gt; t.put()), s.draw(), document.getElementById("time").innerText = tmz(), setTimeout(() =&gt; {
-            requestAnimationFrame(anima)
-        }, fw)
-    }
-
-    function emit(t) {
-        key.keydown(t)
-    }
-
-    function touch(t) {
-        t.classList.toggle("off"), document.getElementsByClassName("keypress")[0].classList.toggle("hide")
-    }
-    var t = new Date + "",
-        d = void 0,
-        cc = document.getElementsByTagName("canvas")[0],
-        c = cc.getContext("2d");
-    key = {}, key.keydown = function (t) {
-        var e = document.createEvent("KeyboardEvent");
-        Object.defineProperty(e, "keyCode", {
-            get: function () {
-                return this.keyCodeVal
-            }
-        }), Object.defineProperty(e, "key", {
-            get: function () {
-                return 37 == this.keyCodeVal ? "ArrowLeft" : 38 == this.keyCodeVal ? "ArrowUp" : 39 == this.keyCodeVal ? "ArrowRight" : "ArrowDown"
-            }
-        }), Object.defineProperty(e, "which", {
-            get: function () {
-                return this.keyCodeVal
-            }
-        }), e.initKeyboardEvent ? e.initKeyboardEvent("keydown", !0, !0, document.defaultView, !1, !1, !1, !1, t, t) : e.initKeyEvent("keydown", !0, !0, document.defaultView, !1, !1, !1, !1, t, 0), e.keyCodeVal = t, e.keyCode !== t &amp;&amp; alert("keyCode mismatch " + e.keyCode + "(" + e.which + ")"), document.dispatchEvent(e)
-    };
-    var o, s, h = innerHeight,
-        w = innerWidth,
-        fw = 60,
-        fa = [];
-    window.onkeydown = function (t) {
-        var e = t.key;
-        (e.search("Arrow") &gt; -1 || "1" == e) &amp;&amp; (d = t.key), "i" != e &amp;&amp; "I" != e || (console.log("inc"), fw -= 10), "d" != e &amp;&amp; "D" != e || (console.log("dec"), fw += 10)
-    }, init();
-</pre>
-
-<h5 id="Output_2" name="Output_2">表示例</h5>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td>
-    <h2 id="sect1"><a href="https://kunalverma94.github.io/pokemon/snake.html"><img alt="Snake game" src="https://kunalverma94.github.io/view/images/snake.jpg" style="height: 400px; width: 600px;"></a></h2>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Other_examples" name="Other_examples">その他のサンプル</h2>
-
-<dl>
- <dt><a href="/ja/docs/Web/API/Canvas_API/A_basic_ray-caster" title="/ja/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt>
- <dd>キーボードを使ってアニメーションをどのように制御するか説明した良いサンプルです。</dd>
- <dt><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Advanced animations</a></dt>
- <dd>高度なアニメーション技術と物の動きについて見ていきます。</dd>
-</dl>
-
-<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</p>
diff --git a/files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html b/files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html
deleted file mode 100644
index c9bc6c17f4..0000000000
--- a/files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: Basic usage of canvas
-slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage
-translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
----
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
-
-<div class="summary">
-<p>まずチュートリアルの最初として {{HTMLElement("canvas")}} {{Glossary("HTML")}} 要素を説明します。このページを読めば、canvas 要素に 2D の画像を描けるようになります。</p>
-</div>
-
-<h2 id="&lt;canvas>_要素"><code>&lt;canvas&gt;</code> 要素</h2>
-
-<pre class="brush: html">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
-</pre>
-
-<p>{{HTMLElement("canvas")}} は {{HTMLElement("img")}} と似ています。<code>src</code> 属性と <code>alt</code> 属性がない点が明確に異なりますが、{{htmlattrxref("width", "canvas")}} と {{htmlattrxref("height", "canvas")}} の属性がある点などは共通しています。 これらの属性は必ず指定しなければならないものではありません。このほかに様々な {{Glossary("DOM")}} <a href="/docs/Web/API/HTMLCanvasElement">属性</a>を利用できます。 <code>width</code> と <code>height</code> 属性が指定されなかった場合、canvas は幅 <strong>300 ピクセル</strong>、高さ <strong>150 ピクセル</strong>の要素として初期化されます。画面上の大きさは {{Glossary("CSS")}} によって変更できますが、その場合 canvas に描画される画像は CSS の指定に合わせて拡大 / 縮小されます。この際、元の画像のアスペクト比は考慮されないため、指定の仕方によっては画像が歪んで表示されます。</p>
-
-<div class="note">
-<p><strong>付記:</strong> 画像が歪んでいると感じた時は、<code>&lt;canvas&gt; </code>の <code>width</code> と <code>height</code> 属性の値を設定して、CSS によるサイズの変更をしないようにしましょう。</p>
-</div>
-
-<p><a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> 属性は <a href="/docs/Web/HTML/Global_attributes">全ての要素が持つ属性</a> で <code>&lt;canvas&gt;</code> に固有なものではありません。これを利用することで、ユニークな ID を要素に持たせられます。ID を持たせることで、JavaScript の中から、その要素を探すのが簡単になります。</p>
-
-<p><code>&lt;canvas&gt;</code> 要素は通常の画像と同じようにレイアウトされます。({{cssxref("margin")}} や {{cssxref("border")}}、 {{cssxref("background")}} といったルールも利用可能ですが、これらは実際に描画される画像には影響を与えません。スタイルが何も設定されていない場合、canvas は最初透明なものとして描画されます。スタイルとレイアウトに関しては<a href="/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">専用のページ</a>を設けています。詳細は、そちらをご覧ください。</p>
-
-<div id="section_2">
-<h3 id="代替コンテンツ">代替コンテンツ</h3>
-
-<p><code>&lt;canvas&gt;</code> 要素は対応していないブラウザ、例えば Internet Explorer 9 以前、で表示するための代替コンテンツを定義できます。これは {{HTMLElement("img")}} というよりは、むしろ {{HTMLElement("video")}} や {{HTMLElement("audio")}}、{{HTMLElement("picture")}} 要素に似ています。</p>
-
-<p>代替コンテンツの定義方法はシンプルで<code>、&lt;canvas&gt; </code>要素の内部に代わりに表示するコンテンツを記述します。対応していないブラウザは <code>&lt;canvas&gt; </code>を無視するため、その内部のコンテンツが表示されるというわけです。</p>
-
-<p>次の例では JavaScript によって canvas に対して、代替テキストが設定されています：</p>
-
-<pre class="brush: html">&lt;canvas id="stockGraph" width="150" height="150"&gt;
-  現在の株価: $3.15 +0.15
-&lt;/canvas&gt;
-
-&lt;canvas id="clock" width="150" height="150"&gt;
-  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
-&lt;/canvas&gt;
-</pre>
-
-<p>使用するブラウザを変更するよう利用者に伝えることは、利用者のために全くなりません。どのような代替テキスト / コンテンツを設定するのが適切かは <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">make the canvas more accessible</a> をご覧ください。</p>
-
-<h3 id="&lt;canvas>：閉じタグが必須です"><code>&lt;/canvas&gt;：</code>閉じタグが必須です</h3>
-
-<p>代替コンテンツを内部に持つ関係上、{{HTMLElement("img")}} 要素と異なって {{HTMLElement("canvas")}} 要素は閉じタグ (<code>&lt;/canvas&gt;</code>) が<strong>必須となっています</strong>。タグを閉じなかった場合は、残りのページ全てが代替コンテンツとして処理され、その結果としてそれらが表示されなくなります。</p>
-
-<p>代替コンテンツが必要でない場合は、単に <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> と書けば対応するブラウザで動作します。</p>
-
-<h2 id="描画コンテキスト">描画コンテキスト</h2>
-
-<p>{{HTMLElement("canvas")}} は固定された大きさの描画可能領域を作成できます。この領域は、1 つ以上の<strong>描画コンテキスト</strong>として表現され、そのコンテキストを通じて描画領域を操作します。このチュートリアルでは、2 次元グラフィックスを描画するためのコンテキストについてのみ解説しますが、これ以外の描画コンテキストも存在します。その典型例が <a href="/ja/docs/">WebGL</a> です。これは<a href="http://www.khronos.org/opengles/"> OpenGL ES</a> に基づいた 3 次元グラフィックスを扱える描画コンテキストです。</p>
-
-<p>初期状態での canvas には何も描画されていません。ここに描画を行うには、まず JavaScript で描画コンテキストを取得する必要があります。 {{HTMLElement("canvas")}} 要素の {{domxref("HTMLCanvasElement.getContext", "getContext()")}} を呼ぶことで、描画コンテキストは取得できます。呼び出す際の引数によって、取得されるコンテキストの種類が変わります。<code>"2d" </code>を指定することで、2 次元のグラフィックスを扱える描画コンテキストが取得できます。これで取得されたコンテキストの詳細は {{domxref("CanvasRenderingContext2D")}} をご覧ください。</p>
-
-<pre class="brush: js">var canvas = document.getElementById('tutorial');
-var ctx = canvas.getContext('2d');
-</pre>
-
-<p>最初の行では {{domxref("document.getElementById()")}} メソッドを呼んで、DOM 中から {{HTMLElement("canvas")}} 要素をあらわすノードを探しています。2 行目では見つけた要素の <code>getContext()</code> メソッドを呼んで、描画コンテキストを取得しています。</p>
-
-<div id="section_5">
-<h2 id="対応しているかどうかの確認">対応しているかどうかの確認</h2>
-
-<p>{{HTMLElement("canvas")}} 要素に対応していないブラウザでは、代替コンテンツが表示されます。JavaScript からは <code>getContext()</code> メソッドの有無を調査することで、ブラウザが対応しているかどうかを確認できます。確認するためのコードは以下のようになります：</p>
-
-<pre class="brush: js">var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext){
-  var ctx = canvas.getContext('2d');
-  // drawing code here
-} else {
-  // canvas-unsupported code here
-}
-</pre>
-</div>
-</div>
-
-<h2 id="サンプルコード">サンプルコード</h2>
-
-<p>以上の点をまとめたサンプルコードは以下のようになります。このサンプルコードは、後の説明でも利用します。</p>
-
-<div class="note">
-<p><strong>付記：</strong>スクリプトを HTML に埋め込むのは、よいやり方ではありません。この例では分かりやすさのために、仕方なく埋め込んでいます。</p>
-</div>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"/&gt;
-    &lt;title&gt;Canvas tutorial&lt;/title&gt;
-    &lt;script type="text/javascript"&gt;
-      function draw(){
-        var canvas = document.getElementById('tutorial');
-        if (canvas.getContext){
-          var ctx = canvas.getContext('2d');
-        }
-      }
-    &lt;/script&gt;
-    &lt;style type="text/css"&gt;
-      canvas { border: 1px solid black; }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body onload="draw();"&gt;
-    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p>スクリプト中の <code>draw()</code> 関数はページのロード完了時に一度だけ呼び出されます。これは、document の {{event("load")}} イベントを利用しているためです。他の関数同様 {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}} や {{domxref("WindowTimers.setInterval", "window.setInterval()")}}、他のイベントハンドラから呼び出すことができますが、今の所ページがロードされた時にのみ呼び出されます。</p>
-
-<p>このサンプルコードでは何も描画されない領域が表示されます。実際の動作は次で確認できます：</p>
-
-<p>{{EmbedLiveSample("サンプルコード", 160, 160)}}</p>
-
-<h2 id="単純な描画">単純な描画</h2>
-
-<p>手始めに単純な例を見てみましょう。次の例では重なり合う 2 つの四角形が描画されます。そのうちの 1 つは透明度が設定されており、下の色が透けて見えます。この例がどのように動作しているかは、次のページで解説します。</p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
- &lt;head&gt;
-  &lt;meta charset="utf-8"/&gt;
-  &lt;script type="application/javascript"&gt;
-    function draw() {
-      var canvas = document.getElementById("canvas");
-      if (canvas.getContext) {
-        var ctx = canvas.getContext("2d");
-
-        ctx.fillStyle = "rgb(200,0,0)";
-        ctx.fillRect (10, 10, 50, 50);
-
-        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-        ctx.fillRect (30, 30, 50, 50);
-      }
-    }
-  &lt;/script&gt;
- &lt;/head&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p>この例は次のように動作します：</p>
-
-<p>{{EmbedLiveSample("単純な描画", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
-
-<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p>
diff --git a/files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html b/files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html
deleted file mode 100644
index 99e2c55b69..0000000000
--- a/files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html
+++ /dev/null
@@ -1,577 +0,0 @@
----
-title: canvas に図形を描く
-slug: Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
-tags:
-  - Canvas
-  - Graphics
-  - HTML
-  - HTML Canvas
-  - HTML5
-  - Intermediate
-  - Tutorial
-translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
----
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
-
-<div class="summary">
-<p><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_usage">canvas の環境</a>をセットアップしましたので、canvas に描画する方法を詳しく見ていくことができます。この記事を読み終わると矩形、三角形、線、円弧、曲線を描く方法を学び、基本的な図形について理解できます。canvas にオブジェクトを描く際はパスを扱うことが不可欠ですので、その方法を見ていきます。</p>
-</div>
-
-<h2 id="The_grid" name="The_grid">グリッド</h2>
-
-<p><img src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;"></p>
-
-<p>描き始める前に、canvas のグリッドもしくは <strong>座標空間</strong> について話す必要があります。前のページの HTML テンプレートは幅 150 ピクセル、高さ 150 ピクセルの canvas 要素を持っていました。右の図に、この画像とデフォルトのグリッドを重ねて描きました。普通 グリッド上の 1 単位は canvas 上の 1 ピクセルに相当します。このグリッドの原点は<em>左上</em>の角 ( 座標 (0,0) ) に位置します。全ての要素がこの原点から相対的に配置されます。よって青い正方形の左上の場所は左から x ピクセル、上から y ピクセル (座標 (x,y) ) に来ます。このチュートリアルの後半で原点を他の位置へずらす方法、グリッドを回転したり、伸縮したりする方法を見ることになります。今はデフォルトで我慢しましょう。</p>
-
-<h2 id="Drawing_rectangles" name="Drawing_rectangles">矩形を描く</h2>
-
-<p>{{Glossary("SVG")}} とは異なり、{{HTMLElement("canvas")}} は 2 つの原始図形「矩形」「パス（複数の点が線によって結ばれている）」のみをサポートしています。他の全ての図形は 1 つ以上のパスを組み合わせて作らなくてはなりません。幸いなことに、パスを描く一連の関数があり、とても複雑な図形を作ることができます。</p>
-
-<p>最初に矩形を見ていきましょう。canvas に矩形を描く 3 つの関数があります:</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt>
- <dd>塗りつぶされた矩形を描きます。</dd>
- <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt>
- <dd>矩形の輪郭を描きます。</dd>
- <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt>
- <dd>指定された領域を消去し、完全な透明にします。</dd>
-</dl>
-
-<p>3 つの関数は同じパラメータをとります。<code>x</code> と <code>y</code> は矩形の左上の角の canvas 上での位置 (原点から相対的) を指定します。<code>width</code> と <code>height</code> は矩形のサイズを指定します。</p>
-
-<p>下は、前のページの <code>draw()</code> 関数ですが、この 3 つの関数を追加しました。</p>
-
-<h3 id="Rectangular_shape_example" name="Rectangular_shape_example">矩形の例</h3>
-
-<div class="hidden">
-<pre class="brush: html">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-
-<pre class="brush: js">function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.fillRect(25, 25, 100, 100);
-    ctx.clearRect(45, 45, 60, 60);
-    ctx.strokeRect(50, 50, 50, 50);
-  }
-}</pre>
-
-<p>結果は以下のように見えるはずです。</p>
-
-<div>{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</div>
-
-<p><code>fillRect()</code> 関数は 100x100 ピクセルの大きな黒色正方形を描きます。<code>clearRect()</code> 関数は中心から 60x60 ピクセルの正方形を取り除き、最後に <code>strokeRect()</code> が消去された正方形の中に 50x50 ピクセルの矩形の輪郭を描きます。</p>
-
-<p>後のページで <code>clearRect()</code> の代わりのメソッドを 2 つ見て、描く図形の色と輪郭のスタイルを変更する方法を見ます。</p>
-
-<p>次の節でみるパス関数と異なり、全ての 3 つの矩形関数は直ちに canvas に描きます。</p>
-
-<h2 id="Drawing_paths" name="Drawing_paths">パスを描く</h2>
-
-<p>パスについて見ていきましょう。パスは点のリストであり、それらは曲線かそうでない形状、およびさまざまな幅や色を設定可能な線分で結ばれます。パスやサブパスは、閉じることができます。パスを使って図形を描くには、 いくつかの余分な作業が必要です。</p>
-
-<ol>
- <li>始めに、パスを作成します。</li>
- <li>次に、パスへ描画するために<a href="/ja/docs/Web/API/CanvasRenderingContext2D#Paths">描画コマンド</a>を使用します。</li>
- <li>パスが作成されたら、描画するための stroke または fill を実行できます。</li>
-</ol>
-
-<p>これらのステップで使用する関数を以下に示します:</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt>
- <dd>新しいパスを作成します。パスを作成すると以降の描画コマンドは、そのパスを構築するために直接作用します。</dd>
- <dt><a href="/ja/docs/Web/API/CanvasRenderingContext2D#Paths">パスのメソッド</a></dt>
- <dd>オブジェクトのためにさまざまなパスを設定するメソッド群です。</dd>
- <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt>
- <dd>直線をパスに追加し、現在のサブパスの開始地点につなぎます。</dd>
- <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt>
- <dd>輪郭をなぞる方式で、図形を描きます。</dd>
- <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt>
- <dd>パスの内部エリアを塗りつぶして、単色の図形を描きます。</dd>
-</dl>
-
-<p>パスを作る最初の作業は <code>beginPath()</code> メソッドを呼び出すことです。内部では、パスは図形を一緒に作るサブパス (線、円弧など) のリストとして保存されます。このメソッドが呼び出される毎に、リストはリセットされ新しい図形を始めることができます。</p>
-
-<div class="note"><strong>注記:</strong> <code>beginPath()</code> を呼び出した直後や canvas を新規作成した直後など、現在のパスが空であるときに最初にパスを構築するコマンドは、実際は何であるかにかかわらず常に <code>moveTo()</code> として扱われます。このためパスをリセットした後はほぼ必ず、開始位置を明示することが必要になるでしょう。</div>
-
-<p>2 番目の作業は描かれる実際のパスを定義するメソッドを呼び出すことです。まもなくみることになります。</p>
-
-<p>3 番目は任意の作業ですが、<code>closePath()</code> メソッドを呼び出すことです。このメソッドは現在の点から始点に向けて直線を描くことで図形を閉じようとします。もし図形がすでに閉じられているかリストに点がひとつしかない場合はこの関数は何もしません。</p>
-
-<div class="note"><strong>注記:</strong> <code>fill()</code> メソッドが呼ばれるときは開いている図形は自動的に閉じられ、<code>closePath()</code> メソッドを使う必要はありません。これは、<code>stroke()</code> を呼び出すときは<strong>あてはまりません</strong>。</div>
-
-<h3 id="Drawing_a_triangle" name="Drawing_a_triangle">三角形の描画</h3>
-
-<p>単純な図形 (三角形) を描くコードはこのようになります。</p>
-
-<div class="hidden">
-<pre class="brush:html">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-
-<pre class="brush:js">function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.moveTo(75, 50);
-    ctx.lineTo(100, 75);
-    ctx.lineTo(100, 25);
-    ctx.fill();
-  }
-}</pre>
-
-<p>表示結果は以下の様になります。</p>
-
-<div>{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</div>
-
-<h3 id="Moving_the_pen" name="Moving_the_pen">ペンの移動</h3>
-
-<p>とても役に立つ関数である <code>moveTo()</code> は、自身は何も描画しませんが、上述のパスリストの一部になります。 1 枚の紙の上の 1 つの場所からペンか鉛筆を持ち上げてそれを次の場所に置くと考えるとよいでしょう。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt>
- <dd><code>x</code> と <code>y</code> で指定した座標に、ペンを移動します。</dd>
-</dl>
-
-<p>canvas が初期化されるか <code>beginPath()</code> メソッドが呼ばれたとき、ほとんどの場合 <code>moveTo()</code> メソッドを始点を他の場所に置くために使います。<code>moveTo()</code> メソッドを繋がっていないパスを描くために使うこともできます。下のスマイリーを見てください。</p>
-
-<p>これをあなた自身で試すには、以下のコードを使うことができます。さきほど見た <code>draw()</code> 関数に貼り付けるだけです。</p>
-
-<div class="hidden">
-<pre class="brush: html">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-
-<pre class="brush: js;highlight:[8,10,12]">function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 外の円
-    ctx.moveTo(110, 75);
-    ctx.arc(75, 75, 35, 0, Math.PI, false);  // 口 (時計回り)
-    ctx.moveTo(65, 65);
-    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左目
-    ctx.moveTo(95, 65);
-    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右目
-    ctx.stroke();
-  }
-}</pre>
-
-<p>表示結果は以下の様になります。</p>
-
-<p>{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
-
-<p>繋がっている線を見るには <code>moveTo()</code> メソッドを取り除いてください。</p>
-
-<div class="note"><strong>注記</strong>: <code>arc()</code> 関数とそのパラメータの解説は {{anch("Arcs","円弧")}} の節をご覧下さい。</div>
-
-<h3 id="Lines" name="Lines">線</h3>
-
-<p>直線を描くには <code>lineTo()</code> メソッドを使います。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt>
- <dd>現在の描画位置から <code>x</code> と <code>y</code> で指定した位置に、線を描きます。</dd>
-</dl>
-
-<p>このメソッドは 2 つの引数 <code>x</code> と <code>y</code> を取ります。それらは線の終点の座標です。始点は前回のパスに依存します。前回のパスの終点が始点になる、など。始点は <code>moveTo()</code> メソッドを使って変更することもできます。</p>
-
-<p>次の例では 2 つの三角形が描かれています。 1 つは塗られ、もう 1 つは輪郭線が描かれています。</p>
-
-<div class="hidden">
-<pre class="brush: html">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-
-<pre class="brush: js;highlight[9,10,16,17]">function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    // Filled triangle
-    ctx.beginPath();
-    ctx.moveTo(25, 25);
-    ctx.lineTo(105, 25);
-    ctx.lineTo(25, 105);
-    ctx.fill();
-
-    // Stroked triangle
-    ctx.beginPath();
-    ctx.moveTo(125, 125);
-    ctx.lineTo(125, 45);
-    ctx.lineTo(45, 125);
-    ctx.closePath();
-    ctx.stroke();
-  }
-}
-</pre>
-
-<p>最初に新しい図形のパスを始めるために <code>beginPath()</code> メソッドが呼ばれています。次に 始点を望む位置に移動するために <code>moveTo()</code> メソッドが呼ばれています。三角形の 両側の辺を作る 2 つの線が描かれています。</p>
-
-<div>{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</div>
-
-<div></div>
-
-<p>あなたは塗られた三角形と輪郭線の描かれたものとの違いに気がつくでしょう。上で述べたように、これはパスが塗られる( fill される) と図形は自動的に閉じられ、stroke されるときはそうでないからです。輪郭の描かれた三角形で <code>closePath()</code> を行わないと 2 つの線しか描かれず、三角形は完成しません。</p>
-
-<h3 id="Arcs" name="Arcs">円弧</h3>
-
-<p>円弧や円を描くために <code>arc()</code> または <code>arcTo()</code> メソッドを使います。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt>
- <dd><em>(x, y)</em> を中心の位置、<em>radius</em> を半径、<em>startAngle</em> を開始角度、<em>endAngle</em> を終了角度、<em>anticlockwise</em> を方向 (デフォルトは時計回り) とする円弧を描きます。</dd>
- <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt>
- <dd>指定した制御点と半径によって円弧を描き、その前の描画位置と直線で接続します。</dd>
-</dl>
-
-<p><code>arc</code> メソッドを詳しく見ていきましょう。このメソッドは 6 つのパラメーターをとります。<code>x</code> と <code>y</code> は、円弧を描く円の中心座標です。<code>radius</code> はそのまま、半径です。<code>startAngle</code> と <code>endAngle</code> パラメーターは円弧の始まりと終わりをラジアンで定義します。始まりと終わりの角度は x 軸から計算します。<code>anticlockwise</code> パラメーターは <code>true</code> の時には円弧を反時計回りに、それ以外は時計回りの方向に描くブーリアン値です。</p>
-
-<div class="note">
-<p><strong>注記</strong>: <code>arc</code> 関数の角度は度ではなく、ラジアンで計算されます。度からラジアンに変換するには以下の JavaScript 式を使うことができます : <code>radians = (Math.PI/180)*degrees</code></p>
-</div>
-
-<p>以下の例は上で見てきた例よりすこし複雑です。全て異なる角度と塗り方で 12 の異なる円弧を描きます。</p>
-
-<p>2 つの <a href="/ja/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> ループ</a>は円弧の行と列のループです。全ての円弧毎に <code>beginPath()</code> を使って新しいパスを始めます。コードの中で、次に何が行われているか読みやすくするために全てのパラメーターを変数として書きましたが、いつもこのようにする必要はありません。</p>
-
-<p><code>x</code> と <code>y</code> 座標は充分明確です。<code>radius</code> と <code>startAngle</code> は固定です。<code>endAngle</code> は最初の列が 180 度 (半円) から始まって、最後の列で完全な円を作るように 90 度ずつ増加します。</p>
-
-<p><code>clockwise</code> パラメーターの文は最初と 3 番目の列では時計回りの円弧として 2 番目と 4 番目の列では反時計回りの円弧という結果になります。最後に、<code>if</code> 文は上半分は輪郭を描画された円弧を、下半分は塗られた円弧を作ります。</p>
-
-<div class="note">
-<p><strong>注記:</strong> この例では、ほかの例より若干大きなサイズである 150 x 200 ピクセルの canvas が必要です。</p>
-</div>
-
-<div class="hidden">
-<pre class="brush: html">&lt;html&gt;
-  &lt;body onload="draw();"&gt;
-    &lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-
-<pre class="brush: js;highlight[16]">function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    for (var i = 0;i &lt; 4;i++) {
-      for(var j = 0;j &lt; 3;j++) {
-        ctx.beginPath();
-        var x = 25 + j * 50; // x 座標
-        var y = 25 + i * 50; // y 座標
-        var radius = 20; // 円弧の半径
-        var startAngle = 0; // 円孤の始点
-        var endAngle = Math.PI + (Math.PI * j) / 2; // 円孤の終点
-        var anticlockwise = i % 2 !== 0; // 時計回りまたは反時計回り
-
-        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-
-        if (i &gt; 1){
-          ctx.fill();
-        } else {
-          ctx.stroke();
-        }
-      }
-    }
-  }
-}
-</pre>
-
-<div>{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</div>
-
-<h3 id="Bezier_and_quadratic_curves" name="Bezier_and_quadratic_curves">ベジェと二次曲線</h3>
-
-<p>次に見ていく種類のパスは<a href="https://ja.wikipedia.org/wiki/ベジェ曲線" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">ベジェ曲線</a>です。三次および二次の種類が利用可能です。通常複雑な自然の図形を描くのに使われます。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt>
- <dd>現在のペンの位置から <code>x</code> および <code>y</code> で指定した終端へ、<code>cp1x</code> および <code>cp1y</code> で指定した制御点を使用して二次ベジェ曲線を描きます。</dd>
- <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt>
- <dd>現在のペンの位置から <code>x</code> および <code>y</code> で指定した終端へ、(<code>cp1x</code>, <code>cp1y</code>) および (<code>cp2x</code>, <code>cp2y</code>) で指定した制御点を使用して三次ベジェ曲線を描きます。</dd>
-</dl>
-
-<p><img src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">これらの違いは右の画像を使うことで説明することができます。二次ベジェ曲線は始点と終点 (青い点) と 1 つの<strong>制御点</strong> (赤い点) を持つのに対して、三次ベジェ曲線は 2 つの制御点を持ちます。</p>
-
-<p>それらのメソッドの両方の <code>x</code> と <code>y</code> パラメータは終点の座標です。<code>cp1x</code> と <code>cp1y</code> は最初の制御点、<code>cp2x</code> と <code>cp2y</code> は 2 番目の制御点の座標です。</p>
-
-<p>Adobe Illustrator のようなベクタードローイングソフトとは違い、何をやっているのかの直接の視覚的フィードバックが得られないので、二次および三次ベジェ曲線を使うことはとても挑戦的です。このことは複雑な図形を描くことをとても難しくします。以下の例で、いくつかの単純で基本的な図形を描きます、しかしもしあなたに時間と特に忍耐があればはるかに複雑な図形を作ることができます。</p>
-
-<p>これらの例で非常に難しいものは何もありません。 どちらの場合も、最終的に描かれた一連の曲線が完全な図形となるのを見ることになります。</p>
-
-<h4 id="Quadratic_Bezier_curves" name="Quadratic_Bezier_curves">二次ベジェ曲線</h4>
-
-<p>この例では、吹き出しをレンダリングするために複数の二次ベジェ曲線を使用しています。</p>
-
-<div class="hidden">
-<pre class="brush: html">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-
-<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // 二次曲線の例
-    ctx.beginPath();
-    ctx.moveTo(75, 25);
-    ctx.quadraticCurveTo(25, 25, 25, 62.5);
-    ctx.quadraticCurveTo(25, 100, 50, 100);
-    ctx.quadraticCurveTo(50, 120, 30, 125);
-    ctx.quadraticCurveTo(60, 120, 65, 100);
-    ctx.quadraticCurveTo(125, 100, 125, 62.5);
-    ctx.quadraticCurveTo(125, 25, 75, 25);
-    ctx.stroke();
-  }
-}
-</pre>
-
-<div>{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</div>
-
-<h4 id="Cubic_Bezier_curves" name="Cubic_Bezier_curves">三次ベジェ曲線</h4>
-
-<p>この例では、三次ベジェ曲線を使ってハートを描画します。</p>
-
-<div class="hidden">
-<pre class="brush: html">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-
-<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // 三次ベジェ曲線の例
-    ctx.beginPath();
-    ctx.moveTo(75, 40);
-    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
-    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
-    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
-    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
-    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
-    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
-    ctx.fill();
-  }
-}
-</pre>
-
-<div>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</div>
-
-<h3 id="Rectangles" name="Rectangles">矩形</h3>
-
-<p>canvas に直接矩形を描く例 ({{anch("Drawing rectangles","矩形を描く")}}) で見た 3 つのメソッドのほかに、開いているパスリストに矩形を追加する <code>rect()</code> メソッドがあります。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}</dt>
- <dd>(<code>x</code>, <code>y</code>) で指定した位置を左上の角にして、<code>width</code> および <code>height</code> で指定した幅および高さの矩形を描きます。</dd>
-</dl>
-
-<p>このメソッドが実行される前に、パラメーターに (x,y) を持った <code>moveTo()</code> メソッドが自動的に呼ばれます。すなわち、始点が標準の位置に置かれます。</p>
-
-<h3 id="Making_combinations" name="Making_combinations">組み合わせ</h3>
-
-<p>このページの全ての例で図形につき一種類のパス関数のみを使ってきました。しかし、図形を作るのに使用できるパスの種類の制限は一切ありません。そこで、この最後の例では非常に有名なゲームのキャラクタを作るために全てのパス関数を組み合わせてみましょう。</p>
-
-<div class="hidden">
-<pre class="brush: html">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-
-<pre class="brush:js">function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    roundedRect(ctx, 12, 12, 150, 150, 15);
-    roundedRect(ctx, 19, 19, 150, 150, 9);
-    roundedRect(ctx, 53, 53, 49, 33, 10);
-    roundedRect(ctx, 53, 119, 49, 16, 6);
-    roundedRect(ctx, 135, 53, 49, 33, 10);
-    roundedRect(ctx, 135, 119, 25, 49, 10);
-
-    ctx.beginPath();
-    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
-    ctx.lineTo(31, 37);
-    ctx.fill();
-
-    for (var i = 0;i &lt; 8;i++) {
-      ctx.fillRect(51 + i * 16, 35, 4, 4);
-    }
-
-    for(i = 0;i &lt; 6;i++) {
-      ctx.fillRect(115, 51 + i * 16, 4, 4);
-    }
-
-    for(i = 0;i &lt; 8;i++) {
-      ctx.fillRect(51 + i * 16, 99, 4, 4);
-    }
-
-    ctx.beginPath();
-    ctx.moveTo(83, 116);
-    ctx.lineTo(83, 102);
-    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
-    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
-    ctx.lineTo(111, 116);
-    ctx.lineTo(106.333, 111.333);
-    ctx.lineTo(101.666, 116);
-    ctx.lineTo(97, 111.333);
-    ctx.lineTo(92.333, 116);
-    ctx.lineTo(87.666, 111.333);
-    ctx.lineTo(83, 116);
-    ctx.fill();
-
-    ctx.fillStyle = 'white';
-    ctx.beginPath();
-    ctx.moveTo(91, 96);
-    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
-    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
-    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
-    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
-    ctx.moveTo(103, 96);
-    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
-    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
-    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
-    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
-    ctx.fill();
-
-    ctx.fillStyle = 'black';
-    ctx.beginPath();
-    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
-
-// 角丸の四角形を描画するためのユーティリティ関数
-
-function roundedRect(ctx, x, y, width, height, radius) {
-  ctx.beginPath();
-  ctx.moveTo(x, y + radius);
-  ctx.lineTo(x, y + height - radius);
-  ctx.arcTo(x, y + height, x + radius, y + height, radius);
-  ctx.lineTo(x + width - radius, y + height);
-  ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius);
-  ctx.lineTo(x + width, y + radius);
-  ctx.arcTo(x + width, y, x + width - radius, y, radius);
-  ctx.lineTo(x + radius, y);
-  ctx.arcTo(x, y, x, y + radius, radius);
-  ctx.stroke();
-}
-</pre>
-
-<p>以下の様な表示結果となります。</p>
-
-<div>{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</div>
-
-<p>これらは非常に単純な例ですので、詳細は割愛します。ポイントは <code>fillStyle</code> を使用している点と、独自関数 <code>roundedRect()</code> を定義している点です。この様に繰り返し利用する可能性のある処理を関数化しておくと、コード量を減らすことができます。</p>
-
-<p><code>fillStyle</code> の詳細についてはこのチュートリアルの後半で説明します。プロパティで、塗りの色を初期値の黒から白に、そしてもう一度黒に変更しています。</p>
-
-<h2 id="Path2D_objects" name="Path2D_objects">Path2D オブジェクト</h2>
-
-<p>最後の例で見たように、オブジェクトを描くための一連のパスや描画コマンドを、canvas に置くことができます。コードをシンプルにしてパフォーマンスを向上させるために最近のバージョンのブラウザで使用できる {{domxref("Path2D")}} オブジェクトは、描画コマンドをキャッシュあるいは記録することを可能にしています。これにより、パスをすばやく再実行できます。<code>Path2D</code> オブジェクトの構築方法を見ていきましょう:</p>
-
-<dl>
- <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
- <dd><code><strong>Path2D()</strong></code> コンストラクタは、新たにインスタンス化した <code>Path2D</code> オブジェクトを返します。任意で別のパス (コピーを作成)、あるいは <a href="/ja/docs/Web/SVG/Tutorial/Paths">SVG パス</a>データを構成する文字列を引数に指定できます。</dd>
-</dl>
-
-<pre class="brush: js">new Path2D();     // 空のパスオブジェクトを作成する
-new Path2D(path); // 別の Path2D オブジェクトを複製する
-new Path2D(d);    // SVG パスデータからパスを作成する</pre>
-
-<p>これまで見てきた <code>moveTo</code>、<code>rect</code>、<code>arc</code>、<code>quadraticCurveTo</code> など、あらゆる<a href="/ja/docs/Web/API/CanvasRenderingContext2D#Paths">パスメソッド</a>を <code>Path2D</code> オブジェクトで使用できます。</p>
-
-<p>また <code>Path2D</code> API には、パスを結合するための <code>addPath</code> メソッドが追加されています。これは、複数の部品を組み合わせてオブジェクトを構築したい場合などに役立ちます。</p>
-
-<dl>
- <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt>
- <dd>現在のパスに、変換行列 (任意指定) とともに、パスを追加します。</dd>
-</dl>
-
-<h3 id="Path2D_example" name="Path2D_example">Path2D の例</h3>
-
-<p>この例では、矩形と円を作成します。どちらも <code>Path2D</code> オブジェクトとして保存しており、後で使用することができます。新たな <code>Path2D</code> API に合わせて、いくつかのメソッドが現在のパスに代わり任意で <code>Path2D</code> を受け入れられるように更新されました。ここでは、canvas に両方のオブジェクトを描くため、1つの path 引数を <code>stroke</code> および <code>fill</code> で使用しています。</p>
-
-<div class="hidden">
-<pre class="brush: html">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="130" height="100"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-
-<pre class="brush: js;highlight[6,9]">function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    var rectangle = new Path2D();
-    rectangle.rect(10, 10, 50, 50);
-
-    var circle = new Path2D();
-    circle.moveTo(125, 35);
-    circle.arc(100, 35, 25, 0, 2 * Math.PI);
-
-    ctx.stroke(rectangle);
-    ctx.fill(circle);
-  }
-}
-</pre>
-
-<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
-
-<h3 id="Using_SVG_paths" name="Using_SVG_paths">SVG パスを使用する</h3>
-
-<p>canvas の新たな <code>Path2D</code> API の、もうひとつの強力な機能が、canvas でパスを初期化するために <a href="/ja/docs/Web/SVG/Tutorial/Paths">SVG パスデータ</a>を使用できることです。これにより、SVG と canvas の両方でパスデータを使い回すことができるでしょう。</p>
-
-<p>パスはある点に移動して (<code>M10 10</code>) 、そこから右へ水平に 80 ポイント移動 (<code>h 80</code>)、下へ 80 ポイント移動 (<code>v 80</code>) 、80ポイント 左へ移動 (<code>h -80</code>) 、そして始点へ戻ります (<code>z</code>)。この例は <a href="/ja/docs/Web/API/Path2D.Path2D#Using_SVG_paths"><code>Path2D</code> コンストラクタ</a>のページで確認できます。</p>
-
-<pre class="brush: js;">var p = new Path2D('M10 10 h 80 v 80 h -80 Z');</pre>
-
-<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
diff --git a/files/ja/web/guide/html/canvas_tutorial/finale/index.html b/files/ja/web/guide/html/canvas_tutorial/finale/index.html
deleted file mode 100644
index e28beb611e..0000000000
--- a/files/ja/web/guide/html/canvas_tutorial/finale/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: 最後に
-slug: Web/Guide/HTML/Canvas_tutorial/Finale
-tags:
-  - キャンバス
-  - グラウフィックス
-  - チュートリアル
-translation_of: Web/API/Canvas_API/Tutorial/Finale
----
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</div>
-
-<div class="summary">
-<p>おめでとう! <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>は終了です! ここでのナレッジはWebで2Dグラフィックスを作成する際に役立つでしょう。</p>
-</div>
-
-<h2 id="他の例とチュートリアル">他の例とチュートリアル</h2>
-
-<p>ここでは様々なデモや更なるcanvasについての例を紹介します。</p>
-
-<dl>
- <dt><a href="http://codepen.io/search?q=canvas">Codepen.io</a></dt>
- <dd>ブラウザ上のフロントエンドディベロッパー向けのプレイグラウンドとコードエディターです。</dd>
- <dt><a href="http://www.html5canvastutorials.com/">HTML5 Canvas Tutorials</a></dt>
- <dd>Canvas APIsの例です。</dd>
- <dt><a href="/en-US/docs/Games">Game development</a></dt>
- <dd>ゲームは最も人気な活動の一つです。標準に準拠したWebブラウザで実行できる、より良くより強力なゲームを開発するための新しい技術が定期的に登場しています。</dd>
-</dl>
-
-<h2 id="他の_Web_APIs">他の Web APIs</h2>
-
-<p>これらのAPIはcanvasとグラフィックスを更に動かす際におそらく使われます</p>
-
-<dl>
- <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
- <dd>複雑なグラフィックスや3Dを含んだレンダリングのためのアドバンスドなAPIです。</dd>
- <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
- <dd>スケーラブル・ベクター・グラフィックスを使用すると、スムーズなスケールを行うために描画されるサイズには関係なく、ベクター(ライン)とシェイプのセットとして画像を描画します。</dd>
- <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a></dt>
- <dd>WebAudioAPIは、Web上のオーディオを制御したり、ディベロッパーがオーディオのリソースを選択したり、エフェクトをオーディオに追加したり、オーディオ・ビジュアライザーを作成したり、空間的エフェクト(音響のような)を適用したり、他にも様々な処理を行うためのオーディオの多目的なシステムを提供します。</dd>
-</dl>
-
-<h2 id="質問">質問</h2>
-
-<dl>
- <dt><a href="http://stackoverflow.com/questions/tagged/canvas">Stackoverflow</a></dt>
- <dd>質問のタグは"canvas"となります。</dd>
- <dt><a href="/en-US/docs/MDN">Comments about this tutorial – the MDN documentation community</a></dt>
- <dd>このチュートリアルに対するコメントや感謝の言葉があるなら、是非我々に届けてほしいです。</dd>
-</dl>
-
-<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</p>
diff --git a/files/ja/web/guide/html/canvas_tutorial/index.html b/files/ja/web/guide/html/canvas_tutorial/index.html
deleted file mode 100644
index b84af866ef..0000000000
--- a/files/ja/web/guide/html/canvas_tutorial/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: canvas チュートリアル
-slug: Web/Guide/HTML/Canvas_tutorial
-tags:
-  - Canvas
-  - Graphics
-  - Guide
-  - HTML
-  - HTML5
-  - Intermediate
-  - Web
-translation_of: Web/API/Canvas_API/Tutorial
----
-<div>{{CanvasSidebar}}</div>
-
-<div><a href="/ja/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div>
-
-<div class="summary">
-<p><a href="/ja/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> 要素は、スクリプト (一般的に <a href="/ja/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>) を使って図形を描くために使われる新しい <a href="/ja/docs/Web/HTML" title="HTML">HTML</a> 要素です。例えば、グラフを描く、写真を合成する、または簡単な (または<a href="/ja/docs/Web/API/Canvas_API/A_basic_ray-caster" title="A_Basic_RayCaster">あまり簡単ではない</a>) アニメーションに使うことができます。このページの画像は後でこのチュートリアルの中でみる <a href="/ja/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> を実際に使った例です。</p>
-</div>
-
-<p><span class="seoSummary">このチュートリアルでは、2D グラフィックスを描画するために <code>&lt;canvas&gt;</code> 要素を使用する方法を、基礎から説明します。提供する例は、<code>&lt;canvas&gt;</code> で出来ることの、いくつかの明確なアイデアと、それをあなた自身のコンテンツで作成開始できるようなコードスニペットを提供します。</span></p>
-
-<p><code>&lt;canvas&gt;</code> は Apple によって OS X の Dashboard のために WebKit へ初めて導入され、後にブラウザーに実装されました。現在は、あらゆる主要ブラウザーがサポートしています。</p>
-
-<h2 id="Before_you_start" name="Before_you_start">始める前に</h2>
-
-<p><code>&lt;canvas&gt;</code> を使うことはそれほど難しくはありませんが、<a href="/ja/docs/Web/HTML">HTML</a> と <a href="/ja/docs/Web/JavaScript">JavaScript</a> の基本的な理解が必要です。一部の古いブラウザーは <code>&lt;canvas&gt;</code> 要素をサポートしていませんが、最近のバージョンの主要ブラウザーはすべてサポートしています。canvas のデフォルトのサイズは、300 px × 150 px (幅 × 高さ) です。しかし、HTML の <code>height</code> および <code>width</code> プロパティを使用して、独自のサイズを定義することができます。canvas にグラフィックスを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをオンザフライで生成します。</p>
-
-<h2 id="In_this_tutorial" name="In_this_tutorial">チュートリアル</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="HTML/Canvas/Tutorial/Basic_usage">基本的な使い方</a></li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="HTML/Canvas/Tutorial/Drawing_shapes">図形を描く</a></li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="HTML/Canvas/Tutorial/Applying_styles_and_colors">スタイルと色を適用する</a></li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text">文字の描画</a></li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Using_images" title="HTML/Canvas/Tutorial/Using_images">画像を使う</a></li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Transformations" title="HTML/Canvas/Tutorial/Transformations">変形</a></li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Compositing" title="HTML/Canvas/Tutorial/Compositing">合成とクリッピング</a></li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="HTML/Canvas/Tutorial/Basic_animations">基本的なアニメーション</a></li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">高度なアニメーション</a></li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">ピクセル操作</a></li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">ヒット領域とアクセシビリティ</a></li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML/Canvas/Tutorial/Optimizing_canvas">canvas を最適化する</a></li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Finale">最後に</a></li>
-</ul>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas トピックのページ</a></li>
- <li><a href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li>
- <li><a href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li>
-</ul>
-
-<h2 id="A_note_to_contributors" name="A_note_to_contributors">貢献者への注記</h2>
-
-<p>2013 年 6 月 17 日の週に発生した不運な技術的エラーにより、すべての過去の貢献者の属性を含む、このチュートリアルの履歴情報が失われました。この問題についておわびするとともに、この不運な事故を容赦願います。</p>
-
-<div>{{Next("Web/API/Canvas_API/Tutorial/Basic_usage")}}</div>
diff --git a/files/ja/web/guide/html/canvas_tutorial/optimizing_canvas/index.html b/files/ja/web/guide/html/canvas_tutorial/optimizing_canvas/index.html
deleted file mode 100644
index 0975cec653..0000000000
--- a/files/ja/web/guide/html/canvas_tutorial/optimizing_canvas/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: canvas の最適化
-slug: Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas
-tags:
-  - Advanced
-  - Canvas
-  - Graphics
-  - HTML
-  - HTML5
-  - Tutorial
-translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
----
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div>
-
-<div class="summary">
-<p>{{HTMLElement("canvas")}} 要素は、ウェブで 2D グラフィックスを描画するためにもっとも広く使用されているツールのひとつです。しかし、ウェブサイトやアプリが Canvas API の限界付近まで使用するようになって、パフォーマンスが悪化するようになりました。<span class="seoSummary">この記事では、 canvas 要素の使用を最適化して、グラフィックを確実に改善するための提案を行います。</span></p>
-</div>
-
-<h2 id="Performance_tips" name="Performance_tips">パフォーマンスに関する TIPS</h2>
-
-<p>キャンバスのパフォーマンスを向上させるための TIPS 集を以下に掲載します。</p>
-
-<h3 id="Pre-render_similar_primitives_or_repeating_objects_on_an_offscreen_canvas" name="Pre-render_similar_primitives_or_repeating_objects_on_an_offscreen_canvas">同様のプリミティブや繰り返し使用するオブジェクトをオフスクリーン canvas で事前にレンダリングする</h3>
-
-<p>アニメーションフレーム毎に同じ描画操作を繰り返していることに気づいたら、あらかじめオフスクリーンキャンバスに描画しておくことを検討しましょう。そして、必要な時に本来のキャンバスにオフスクリーン画像を、最初の場所で生成したときのステップなしで描画することができます。</p>
-
-<pre class="brush: js">myCanvas.offscreenCanvas = document.createElement('canvas');
-myCanvas.offscreenCanvas.width = myCanvas.width;
-myCanvas.offscreenCanvas.height = myCanvas.height;
-
-myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);
-</pre>
-
-<h3 id="Avoid_floating-point_coordinates_and_use_integers_instead" name="Avoid_floating-point_coordinates_and_use_integers_instead">浮動小数点数値の座標を避けて整数を使用する</h3>
-
-<p>canvas で整数以外の値を使用してオブジェクトを描画すると、サブピクセルレンダリングを実行します。</p>
-
-<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5);
-</pre>
-
-<p>これはアンチエイリアス効果を生成するために、ブラウザーに追加の計算処理を強制します。これを避けるために、たとえば {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} を呼び出す際に {{jsxref("Math.floor()")}} を使用して、すべての座標で端数処理を行ってください。</p>
-
-<h3 id="Don’t_scale_images_in_drawImage" name="Don’t_scale_images_in_drawImage"><code>drawImage</code> で画像のスケーリングを行わない</h3>
-
-<p>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} でいつも画像のスケーリング処理を行うのではなく、さまざまなサイズの画像をオフスクリーン canvas でキャッシュしてください。</p>
-
-<h3 id="Use_multiple_layered_canvases_for_complex_scenes" name="Use_multiple_layered_canvases_for_complex_scenes">複雑なシーンでは複数レイヤーの canvas を使用する</h3>
-
-<p>アプリケーションでは、一部のオブジェクトは頻繁に動かしたり変更したりする必要があるのに対し、他のものは比較的静止していることが分かるかもしれません。この場合に可能な最適化は、複数の <code>&lt;canvas&gt;</code> 要素を使用してアイテムをレイヤー化することです。</p>
-
-<p>例えば、 UI があるゲームが最上位にあり、中間にゲームプレイの動作があり、最下位に静止した背景があるとします。この場合、ゲームを３つの <code>&lt;canvas&gt;</code> レイヤーに分割することができます。 UI はユーザーの入力のみに基づいて変化し、ゲームプレイレイヤーはフレーム毎に変化し、背景は基本的に変化しないままでいます。</p>
-
-<pre class="brush: html">&lt;div id="stage"&gt;
-  &lt;canvas id="ui-layer" width="480" height="320"&gt;&lt;/canvas&gt;
-  &lt;canvas id="game-layer" width="480" height="320"&gt;&lt;/canvas&gt;
-  &lt;canvas id="background-layer" width="480" height="320"&gt;&lt;/canvas&gt;
-&lt;/div&gt;
-
-&lt;style&gt;
-  #stage {
-    width: 480px;
-    height: 320px;
-    position: relative;
-    border: 2px solid black;
-  }
-
-  canvas { position: absolute; }
-  #ui-layer { z-index: 3; }
-  #game-layer { z-index: 2; }
-  #background-layer { z-index: 1; }
-&lt;/style&gt;
-</pre>
-
-<h3 id="Use_plain_CSS_for_large_background_images" name="Use_plain_CSS_for_large_background_images">大きな背景画像に CSS を使用する</h3>
-
-<p>静止した背景画像がある場合は、ただの {{HTMLElement("div")}} に CSS の {{cssxref("background")}} プロパティを使用し、 canvas の下に配置することで描画することができます。これにより、大きな画像を毎回 canvas に描画する処理を避けます。</p>
-
-<h3 id="Scaling_canvas_using_CSS_transforms" name="Scaling_canvas_using_CSS_transforms">CSS transforms を使用して canvas をスケーリングする</h3>
-
-<p><a href="/ja/docs/Web/Guide/CSS/Using_CSS_transforms">CSS 変形</a> は、 GPU を使用しますのでより高速です。もっともよいのは拡大縮小しないことですが、そうでなければ大きな canvas を縮小するよりも小さな canvas を拡大したほうが良好です。</p>
-
-<pre class="brush: js">var scaleX = window.innerWidth / canvas.width;
-var scaleY = window.innerHeight / canvas.height;
-
-var scaleToFit = Math.min(scaleX, scaleY);
-var scaleToCover = Math.max(scaleX, scaleY);
-
-stage.style.transformOrigin = '0 0'; //scale from top left
-stage.style.transform = 'scale(' + scaleToFit + ')';
-</pre>
-
-<h3 id="Turn_off_transparency" name="Turn_off_transparency">透過をやめる</h3>
-
-<p>アプリケーションが canvas を使用していて背後のものを透過させる必要がない場合は、 {{domxref("HTMLCanvasElement.getContext()")}} で描画コンテキストを生成する際に <code>alpha</code> オプションを <code>false</code> に設定しましょう。この情報を使用してブラウザーが描画を最適化する可能性があります。</p>
-
-<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre>
-
-<h3 id="More_tips" name="More_tips">その他の TIPS</h3>
-
-<ul>
- <li>canvas の呼び出しをひとまとめにします。たとえば、複数に分割した線分ではなくポリラインを描画します。</li>
- <li>不必要な canvas の状態変更を避けます。</li>
- <li>新しい状態の全体を描画せずに、スクリーンの差分だけを描画します。</li>
- <li>可能な限り {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} プロパティを避けます。</li>
- <li>可能な限り <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text">テキストレンダリング</a> を避けます。</li>
- <li>canvas をクリアーする別の方法を試します ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} 対 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 対 canvas のリサイズ)</li>
- <li>アニメーションで {{domxref("window.setInterval()")}} の代わりに {{domxref("window.requestAnimationFrame()")}} を使用します。</li>
- <li>高負荷な物理演算ライブラリーに注意してください。</li>
-</ul>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li>
- <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li>
-</ul>
-
-<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p>
diff --git a/files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html b/files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html
deleted file mode 100644
index 33e9ef3e21..0000000000
--- a/files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html
+++ /dev/null
@@ -1,264 +0,0 @@
----
-title: Canvas とピクセル操作
-slug: Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas
-tags:
-  - Canvas
-  - Graphics
-  - Intermediate
-  - Tutorial
-translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
----
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</div>
-
-<div class="summary">
-<p>これまで、canvas の実際のピクセルは見てきませんでした。<code>ImageData</code> オブジェクトを使用して、ピクセルデータを操作するためにデータ配列へ直接読み取りや書き込みを行うことが可能です。また、画像のスムージング (アンチエイリアシング) の制御方法や canvas の画像を保存する方法も見ていきます。</p>
-</div>
-
-<h2 id="The_ImageData_object" name="The_ImageData_object"><code>ImageData</code> オブジェクト</h2>
-
-<p>{{domxref("ImageData")}} オブジェクトは、canvas オブジェクトの領域にあるピクセルデータを表します。これは以下の読み取り専用プロパティを持ちます:</p>
-
-<dl>
- <dt><code>width</code></dt>
- <dd>画像の幅をピクセル数で表します。</dd>
- <dt><code>height</code></dt>
- <dd>画像の高さをピクセル数で表します。</dd>
- <dt><code>data</code></dt>
- <dd><code>0</code> から <code>255</code> の間の (両端の値を含む) 整数データを RGBA の順で収めた一次元配列を表す {{jsxref("Uint8ClampedArray")}} です。</dd>
-</dl>
-
-<p><code>data</code> プロパティは、生のピクセルデータを参照するためにアクセス可能な {{jsxref("Uint8ClampedArray")}} を返します。それぞれのピクセルは 4 つの 1 バイト値 (赤、緑、青、アルファの順、すなわち "RGBA" 形式) で表します。また、それぞれの色成分は 0 から 255 の間の整数で表します。さらに、それぞれの成分は配列内で連続した添字が割り当てられており、左上のピクセルの赤色成分が配列の添え字 0 になります。配列の中でピクセルは左から右へ進み、さらに下へと進んでいきます。</p>
-
-<p>{{jsxref("Uint8ClampedArray")}} は <code>height</code> × <code>width</code> × 4 バイトのデータがあり、添字の範囲は 0 から (<code>height</code>×<code>width</code>×4)-1 になります。</p>
-
-<p>例えば画像の 50 行目の 200 列目にあるピクセルから青色成分の値を読み取るには、以下のようにします:</p>
-
-<pre class="brush: js">blueComponent = imageData.data[((50*(imageData.width*4)) + (200*4)) + 2];</pre>
-
-<p><code>Uint8ClampedArray.length</code> 属性を読み取ると、ピクセル配列のサイズをバイト数で知ることができます:</p>
-
-<pre class="brush: js">var numBytes = imageData.data.length;
-</pre>
-
-<h2 id="Creating_an_ImageData_object" name="Creating_an_ImageData_object"><code>ImageData</code> オブジェクトを作成する</h2>
-
-<p>新たに空の <code>ImageData</code> オブジェクトを作成するには、{{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} メソッドを使用します。<code>createImageData()</code> メソッドは 2 種類の形式があります:</p>
-
-<pre class="brush: js">var myImageData = ctx.createImageData(width, height);</pre>
-
-<p>これは、特定の寸法の新たな <code>ImageData</code> オブジェクトを作成します。すべてのピクセルは透明な黒色に設定されます。</p>
-
-<p><code>anotherImageData</code> で指定したオブジェクトと同じ寸法の、新たな <code>ImageData</code> オブジェクトを作成することもできます。新しいオブジェクトのピクセルは、すべて透明な黒色に設定されます。<strong>画像データはコピーされません!</strong></p>
-
-<pre class="brush: js">var myImageData = ctx.createImageData(anotherImageData);</pre>
-
-<h2 id="Getting_the_pixel_data_for_a_context" name="Getting_the_pixel_data_for_a_context">コンテキストのピクセルデータを取得する</h2>
-
-<p>canvas コンテキストのピクセルデータの複製を持つ <code>ImageData</code> オブジェクトを取得するには、<code>getImageData()</code> メソッドを使用します:</p>
-
-<pre class="brush: js">var myImageData = ctx.getImageData(left, top, width, height);</pre>
-
-<p>このメソッドは (<code>left</code>,<code>top</code>)、(<code>left+width</code>, <code>top</code>)、(<code>left</code>, <code>top+height</code>)、(<code>left+width</code>, <code>top+height</code>) の点で四隅を表した canvas の領域のピクセルデータを表す <code>ImageData</code> オブジェクトを返します。点の座標は、canvas の座標空間の単位で指定します。</p>
-
-<div class="note">
-<p><strong>注記</strong>: 返される <code>ImageData</code> オブジェクトで、canvas の外部にあるピクセルはすべて透明な黒色になります。</p>
-</div>
-
-<p>このメソッドは、<a href="/ja/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a> の記事でも説明しています。</p>
-
-<h3 id="A_color_picker" name="A_color_picker">カラーピッカー</h3>
-
-<p>この例では、マウスカーソルの下にある色を表示するために <a href="/ja/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData()</a> メソッドを使用しています。ここでは現在のマウスカーソルの位置を <code>layerX</code> と <code>layerY</code> で求めて、<a href="/ja/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData()</a> が提供するピクセル配列で該当位置のピクセルデータを探します。最後に、色を表示するための <code>&lt;div&gt;</code> で背景色とテキストを設定するために、配列データを使用します。</p>
-
-<div class="hidden">
-<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227" style="float:left"&gt;&lt;/canvas&gt;
-&lt;div id="color" style="width:200px;height:50px;float:left"&gt;&lt;/div&gt;
-</pre>
-</div>
-
-<pre class="brush: js;">var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-img.onload = function() {
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-};
-var color = document.getElementById('color');
-function pick(event) {
-  var x = event.layerX;
-  var y = event.layerY;
-  var pixel = ctx.getImageData(x, y, 1, 1);
-  var data = pixel.data;
-  var rgba = 'rgba(' + data[0] + ',' + data[1] +
-             ',' + data[2] + ',' + (data[3] / 255) + ')';
-  color.style.background =  rgba;
-  color.textContent = rgba;
-}
-canvas.addEventListener('mousemove', pick);
-</pre>
-
-<p>{{EmbedLiveSample('A_color_picker', 610, 240)}}</p>
-
-<h2 id="Painting_pixel_data_into_a_context" name="Painting_pixel_data_into_a_context">コンテキストにピクセルデータを描く</h2>
-
-<p><a href="/ja/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a> メソッドを使用して、コンテキストにピクセルデータを描くことができます:</p>
-
-<pre class="brush: js">ctx.putImageData(myImageData, dx, dy);
-</pre>
-
-<p>引数 <code>dx</code> と <code>dy</code> は、描画したいピクセルデータの左上の隅を描く位置を、コンテキストのデバイス座標で示します。</p>
-
-<p>例えば <code>myImageData</code> が表す画像全体をコンテキストの左上の隅から描くには、単純に以下のようにします:</p>
-
-<pre class="brush: js">ctx.putImageData(myImageData, 0, 0);
-</pre>
-
-<h3 id="Grayscaling_and_inverting_colors" name="Grayscaling_and_inverting_colors">色のグレースケール化と反転</h3>
-
-<p>この例ではすべてのピクセルの値を変更するためにイテレートを行って、<a href="/ja/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a> を使用して変更後のピクセル配列を canvas に書き戻しています。invert 関数は、単純に最大値の 255 からそれぞれの色の値を減算します。grayscale 関数は、単純に赤、緑、青の平均値を使用します。また、例えば <code>x = 0.299r + 0.587g + 0.114b</code> といった式による加重平均も使用できます。詳しくは Wikipedia の <a href="http://en.wikipedia.org/wiki/Grayscale">Grayscale</a> (<a href="https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB">日本語版</a>) をご覧ください。</p>
-
-<div class="hidden">
-<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
-&lt;div&gt;
-  &lt;input id="grayscalebtn" value="グレースケール" type="button"&gt;
-  &lt;input id="invertbtn" value="反転" type="button"&gt;
-&lt;/div&gt;
-</pre>
-</div>
-
-<pre class="brush: js">var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-img.onload = function() {
-  draw(this);
-};
-
-function draw(img) {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-  var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
-  var data = imageData.data;
-
-  var invert = function() {
-    for (var i = 0; i &lt; data.length; i += 4) {
-      data[i]     = 255 - data[i];     // red
-      data[i + 1] = 255 - data[i + 1]; // green
-      data[i + 2] = 255 - data[i + 2]; // blue
-    }
-    ctx.putImageData(imageData, 0, 0);
-  };
-
-  var grayscale = function() {
-    for (var i = 0; i &lt; data.length; i += 4) {
-      var avg = (data[i] + data[i +1] + data[i +2]) / 3;
-      data[i]     = avg; // red
-      data[i + 1] = avg; // green
-      data[i + 2] = avg; // blue
-    }
-    ctx.putImageData(imageData, 0, 0);
-  };
-
-  var invertbtn = document.getElementById('invertbtn');
-  invertbtn.addEventListener('click', invert);
-  var grayscalebtn = document.getElementById('grayscalebtn');
-  grayscalebtn.addEventListener('click', grayscale);
-}
-</pre>
-
-<p>{{EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270)}}</p>
-
-<h2 id="Zooming_and_anti-aliasing" name="Zooming_and_anti-aliasing">ズームとアンチエイリアシング</h2>
-
-<p>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} メソッド、第 2 の canvas、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} プロパティの力を借りて、画像をズームアップして詳しく見ることができます。</p>
-
-<p>マウスカーソルの位置を取得して、そこから上下左右に 5 ピクセルの範囲の画像を切り取ります。そして切り取った画像を別の canvas にコピーして、望むサイズにリサイズします。ズーム用の canvas では、元の canvas から切り取った 10×10 ピクセルの画像を 200×200 ピクセルにリサイズしています。</p>
-
-<pre class="brush: js">zoomctx.drawImage(canvas,
-                  Math.abs(x - 5), Math.abs(y - 5),
-                  10, 10, 0, 0, 200, 200);</pre>
-
-<p>アンチエイリアシングはデフォルトで有効ですので、ピクセルをはっきりさせるためにスムージングを無効化したいと考えるかもしれません。チェックボックスを切り替えると、<code>imageSmoothingEnabled</code> プロパティ (さまざまなブラウザ向けに接頭辞が必要です) の効果を確認できます。</p>
-
-<h6 class="hidden" id="Zoom_example" name="Zoom_example">ズームの例</h6>
-
-<div class="hidden">
-<pre class="brush: html;">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
-&lt;canvas id="zoom" width="300" height="227"&gt;&lt;/canvas&gt;
-&lt;div&gt;
-&lt;label for="smoothbtn"&gt;
-  &lt;input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"&gt;
-  画像のスムージングを有効にする
-&lt;/label&gt;
-&lt;/div&gt;
-</pre>
-</div>
-
-<pre class="brush: js">var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-img.onload = function() {
-  draw(this);
-};
-
-function draw(img) {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-  var zoomctx = document.getElementById('zoom').getContext('2d');
-
-  var smoothbtn = document.getElementById('smoothbtn');
-  var toggleSmoothing = function(event) {
-    zoomctx.imageSmoothingEnabled = this.checked;
-    zoomctx.mozImageSmoothingEnabled = this.checked;
-    zoomctx.webkitImageSmoothingEnabled = this.checked;
-    zoomctx.msImageSmoothingEnabled = this.checked;
-  };
-  smoothbtn.addEventListener('change', toggleSmoothing);
-
-  var zoom = function(event) {
-    var x = event.layerX;
-    var y = event.layerY;
-    zoomctx.drawImage(canvas,
-                      Math.abs(x - 5),
-                      Math.abs(y - 5),
-                      10, 10,
-                      0, 0,
-                      200, 200);
-  };
-
-  canvas.addEventListener('mousemove', zoom);
-}</pre>
-
-<p>{{EmbedLiveSample('Zoom_example', 620, 490)}}</p>
-
-<h2 id="Saving_images" name="Saving_images">画像を保存する</h2>
-
-<p>{{domxref("HTMLCanvasElement")}} は、画像を保存する際に役に立つ <code>toDataURL()</code> メソッドを提供します。これは、引数 <code>type</code> で指定した形式 (既定値は <a class="external external-icon" href="https://ja.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>) で表した画像を持つ <a href="/ja/docs/Web/HTTP/data_URIs">data URI</a> を返します。返される画像の解像度は 96 dpi です。</p>
-
-<dl>
- <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}</dt>
- <dd>既定の設定。PNG 画像を作成します。</dd>
- <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}</dt>
- <dd>JPG 画像を作成します。オプションで、品質を 0 から 1 の範囲で指定できます。1 は最高品質、0 はほとんど見分けがつかなくなりますがファイルサイズを小さくできます。</dd>
-</dl>
-
-<p>canvas から生成した data URI は、例えば任意の {{HTMLElement("image")}} のソースとして使用したり、ディスクに保存するために <a href="/ja/docs/Web/HTML/Element/a#attr-download">download 属性</a>を持つハイパーリンクに投入することができます。</p>
-
-<p>また、canvas から {{domxref("Blob")}} を生成することもできます。</p>
-
-<dl>
- <dt>{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}</dt>
- <dd>canvas に含まれる画像を表す <code>Blob</code> オブジェクトを作成します。</dd>
-</dl>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("ImageData")}}</li>
- <li><a href="/ja/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></li>
- <li><a href="https://codepo8.github.io/canvas-images-and-pixels/">Canvas, images and pixels – by Christian Heilmann</a></li>
-</ul>
-
-<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</div>
diff --git a/files/ja/web/guide/html/canvas_tutorial/transformations/index.html b/files/ja/web/guide/html/canvas_tutorial/transformations/index.html
deleted file mode 100644
index 066b5d2b84..0000000000
--- a/files/ja/web/guide/html/canvas_tutorial/transformations/index.html
+++ /dev/null
@@ -1,282 +0,0 @@
----
-title: Transformations
-slug: Web/Guide/HTML/Canvas_tutorial/Transformations
-tags:
-  - Canvas
-  - Graphics
-  - Guide
-  - HTML
-  - HTML5
-  - Intermediate
-  - Web
-translation_of: Web/API/Canvas_API/Tutorial/Transformations
----
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div>
-
-<div class="summary">これまでのチュートリアルで、<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">canvas のグリッド</a>や<strong>座標空間</strong>について学びました。今まではデフォルトのグリッドしか使用しておらず、また必要に応じて canvas 全体のサイズを変更していました。変換 (transformations) には、元の canvas を別の場所に移す、回転する、拡大縮小するといった、より強力な手段があります。</div>
-
-<h2 id="Saving_and_restoring_state" name="Saving_and_restoring_state">状態を保存および復元する</h2>
-
-<p>変換のメソッドを見ていく前に、より複雑な描画を始めたときに不可欠になメソッドを 2 つ見ておきましょう。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt>
- <dd>canvas 全体の状態を保存します。</dd>
- <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt>
- <dd>直近に保存した canvas の状態を復元します。</dd>
-</dl>
-
-<p>canvas の状態は、スタックに保存されます。<code>save()</code> メソッドを呼び出すたびに、現在の描画状態をスタックにプッシュします。描画状態は以下の情報で構成されます:</p>
-
-<ul>
- <li>適用された変換操作 (すなわち、後述する <code>translate</code>、<code>rotate</code>、<code>scale</code>)。</li>
- <li>以下の属性の、現在の値: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}、{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}、{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}、{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}、{{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}、{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}、{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}、{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}、{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}、{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}、{{domxref("CanvasRenderingContext2D.font", "font")}}、{{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}、{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}、{{domxref("CanvasRenderingContext2D.direction", "direction")}}、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}</li>
- <li>現在の<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths">クリッピングパス</a>。これは次の章で説明します。</li>
-</ul>
-
-<p><code>save()</code> メソッドは、何回でも呼び出すことができます。<code>restore()</code> メソッドを呼び出すたびに、最後に保存された状態をスタックからポップして、すべての保存済み設定を復元します。</p>
-
-<h3 id="A_save_and_restore_canvas_state_example" name="A_save_and_restore_canvas_state_example"><code>save</code> および <code>restore</code> の例</h3>
-
-<p>この例は、連続した矩形のセットを描画するときに、描画状態のスタックがどのように機能するかを示します。</p>
-
-<pre class="brush: js; highlight:[5,10,15,18]">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.fillRect(0,0,150,150);   // 既定の設定で矩形を描画
-  ctx.save();                  // 既定の状態を保存
-
-  ctx.fillStyle = '#09F';      // 設定変更
-  ctx.fillRect(15,15,120,120); // 新たな設定で矩形を描画
-
-  ctx.save();                  // 現在の状態を保存
-  ctx.fillStyle = '#FFF';      // 設定変更
-  ctx.globalAlpha = 0.5;
-  ctx.fillRect(30,30,90,90);   // 新たな設定で矩形を描画
-
-  ctx.restore();               // 以前の状態を復元
-  ctx.fillRect(45,45,60,60);   // 復元した設定で矩形を描画
-
-  ctx.restore();               // 以前の状態を復元
-  ctx.fillRect(60,60,30,30);   // 復元した設定で矩形を描画
-}</pre>
-
-<div class="hidden">
-<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js">draw();</pre>
-</div>
-
-<p>最初のステップで、大きな矩形を既定の設定で描きます。次にこの状態を保存して、塗りつぶし色を変更します。そして、2 番目のやや小さい青色の矩形を描いて、状態を保存します。もう一度描画設定を変更して、3 番目の半透明な白色の矩形を描きます。</p>
-
-<p>ここまでは、これまでの章で行ってきたことによく似ています。しかし最初に <code>restore()</code> 文を呼び出したとき、スタックの先頭の描画状態が削除されて、その設定が復元されます。<code>save()</code> を使用して状態を保存しなければ、前の状態に戻すために塗りつぶし色や透過性を手動で変更しなければなりません。ここではプロパティが 2 つであり容易ですが、プロパティが多ければコードが一気にとても長くなります。</p>
-
-<p>2 番目の <code>restore()</code> 文を呼び出すと、元の状態 (1 番目の <code>save</code> を呼び出す前に設定した状態) を復元して、最後の矩形を再び黒色で描きます。</p>
-
-<p>{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p>
-
-<h2 id="Translating" name="Translating">移動</h2>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;">1 番目の変換メソッドとして、<code>translate()</code> を見ていきましょう。このメソッドは、canvas や canvas の原点をグリッド内の別の位置へ移動するために使用します。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt>
- <dd>canvas や canvas の原点をグリッド上で移動します。<code>x</code> は水平方向の移動距離、<code>y</code> はグリッドを垂直方向の移動距離を示します。</dd>
-</dl>
-
-<p>変換を行う前に canvas の状態を保存しておくことは、よいアイデアです。ほとんどの場合、元の状態に戻すためには逆の変換を行うよりも <code>restore</code> メソッドを呼び出すほうが簡単です。また、ループ内で変換を行っているときに canvas の状態の保存や復元を行わなければ、canvas の端の外側に描画したために、描いたものの一部を失ってしまうかもしれません。</p>
-
-<h3 id="A_translate_example" name="A_translate_example"><code>translate</code> の例</h3>
-
-<p>この例は、canvas の原点を移動する利点をいくつか示しています。<code>translate()</code> メソッドを使用しなければ、すべての矩形が同じ位置 (0,0) に描かれます。また <code>translate()</code> によって、<code>fillRect()</code> 関数で座標を手動で調整する必要なく、どこにでも自由に矩形を置くことができます。これにより若干理解しやすく、また使いやすくなります。</p>
-
-<p><code>draw()</code> 関数で、<code>for</code> ループを使用して <code>fillRect()</code> 関数を 9 回呼び出しています。それぞれのループで canvas を移動して矩形を描き、その後に元の状態を復元します。描画位置を調節する <code>translate()</code> を頼って、<code>fillRect()</code> は毎回同じ座標を使用していることに注目してください。</p>
-
-<pre class="brush: js; highlight:[7]">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i=0;i&lt;3;i++) {
-    for (var j=0;j&lt;3;j++) {
-      ctx.save();
-      ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
-      ctx.translate(10+j*50,10+i*50);
-      ctx.fillRect(0,0,25,25);
-      ctx.restore();
-    }
-  }
-}
-</pre>
-
-<div class="hidden">
-<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js">draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p>
-
-<h2 id="Rotating" name="Rotating">回転</h2>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">2 番目の変換メソッドは <code>rotate()</code> です。現在の原点を中心にして canvas を回転させるために使用します。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt>
- <dd>現在の原点を中心にしてラジアンで示した <code>angle</code> の分、canvas を時計回りに回転します。</dd>
-</dl>
-
-<p>回転の中心は、常に canvas の原点です。中心を変更するには、<code>translate()</code> メソッドを使用して canvas を移動しなければなりません。</p>
-
-<h3 id="A_rotate_example" name="A_rotate_example"><code>rotate</code> の例</h3>
-
-<p>この例は、まずは canvas の原点で矩形を回転するために <code>rotate()</code> メソッドを使用して、次に矩形自身の中心で回転するために <code>translate()</code> の助けを借りています。</p>
-
-<div class="note">
-<p><strong>備忘</strong>: 角度はラジアン (radians) で表しており、度数 (degrees) ではありません。これは以下の方法で変換できます: <code>radians = (Math.PI/180)*degrees</code></p>
-</div>
-
-<pre class="brush: js; highlight:[9, 23]">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // 左の矩形を canvas の原点で回転する
-  ctx.save();
-  // blue rect
-  ctx.fillStyle = "#0095DD";
-  ctx.fillRect(30,30, 100, 100);
-  ctx.rotate((Math.PI/180)*25);
-  // 灰色の矩形
-  ctx.fillStyle = "#4D4E53";
-  ctx.fillRect(30,30, 100, 100);
-  ctx.restore();
-
-  // 右の矩形を矩形の中心で回転する
-  // draw blue rect
-  ctx.fillStyle = "#0095DD";
-  ctx.fillRect(150, 30, 100, 100);
-
-  ctx.translate(200, 80); // 矩形の中心に移動する
-                          // x = x + 0.5 * 幅
-                          // y = y + 0.5 * 高さ
-  ctx.rotate((Math.PI/180)*25); // 回転する
-  ctx.translate(-200, -80); // 元の位置に移動する
-
-  // 灰色の矩形を描く
-  ctx.fillStyle = "#4D4E53";
-  ctx.fillRect(150, 30, 100, 100);
-}
-</pre>
-
-<p>矩形を中心で回転するために、canvas を矩形の中心へ移動した後に canvas を回転します。そして canvas を 0,0 へ移動した後に矩形を描きます。</p>
-
-<div class="hidden">
-<pre class="brush: html">&lt;canvas id="canvas" width="300" height="200"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js">draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p>
-
-<h2 id="Scaling" name="Scaling">スケーリング</h2>
-
-<p>次の変換メソッドはスケーリングです。canvas のグリッドの単位を増減するために使用します。これは、図形やビットマップを縮小または拡大して描くために使用できます。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}</dt>
- <dd>canvas の単位を x (水平方向) または y (垂直方向) で指定した分スケーリングします。どちらの引数も実数です。1.0 より小さい値は単位あたりのサイズが減少、1.0 より大きい値は単位あたりのサイズが増加します。1.0 では単位あたりのサイズが変わりません。</dd>
-</dl>
-
-<p>負数を使用すると軸を反転できます (例えば <code>translate(0,canvas.height); scale(1,-1);</code> で、原点が左下の隅にある有名なデカルト座標系になります)。</p>
-
-<p>デフォルトでは、canvas の 1 単位は 1 ピクセルとまったく同じです。例えば、スケーリング係数に 0.5 を適用すると 1 単位が 0.5 ピクセルになり、図形が半分のサイズで描かれます。同様にスケーリング係数を 2.0 に設定すると単位あたりのサイズが増えて、1 単位あたり 2 ピクセルになります。この結果、図形は 2 倍の大きさで描かれます。</p>
-
-<h3 id="A_scale_example" name="A_scale_example"><code>scale</code> の例</h3>
-
-<p>この例は、図形をさまざまなスケーリング係数で描きます。</p>
-
-<pre class="brush: js; highlight:[6,11]">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // シンプルな図形を描いて、スケーリングする
-  ctx.save();
-  ctx.scale(10, 3);
-  ctx.fillRect(1,10,10,10);
-  ctx.restore();
-
-  // 水平方向に反転する
-  ctx.scale(-1, 1);
-  ctx.font = "48px serif";
-  ctx.fillText("MDN", -135, 120);
-}
-</pre>
-
-<div class="hidden">
-<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js">draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p>
-
-<h2 id="Transforms" name="Transforms">変形</h2>
-
-<p>最後に、以下の変換メソッドで、変換行列によって直接変更することができます。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt>
- <dd>引数で表した行列と、現在の変換行列で乗算を行います。変換行列は以下のとおりです: <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></dd>
-</dl>
-
-<dl>
- <dd>いずれかの引数が <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> になる場合は、メソッドで例外を発生させるのではなく行列を infinite としてマークしなければなりません。</dd>
-</dl>
-
-<p>この関数の引数は以下のとおりです:</p>
-
-<dl>
- <dt><code>a (m11)</code></dt>
- <dd>水平方向のスケーリング。</dd>
- <dt><em><code>b (m12)</code></em></dt>
- <dd>水平方向のスキュー。</dd>
- <dt><code>c (m21)</code></dt>
- <dd>垂直方向のスキュー。</dd>
- <dt><code>d (m22)</code></dt>
- <dd>垂直方向のスケーリング。</dd>
- <dt><code>e (dx)</code></dt>
- <dd>水平方向の移動。</dd>
- <dt><code>f (dy)</code></dt>
- <dd>垂直方向の移動。</dd>
- <dt>{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}</dt>
- <dd>現在の変形を単位行列にリセットして、同じ引数で <code>transform()</code> メソッドを呼び出します。これは基本的に、現在の変形をアンドゥしてから指定した変形を行う操作を一度に行うものです。</dd>
- <dt>{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}</dt>
- <dd>現在の変形を単位行列にリセットします。これは <code>ctx.setTransform(1, 0, 0, 1, 0, 0);</code> を呼び出すことと同じです。</dd>
-</dl>
-
-<h3 id="Example_for_transform_and_setTransform" name="Example_for_transform_and_setTransform"><code>transform</code> と <code>setTransform</code> の例</h3>
-
-<pre class="brush: js; highlight:[12,15]">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  var sin = Math.sin(Math.PI/6);
-  var cos = Math.cos(Math.PI/6);
-  ctx.translate(100, 100);
-  var c = 0;
-  for (var i=0; i &lt;= 12; i++) {
-    c = Math.floor(255 / 12 * i);
-    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
-    ctx.fillRect(0, 0, 100, 10);
-    ctx.transform(cos, sin, -sin, cos, 0, 0);
-  }
-
-  ctx.setTransform(-1, 0, 0, 1, 100, 100);
-  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
-  ctx.fillRect(0, 50, 100, 100);
-}
-</pre>
-
-<div class="hidden">
-<pre class="brush: html">&lt;canvas id="canvas" width="200" height="250"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js">draw();</pre>
-</div>
-
-<p>{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p>
-
-<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div>
diff --git a/files/ja/web/guide/html/canvas_tutorial/using_images/index.html b/files/ja/web/guide/html/canvas_tutorial/using_images/index.html
deleted file mode 100644
index 588a662e5b..0000000000
--- a/files/ja/web/guide/html/canvas_tutorial/using_images/index.html
+++ /dev/null
@@ -1,337 +0,0 @@
----
-title: 画像を使う
-slug: Web/Guide/HTML/Canvas_tutorial/Using_images
-tags:
-  - Advanced
-  - Canvas
-  - Graphics
-  - HTML
-  - Tutorial
-translation_of: Web/API/Canvas_API/Tutorial/Using_images
----
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}</div>
-
-<div class="summary">
-<p>これまで、<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">図形</a>を作成して<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">スタイルを適用する</a>方法を見てきました。{{HTMLElement("canvas")}} のより面白い機能のひとつが、画像を扱えることです。これは動的な画像合成を行う、グラフの背景として使用する、ゲームのスプライトとして使用するなどといったことが可能です。PNG、GIF、JPEG といった、ブラウザがサポートする形式の外部画像を使用できます。同じページ上の別の canvas 要素によって生成された画像も、ソースとして使用できます!</p>
-</div>
-
-<p>基本的には 2 ステップの手続きによって、画像を canvas にインポートします:</p>
-
-<ol>
- <li>{{domxref("HTMLImageElement")}} オブジェクトまたは別の canvas 要素への参照を、ソースとして取得します。URL を与えることでも、画像を使用できます。</li>
- <li><code>drawImage()</code> 関数を使用して、画像を canvas に描きます。</li>
-</ol>
-
-<p>これを行う方法を見ていきましょう。</p>
-
-<h2 id="Getting_images_to_draw" name="Getting_images_to_draw">描く画像を取得する</h2>
-
-<p>canvas API は、以下のデータ形式を画像ソースとして使用できます:</p>
-
-<dl>
- <dt>{{domxref("HTMLImageElement")}}</dt>
- <dd>{{HTMLElement("img")}} 要素だけでなく、<code>Image()</code> コンストラクタを使用して作成した画像も含みます。</dd>
- <dt>{{domxref("HTMLVideoElement")}}</dt>
- <dd>HTML の {{HTMLElement("video")}} 要素を画像ソースとして使用すると、現在のフレームを動画から取得して、画像として使用します。</dd>
- <dt>{{domxref("HTMLCanvasElement")}}</dt>
- <dd>別の {{HTMLElement("canvas")}} 要素を画像ソースとして使用できます。</dd>
-</dl>
-
-<p>これらのソースは集約的に、{{domxref("CanvasImageSource")}} 型から参照されています。</p>
-
-<p>canvas で使用する画像を取得する方法がいくつかあります。</p>
-
-<h3 id="Using_images_from_the_same_page" name="Using_images_from_the_same_page">同一ページ上の画像を使用する</h3>
-
-<p>以下のいずれかを使用して、canvas として同一ページ上の画像への参照を取得できます:</p>
-
-<ul>
- <li>{{domxref("document.images")}} コレクション</li>
- <li>{{domxref("document.getElementsByTagName()")}} メソッド</li>
- <li>使用したい特定の画像の ID がわかる場合は、特定の画像を取得するために {{domxref("document.getElementById()")}} を使用できます。</li>
-</ul>
-
-<h3 id="Using_images_from_other_domains" name="Using_images_from_other_domains">ほかのドメインにある画像を使用する</h3>
-
-<p>{{HTMLElement("img")}} 要素の {{htmlattrxref("crossorigin", "img")}} 属性 ({{domxref("HTMLImageElement.crossOrigin")}} プロパティに反映されます) を使用して、<code>drawImage()</code> を呼び出してほかのドメインから画像を読み込む許可を求めることができます。ホスティングドメインが画像のクロスドメインアクセスを許可している場合は、canvas を汚染せずに画像を使用できます。そうでない場合は、画像を使用すると <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="internal">canvas を汚染します</a>。</p>
-
-<h3 id="Using_other_canvas_elements" name="Using_other_canvas_elements">ほかの canvas 要素を使用する</h3>
-
-<p>通常の画像と同様に、{{domxref("document.getElementsByTagName()")}} または {{domxref("document.getElementById()")}} メソッドを使用してほかの canvas 要素にアクセスできます。対象の canvas を使用する前に、そのキャンバスで描画を終えるようにしてください。</p>
-
-<p>より実践的な使用法のひとつが、別の大きな canvas のサムネイルビューとして第 2 の canvas を使用することです。</p>
-
-<h3 id="Creating_an_image_from_scratch" name="Creating_an_image_from_scratch">最初から画像を作成する</h3>
-
-<p>もうひとつの方法は、スクリプト内で新たな {{domxref("HTMLImageElement")}} オブジェクトを作成することです。そのために、便利な <code>Image()</code> コンストラクタを使用できます:</p>
-
-<pre class="brush: js">var img = new Image();   // 新たな img 要素を作成
-img.src = 'myImage.png'; // ソースのパスを設定
-</pre>
-
-<p>このスクリプトを実行すると、画像の読み込みが始まります。</p>
-
-<p>画像の読み込みが完了する前に <code>drawImage()</code> を呼び出しても、何も行いません (あるいは、古いブラウザでは例外が発生するかもしれません)。よって画像を読み込む前に描画しないようにするために、load イベントを使用する必要があります:</p>
-
-<pre class="brush: js">var img = new Image();   // 新たな img 要素を作成
-img.addEventListener("load", function() {
-  // drawImage を実行する文をここに置く
-}, false);
-img.src = 'myImage.png'; // ソースのパスを設定
-</pre>
-
-<p>これは、外部の画像を 1 つしか使用しない場合はよい方法ですが、複数の画像を追跡しなければならない場合は、より器用な方法に頼らなければなりません。画像の事前読み込み法を見ていくことはこのチュートリアルの対象を超えますが、心に留めておいてください。</p>
-
-<h3 id="Embedding_an_image_via_data_URL" name="Embedding_an_image_via_data_URL">data: URL で画像を埋め込む</h3>
-
-<p>画像を埋め込む別の方法が、<a href="/ja/docs/Web/HTTP/data_URIs">data: url</a> です。Data URL によって、画像を Base64 でエンコードした文字列として、コード内で完全に定義できます。</p>
-
-<pre class="brush: js">var img = new Image();   // 新たな img 要素を作成
-img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
-</pre>
-
-<p>data URL の利点のひとつが、別にサーバとの通信を行うことなく即座に結果の画像を使用できることです。ほかに潜在的な利点として <a href="/ja/docs/Web/CSS" title="Web/CSS">CSS</a>、<a href="/ja/docs/Web/JavaScript" title="Web/JavaScript">JavaScript</a>、<a href="/ja/docs/Web/HTML" title="Web/HTML">HTML</a>、画像をひとつのファイルにカプセル化することもでき、ほかの場所へ持ち運びやすくなります。</p>
-
-<p>この方法の欠点は画像がキャッシュされないことと、大きな画像をエンコードした URL がとても長くなることです。</p>
-
-<h3 id="Using_frames_from_a_video" name="Using_frames_from_a_video">動画のフレームを使用する</h3>
-
-<p>{{HTMLElement("video")}} 要素が提供する動画のフレームも (動画が非表示であっても) 使用できます。例えば ID が "myvideo" である {{HTMLElement("video")}} 要素があるとき、以下のようなことができます:</p>
-
-<pre class="brush: js">function getMyVideo() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    return document.getElementById('myvideo');
-  }
-}
-</pre>
-
-<p>これは動画の {{domxref("HTMLVideoElement")}} オブジェクトを返します。このオブジェクトは先に述べたとおり、<code>CanvasImageSource</code> として使用できるオブジェクトのひとつです。</p>
-
-<h2 id="Drawing_images" name="Drawing_images">画像を描く</h2>
-
-<p>ソース画像オブジェクトへの参照を取得したら、<code>drawImage()</code> メソッドを使用して画像を canvas に描画できます。後ほど見るように、<code>drawImage()</code> メソッドをオーバーロードした派生形がいくつかあります。もっとも基本的な形式は以下のようなものです:</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt>
- <dd>引数 <code>image</code> で指定した <code>CanvasImageSource</code> を、座標 (<code>x</code>, <code>y</code>) に描画します。</dd>
-</dl>
-
-<div class="note">
-<p>SVG 画像は、ルート &lt;svg&gt; 要素で幅と高さを指定しなければなりません。</p>
-</div>
-
-<h3 id="Example_A_simple_line_graph" name="Example_A_simple_line_graph">例: シンプルな折れ線グラフ</h3>
-
-<p>以下の例は、小さな折れ線グラフの背景として外部の画像を使用しています。背景画像を使用すると背景を生成するコードが不要になりますので、スクリプトをかなり小さくすることができます。この例では画像を 1 つしか使用しませんので、描画する文を実行するために image オブジェクトの <code>load</code> イベントハンドラを使用しています。<code>drawImage()</code> メソッドは背景画像を座標 (0, 0) に配置します。これは canvas の左上の隅です。</p>
-
-<div class="hidden">
-<pre class="brush: html">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="180" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-
-<pre class="brush: js;highlight[5]">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function(){
-    ctx.drawImage(img,0,0);
-    ctx.beginPath();
-    ctx.moveTo(30,96);
-    ctx.lineTo(70,66);
-    ctx.lineTo(103,76);
-    ctx.lineTo(170,15);
-    ctx.stroke();
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
-}</pre>
-
-<p>結果のグラフは以下のようになります:</p>
-
-<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
-
-<h2 id="Scaling" name="Scaling">スケーリング</h2>
-
-<p><code>drawImage()</code> メソッドの第 2 の形式は引数が 2 つ追加されており、canvas に拡大・縮小した画像を配置することができます。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt>
- <dd>これは引数 <code>width</code> および <code>height</code> を追加しており、画像を canvas に描画する際のサイズを示します。</dd>
-</dl>
-
-<h3 id="Example_Tiling_an_image" name="Example_Tiling_an_image">例: 画像をタイリングする</h3>
-
-<p>以下の例は画像を壁紙として使用して、canvas 上で数回繰り返して貼り付けています。ループ処理によって、さまざまな場所に縮小した画像を貼り付けました。以下のコードでは、最初の <code>for</code> ループで行の繰り返し処理を行います。2 番目の <code>for</code> ループで列の繰り返し処理を行います。画像は元のサイズの 3 分の 1 である、50x38 ピクセルに縮小しています。</p>
-
-<div class="note">
-<p><strong>注記</strong>: 画像を拡大しすぎると不鮮明に、あるいは縮小しすぎると荒くなります。読みやすくしておかなければならない文字列が画像内にある場合は、サイズを変更しないほうがよいでしょう。</p>
-</div>
-
-<div class="hidden">
-<pre class="brush: html">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-</div>
-
-<pre class="brush: js">function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function(){
-    for (var i=0;i&lt;4;i++){
-      for (var j=0;j&lt;3;j++){
-        ctx.drawImage(img,j*50,i*38,50,38);
-      }
-    }
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-}</pre>
-
-<p>canvas の結果は以下のようになります:</p>
-
-<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
-
-<h2 id="Slicing" name="Slicing">切り抜き</h2>
-
-<p><code>drawImage()</code> メソッドの第 3 かつ最後の形式は、画像ソースについて 8 個の引数が追加されています。これはソース画像の一部を切り抜いて、サイズ変更および canvas への描画を行います。</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt>
- <dd>この関数は、<code>image</code> から左上の隅が (<code>sx</code>, <code>sy</code>)、幅と高さが <code>sWidth</code> および <code>sHeight</code> である矩形で指定されるソース画像の領域を取得して、canvas の (<code>dx</code>, <code>dy</code>) で示した位置に配置して、<code>dWidth</code> および <code>dHeight</code> で指定したサイズに拡大・縮小します。</dd>
-</dl>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">何を行っているかを正しく理解するために、右の画像を見ると役に立つでしょう。始めの 4 つの引数は、ソース画像を切り抜く場所とサイズを定義します。最後の 4 つの引数は、描画先 canvas で画像を描画する矩形を定義します。</p>
-
-<p>切り抜きは、画像を合成する際に役に立つでしょう。ひとつの画像ファイルにすべての要素を置いておき、このメソッドを使用して完成形の描画結果に合成します。例えばチャートを作成したいときに、すべての必要なテキストをひとつのファイルに収めた PNG 画像を用意して、データに応じてチャートの目盛りをとても簡単に変更できるでしょう。ほかの利点として、すべての画像を個別に読み込む必要がありませんので、読み込みパフォーマンスが向上するでしょう。</p>
-
-<h3 id="Example_Framing_an_image" name="Example_Framing_an_image">例: 画像をフレームに収める</h3>
-
-<p>以下の例では前の例と同じサイの画像を使用していますが、頭の部分を切り抜いて額縁の中に合成しています。額縁の画像は、ドロップシャドウを含む 24 ビット PNG 画像です。GIF や 8 ビット PNG 画像と異なり、24 ビット PNG 画像は 8 ビットのアルファチャンネルが含まれていますので、マットカラーに悩まされることなく背景に重ねることができます。</p>
-
-<pre class="brush: html">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
-   &lt;div style="display:none;"&gt;
-     &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
-     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
-   &lt;/div&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<pre class="brush: js">function draw() {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-
-  // スライス画像を描く
-  ctx.drawImage(document.getElementById('source'),
-                33, 71, 104, 124, 21, 20, 87, 104);
-
-  // フレームを描く
-  ctx.drawImage(document.getElementById('frame'),0,0);
-}</pre>
-
-<p>この例では、画像の読み込みに別の方法を使用しています。新しい {{domxref("HTMLImageElement")}} オブジェクトを作成して画像を読み込む代わりに、画像を HTML ソース内の {{HTMLElement("img")}} タグとして直接含めておき、そこから画像を取り込んでいます。この画像は、CSS の {{cssxref("display")}} プロパティを none に設定して隠しています。</p>
-
-<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
-
-<p>スクリプト自体はとてもシンプルです。それぞれの {{HTMLElement("img")}} に ID 属性を割り当てており、{{domxref("document.getElementById()")}} を使用して簡単に選択できます。最初の画像からサイを切り抜いて canvas 上でサイズを調整するため単純に <code>drawImage()</code> を使用して、その後に第 2 の <code>drawImage()</code> を呼び出して枠を描きます。</p>
-
-<h2 id="Art_gallery_example" name="Art_gallery_example">アートギャラリーの例</h2>
-
-<p>この章の最後の例では、小さなアートギャラリーを作ります。いくつかの画像を持つテーブルで、ギャラリーを構成します。ページを読み込むとそれぞれの画像のために {{HTMLElement("canvas")}} 要素を挿入して、そこに画像と額縁を描画します。</p>
-
-<p>ここでは、周囲に描く額縁を含むすべての画像が一定の幅および高さです。額縁をぴったり合わせるために画像の幅と高さを使用するよう、スクリプトを改良することができるでしょう。</p>
-
-<p>以下のコードは自明でしょう。{{domxref("document.images")}} コンテナに対するループ処理を行って、適宜新たな canvas 要素を追加します。おそらく、DOM についてあまり詳しくない場合に注意したほうがよいことは、{{domxref("Node.insertBefore")}} メソッドを使用していることです。<code>insertBefore()</code> は、ある要素 (image) の前に新たな要素 (canvas 要素) を挿入したいときに使用する、親ノード (テーブルのセル) のメソッドです。</p>
-
-<pre class="brush: html">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-     &lt;table&gt;
-      &lt;tr&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"&gt;&lt;/td&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"&gt;&lt;/td&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"&gt;&lt;/td&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"&gt;&lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;tr&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"&gt;&lt;/td&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"&gt;&lt;/td&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"&gt;&lt;/td&gt;
-        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"&gt;&lt;/td&gt;
-      &lt;/tr&gt;
-     &lt;/table&gt;
-     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p>こちらが、見栄えをよくするための CSS です:</p>
-
-<pre class="brush: css">body {
-  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
-  margin: 10px;
-}
-
-img {
-  display: none;
-}
-
-table {
-  margin: 0 auto;
-}
-
-td {
-  padding: 15px;
-}
-</pre>
-
-<p>額縁付き画像を描く JavaScript が、すべてを結びつけます:</p>
-
-<pre class="brush: js">function draw() {
-
-  // すべての画像に対するループ処理
-  for (var i=0;i&lt;document.images.length;i++){
-
-    // 額縁の画像用の canvas は追加しない
-    if (document.images[i].getAttribute('id')!='frame'){
-
-      // canvas 要素を作成
-      canvas = document.createElement('canvas');
-      canvas.setAttribute('width',132);
-      canvas.setAttribute('height',150);
-
-      // 画像の前に挿入
-      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
-
-      ctx = canvas.getContext('2d');
-
-      // canvas に画像を描く
-      ctx.drawImage(document.images[i],15,20);
-
-      // 額縁を追加
-      ctx.drawImage(document.getElementById('frame'),0,0);
-    }
-  }
-}</pre>
-
-<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p>
-
-<h2 id="Controlling_image_scaling_behavior" name="Controlling_image_scaling_behavior">画像のサイズ変更の動作を制御する</h2>
-
-<p>先に述べたとおり、サイズを変更した画像は変更処理の影響で、不鮮明またはブロック状のアーティファクトが発生します。描画コンテキスト内で画像のサイズを変更する際に使用する画像スムージングアルゴリズムを制御するために、描画コンテキストの {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} プロパティを使用できます。デフォルトではこれが <code>true</code> であり、画像のサイズを変更する際にスムージングを行います。以下のように、この機能は無効化できます:</p>
-
-<pre class="brush: js">ctx.mozImageSmoothingEnabled = false;
-ctx.webkitImageSmoothingEnabled = false;
-ctx.msImageSmoothingEnabled = false;
-ctx.imageSmoothingEnabled = false;
-</pre>
-
-<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</div>
diff --git a/files/ja/web/guide/html/event_attributes/index.html b/files/ja/web/guide/html/event_attributes/index.html
deleted file mode 100644
index 0c2047bce5..0000000000
--- a/files/ja/web/guide/html/event_attributes/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Event 属性
-slug: Web/Guide/HTML/Event_attributes
-tags:
-  - Beginner
-  - Guide
-  - HTML
-  - Intermediate
-  - JavaScript
-translation_of: >-
-  Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these
-translation_of_original: Web/Guide/HTML/Event_attributes
----
-<p><span class="seoSummary">すべての HTML 要素は、特定のイベントが発生したときの JavaScript の実行が許可された属性の集合から成り立ちます。これらは Event 属性と呼ばれ、その属性名には "on" の接頭辞が付きます。</span>例えば、ユーザーが要素をクリックしたときに JavaScript を実行するために、JavaScript を <code>onclick</code> 属性の中に書きます。</p>
-
-<p>イベントの応答として JavaScript のコードが実行された場合、<code>this</code> スコープは HTML 要素となり、このスコープ内にある <code>event</code> 変数を通して {{domxref("Event")}} オブジェクトにアクセスできます。</p>
-
-<div class="warning">
-<p><strong>警告:</strong> これらの属性を使うことは避けるべきです。これは HTML を巨大化し可読性を下げます。情報と振る舞いの関心事が正しく分離されておらず、発見が困難なバグを生み出します。その上に、Event 属性の使い方はほとんどの場合、{{domxref("Window")}} オブジェクト上のグローバル関数にスクリプトを晒す原因になります。これはグローバルの名前空間を汚染します。</p>
-</div>
-
-<p>これらの属性が魅力的で簡単に使うことができたとしても、これを使うのは避けるべきです。代わりに、イベントリスナーを追加する為には {{domxref("EventTarget.addEventListener()")}} 関数を使ってください。</p>
-
-<p>この Event 属性は、'unsafe-inline' キーワードを使わない限りすべてのインラインスクリプトをブロックする<a href="/docs/Security/CSP/Introducing_Content_Security_Policy">コンテンツ・セキュリティ・ポリシー</a>を使うことよって ブロックされる可能性があります。</p>
-
-<h2 id="Example_using_event_attributes" name="Example_using_event_attributes">Event 属性の使用例</h2>
-
-<p>この例は {{HTMLElement("div")}} がクリックされる度にテキストを要素に追加します。</p>
-
-<div class="note">
-<p><strong>注意:</strong> これは、これらの属性の 1 つを使用する例であり、するべきではない方法です。</p>
-</div>
-
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;title&gt;Event 属性の例&lt;/title&gt;
-    &lt;script&gt;
-      function doSomething() {
-        document.getElementById("thanks").innerHTML += "&lt;p&gt;クリックしてくれてありがとう!&lt;/p&gt;";
-      }
-    &lt;/script&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;div onclick="doSomething();"&gt;クリック!&lt;/div&gt;
-    &lt;div id="thanks"&gt;&lt;/div&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p>この例を実行してみてください:</p>
-
-<p>{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}</p>
-
-<h2 id="Example_using_event_listeners" name="Example_using_event_listeners">イベントリスナーの使用例</h2>
-
-<p>代わりに、以下に示すように {{domxref("EventTarget.addEventListener()")}} を使うべきです。</p>
-
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;title&gt;Event 属性の例&lt;/title&gt;
-    &lt;script&gt;
-      function doSomething() {
-        document.getElementById("thanks").innerHTML += "&lt;p&gt;クリックしてくれてありがとう!&lt;/p&gt;";
-      }
-
-      // ページのロードが完了した時に呼ばれる;
-      // ここは、ページ内の要素にイベントリスナを追加するなど、何でも必要な設定を実行する場所です。
-
-      function setup() {
-        document.getElementById("click").addEventListener("click", doSomething, true);
-      }
-      // ウィンドウ内のドキュメントのロードが完了したことを知る為の、
-      // "load" イベントを受け取る為にイベントリスナを window オブジェクトに追加する
-
-      window.addEventListener("load", setup, true);
-    &lt;/script&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;div id="click"&gt;クリック!&lt;/div&gt;
-    &lt;div id="thanks"&gt;&lt;/div&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>この動作を以下の例から確認できます:</p>
-
-<p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p>
-<section id="Quick_Links"><ol><li><a href="/ja/docs/Web/API/Event" title="Event インターフェイスは、DOM で発生するイベントを表します。ユーザーによって発生するイベント (マウスやキーボードのイベント) もありますし、API によって発生するイベント (アニメーションの実行が完了したことを示すイベントや、動画再生が一時停止したイベントなど) もあります。さまざまな型のイベントがあり、一部のイベントは基底の Event インターフェイスを基にした他のインターフェイスを使用します。Event 自体は、すべてのイベントで共通のプロパティやメソッドを持ちます。">Event</a></li><li><a href="/ja/docs/Web/API/EventTarget" title="EventTarget は、イベントを受け取り、そのためのリスナーを持つ可能性があるオブジェクトにより実装されたインターフェースです。">EventTarget</a></li><li><a href="/ja/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section>
diff --git a/files/ja/web/guide/html/html5/html5_element_list/index.html b/files/ja/web/guide/html/html5/html5_element_list/index.html
deleted file mode 100644
index b5da7466db..0000000000
--- a/files/ja/web/guide/html/html5/html5_element_list/index.html
+++ /dev/null
@@ -1,585 +0,0 @@
----
-title: HTML5 の要素
-slug: Web/Guide/HTML/HTML5/HTML5_element_list
-tags:
-  - HTML
-  - HTML5
-translation_of: Web/HTML/Element
-translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list
----
-<p>This page list all <strong>standard HTML5 elements</strong>, described by their opening tag and grouped by function. Contrary to the <a href="/ja/docs/HTML/Element" title="HTML/Element">HTML Element index</a> which lists all possible tags, standard, non-standard, valid, obsolete or deprecated ones, this list only the valid HTML5 elements. Only those should be used in new Web sites.</p>
-
-<p>The symbol <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a> indicates that the element has been added in HTML5. Note that other elements listed here may have been modified or extended by the HTML5 specification.</p>
-
-<h2 id="Root_element" name="Root_element">ルート要素</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">要素</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{HTMLElement("html")}}</td>
-   <td>HTML 文書、XHTML 文書のルート（基点）要素。他の全ての要素はこの要素の子孫要素として配置しなくてはなりません。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Document_metadata" name="Document_metadata">文書メタデータ要素</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">要素</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{HTMLElement("head")}}</td>
-   <td>Represents a collection of metadata about the document, including links to or definitions of scripts and style sheets.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("title")}}</td>
-   <td>Defines the title of the document, shown in a browser's title bar or on the page's tab. It can only contain text and any contained tags are not interpreted.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("base")}}</td>
-   <td>Defines the base URL for relative URL in the page.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("link")}}</td>
-   <td>Used to link JavaScript and external CSS with the current HTML document.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("meta")}}</td>
-   <td>Defines metadata that can't be defined using other HTML element.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("style")}}</td>
-   <td>Style tag is used to write inline CSS.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Scripting" name="Scripting">スクリプティング要素</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">要素</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{HTMLElement("script")}}</td>
-   <td>Defines either an internal script or link to an external script. The script language is JavaScript</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("noscript")}}</td>
-   <td>Defines an alternative content to display when the browser doesn't support scripting.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Sections" name="Sections">セクショニング要素と見出し要素</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">要素</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{HTMLElement("body")}}</td>
-   <td>
-    <div>Represents the main content of an HTML document. There is only one <code>&lt;body&gt;</code> element in a document.</div>
-   </td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("section")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Defines a section in a document</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("nav")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Defines a section that contains only navigation links</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("article")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Defines self-contained content that could exist independantly of the rest of the content</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("aside")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Defines some content set aside from the rest of page content. If it is removed, the remaining content still make sence.</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/HTML/Element/Heading_Elements" title="Elementy blokowe"><code>&lt;h1&gt;,&lt;h2&gt;,&lt;h3&gt;,&lt;h4&gt;,&lt;h5&gt;,&lt;h6&gt;</code></a></td>
-   <td>Heading elements implement six levels of document headings, <code>&lt;h1&gt;</code> is the most important and <code>&lt;h6&gt;</code> is the least. A heading element briefly describes the topic of the section it introduces.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("hgroup")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Groups a set of <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> elements when a heading has multiple levels</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("header")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Defines the header of a page or section. It often contains a logo, the title of the Web site and a navigational table of content.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("footer")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Defines the footer for a page or section. It often contains a copyright notice, some links to legal information or addresses to give feedback.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("address")}}</td>
-   <td>Defines a section containing contact information.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Grouping_content" name="Grouping_content">グループ化要素</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">要素</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{HTMLElement("p")}}</td>
-   <td>Defines a portion that should be displayed as a paragrah.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("hr")}}</td>
-   <td>Represents a thematic break between paragraphs of a section or article or any longer content.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("pre")}}</td>
-   <td>Indicates that its content is preformatted and that this format must be preserved.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("blockquote")}}</td>
-   <td>Represents a citation.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("ol")}}</td>
-   <td>Defines an ordered list of items, that is a list which change its meaning if we change the order of its elements</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("ul")}}</td>
-   <td>Defines an unordered list of items.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("li")}}</td>
-   <td>Defines a item of a enumeration list often preceded by a bullet in English.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("dl")}}</td>
-   <td>Defines a definition list, that is a list of terms and their associated definitions.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("dt")}}</td>
-   <td>Represents a term defined by the next <code>&lt;dd&gt;</code>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("dd")}}</td>
-   <td>Represents the definition of the terms immediately listed before it.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("figure")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a figure illustrated a part of the document.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("figcaption")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents the legend of a figure.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("div")}}</td>
-   <td>Represents a generic container with no special meaning.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Text-level_semantics" name="Text-level_semantics">テキストレベル・セマンティクス要素</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">要素</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{HTMLElement("a")}}</td>
-   <td>ハイパーリンク。他の文書などへのリンク機能を提供します。</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("em")}}</td>
-   <td>Represents<em>emphasized</em> text, like a stress accent.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("strong")}}</td>
-   <td>Represents especially<em>important</em> text.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("small")}}</td>
-   <td>Represents a<em>side comment</em>, that is text like a disclaimer, a copyright which is not essential to the comprehension of the document.<code> </code></td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("s")}}</td>
-   <td>Represents content that is no<em>longer accurate or relevant</em>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("cite")}}</td>
-   <td>Represents the<em>title of a work</em>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("q")}}</td>
-   <td>インラインの短い引用。段落をまたぐ様な引用には <code>blockquote</code> 要素を用います。</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("dfn")}}</td>
-   <td>Represents a term whose<em>definition</em> is contained in its nearest ancestor content.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("abbr")}}</td>
-   <td>Represents an<em>abbreviation</em> or an<em>acronym</em>, eventually with its meaning.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("data")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Associates to its content a<em>machine-readable equivalent</em>. (This element is only in the WHATWG version of the HTML standard, and not in the W3C version of HTML5).</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("time")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a<em>date</em> and<em>time</em> value, eventually with a machine-readable equivalent.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("code")}}</td>
-   <td>コンピューターのコード</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("var")}}</td>
-   <td>Represents a<em>variable, that is an actual mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or a mere placeholder in prose.</em></td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("samp")}}</td>
-   <td>Represents the<em>output</em> of a program or a computer.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("kbd")}}</td>
-   <td>キーボードのキーコマンドや音声コマンドなどのユーザ入力を表します（※名称が「キーボード要素」であるにも関わらず、キーボード以外のユーザ入力も表せる点に注意が必要です）</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td>
-   <td>Represents a<em>subscript</em>, respectively a<em>superscript.</em></td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("i")}}</td>
-   <td>Represents some text in an<em>alternate</em> voice or mood, or at least of different quality, such as a taxonomic designation, a technical term, an idiomatic phrase, a thought or a ship name.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("b")}}</td>
-   <td>Represents a text which to which attention is drawn for<em>utilitarian purposes</em>. It doesn't convey extra importance and doesn't implicate an alternate voice.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("u")}}</td>
-   <td>Represents<em>unarticulate</em> non-textual annoatation, such labeling the text as being misspelt or labeling a proper name in Chinese text.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("mark")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents text highlighted for<em>reference</em> purposes, that is for its relevance in another context.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("ruby")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents content to be marked with<em>ruby annotations</em>, short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanese<em>furigana</em>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("rt")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents the<em>text of a ruby annotation</em>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("rp")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents<em>parenthesis</em> around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("bdi")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents text that must be<em>isolated</em> from its surrounding for bidirectional text formatting. It allows to embed span of text with a different, or unknown, directionality.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("bdo")}}</td>
-   <td>Represents the<em>directionality</em> of its children, in order to explicitly override the Unicode bidirectional algorithm.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("span")}}</td>
-   <td>Represents text with no specific meaning. This has to be used when no<em>other</em> text-semantic element conveys an adequate meaning, which, in this case, is often brought by global attributes like <code>class</code>, <code>lang</code>, or <code>dir</code>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("br")}}</td>
-   <td>改行（ HTML のソースコード内での改行コードは、特定の要素内のもの、或いは特定のスタイルが指定された要素内のものしか表示される文書に改行として反映されません ）</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("wbr")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a<em>line break opportunity</em>, that is a suggested wrapping point in order to improve readability of text split on several lines.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Edits" name="Edits">変更要素</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">要素</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{HTMLElement("ins")}}</td>
-   <td>文書に追加された内容である事を示す</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("del")}}</td>
-   <td>文書から削除された内容である事を示す</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Embedded_content" name="Embedded_content">埋め込みコンテンツ要素</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">要素</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{HTMLElement("img")}}</td>
-   <td>画像</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("iframe")}}</td>
-   <td>Represents a<em>nested browsing context</em>, that is an embedded HTML document.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("embed")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a<em>integration point</em> for an external, often non_HTML, application or interactive content.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("object")}}</td>
-   <td>Represents an<em>external resource</em>, which will be treated as an image, an HTML sub-document or an external resource to be processed by a plugin.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("param")}}</td>
-   <td>Defines<em>parameters</em> for use by plugins invoked by <code>&lt;object&gt;</code> elements.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("video")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a<em>video</em>, and its associated audio files and captions, with the necessary interface to play it.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("audio")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a<em>sound</em>, or an<em>audio stream</em>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("source")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Allows authors to specify alternative media resources for media elements like <code>&lt;video&gt;</code> or <code>&lt;audio&gt;</code>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("track")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Allows authors to specify timed<em>text track</em> for media elements like <code>&lt;video&gt;</code><em>or <code>&lt;audio&gt;</code>.</em></td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("canvas")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a<em>bitmap area</em> that scripts can be used to render graphics, like graphs, game graphics, any visual images on the fly.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("map")}}</td>
-   <td>In conjunction with <code>&lt;area&gt;</code>, defines an<em>image map</em>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("area")}}</td>
-   <td>In conjunction with <code>&lt;map&gt;</code>, defines an<em>image map</em>.</td>
-  </tr>
-  <tr>
-   <td>{{SVGElement("svg")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Defines an embedded<em>vectorial image</em>.</td>
-  </tr>
-  <tr>
-   <td>{{MathMLElement("math")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Defines a<em>mathematical formula</em>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Tabular_data" name="Tabular_data">テーブルデータ要素</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">要素</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{HTMLElement("table")}}</td>
-   <td>行と列を持つ図表。テーブル。</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("caption")}}</td>
-   <td>テーブルのキャプション</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("colgroup")}}</td>
-   <td>テーブルの、一つ以上の列グループを表す</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("col")}}</td>
-   <td>テーブルの列を表す</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("tbody")}}</td>
-   <td>Represents the block of rows that describes the<em>concrete data</em> of a table.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("thead")}}</td>
-   <td>Represents the block of rows that describes the<em>column labels</em> of a table.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("tfoot")}}</td>
-   <td>Represents the block of rows that describes the<em>column summaries</em> of a table.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("tr")}}</td>
-   <td>Represents a<em>row of cells</em> in a table.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("td")}}</td>
-   <td>Represents a<em>data cell</em> in a table.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("th")}}</td>
-   <td>Represents a<em>header cell</em> in a table.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Forms" name="Forms">フォーム関連要素</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">要素</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{HTMLElement("form")}}</td>
-   <td>Represents a<em>formular</em>, consisting of controls, that can be submitted to a server for processing.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("fieldset")}}</td>
-   <td>フォームコントロール要素のグループ化に用いる</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("legend")}}</td>
-   <td><code>&lt;fieldset&gt;</code> のキャプション</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("label")}}</td>
-   <td>フォームコントロールのキャプション</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("input")}}</td>
-   <td>Represents a<em>typed data field</em> allowing the user to edit the data.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("button")}}</td>
-   <td>Represents a<em>button</em>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("select")}}</td>
-   <td>Represents a control allowing the<em>selection among a set of options</em>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("datalist")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a<em>set of predefined options</em> for other controls.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("optgroup")}}</td>
-   <td>Represents a<em>set of options</em>, logically grouped.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("option")}}</td>
-   <td>Represents an<em>option</em> in a <code>&lt;select&gt;</code> element, or a suggestion of a <code>&lt;datalist&gt;</code> element.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("textarea")}}</td>
-   <td>Represents a<em>multiline text edit control</em>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("keygen")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a<em>key pair generator control</em>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("output")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents the<em>result of a calculation</em>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("progress")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents the<em>completion progress</em> of a task.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("meter")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a scalar<em>measurement</em> (or a fractional value), within a known range</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Interactive_elements" name="Interactive_elements">インタラクティブコンテンツ要素</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">要素</th>
-   <th scope="col">説明</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{HTMLElement("details")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a<em>widget</em> from which the user can obtain additional information or controls.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("summary")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a<em>summary</em>,<em>caption</em>, or<em>legend</em> for a given <code>&lt;details&gt;</code>.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("command")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a<em>command</em> that the user can invoke.</td>
-  </tr>
-  <tr>
-   <td>{{HTMLElement("menu")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td>
-   <td>Represents a<em>list of commands</em>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a></li>
- <li><a href="/ja/docs/HTML/Element" title="HTML/Element">HTML 要素リファレンス</a> (HTML5 に含まれない要素も含まれています)</li>
- <li>Another way of listing the tags: the <a href="http://joshduck.com/periodic-table.html" title="http://joshduck.com/periodic-table.html">Periodic table of HTML5 elements</a> by Josh Duck.</li>
-</ul>
diff --git a/files/ja/web/guide/html/obsolete_things_to_avoid/index.html b/files/ja/web/guide/html/obsolete_things_to_avoid/index.html
deleted file mode 100644
index 1c8a7cc261..0000000000
--- a/files/ja/web/guide/html/obsolete_things_to_avoid/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Historical artifacts to avoid
-slug: Web/Guide/HTML/Obsolete_things_to_avoid
-tags:
-  - HTML
-  - NeedsContent
-  - NeedsTechnicalReview
-translation_of: Learn/HTML/Introduction_to_HTML
-translation_of_original: Web/Guide/HTML/Obsolete_things_to_avoid
----
-<h2 id="導入">導入</h2>
-
-<p>多くの人々はページのソースを見てコピー &amp; ペーストすることで、元のサイトが上手に作成されているかを考えることなく HTML、CSS、JavaScript を学習しました。これは、過去には必要であったかもしれないが現在は無意味になっているコーディングの慣習を習得してしまうことを意味します。このページでは、時間がたつにつれて不要あるいは悪い慣習になった事柄を説明します。</p>
-
-<h2 id="Doctype">Doctype</h2>
-
-<p>(X)HTML には 10 種類ほどの <a class="external" href="http://en.wikipedia.org/wiki/Document_Type_Declaration">doctype</a> があります。それらの違いはわずかです (違いがない場合もあります)。HTML5 の doctype の使用を推奨します。</p>
-
-<pre>&lt;!DOCTYPE html&gt;</pre>
-
-<p>これはすべてのブラウザ (Internet Explorer 6 を含む) で標準準拠モードになります。</p>
-
-<h2 id="&lt;meta>_要素と_charset_属性">&lt;meta&gt; 要素と <code>charset</code> 属性</h2>
-
-<p>以下の記述を含むソースコードを見ることがよくあります:</p>
-
-<pre>&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
-</pre>
-
-<p>ところが、すべての Web ブラウザ (Internet Explorer 6 を含む) は以下のように短縮した場合でも同様に動作します:</p>
-
-<pre>&lt;meta charset="UTF-8" /&gt;
-</pre>
-
-<p>すばらしい <a class="external" href="http://blog.whatwg.org/the-road-to-html-5-character-encoding">リバースエンジニアリング</a> や <a class="external" href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html#replies">プラグマティズム</a> によってこの知識を獲得しました。これを使用してください。</p>
-
-<ul>
- <li>HTML5 ではこの挙動を元にして、この構文が正式に採用されたという経緯があります。HTML5 で用いるのが良いでしょう。また、HTML5 で以前の構文を利用する事もできます。</li>
- <li>Web 開発者の中には、適切なセマンティクスやユーザビリティを持つ HTML となっているかチェックする為に Lynx というテキストブラウザを利用する人がいます。新しい構文を用いると Lynx での表示に支障が出る場合がある点に注意して下さい。</li>
-</ul>
-
-<h2 id="Non-existing_&lt;meta>_elements" name="Non-existing_&lt;meta>_elements">存在しない <code>&lt;meta&gt;</code> 要素</h2>
-
-<p>多数の非推奨、非標準、不使用な値がいまだにサイトからサイトへコピーされています。特に以下の値は使用しないでください:</p>
-
-<ul>
- <li><code>&lt;meta name="MSSmartTagsPreventParsing" content="true"&gt;</code>。これは Internet Explorer 6 の<em>ベータ</em>版でしか役に立ちません。このバージョンはもはや使用されず、またスマートタグ機能は削除されており復活することはないでしょう。</li>
- <li><code>&lt;meta name="robots" content="all"&gt;</code>。robots 値が存在して、また正当であれば、<code>all</code> のような存在しない値を使用してはいけません。既定値は <code>index, follow</code> であり、これは基本的に、存在しない値 <code>all</code> で想定される動作です。<code>&lt;meta&gt;</code> 全体を削除してください。</li>
- <li><code>&lt;meta name="copyright" content="</code><code>…</code><code>"&gt;</code>。この meta は存在しません。このタグは削除して著作権表示のページまたは箇所を作成して、それに <code>rel="copyright"</code> 値を持つ {{HTMLElement("link")}} HTML 要素でリンクしてください。</li>
- <li><code>&lt;meta name="rating" content="</code><code>…</code><code>"&gt;。</code>この meta は存在しません。<code>&lt;meta&gt;</code> 全体を削除してください。</li>
-</ul>
-
-<h2 id="スクリプト内の_HTML_コメント">スクリプト内の HTML コメント</h2>
-
-<p>かつては一部のブラウザのみが {{ HTMLElement("script") }} タグを認識していました。そのためスクリプトとして解釈されるべきテキストを、ブラウザが表示してしまうことがありました。この現象に対する自然なアイデアは、スクリプトを HTML のコメントに収めることでした。この方法では、スクリプトを実行するブラウザはそのスクリプトを実行し、スクリプトを認識しないブラウザはスクリプトを無視しました。</p>
-
-<p>そのような時期から、我々は以下のような記述を受け継いできました:</p>
-
-<pre>&lt;script&gt;&lt;!--
-var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-//--&gt;
-&lt;/script&gt;
-</pre>
-
-<p>または以下のような記述:</p>
-
-<pre>&lt;script type="text/javascript"&gt;
-&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
-Blabla.extend(MyFramework.settings, { "basePath": "/" });
-//--&gt;&lt;!]]&gt;
-&lt;/script&gt;
-</pre>
-
-<p>このような記述は、今日では無意味です。スクリプトを実行しないブラウザであっても、 {{ HTMLElement("script") }} タグを無視します。スクリプトだけを {{ HTMLElement("script") }} 要素の開始タグと終了タグの間に記述してください。また、{{ htmlattrxref("src", "script") }} 属性で指定する別のファイルにスクリプトを含めることもよいです。合わせて、HTML5 の {{ htmlattrxref("async", "script") }} 属性や {{ htmlattrxref("defer", "script") }} 属性を用いることも考えてみましょう。</p>
-
-<h2 id="もはや使用すべきではない要素">もはや使用すべきではない要素</h2>
-
-<h3 id="font">font</h3>
-
-<p>&lt;font&gt; タグに代わり、CSS を用いて要素や id/class セレクタにフォントスタイルを適用してください。</p>
-
-<h3 id="b_i_u">b, i, u</h3>
-
-<p>これらは少々議論の余地がありますが、適切な場合はできる限り、それぞれ {{ HTMLElement("strong") }}、 {{ HTMLElement("em") }}、CSS (<code>text-decoration:underline</code>) を適用した {{ HTMLElement("span") }} を用いるようにしてください。</p>
-
-<p>これらのうちどの要素を選択するかは、裁量に任せます。一部の開発者向けページでは、単純に {{ HTMLElement("b") }} を {{ HTMLElement("strong") }} で、{{ HTMLElement("i") }} を {{ HTMLElement("em") }} で置き換えるようにアドバイスしています。<strong>このアドバイスに従うことは悪い考えです。</strong> {{ HTMLElement("strong") }} は特に重要な記述のため、一方 {{ HTMLElement("em") }} はそれ以外に強調する記述のための要素です。たとえば、文字をイタリック体にする目的で単純に {{ HTMLElement("em") }} を用いるのは悪い考えです。強調しないイタリック体の文字列は、CSS で <code>font-style:italic</code> を用いて実現してください。同様に、書籍や芸術作品のタイトルは伝統的にイタリック体のテキストで記載しますが、このような箇所は {{ HTMLElement("em") }} や {{ HTMLElement("i") }} より {{ HTMLElement("cite") }} 用を用いる方が、より意味を持ちます。</p>
diff --git a/files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html
deleted file mode 100644
index 08f5330b89..0000000000
--- a/files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html
+++ /dev/null
@@ -1,201 +0,0 @@
----
-title: 読み込みが速い HTML ページを作成するための Tips
-slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages
-tags:
-  - Advanced
-  - Guide
-  - HTML
-  - NeedsUpdate
-  - Performance
-  - Web
-  - Web Performance
-translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
----
-<p>これらの豆知識は、一般の知識や実験に基づくものです。</p>
-
-<p>ウェブページを最適化すると、訪問者に対して応答性のよいサイトを提供するだけでなく、ウェブサーバーやインターネット接続の負荷を低減する効果もあります。これは大規模なサイトや、緊急事態で通信量が急増するニュース速報のようなサイトでは重要でしょう。</p>
-
-<p>ページの読み込みパフォーマンスの最適化は、低速なダイヤルアップ接続やモバイルデバイスの利用者向けコンテンツのためだけではありません。ブロードバンド向けコンテンツでも重要であり、高速接続の利用者であっても劇的な改善につながるでしょう。</p>
-
-<h2 id="Tips" name="Tips">豆知識</h2>
-
-<h3 id="Reduce_page_weight" name="Reduce_page_weight">ページの量の削減</h3>
-
-<p>ページの量は、ページ読み込みパフォーマンスにおいて断然重要な要素です。</p>
-
-<p>最小化として知られる不要なホワイトスペースやコメントの削除、インラインのスクリプトや CSS の外部ファイルへの移動によりページの量を削減することで、ページの構造変更を最小限にしてダウンロードの性能を向上できるでしょう。</p>
-
-<p><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> のようなツールを利用すると、妥当な HTML ソースから行頭のホワイトスペースや過剰な空行を自動的に取り除くことができます。他に JavaScript ソースを、書式変更や難読化および長い識別子を短いものに置き換えることで 「{{原語併記("圧縮", "compress")}}」するツールもあります。</p>
-
-<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">ファイル数の最少化</h3>
-
-<p>ウェブページが参照するファイル数を削減することで、ページのダウンロードに必要な <a href="/ja/docs/HTTP" title="ja/docs/HTTP">HTTP</a> コネクションの数が減り、それによってリクエストを送信したり、レスポンスを受け取ったりする時間が短縮できます。</p>
-
-<p>ブラウザーのキャッシュ設定によっては、ブラウザーが各ファイルの <code><a href="/ja/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a></code> ヘッダーで、ファイルが最後にダウンロードされてから変更されているかどうかを確認するリクエストを送信することがあります。ページをレンダリングする前に、ブラウザがこれらの各ファイルの変更時刻をチェックする必要があるため、参照されたファイルの最終変更時刻をチェックするのに時間がかかり過ぎると、ウェブページの初期表示が遅くなることがあります。</p>
-
-<p>CSS で多数の背景画像を使用している場合は、画像スプライトと呼ばれる方法でで画像を 1 つに結合することで必要な HTTP による参照の数を減らすことができます。すなわち、背景として用いる画像ファイルは毎回同じものを適用し、それを適切な x/y 座標に調整します。これは寸法が限られている要素について最善の方法ですが、適用できない場合もあるでしょう。しかし、HTTP リクエストを少なくしてキャッシュする画像を単一にすることで、ページの読み込み時間を削減できます。</p>
-
-<h3 id="コンテンツ配信ネットワーク_(CDN)_を使用する">コンテンツ配信ネットワーク (CDN) を使用する</h3>
-
-<p>この記事の目的のために、CDN はサーバーと訪問者の間の物理的な距離を縮めるための手段です。サーバーの起点と訪問者の間の距離が長くなると、読み込み時間が長くなります。ウェブサイトのサーバーがアメリカにあり、インドからの訪問者がいるとします。米国からの訪問者と比較して、ページの読み込み時間はインドの訪問者の方がはるかに長くなります。</p>
-
-<p>CDN は地理的に分散したサーバーネットワークで、ユーザーとウェブサイトの距離を縮めるために連携して機能します。CDN はキャッシュされたウェブサイトのバージョンを保存し、それらをユーザーに最も近いネットワークノードを介して訪問者に提供するので、<a href="http://www.webperformancetoday.com/2012/04/02/latency-101-what-is-latency-and-why-is-it-such-a-big-deal/">待ち時間</a>が短縮されます。</p>
-
-<p>参考文献:</p>
-
-<ul>
- <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li>
-</ul>
-
-<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">ドメイン検索の削減</h3>
-
-<p>ドメインが分かれていると DNS の参照に時間がかかるため、CSS の link や JavaScript や画像の src に多数のドメインが現れるほど、ページの読み込み時間が長くなるでしょう。</p>
-
-<p>現実的でない場合があるかもしれませんが、ページがあるドメインと異なるドメインの使用数は必要最低限にするよう注意すべきです。</p>
-
-<h3 id="Cache_reused_content" name="Cache_reused_content">再利用されるコンテンツのキャッシュ</h3>
-
-<p>どんなコンテンツでも、キャッシュできるか、キャッシュされているか、キャッシュ期限が適切であるかを確認してください。</p>
-
-<p>特に、<code>Last-Modified</code> ヘッダーに注意してください。これは、効率のよいページのキャッシュができるようにします。このヘッダーは、ファイルを読み込もうとしているユーザーエージェントに、ファイルがいつ更新されたかなどの情報を伝えます。多くのウェブサーバーは、静的なページ (<code>.html</code>、<code>.css</code> など) にはファイルシステムに格納されている最終更新日に基づいて、自動的に <code>Last-Modified</code> ヘッダーを追加します。もちろん、動的なページ (<code>.php</code>、<code>.aspx</code> など) については取得できないので、ヘッダーを送信しません。</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="https://ja.wikipedia.org/wiki/HTTP_ETag">Wikipedia の HTTP ETag の記事</a></li>
- <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li>
-</ol>
-
-<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">ページのコンポーネントの最適な順序</h3>
-
-<p>最初の表示に必要な CSS または JavaScript と共に、ページコンテンツをまずダウンロードすると、ページの読み込み中にユーザーに最もすばやくページを表示させることができます。このコンテンツは通常テキストであるため、転送中のテキスト圧縮の効率が良く、ユーザーへの反応がもっと早くなります。</p>
-
-<p>使用される前にページの読み込みが完了する必要がある動的機能は、最初は無効にしておき、ページの読み込みが完了した後でのみ有効にするようにしましょう。これにより、JavaScript がページコンテンツの後に読み込まれるようになり、ページ読み込み時に全体が表示されるまでの時間が短縮されます。</p>
-
-<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">インラインスクリプト数の削減</h3>
-
-<p>インラインスクリプトがあると、インラインスクリプトのパース中にページの構造が変わる可能性があるとパーサーが想定しなければならないため、ページの読み込みにおいて重荷になることがあります。一般的にはインラインスクリプトの使用を減らし、また特に <code>document.write()</code> を用いたコンテンツの出力を減らすことで、ページ読み込みのパフォーマンスが向上するでしょう。 <code>document.write()</code> に基づく旧来のコンテンツ操作方法ではなく、最新のブラウザー向けの方法である <a href="/ja/docs/AJAX" title="ja/docs/AJAX">AJAX</a> を使用してください。</p>
-
-<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">最新の CSS と正しいマークアップの使用</h3>
-
-<p>最新の CSS を用いるとマークアップの量を削減し、レイアウトの点で (スペーサーの) 画像使用を減らし、また多くの場合スタイル付けした文字列の画像を置き換えることが可能です。画像は CSS と文字列の組み合わせに比べ、多大なコストがかかります。</p>
-
-<p>正しいマークアップを使用することは、ほかにも利点があります。第一に、ブラウザーが HTML を解釈する際にエラー訂正を行う必要がなくなります (ユーザーの記述法の多様性を認めるかどうかという哲学的な問題とは別です。厳密な、許容範囲のない書式を強制するというより、プログラム的に「正しく」または正規化しましょう)</p>
-
-<p>さらに、正しいマークアップをすることによって、ウェブページを<em>プリプロセス</em>ができる他のツールが自由に利用できるようになります。例えば、<a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> はホワイトスペースや省略可能な終了タグを除去することができます。しかし、重大なマークアップの誤りがあるページではツールを実行できません。</p>
-
-<h3 id="Chunk_your_content" name="Chunk_your_content">コンテンツをまとめる</h3>
-
-<p>テーブルをレイアウトのために使うのは陳腐化した方法であり、もはや使うべきではありません。レイアウトを行うには、代わりに <a href="/ja/docs/Learn/CSS/CSS_layout/Floats">floats</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a>を使用してください。</p>
-
-<p>テーブルは現在でも妥当なマークアップと考えられていますが、表形式のデータを表示するために用いるべきです。ブラウザーがページを迅速に表示するためには、テーブルを入れ子にしないようにしてください。</p>
-
-<p>以下のように深い入れ子のテーブルを使用する代わりに、</p>
-
-<pre>&lt;table&gt;
-  &lt;table&gt;
-    &lt;table&gt;
-          ...
-    &lt;/table&gt;
-  &lt;/table&gt;
-&lt;/table&gt;</pre>
-
-<p>以下のように入れ子にしないテーブルや div を用いてください。</p>
-
-<pre>&lt;table&gt;...&lt;/table&gt;
-&lt;table&gt;...&lt;/table&gt;
-&lt;table&gt;...&lt;/table&gt;
-</pre>
-
-<p><a class="external" href="https://www.w3.org/TR/css-flexbox-1/" title="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout</a> と <a class="external" href="https://www.w3.org/TR/css-grid-1/" title="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a> の仕様書も参照してください。</p>
-
-<h3 id="Minify_and_compress_SVG_assets" name="Minify_and_compress_SVG_assets">SVG の資産を最小化し圧縮する</h3>
-
-<p>多くの描画アプリケーションで作成された SVG は、不必要なメタデータを含んでいることが多く、削除することができます。サーバーで SVG 資産を gzip で圧縮するよう設定しましょう。</p>
-
-<h3 id="Minify_and_compress_your_images" name="Minify_and_compress_your_images">画像を縮小して圧縮する</h3>
-
-<p>画像が大きいと、ページの読み込みに時間がかかります。画像をページに追加する前に、圧縮することを検討してください。 <a href="https://compressjpeg.com/">Compress Jpeg</a>、<a href="https://tinypng.com">Tiny PNG</a>、その他多くのツールがオンラインで利用可能です。photoshop などのオフラインツールも使用できます。</p>
-
-<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">画像やテーブルのサイズ指定</h3>
-
-<p>ブラウザーが直ちに画像やテーブルの高さや幅を決めることができれば、ブラウザーはコンテンツの再配置を行うことなくウェブページを表示できます。これはページの表示を高速化するだけでなく、ページの読み込みが完了するまでにレイアウトが不安定に変化することを防ぎます。よって、可能な限り画像には <code>height</code> と <code>width</code> を指定するべきです。</p>
-
-<p>テーブルは以下のセレクターとプロパティの組み合わせを用いるべきです:</p>
-
-<pre>  table-layout: fixed;
-</pre>
-
-<p>そして、 <code><a href="/ja/docs/Web/HTML/Element/col">&lt;col&gt;</a></code> 要素および <code><a href="/ja/docs/Web/HTML/Element/colgroup">&lt;colgroup&gt;</a></code> 要素を用いて列の幅を指定しましょう。</p>
-
-<h3 id="Choose_your_user-agent_requirements_wisely" name="Choose_your_user-agent_requirements_wisely">ユーザーエージェント要件の賢い選択</h3>
-
-<p>ページデザインを最大限に改善するには、プロジェクトのユーザーエージェントの要件を合理的なものにしましょう。すべてのブラウザー、特に古いバージョンのブラウザーでコンテンツがピクセル単位で正確に見えるように要求しないでください。</p>
-
-<p>理想的には、適切な標準仕様に対応している最新のブラウザーを最低要件にするよう考慮するべきです。これには、最近のバージョンの Firefox、Internet Explorer、Google Chrome、Opera、Safari が含まれます。</p>
-
-<p>ただし、この記事に記載している秘訣の多くはあらゆるユーザーエージェントに適用できる汎用的なテクニックであり、かつブラウザーの対応要件にかかわらずどのようなウェブページにでも適用できます。</p>
-
-<h3 id="Example_page_structure" name="Example_page_structure">可能なら async や defer を使用する</h3>
-
-<p><a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> と <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> 属性の両方と互換性のある JavaScript を使用し、特に、複数の script タグがある場合、可能ならば <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> をいつでも使用してください。<br>
- <br>
- これにより、ページで JavaScript が読み込み中である間はレンダリングを中断できます。さもなければ、ブラウザーはこれらの属性を持たない script タグの後にあるコンテンツをレンダリングしないでしょう。</p>
-
-<p>注意: これらの属性が初回のページ読み込みに大きな効果があるとしても、属性は使用するべきですがすべてのブラウザーで動作するとは考えないようにしてください。よい JavaScript コードを作るためのガイドラインすべてに従っていれば、コードを変更する必要はありません。</p>
-
-<h2 id="Example_page_structure" name="Example_page_structure">ページ構造の例</h2>
-
-<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>
-  ページの読み込み中に<strong>必要な</strong>機能の JavaScript ファイルです。ページの読み込み後にしか実行しない DHTML は含めないようにしてください。</dd>
-  <dd>管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。</dd>
- </dl>
- </dd>
-</dl>
-
-<dl>
- <dd>· <code>BODY</code></dd>
- <dd>· 小さな塊 (tables / divs) のページコンテンツは、ページ全体の読み込みを待つことなく表示することができます。</dd>
-</dl>
-
-<dl>
- <dd>
- <dl>
-  <dd>· <code>SCRIPT </code>...<br>
-  DHTML を実行するのに用いるスクリプトです。DHTML のスクリプトはたいてい、ページが完全に読み込まれて必要なオブジェクトがすべて初期化された後にのみ実行します。よって、ページのコンテンツより先に読み込む必要はありません。先に読み込むと、ページが最初に表示されるのが遅くなります。</dd>
-  <dd>管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。</dd>
-  <dd>ロールオーバー効果で用いる画像がある場合は、ページのコンテンツをダウンロードした後に画像の先読みをしておきましょう。</dd>
- </dl>
- </dd>
-</dl>
-
-<h2 id="Related_Links" name="Related_Links">関連リンク</h2>
-
-<ul>
- <li>書籍: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a> (英語)</li>
- <li>Yahoo! によるすばらしい完成された <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">ウェブサイト高速化のためのベストプラクティス</a> (英語)</li>
- <li>パフォーマンス解析・最適化向けツール: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li>
- <li><a href="/ja/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li>
-</ul>
diff --git a/files/ja/web/guide/user_experience/using_the_page_visibility_api/index.html b/files/ja/web/guide/user_experience/using_the_page_visibility_api/index.html
deleted file mode 100644
index 524153a17e..0000000000
--- a/files/ja/web/guide/user_experience/using_the_page_visibility_api/index.html
+++ /dev/null
@@ -1,272 +0,0 @@
----
-title: Page Visibility API
-slug: Web/Guide/User_experience/Using_the_Page_Visibility_API
-tags:
-  - DOM
-  - Intermediate
-  - Tutorials
-translation_of: Web/API/Page_Visibility_API
----
-<div>{{DefaultAPISidebar("Page Visibility API")}}</div>
-
-<p>タブを使って閲覧している場合、どのウェブページもバックグラウンドにあってユーザーから見えていない場合があります。 <span class="seoSummary">Page Visibility API では、現在ページが見えているかどうかを調べる機能とともに、文書が表示されたり非表示になったりした時を監視することができるイベントを提供します。</span></p>
-
-<div class="note">
-<p><strong>メモ:</strong> The Page Visibility API は、文書が表示されていない時に不必要なタスクの実行を抑止することで、リソースを節約したり実行効率を上げたりするために特に有用です。</p>
-</div>
-
-<p>ユーザーがウィンドウを最小化したり他のタブに切り替えたりした時、 API は {{event("visibilitychange")}} イベントを送信してリスナーにページの状態が変化したことを知らせます。イベントを検出していくつかの操作を実行したり、様々な動作をしたりすることができます。例えば、ウェブアプリで動画を再生している場合、ユーザーがタブをバックグラウンドにした場合に動画を一時停止させ、ユーザーがこのタブに戻ったときに再生を再開させたりすることができます。ユーザーは動画の位置に迷うことがなく、動画の音声が新しく前景になったタブの音声を邪魔せず、ユーザーがその間に動画を見落とすことがなくなります。</p>
-
-<p>{{HTMLElement("iframe")}} の可視状態は、親文書と同じになります。 CSS プロパティにより ({{cssxref("display", "display: none;")}} のように) <code>&lt;iframe&gt;</code> を隠しても visibility のイベントは発生せず、またフレームに含まれる文書の状態も変わりません。</p>
-
-<h3 id="Use_cases" name="Use_cases">使用例</h3>
-
-<p>Page Visibility API の使用例をいくつか考えてみましょう。</p>
-
-<ul>
- <li>画像のスライドショーがあるサイトで、ユーザーが見ていない間に次のスライドに進むべきではないもの</li>
- <li>情報をダッシュボードに表示するアプリケーションで、ページが見えていないときは更新情報をサーバーへ問い合わせてほしくないもの</li>
- <li>正確なページビューをカウントできるよう、ページがプリレンダリングされている状態を検出したい。</li>
- <li>デバイスがスタンバイモードである (ユーザーが電源ボタンを押して、画面を消灯している) ときに、音声を止めたいサイト。</li>
-</ul>
-
-<p>以前、開発者はこれを検出するために不完全な代替手段を使用していました。例えば window で onblur/onfocus ハンドラーを登録することでページがアクティブではないときを知る助けになりますが、ページがユーザーから隠された状態であることは知らせてくれません。 Page Visibility API はこれを解決します。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> {{domxref("GlobalEventHandlers.onblur", "onblur")}} 及び {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} はユーザーがウィンドウを切り替えたことを教えてくれますが、非表示にしたという意味になるとは限りません。ページが非表示になるのは、ユーザーがタブを切り替えたり、タブを含むブラウザーウィンドウを最小化したりした時だけです。</p>
-</div>
-
-<h3 id="Policies_in_place_to_aid_background_page_performance" name="Policies_in_place_to_aid_background_page_performance">Policies in place to aid background page performance</h3>
-
-<p>Separately from the Page Visibility API, user agents typically have a number of policies in place to mitigate the performance impact of background or hidden tabs. These may include:</p>
-
-<ul>
- <li>Most browsers stop sending {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} callbacks to background tabs or hidden {{ HTMLElement("iframe") }}s in order to improve performance and battery life.</li>
- <li>Timers such as {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} are throttled in background/inactive tabs to help improve performance. See <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a> for more details.</li>
- <li>Budget-based background timeout throttling is now available in modern browsers (Firefox 58+, Chrome 57+), placing an additional limit on background timer CPU usage. This operates in a similar way across modern browsers, with the details being as follows:
-  <ul>
-   <li>In Firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. Chrome is very similar except that the budget is specified in seconds.</li>
-   <li>Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>). In Chrome, this value is 10 seconds.</li>
-   <li>Timer tasks are only permitted when the budget is non-negative.</li>
-   <li>Once a timer's code has finished running, the duration of time it took to execute is subtracted from its window's timeout budget.</li>
-   <li>The budget regenerates at a rate of 10 ms per second, in both Firefox and Chrome.</li>
-  </ul>
- </li>
-</ul>
-
-<p>Some processes are exempt from this throttling behavior. In these cases, you can use the Page Visibility API to reduce the tabs' performance impact while they're hidden.</p>
-
-<ul>
- <li>Tabs which are playing audio are considered foreground and aren’t throttled.</li>
- <li>Tabs running code that's using real-time network connections (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> and <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.</li>
- <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> processes are also left unthrottled in order to avoid timeouts.</li>
-</ul>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p><a href="http://daniemon.com/tech/webapps/page-visibility/">ライブサンプル</a>をご覧ください (音声つき動画あり)。</p>
-
-<p>この例では別のタブに切り替えたときに動画再生を一時停止、また元のタブに戻った時に再生を再開しており、以下のコードで作られました:</p>
-
-<pre class="brush: js">// hidden プロパティおよび可視性の変更イベントの名前を設定
-var hidden, visibilityChange;
-if (typeof document.hidden !== "undefined") { // Opera 12.10 や Firefox 18 以降でサポート
-  hidden = "hidden";
-  visibilityChange = "visibilitychange";
-} else if (typeof document.msHidden !== "undefined") {
-  hidden = "msHidden";
-  visibilityChange = "msvisibilitychange";
-} else if (typeof document.webkitHidden !== "undefined") {
-  hidden = "webkitHidden";
-  visibilityChange = "webkitvisibilitychange";
-}
-
-var videoElement = document.getElementById("videoElement");
-
-// ページが隠れたとき、動画再生を一時停止する。
-// ページが表示されたとき、動画を再生する。
-function handleVisibilityChange() {
-  if (document[hidden]) {
-    videoElement.pause();
-  } else {
-    videoElement.play();
-  }
-}
-
-// ブラウザーが addEventListener または Page Visibility API をサポートしない場合に警告
-if (typeof document.addEventListener === "undefined" || hidden === undefined) {
-  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
-} else {
-  // Page Visibility の変更を扱う
-  document.addEventListener(visibilityChange, handleVisibilityChange, false);
-
-  // 動画が一時停止されたときに、タイトルを設定する。
-  // 一時停止したことを示す。
-  videoElement.addEventListener("pause", function(){
-    document.title = 'Paused';
-  }, false);
-
-  // 動画を再生するときに、タイトルを設定する。
-  videoElement.addEventListener("play", function(){
-    document.title = 'Playing';
-  }, false);
-
-}
-</pre>
-
-<h2 id="Properties_added_to_the_Document_interface" name="Properties_added_to_the_Document_interface">Document インターフェイスに追加されたプロパティ</h2>
-
-<p>The Page Visibility API adds the following properties to the {{domxref("Document")}} interface:</p>
-
-<dl>
- <dt>{{domxref("Document.hidden")}} {{ReadOnlyInline}}</dt>
- <dd>ページがユーザーから隠された状態であると思われる場合に <code>true</code> を、そうでない場合に <code>false</code> を返します。</dd>
- <dt>{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}</dt>
- <dd>文書の現在の可視状態を示す {{domxref("DOMString")}} です。取りうる値は以下の通りです。
- <dl>
-  <dt><code>visible</code></dt>
-  <dd>ページのコンテンツは少なくとも部分的に可視状態です。実際は、最小化されていないウィンドウのフォアグラウンドのタブにページがあることを意味します。</dd>
-  <dt><code>hidden</code></dt>
-  <dd>ページのコンテンツはユーザーから見えていません。実際は、文書がバックグラウンドのタブか最小化されているウィンドウにある、あるいは OS のスクリーンがロックされていることを意味します。</dd>
-  <dt><code>prerender</code></dt>
-  <dd>ページのコンテンツはプリレンダリングされており、ユーザーから見えていません (<code>document.hidden</code> では隠されているとみなされます)。文書は <code>prerender</code> の状態から始まるかもしれませんが、プリレンダリングは1つの文書は1回しか行われないので、他の状態からこの状態に移ることはありません。
-  <div class="note"><strong>メモ:</strong> すべてのブラウザーがプリレンダリングに対応しているわけではありません。</div>
-  </dd>
-  <dt><code>unloaded</code></dt>
-  <dd>ページがメモリからアンロードされている途中です。
-  <div class="note"><strong>メモ:</strong> すべてのブラウザーが <code>unloaded</code> の値に対応しているわけではありません。</div>
-  </dd>
- </dl>
- </dd>
- <dt>{{domxref("Document.onvisibilitychange")}}</dt>
- <dd>{{event("visibilitychange")}} イベントが発生したときに呼び出されるコードを提供する {{domxref("EventListener")}} です。</dd>
-</dl>
-
-<pre class="brush: js">//startSimulation および pauseSimulation は別途定義される
-function handleVisibilityChange() {
-  if (document.hidden) {
-    pauseSimulation();
-  } else  {
-    startSimulation();
-  }
-}
-
-document.addEventListener("visibilitychange", handleVisibilityChange, false);
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Page Visibility API')}}</td>
-   <td>{{Spec2('Page Visibility API')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>機能</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>基本対応</td>
-   <td>13 {{property_prefix("webkit")}}<br>
-    33</td>
-   <td>{{CompatGeckoDesktop(18)}}<sup>[2]</sup></td>
-   <td>10</td>
-   <td>12.10<sup>[1]</sup></td>
-   <td>7</td>
-  </tr>
-  <tr>
-   <td><code>onvisibilitychange</code></td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoDesktop(56)}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td>Budget-based background timeout throttling</td>
-   <td>57</td>
-   <td>{{CompatGeckoDesktop(58)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>機能</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>基本対応</td>
-   <td>5.0<sup>[3]</sup></td>
-   <td>{{CompatGeckoMobile(18)}}<sup>[2]</sup></td>
-   <td>10</td>
-   <td>12.10<sup>[1]</sup></td>
-   <td>7<sup>[4]</sup></td>
-  </tr>
-  <tr>
-   <td><code>onvisibilitychange</code></td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile(56)}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td>Budget-based background timeout throttling</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatGeckoMobile(58)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] ブラウザーウィンドウを最小化しても <code>visibilitychange</code> イベントは発生せず、また <code>hidden</code> は <code>true</code> に変わりません。</p>
-
-<p>[2] Firefox 10 から Firefox 51 まで、このプロパティは <code>-moz-</code> 接頭辞を使用することができました。</p>
-
-<p>[3] Android 4.4 はこの機能に <code>webkit</code> の接頭辞付きで対応しています。</p>
-
-<p>[4] From iOS 11.0.2 onwards, the values are not correct in standalone mode (when you press "Add to Homescreen") and when the screen is locked (you pressed the power button). The value for <code>hidden</code> is <code>false</code> and <code>visibilityState</code> is <code>visible</code>.</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>IEBlog での <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog">Page Visibility API</a> の解説</li>
- <li>Google による <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">Page Visibility API</a> の解説</li>
-</ul>
diff --git a/files/ja/web/guide/using_formdata_objects/index.html b/files/ja/web/guide/using_formdata_objects/index.html
deleted file mode 100644
index 605885878f..0000000000
--- a/files/ja/web/guide/using_formdata_objects/index.html
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: FormData オブジェクトの利用
-slug: Web/Guide/Using_FormData_Objects
-tags:
-  - Advanced
-  - Example
-  - Forms
-  - Guide
-  - HTML
-  - Web
-translation_of: Web/API/FormData/Using_FormData_Objects
-translation_of_original: Web/Guide/Using_FormData_Objects
----
-<p class="summary"><code><a href="/ja/docs/Web/API/FormData">FormData</a></code> オブジェクトは、<code><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが <code>multipart/form-data</code> に設定されている場合に、{{domxref("HTMLFormElement.submit","submit()")}} メソッドで送信する際に使用するデータと同じ形式です。</p>
-
-<h2 id="Creating_a_FormData_object_from_scratch" name="Creating_a_FormData_object_from_scratch">スクラッチから FormData オブジェクトを作成する</h2>
-
-<p>以下のように <code>FormData</code> オブジェクトはあなた自身で作成でき、インスタンス化したら {{domxref("FormData.append","append()")}} メソッドを呼び出すことでフィールドに付加します:</p>
-
-<pre class="brush: js">var formData = new FormData();
-
-formData.append("username", "Groucho");
-formData.append("accountnum", 123456); // 数値 123456 は直ちに文字列 "123456" へ変換されます
-
-// HTML の file input でユーザが選択したファイル
-formData.append("userfile", fileInputElement.files[0]);
-
-// ファイルのような JavaScript オブジェクト
-var content = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'; // 新しいファイルのボディ...
-var blob = new Blob([content], { type: "text/xml"});
-
-formData.append("webmasterfile", blob);
-
-var request = new XMLHttpRequest();
-request.open("POST", "http://foo.com/submitform.php");
-request.send(formData);
-</pre>
-
-<div class="note"><strong>注記:</strong> フィールド "userfile" および "webmasterfile" はどちらも、ファイルを含んでいます。フィールド "accountnum" に与えた数値は <a href="/ja/docs/DOM/XMLHttpRequest/FormData#append()" title="XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> メソッドにより直ちに文字列へ変換されます (フィールドの値として {{domxref("Blob")}}、{{domxref("File")}}、または文字列をとることができます: <strong>値が Blob でもファイルでもない場合は、文字列に変換されます</strong>)。</div>
-
-<p>このサンプルでは "username"、"accountnum"、"userfile"、"webmasterfile" という名前のフィールドの値を持つ <code>FormData</code> のインスタンスを作成しており、またフォームのデータを送信するために <code>XMLHttpRequest</code> の <a href="/ja/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a> メソッドを使用しています。フィールド "webmasterfile" は {{domxref("Blob")}} です。<code>Blob</code> オブジェクトはファイルに似たオブジェクトで、イミュータブルな生デーです。Blob は必ずしも JavaScript ネイティブ形式のデータを表すとは限りません。{{domxref("File")}} インターフェイスは <code>Blob</code> を基にしており、blob の機能性を継承しつつユーザのシステムにあるファイル向けのサポートを拡張しています。<code>Blob</code> を作成するために、{{domxref("Blob.Blob","Blob()")}} コンストラクタを呼び出すことができます。</p>
-
-<h2 id="Retrieving_a_FormData_object_from_an_HTML_form" name="Retrieving_a_FormData_object_from_an_HTML_form">HTML フォームから FormData オブジェクトを取り出す</h2>
-
-<p>既存の {{HTMLElement("form")}} のデータを含む <code>FormData</code> オブジェクトを構築するために、<code>FormData</code> オブジェクトを作成する際にその form 要素を指定します:</p>
-
-<pre class="brush: js">var formData = new FormData(someFormElement);
-</pre>
-
-<p>例:</p>
-
-<pre class="brush: js">var formElement = document.querySelector("form");
-var request = new XMLHttpRequest();
-request.open("POST", "submitform.php");
-request.send(new FormData(formElement));
-</pre>
-
-<p>以下のように、<code>FormData</code> オブジェクトをフォームより取得してから送信するまでの間に、追加のデータを付加することもできます:</p>
-
-<pre class="brush: js">var formElement = document.querySelector("form");
-var formData = new FormData(formElement);
-var request = new XMLHttpRequest();
-request.open("POST", "submitform.php");
-formData.append("serialnumber", serialNumber++);
-request.send(formData);</pre>
-
-<p>これにより、必ずしもユーザが編集可能である必要がない追加情報を含めるために、送信前にフォームデータを拡張することができます。</p>
-
-<h2 id="Sending_files_using_a_FormData_object" name="Sending_files_using_a_FormData_object">FormData オブジェクトを使用してファイルを送信する</h2>
-
-<p><code>FormData</code> を使用してファイルを送信することもできます。type が "file" である {{HTMLElement("input")}} 要素を、{{htmlelement("form")}} に含めます:</p>
-
-<pre class="brush: html">&lt;form enctype="multipart/form-data" method="post" name="fileinfo"&gt;
-  &lt;label&gt;Your email address:&lt;/label&gt;
-  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /&gt;&lt;br /&gt;
-  &lt;label&gt;Custom file label:&lt;/label&gt;
-  &lt;input type="text" name="filelabel" size="12" maxlength="32" /&gt;&lt;br /&gt;
-  &lt;label&gt;File to stash:&lt;/label&gt;
-  &lt;input type="file" name="file" required /&gt;
-  &lt;input type="submit" value="Stash the file!" /&gt;
-&lt;/form&gt;
-&lt;div&gt;&lt;/div&gt;
-</pre>
-
-<p>そして、以下のようなコードを使用して送信できます:</p>
-
-<pre class="brush: js">var form = document.forms.namedItem("fileinfo");
-form.addEventListener('submit', function(ev) {
-
-  var oOutput = document.querySelector("div"),
-      oData = new FormData(form);
-
-  oData.append("CustomField", "This is some extra data");
-
-  var oReq = new XMLHttpRequest();
-  oReq.open("POST", "stash.php", true);
-  oReq.onload = function(oEvent) {
-    if (oReq.status == 200) {
-      oOutput.innerHTML = "Uploaded!";
-    } else {
-      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.&lt;br \/&gt;";
-    }
-  };
-
-  oReq.send(oData);
-  ev.preventDefault();
-}, false);
-</pre>
-
-<div class="note">
-<p><strong>注記</strong>: フォームへの参照を渡した場合は、open() の呼び出しで指定したメソッドよりもフォームで指定したメソッドを優先します。</p>
-</div>
-
-<p>以下のように、{{domxref("FormData")}} オブジェクトへ直接 {{domxref("File")}} や {{domxref("Blob")}} を追加することもできます:</p>
-
-<pre class="brush: js">data.append("myfile", myBlob, "filename.txt");
-</pre>
-
-<p>{{domxref("FormData.append","append()")}} メソッドを使用する際は省略可能な第 3 引数を使用して、<code>Content-Disposition</code> ヘッダに含めるファイル名を渡すことができます。これはサーバへ送信されます。ファイル名を指定しない (あるいは引数がサポートされない) 場合は、"blob" という名前を使用します。</p>
-
-<p>正しいオプションを設定することで、jQuery と共に <code>FormData</code> を使用することもできます:</p>
-
-<pre class="brush: js">var fd = new FormData(document.querySelector("form"));
-fd.append("CustomField", "This is some extra data");
-$.ajax({
-  url: "stash.php",
-  type: "POST",
-  data: fd,
-  processData: false,  // jQuery がデータを処理しないよう指定
-  contentType: false   // jQuery が contentType を設定しないよう指定
-});
-</pre>
-
-<h2 id="Submitting_forms_and_uploading_files_via_AJAX_without_FormData_objects" name="Submitting_forms_and_uploading_files_via_AJAX_without_FormData_objects"><code>FormData</code> オブジェクトを<em>使用せずに</em> AJAX でフォームやファイルを送信する</h2>
-
-<p>FormData オブジェクトを<em>使用せず</em>に、<a href="/ja/docs/AJAX" title="AJAX">AJAX</a> でシリアライズや送信する方法を知りたい場合は、 <a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">こちらの節</a>をご覧ください。</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
- <li>{{domxref("HTMLFormElement")}}</li>
- <li>{{domxref("Blob")}}</li>
- <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a></li>
-</ul>
diff --git a/files/ja/web/guide/writing_forward-compatible_websites/index.html b/files/ja/web/guide/writing_forward-compatible_websites/index.html
new file mode 100644
index 0000000000..aa0e54539d
--- /dev/null
+++ b/files/ja/web/guide/writing_forward-compatible_websites/index.html
@@ -0,0 +1,81 @@
+---
+title: Writing forward-compatible websites
+slug: Web_Development/Writing_forward-compatible_websites
+tags:
+  - CSS
+  - Compatibility
+  - DOM
+  - HTML
+  - JavaScript
+  - Web Development
+translation_of: Web/Guide/Writing_forward-compatible_websites
+---
+<p>このページでは、新しいバージョンのブラウザが公開されても壊れることのない Web サイトを記述する方法を説明します。<br>
+  <br>
+  これはイントラネットや公衆向けでない Web サイトで特に重要です。私たちがあなたのコードを見ることができないので、それが壊れていることを確認できないのです。これらのすべてに従うことができない場合もありますが、可能な限り多くの事項に従うことで、Web サイトを将来にわたって有用な状態にすることの助けになります。</p>
+<h2 id="JavaScript">JavaScript</h2>
+<h3 id="onfoo_属性でグローバル変数へアクセスする際に_window._接頭辞を付加する"><code>onfoo</code> 属性でグローバル変数へアクセスする際に "<code>window</code>." 接頭辞を付加する</h3>
+<p>HTML の要素でイベントハンドラのコンテンツ属性 (<code>onclick</code>、 <code>onmouseover</code> など) が使用されているとき、それら属性でのすべての名前探索は始めに要素自身、次にフォームコントロール要素の場合はそのフォーム、そして document、さらに (あなたがグローバル変数を定義した) window の順に行われます。例えば、以下のマークアップがある場合は:</p>
+<pre>&lt;div onclick="alert(ownerDocument)"&gt;Click me&lt;/div&gt;
+</pre>
+<p>文字列をクリックすると <code>div</code> の <code>ownerDocument</code> をアラートで表示します。これは、<code>var ownerDocument</code> がグローバルスコープで宣言されている場合でも動作します。</p>
+<p>これが意味することは、イベントハンドラのコンテンツ属性でグローバル変数にアクセスするときやグローバルに宣言された任意の関数を呼び出すとき、あなたの関数や変数と同じ名前の新たな DOM プロパティが仕様書で要素やドキュメントに追加され、またそれをブラウザが実装した場合に、常に名前が衝突した時点で探索が終わってしまいます。これが起きると、突如関数が呼び出されなくなります。この現象は HTML5 の進展に伴い、さまざまなサイトで何度も発生しています。</p>
+<p>これを防ぐには、以下のように "window." を用いてグローバル変数にアクセスするのが最適です:</p>
+<pre>&lt;script&gt;
+  function localName() {
+    alert('Function localName has been called');
+  }
+&lt;/script&gt;
+&lt;div onclick="<strong>window.</strong>localName()"&gt;Clicking me should show an alert&lt;div&gt;
+</pre>
+<h3 id="自身で管理しないスクリプトを連結しない">自身で管理しないスクリプトを連結しない</h3>
+<p>ファイルレベルで使用される ECMAScript の <code>"use strict;"</code> ディレクティブは、ファイル全体に適用されます。このため、非 Strict モードの動作に依存するスクリプトを Strict モードのスクリプトに付加すると、スクリプトが動作しなくなります。</p>
+<h3 id="使用する_JavaScript_ライブラリの作者に、上記のガイドラインに従っているかを確認する">使用する JavaScript ライブラリの作者に、上記のガイドラインに従っているかを確認する</h3>
+<p>好みのライブラリの開発者に、上記のガイドラインに従うことを提案しましょう。彼らが従わない場合、ライブラリが将来も問題を起こさないとは信頼できません。残念ながら、ライブラリはこれらのガイドラインに逆らっています。</p>
+<h2 id="検出">検出</h2>
+<h3 id="特定の機能の検出">特定の機能の検出</h3>
+<p>ある機能を用いようとするとき、可能であればその機能を見つけるためにオブジェクト検出を行ってください。簡単な例として、<code>body.style</code> に <code>"filter"</code> があるかのテストが真になるブラウザは必ず Microsoft Internet Explorer であり、それゆえ例えばイベントハンドラで <code>window.event</code> オブジェクトが利用できるとは考えないでください。また、ある一定の DOM 機能をサポートしているブラウザは他の機能、特に非標準の DOM 機能もサポートしているとは考えないでください。あるいは逆に、他の機能をサポート<em>しない</em>とも考えないでください。例えば、script 要素で <code>onload</code> をサポートするブラウザは <code>onreadystatechange</code> をサポートしないと考えてはいけません。各ブラウザの動作が収束することにより、機能は追加や削除されます。また、不具合の修正も行います。これら 3 点は過去に発生しており、また今後も発生するでしょう。</p>
+<p>従ってある機能の存在有無と別の機能の存在有無に関連はありませんので、ある機能やオブジェクトの検出結果から別のことを予測しないでください。</p>
+<h3 id="UA_検出を行わない">UA 検出を行わない</h3>
+<p>これはある機能 (ユーザエージェント (UA) 文字列内に特定の文字列が含まれていること) が別の機能の有無を暗に示すと考えられている、特に一般的な実例です。</p>
+<h4 id="UA_検出が必要な場合は、過去のブラウザのバージョンにのみ行う">UA 検出が必要な場合は、過去のブラウザのバージョンにのみ行う</h4>
+<p>UA 検出に頼る必要がある場合は、特定のブラウザの過去のバージョンに対して用いてください。始めに、未知のブラウザおよびあなたがテストで用いているブラウザの現行バージョンと将来のバージョン向けのデフォルトのコードパスがあります。そして、デフォルトのコードパスが特定のブラウザの過去のバージョンで動作せず、またそのコードパスで機能の欠落を検出することで問題点を発見できないときは、該当する過去のバージョンのブラウザを検出することでそのブラウザ向けのハックを追加してかまいません。</p>
+<p>この提案において、"現行" とはあなたがテストを行った最新のバージョンのブラウザを指します。例えばあなたのデフォルトのコードパスが Firefox Aurora で適切に動作するが、Firefox Beta や最新の release 版では不具合があるためにコードが動作しない場合は、テストを行った Aurora の Firefox バージョン番号を "現行" とみなし、一般向けに公開されていないものであっても Beta のバージョンを "過去" のバージョンと考えてください。</p>
+<h3 id="異なるブラウザ向けに分離したコードパスはむやみに作成しない">異なるブラウザ向けに分離したコードパスはむやみに作成しない</h3>
+<p>関係のあるコードパスの一つがすべてのブラウザで正しく動作するのに、わざわざオブジェクト検出や UA 検出に基づいて異なるコードを実行することは行わないでください。各ブラウザの動作がお互い収束するように変更され、そのために代替のコードパスを設定していたあなたのサイトが正常に動作しなくなってしまう可能性があります。</p>
+<h2 id="テストの実施">テストの実施</h2>
+<h3 id="すべての主要なエンジンについてテストを行う">すべての主要なエンジンについてテストを行う</h3>
+<p>コードは少なくとも Firefox、Chrome または Safari (これらは同じ WebKit エンジンを基にしているため)、Opera、Internet Explorer でテストを行ってください。すべての現行ブラウザや未知のブラウザ向けに単一のコードパスを持つためこの提案に従えば、そのコードパスがすべての主要なエンジンで動作することをテストすることで、コードが将来にわたって動作する可能性がとても高くなります。</p>
+<p>時々、各ブラウザがある機能を若干異なる形で実装します。主要なエンジンすべてで動作する単一のコードパスが得られた場合は、あなたが使用している機能の動作は各ブラウザ間で既に収束していることを意味します。一方、各ブラウザの動作が完全には収束していない場合は、どのエンジンの標準動作を支持するかが判明することに関係なくコードが動作します。</p>
+<h2 id="ブラウザ独自の機能や接頭辞">ブラウザ独自の機能や接頭辞</h2>
+<h3 id="現行あるいは将来のバージョンのブラウザを目標にするハックを行わない">現行あるいは将来のバージョンのブラウザを目標にするハックを行わない</h3>
+<p>これは、現在ある不具合間の相関関係が将来の不具合間の相関関係を暗に示すと考えられている一般的な事例です。現行バージョンでは解決している不具合に関するハックを、過去のバージョンのブラウザに対して適用することは問題ありません。ブラウザが不具合 X を修正すると、不具合 X が存在するリリースすべてには不具合 Y もあることが確実にわかり、不具合 X が存在することを不具合 Y の回避策の適用基準として用いることができます。</p>
+<p>この提案において、前出の UA 検出でのアドバイスのように "現行" とはあなたがテストを行った最新のバージョンのブラウザを指します。</p>
+<h3 id="最新の非標準機能に依存することを避ける">最新の非標準機能に依存することを避ける</h3>
+<p>接頭辞ありの機能であっても、それを使用することは危険です。仕様書の進展に伴い、ブラウザの接頭辞ありの実装が仕様書に追随して変更されることがあります。またその機能が標準化されると、接頭辞ありのバージョンは削除されるでしょう。</p>
+<p>接頭辞が付加された非標準の機能は、実験やフィードバックを行うためにブラウザの開発者が提供しているものであり、一般に展開することを意味していません。これらの機能を使うことを選択した場合は、機能の変更に伴って頻繁にサイトの更新が必要であることを覚悟してください。</p>
+<h3 id="(標準化されていても)_広く実装されていない最新機能を用いる際は縮退処理のテストを行う">(標準化されていても) 広く実装されていない最新機能を用いる際は縮退処理のテストを行う</h3>
+<p>あなたが用いている機能を実装していないブラウザ でどう動作するか (そのようなブラウザを Web サイトの業務で日常使用していない場合は特に)、必ずテストを行ってください。</p>
+<h3 id="ベンダー接頭辞が付加されている機能は、過去のバグが多いバージョンを目的とする場合を除き使用しない">ベンダー接頭辞が付加されている機能は、過去のバグが多いバージョンを目的とする場合を除き使用しない</h3>
+<p>ベンダー接頭辞が付加されている機能は、その動作が将来変更されるかもしれません。ブラウザがある機能を接頭辞なしで公開しても、利用可能であれば接頭辞なし版を常に使用するようにすることで、過去のリリース向けに接頭辞あり版を使用することができます。良い例として、<code>make-it-pretty</code> プロパティの <code>"sometimes"</code> 値について接頭辞あり版とは異なる動作を接頭辞なし版に実装して公開した、<code>-vnd</code> CSS 接頭辞を用いるブラウザベンダー向けの記述を示します:</p>
+<pre class="brush: html">&lt;style&gt;
+  .pretty-element {
+    -vnd-make-it-pretty: sometimes;
+    make-it-pretty: sometimes;
+  }
+&lt;/style&gt;
+</pre>
+<p>上記の例で、規則中の宣言の順番は重要です。接頭辞のないものは、最後に置くことが必要です。</p>
+<h3 id="少なくとも一つのブラウザがサポートするまで、接頭辞のない_CSS_プロパティや_API_は使用しない">少なくとも一つのブラウザがサポートするまで、接頭辞のない CSS プロパティや API は使用しない</h3>
+<p>何らかの機能について接頭辞なし版がある程度広くサポートされるまでは、その動作が突然変更されることがあります。特に、実際に接頭辞なし版をサポートしているブラウザがない機能は使用しないでください。接頭辞あり版の文法と完成版の文法が同じであると考えてはいけません。</p>
+<h2 id="良好なコード">良好なコード</h2>
+<h3 id=">_の欠落を防ぐ"><code>&gt;</code> の欠落を防ぐ</h3>
+<p>検証ツールを用いることがこれを確実にする方法の一つですが、あなたの Web サイト全体を検証しないとしてもすべての <code>&gt;</code> 文字が置かれていることを確認してください。<code>&gt;</code> が欠落していると、後ろのタグの名前が前のタグの属性であると判断されて予期せぬ状況に陥る場合があります。これはしばらくの間は動作するかもしれませんが、仕様書でその属性に意味が与えられると動作しなくなります。以下の例は HTML5 をサポートしないブラウザでは動作しますが、HTML5 をサポートするブラウザでは動作しません:</p>
+<pre class="brush: html">&lt;form action="http://www.example.com"&gt;
+  &lt;input type="submit" value="Submit the form"
+&lt;/form&gt;
+</pre>
+<p>これは <code>input</code> タグで <code>&gt;</code> が欠落しているためです。</p>
+<h3 id="コード中で動作しない実験的な部分は残さない">コード中で動作しない実験的な部分は残さない</h3>
+<p>何か行いたいことがあって CSS プロパティを使用してみたが効果がなかった場合、そのプロパティは削除してください。将来、予期しない動作が発生する可能性があります。</p>
+<p>{{ languages( { "en": "en/Web_development/Writing_forward-compatible_websites"} ) }}</p>
author	Florian Merz <me@fiji-flo.de>	2021-02-11 12:07:59 +0100
committer	Florian Merz <me@fiji-flo.de>	2021-02-11 12:07:59 +0100
commit	6ef1fa4618e08426b874529619a66adbd3d1fcf0 (patch)
tree	890e3e27131be010d82ef957fa68db495006cb0e /files/ja/web/guide
parent	8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
download	translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.gz translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.bz2 translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.zip