英語版章題マクロを除去（残り） (#1388)

2 files changed, 155 insertions, 96 deletions

diff --git a/files/ja/web/api/element/clientleft/index.html b/files/ja/web/api/element/clientleft/index.html
index 2df6336f37..7a17600640 100644
--- a/files/ja/web/api/element/clientleft/index.html
+++ b/files/ja/web/api/element/clientleft/index.html
@@ -1,47 +1,86 @@
 ---
-title: element.clientLeft
+title: Element.clientLeft
 slug: Web/API/Element/clientLeft
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
+- API
+- CSSOM View
+- NeedsAgnostify
+- NeedsMarkupWork
+- Property
+- Reference
+browser-compat: api.Element.clientLeft
 translation_of: Web/API/Element/clientLeft
 ---
-<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p>
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
-<p>要素の左ボーダーの幅のピクセル数です。 要素のテキストの方向が右から左である場合と、 オーバーフローにより左の縦スクロールバーがレンダリングされた場合の縦スクロールバーの幅を含みます。<code>clientLeft</code> は左マージン、または、左パディングを含んでいません。<code>clientLeft</code> は読み込み専用です。</p>
-<p><a href="ja/Gecko">Gecko</a> ベースアプリケーションは、 Gecko 1.9 (<a href="ja/Firefox_3">Firefox 3</a>、{{ Bug(111207) }} で実装) から <code>clientLeft</code> をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。 {{ 英語版章題("Syntax") }}</p>
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
-<pre class="eval">var <var>left</var> = <var>element</var>.clientLeft;
+<div>{{ APIRef("DOM") }}</div>
+
+<p>要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 <code>clientLeft</code> は、左マージンまたは左パディングを含みません。 <code>clientLeft</code> は読み取り専用です。</p>
+
+<p><a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> 設定項目</a>が 1 または 3 に設定されており、書字方向が RTL に設定されている場合、<strong>垂直スクロールバーは左側に配置され</strong>、これが clientLeft の計算方法に影響します。</p>
+
+<div class="note">
+	<p><strong>注:</strong> このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
+	</p>
+</div>
+
+<p style="height: 5px !important; margin: 0px;"></p>
+
+<div class="note">
+	<p><strong>注:</strong> 要素に
+		<code>display: inline</code> が設定されている場合、境界の幅に関わらず <code>clientLeft</code> は <code>0</code> を返します。</p>
+</div>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">var <var>left</var> = <var>element</var>.clientLeft;
 </pre>
-<p>{{ 英語版章題("Example") }}</p>
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
-<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
- <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
-  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
-  <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
-  <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
-  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
- </div>
- <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
-<p style="margin-top: 270px;"><img alt="Image:clientLeft.png"></p>
-<p><img alt="layout.scrollbar.side プロパティが 1、または、3 に設定されたときの縦スクロールバーの位置"></p>
-<p><a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side">
- <i>
-  layout.scrollbar.side</i>
- プロパティ</a> が、1、あるいは、3 に設定されたときと、テキストの方向が右から左へ設定されたときは、<b> 縦スクロールバーは、左側に表示されます。</b> そして、これは、<code>clientLeft</code> が自動計算される方法に影響します。</p>
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
-<p>W3C の仕様の一部ではありません。</p>
-<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3>
+
+<h2 id="Example">例</h2>
+
+<div id="offsetContainer"
+	style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+	<div id="idDiv"
+		style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+		<p id="PaddingTopLabel"
+			style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
+			padding-top</p>
+
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+			incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+			nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+		</p>
+
+		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+			fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+			culpa qui officia deserunt mollit anim id est laborum.</p>
+
+		<p id="PaddingBottomLabel"
+			style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
+			padding-bottom</p>
+	</div>
+	<strong
+		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong>
+	<strong
+		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong>
+	<strong
+		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong>
+	<strong
+		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong>
+	<em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em>
+</div>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="Notes">注</h2>
+
 <p><code>clientLeft</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>
-<h3 id=".E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9" name=".E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9">リファレンス</h3>
-<ul>
- <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientleft.asp?frame=true">MSDN's clientLeft definition</a>（<a class="external" href="http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/references/properties/clientLeft.asp">日本語版</a>）</li>
- <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a>（<a class="external" href="http://msdn.microsoft.com/library/ja/jpisdk/dhtml/measure/measuring.asp?FRAME=true#chp_measuring">日本語版</a>）</li>
-</ul>
-<p> </p>
-<p> </p>
-<div class="noinclude">
-  </div>
-<p>{{ languages( { "en": "en/DOM/element.clientLeft", "es": "es/DOM/element.clientLeft", "fr": "fr/DOM/element.clientLeft", "pl": "pl/DOM/element.clientLeft" } ) }}</p>
+
+<p>要素に設定された書字方向が右書きである場合の垂直スクロールバーの位置は、 <a class="external"	href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> の設定に依存します</a></p>
+
+<p><a href="/ja/Gecko">Gecko</a> ベースのアプリケーションは、 <code>clientLeft</code> を Gecko 1.9 (<a href="/ja/Firefox_3">Firefox 3</a>、 {{
+	Bug(111207) }} による実装) から実装しました。このプロパティは Firefox 2 以前では対応していません。</p>
diff --git a/files/ja/web/api/htmlelement/oncut/index.html b/files/ja/web/api/htmlelement/oncut/index.html
index 3e572d1e61..5eb4abb44d 100644
--- a/files/ja/web/api/htmlelement/oncut/index.html
+++ b/files/ja/web/api/htmlelement/oncut/index.html
@@ -1,64 +1,84 @@
 ---
-title: element.oncut
+title: HTMLElement.oncut
 slug: Web/API/HTMLElement/oncut
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
+- API
+- Event Handler
+- Experimental
+- HTMLElement
+- NeedsSpecTable
+- Property
+- Reference
+browser-compat: api.HTMLElement.oncut
 translation_of: Web/API/HTMLElement/oncut
 ---
-<p> </p>
-<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p>
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
-<p><b>oncut</b> プロパティは、現在の要素での onCut イベントハンドラのコードを返します。</p>
-<p>{{ 英語版章題("Syntax") }}</p>
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
-<pre class="eval"><i>element</i>.oncut =<i>functionRef</i>;
-</pre>
-<p>ここでの
- <i>
-  functionRef</i>
- は、関数です。それは、たいてい、他の場所で宣言された関数の名前、あるいは、
- <i>
-  function 式</i>
- です。<a href="ja/Core_JavaScript_1.5_Reference/Functions">Core JavaScript 1.5 Reference:Functions</a> を参照してください。</p>
-<p>{{ 英語版章題("Example") }}</p>
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
-<pre>&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;oncut event example&lt;/title&gt;
-
-&lt;script&gt;
-  function log(txt)
-  {
-    document.getElementById("log").appendChild(document.createTextNode(txt + "\n"));
-  }
-&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-&lt;h3&gt;Play with this editor!&lt;/h3&gt;
-&lt;textarea rows="3" cols="80" oncopy="log('Copied!');" oncut="log('Cut blocked!'); return false;"&gt;
-  Try copying and cutting the text in this area!
-&lt;/textarea&gt;
-&lt;h3&gt;Log&lt;/h3&gt;
-&lt;textarea rows="15" cols="80" id="log" readonly="true"&gt;&lt;/textarea&gt;
-&lt;/body&gt;
-&lt;/html&gt;
+<div>{{ APIRef("HTML DOM") }} {{SeeCompatTable}}</div>
+
+<p><code><strong>HTMLElement.oncut</strong></code> は {{domxref("HTMLElement")}} インターフェイスのプロパティで、 {{event("cut")}} イベントを処理する<a href="/ja/docs/Web/Events/Event_handlers">イベントハンドラー</a>です。</p>
+
+<p><code>cut</code> イベントは、ユーザーがテキストを切り取りしようとしたときに発行されます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>target</em>.oncut = <em>functionRef</em>;
 </pre>
-<p>この例では、テキストエリアからテキストをコピーすることはできますが、切り取ることはできません。また、コピーと切り取りの試みのログを表示します。</p>
-<p>{{ 英語版章題("Notes") }}</p>
-<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3>
-<p>このイベントは、ユーザがテキストを切り取ろうとしたときに発生します。</p>
-<p>{{ 英語版章題("Specification") }}</p>
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
-<p>仕様の一部ではありません。</p>
-<p>{{ 英語版章題("See also") }}</p>
-<h3 id=".E5.8F.82.E7.85.A7" name=".E5.8F.82.E7.85.A7">参照</h3>
+
+<h3 id="Value">値</h3>
+
+<p><code>functionRef</code> は関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は唯一の引数として {{domxref("ClipboardEvent")}} オブジェクトを受け取ります。</p>
+
+<h2 id="Example">例</h2>
+
+<p>この例では、テキストを {{htmlElement("textarea")}} からコピーすることはできますが、テキストを切り取りすることはできません。また、コピーと切り取りを仕様としたことをそれぞれ記録します。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h3&gt;このテキストエリアで実行しましょう。&lt;/h3&gt;
+&lt;textarea id="editor" rows="3"&gt;このフィールド内のテキストをコピーしたり切り取りしたりしてみましょう。&lt;/textarea&gt;
+
+&lt;h3&gt;ログ:&lt;/h3&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function logCopy(event) {
+  log.innerText = 'Copied!\n' + log.innerText;
+}
+
+function preventCut(event) {
+  event.preventDefault();
+  log.innerText = 'Cut blocked!\n' + log.innerText;
+}
+
+const editor = document.getElementById('editor');
+const log = document.getElementById('log');
+
+editor.oncopy = logCopy;
+editor.oncut = preventCut;</pre>
+
+<h3 id="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 700, 300)}}</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+<p><a href="https://html.spec.whatwg.org/multipage/webappapis.html#handler-oncut">WHATWG
+    標準</a></p>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<p>Firefox 13 以降では、設定項目 <code>dom.event.clipboardevents.enabled</code> でこの機能を制御できます。既定では <code>true</code> になっていますが、無効にすることができます。</p>
+
+<h2 id="See_also">関連情報</h2>
+
 <ul>
- <li><code><a href="ja/DOM/element.oncopy">oncopy</a></code></li>
- <li><code><a href="ja/DOM/element.onpaste">onpaste</a></code></li>
+  <li>クリップボード API イベント {{event("cut")}}</li>
+  <li>関連するイベントハンドラー
+    <ul>
+      <li>{{domxref("HTMLElement.oncopy")}}</li>
+      <li>{{domxref("HTMLElement.onpaste")}}</li>
+    </ul>
+  </li>
 </ul>
-<div class="noinclude">
-  </div>
-<p>{{ languages( { "en": "en/DOM/element.oncut" } ) }}</p>