initial commit

42 files changed, 4245 insertions, 0 deletions

diff --git a/files/ja/web/api/htmlelement/accesskeylabel/index.html b/files/ja/web/api/htmlelement/accesskeylabel/index.html
new file mode 100644
index 0000000000..63f93fb974
--- /dev/null
+++ b/files/ja/web/api/htmlelement/accesskeylabel/index.html
@@ -0,0 +1,84 @@
+---
+title: accessKeyLabel
+slug: Web/API/HTMLElement/accessKeyLabel
+translation_of: Web/API/HTMLElement/accessKeyLabel
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLElement.accessKeyLabel</code></strong> は読み取り専用プロパティで、 {{jsxref("String")}} で要素に割り当てられたアクセスキーを (あれば) 返します。それ以外の場合は空文字列を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>label</var> = <var>element</var>.accessKeyLabel
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var node = document.getElementById('btn1');
+if (node.accessKeyLabel) {
+  node.title += ' [' + node.accessKeyLabel + ']';
+} else {
+  node.title += ' [' + node.accessKey + ']';
+}
+
+node.onclick = function () {
+  var p = document.createElement('p');
+  p.textContent = 'Clicked!';
+  node.parentNode.appendChild(p);
+};
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;button accesskey="h" title="Caption" id="btn1"&gt;Hover me&lt;/button&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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('HTML WHATWG', "interaction.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初回定義から変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>削除。 <a href="https://github.com/w3c/html/pull/144">pull w3c/html#144</a>, <a href="https://github.com/w3c/html/issues/99">issue w3c/html#99</a>, <a href="https://discourse.wicg.io/t/accesskeylabel-author-accessible-info-about-shortcuts/1392/3">WICG discussion</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<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.HTMLElement.accessKeyLabel")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("element.accessKey")}}</li>
+ <li><a href="/ja/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> グローバル属性</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/animationcancel_event/index.html b/files/ja/web/api/htmlelement/animationcancel_event/index.html
new file mode 100644
index 0000000000..8547499860
--- /dev/null
+++ b/files/ja/web/api/htmlelement/animationcancel_event/index.html
@@ -0,0 +1,184 @@
+---
+title: 'HTMLElement: animationcancel イベント'
+slug: Web/API/HTMLElement/animationcancel_event
+tags:
+  - Animation
+  - AnimationEvent
+  - CSS Animations
+  - CSS アニメーション
+  - Event
+  - Reference
+  - animationcancel
+  - events
+  - イベント
+translation_of: Web/API/HTMLElement/animationcancel_event
+---
+<div>{{APIRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>animationcancel</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>が予期せず中断されたときに発生します。言い換えれば、 {{domxref("HTMLElement/animationend_event", "animationend")}} イベントを送出せずに実行が停止するときはいつでもです。これは {{cssxref("animation-name")}} が変更されてアニメーションが削除されたり、動いているノードが CSS を使用して非表示にされた場合などに起こることがあります。したがって、直接または原因として、その包含ノードのいずれかが隠されています。</p>
+
+<p>このイベントのイベントハンドラーは、 {{domxref("GlobalEventHandlers.onanimationcancel", "onanimationcancel")}} プロパティを設定するか、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用することで追加することができます。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th>キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th>インターフェイス</th>
+   <td>{{domxref("AnimationEvent")}}</td>
+  </tr>
+  <tr>
+   <th>イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers/onanimationcancel","onanimationcancel")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードは現在アニメーションしている要素を取得し、 <code>animationcancel</code> イベントのリスナーを追加します。次に、要素の {{cssxref("display")}} プロパティを <code>none</code> に設定し、 <code>animationcancel</code> イベントを引き起こします。</p>
+
+<pre class="brush: js">const animated = document.querySelector('.animated');
+
+animated.addEventListener('animationcancel', () =&gt; {
+  console.log('アニメーションが取り消されました');
+});
+
+animated.style.display = 'none';</pre>
+
+<p>同様に、 {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティを <code>addEventListener()</code> の代わりに使用するとこうなります。</p>
+
+<pre class="brush: js">const animated = document.querySelector('.animated');
+animated.onanimationcancel = () =&gt; {
+  console.log('アニメーションが取り消されました');
+};
+
+animated.style.display = 'none';</pre>
+
+<h3 id="Live_example" name="Live_example">ライブデモ</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="animation-example"&gt;
+    &lt;div class="container"&gt;
+        &lt;p class="animation"&gt;あなたは私たちの惑星を訪れるために寒い夜を選びました。&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;button class="activate" type="button"&gt;アニメーションを有効にする&lt;/button&gt;
+    &lt;div class="event-log"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.container {
+  height: 3rem;
+}
+
+.event-log {
+  width: 25rem;
+  height: 2rem;
+  border: 1px solid black;
+  margin: 0.2rem;
+  padding: 0.2rem;
+}
+
+.animation.active {
+  animation-duration: 2s;
+  animation-name: slidein;
+  animation-iteration-count: 2;
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(100%) scaleX(3);
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+  }
+}
+</pre>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const animation = document.querySelector('p.animation');
+const animationEventLog = document.querySelector('.animation-example&gt;.event-log');
+const applyAnimation = document.querySelector('.animation-example&gt;button.activate');
+let iterationCount = 0;
+
+animation.addEventListener('animationstart', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション開始' `;
+});
+
+animation.addEventListener('animationiteration', () =&gt; {
+  iterationCount++;
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション反復: ${iterationCount}' `;
+});
+
+animation.addEventListener('animationend', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション終了'`;
+  animation.classList.remove('active');
+  applyAnimation.textContent = "アニメーションを有効にする";
+});
+
+animation.addEventListener('animationcancel', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション取り消し'`;
+});
+
+applyAnimation.addEventListener('click', () =&gt; {
+  animation.classList.toggle('active');
+  animationEventLog.textContent = '';
+  iterationCount = 0;
+  let active = animation.classList.contains('active');
+  if (active) {
+    applyAnimation.textContent = "アニメーションを取り消す";
+  } else {
+    applyAnimation.textContent = "アニメーションを有効にする";
+  }
+});
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</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("CSS3 Animations", "#eventdef-animationevent-animationcancel")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>初回定義</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.HTMLElement.animationcancel_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>関連イベント: {{domxref("HTMLElement/animationstart_event", "animationstart")}}, {{domxref("HTMLElement/animationend_event", "animationend")}}, {{domxref("HTMLElement/animationiteration_event", "animationiteration")}}</li>
+ <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Window/animationcancel_event", "animationcancel")}}</li>
+ <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/animationcancel_event", "animationcancel")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/animationend_event/index.html b/files/ja/web/api/htmlelement/animationend_event/index.html
new file mode 100644
index 0000000000..6408d73e7f
--- /dev/null
+++ b/files/ja/web/api/htmlelement/animationend_event/index.html
@@ -0,0 +1,182 @@
+---
+title: 'HTMLElement: animationend イベント'
+slug: Web/API/HTMLElement/animationend_event
+tags:
+  - Animation
+  - AnimationEvent
+  - CSS Animations
+  - CSS アニメーション
+  - CSS3 Animations
+  - Event
+  - Reference
+  - animationend
+  - イベント
+translation_of: Web/API/HTMLElement/animationend_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>animationend</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>が完了したときに発生します。アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、 <code>animationend</code> イベントは発生しません。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th>キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th>インターフェイス</th>
+   <td>{{domxref("AnimationEvent")}}</td>
+  </tr>
+  <tr>
+   <th>イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers/onanimationend","onanimationend")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、アニメーションしている要素を取得し、<code>animationend</code> イベントを待ち受けします。</p>
+
+<pre class="brush: js">const animated = document.querySelector('.animated');
+
+animated.addEventListener('animationend', () =&gt; {
+  console.log('アニメーション終了');
+});</pre>
+
+<p>同様に、 <code>onanimationend</code> イベントハンドラープロパティを使用するとこうなります。</p>
+
+<pre class="brush: js">const animated = document.querySelector('.animated');
+
+animated.onanimationend = () =&gt; {
+  console.log('アニメーション終了');
+};</pre>
+
+<h3 id="Live_example" name="Live_example">ライブデモ</h3>
+
+<h4 id="HTML" name="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="animation-example"&gt;
+    &lt;div class="container"&gt;
+        &lt;p class="animation"&gt;あなたは私たちの惑星を訪れるために寒い夜を選びました。&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;button class="activate" type="button"&gt;アニメーションを有効にする&lt;/button&gt;
+    &lt;div class="event-log"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS" name="CSS">CSS</h4>
+
+<pre class="brush: css">.container {
+  height: 3rem;
+}
+
+.event-log {
+  width: 25rem;
+  height: 2rem;
+  border: 1px solid black;
+  margin: .2rem;
+  padding: .2rem;
+}
+
+.animation.active {
+  animation-duration: 2s;
+  animation-name: slidein;
+  animation-iteration-count: 2;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<h4 id="JS" name="JS">JS</h4>
+
+<pre class="brush: js">const animation = document.querySelector('p.animation');
+const animationEventLog = document.querySelector('.animation-example&gt;.event-log');
+const applyAnimation = document.querySelector('.animation-example&gt;button.activate');
+let iterationCount = 0;
+
+animation.addEventListener('animationstart', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション開始' `;
+});
+
+animation.addEventListener('animationiteration', () =&gt; {
+  iterationCount++;
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション反復: ${iterationCount}' `;
+});
+
+animation.addEventListener('animationend', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション終了'`;
+  animation.classList.remove('active');
+  applyAnimation.textContent = "アニメーションを有効にする";
+});
+
+animation.addEventListener('animationcancel', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション取り消し'`;
+});
+
+applyAnimation.addEventListener('click', () =&gt; {
+  animation.classList.toggle('active');
+  animationEventLog.textContent = '';
+  iterationCount = 0;
+  let active = animation.classList.contains('active');
+  if (active) {
+    applyAnimation.textContent = "アニメーションを取り消す";
+  } else {
+    applyAnimation.textContent = "アニメーションを有効にする";
+  }
+});
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</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("CSS3 Animations", "#eventdef-animationevent-animationend")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>初回定義</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.HTMLElement.animationend_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>関連イベント: {{domxref("HTMLElement/animationstart_event", "animationstart")}}, {{domxref("HTMLElement/animationcancel_event", "animationcancel")}}, {{domxref("HTMLElement/animationiteration_event", "animationiteration")}}</li>
+ <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/animationend_event", "animationend")}}</li>
+ <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/animationend_event", "animationend")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/animationiteration_event/index.html b/files/ja/web/api/htmlelement/animationiteration_event/index.html
new file mode 100644
index 0000000000..5423651c77
--- /dev/null
+++ b/files/ja/web/api/htmlelement/animationiteration_event/index.html
@@ -0,0 +1,184 @@
+---
+title: 'HTMLElement: animationiteration イベント'
+slug: Web/API/HTMLElement/animationiteration_event
+tags:
+  - Animation
+  - AnimationEvent
+  - CSS Animations
+  - CSS アニメーション
+  - Event
+  - Reference
+  - animationiteration
+  - イベント
+translation_of: Web/API/HTMLElement/animationiteration_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>animationiteration</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>の反復が1回分終了し、次の回が始まったときに発生します。このイベントは {{domxref("HTMLElement/animationend_event", "animationend")}} イベントと同時には発生せず、従って <code>animation-iteration-count</code> が1のアニメーションでは発生しません。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th>キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th>インターフェイス</th>
+   <td>{{domxref("AnimationEvent")}}</td>
+  </tr>
+  <tr>
+   <th>イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers/onanimationiteration","onanimationiteration")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードは <code>animationiteration</code> を使用して、アニメーションの反復が終了した回数を追跡します。</p>
+
+<pre class="brush: js">const animated = document.querySelector('.animated');
+
+let iterationCount = 0;
+
+animated.addEventListener('animationiteration', () =&gt; {
+  iterationCount++;
+  console.log(`アニメーション反復回数: ${iterationCount}`);
+});</pre>
+
+<p>同様に、 <code>onanimationiteration</code> イベントハンドラープロパティを使用するとこうなります。</p>
+
+<pre class="brush: js">const animated = document.querySelector('.animated');
+
+let iterationCount = 0;
+
+animated.onanimationiteration = () =&gt; {
+  iterationCount++;
+  console.log(`アニメーション反復回数: ${iterationCount}`);
+};</pre>
+
+<h3 id="Live_example" name="Live_example">ライブデモ</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="animation-example"&gt;
+    &lt;div class="container"&gt;
+        &lt;p class="animation"&gt;あなたは私たちの惑星を訪れるために寒い夜を選びました。&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;button class="activate" type="button"&gt;アニメーションを有効にする&lt;/button&gt;
+    &lt;div class="event-log"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.container {
+  height: 3rem;
+}
+
+.event-log {
+  width: 25rem;
+  height: 2rem;
+  border: 1px solid black;
+  margin: 0.2rem;
+  padding: 0.2rem;
+}
+
+.animation.active {
+  animation-duration: 2s;
+  animation-name: slidein;
+  animation-iteration-count: 2;
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(100%) scaleX(3);
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+  }
+}
+</pre>
+
+<h4 id="JS" name="JS">JS</h4>
+
+<pre class="brush: js">const animation = document.querySelector('p.animation');
+const animationEventLog = document.querySelector('.animation-example&gt;.event-log');
+const applyAnimation = document.querySelector('.animation-example&gt;button.activate');
+let iterationCount = 0;
+
+animation.addEventListener('animationstart', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション開始' `;
+});
+
+animation.addEventListener('animationiteration', () =&gt; {
+  iterationCount++;
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション反復: ${iterationCount}' `;
+});
+
+animation.addEventListener('animationend', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション終了'`;
+  animation.classList.remove('active');
+  applyAnimation.textContent = "アニメーションを有効にする";
+});
+
+animation.addEventListener('animationcancel', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション取り消し'`;
+});
+
+applyAnimation.addEventListener('click', () =&gt; {
+  animation.classList.toggle('active');
+  animationEventLog.textContent = '';
+  iterationCount = 0;
+  let active = animation.classList.contains('active');
+  if (active) {
+    applyAnimation.textContent = "アニメーションを取り消す";
+  } else {
+    applyAnimation.textContent = "アニメーションを有効にする";
+  }
+});
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</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("CSS3 Animations", "#eventdef-animationevent-animationiteration")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>初回定義</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.HTMLElement.animationiteration_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>関連イベント: {{domxref("HTMLElement/animationstart_event", "animationstart")}}, {{domxref("HTMLElement/animationend_event", "animationend")}}, {{domxref("HTMLElement/animationcancel_event", "animationcancel")}}</li>
+ <li>{{domxref("Document")}} を対象としたこのイベント: <code><a href="/ja/docs/Web/API/Document/animationiteration_event">animationiteration</a></code></li>
+ <li>{{domxref("Window")}} を対象としたこのイベント: <code><a href="/ja/docs/Web/API/Window/animationiteration_event">animationiteration</a></code></li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/animationstart_event/index.html b/files/ja/web/api/htmlelement/animationstart_event/index.html
new file mode 100644
index 0000000000..db76bdad50
--- /dev/null
+++ b/files/ja/web/api/htmlelement/animationstart_event/index.html
@@ -0,0 +1,181 @@
+---
+title: 'HTMLElement: animationstart イベント'
+slug: Web/API/HTMLElement/animationstart_event
+tags:
+  - API
+  - Animation
+  - AnimationEvent
+  - CSS Animations
+  - CSS アニメーション
+  - Event
+  - HTMLElement
+  - Reference
+  - イベント
+translation_of: Web/API/HTMLElement/animationstart_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>animationstart</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>が開始したときに発生します。 {{cssxref("animation-delay")}} がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントは {{domxref("AnimationEvent/elapsedTime", "elapsedTime")}} が待ち時間の絶対値と等しくなったときに発生します (および、関連して、アニメーションはシーケンスの中でそのタイムインデックスに再生が始まります)。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th>キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th>インターフェイス</th>
+   <td>{{domxref("AnimationEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers/onanimationstart","onanimationstart")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードは <code>animationstart</code> イベントを待ち受けし、イベント発生時にメッセージを記録します。</p>
+
+<pre class="brush: js">const animated = document.querySelector('.animated');
+
+animated.addEventListener('animationstart', () =&gt; {
+  console.log('アニメーション開始');
+});
+</pre>
+
+<p>同様に、 <code>onanimationstart</code> を使用するとこうなります。</p>
+
+<pre class="brush: js">const animated = document.querySelector('.animated');
+
+animated.onanimationstart = () =&gt; {
+  console.log('アニメーション開始');
+};
+</pre>
+
+<h3 id="Live_example" name="Live_example">ライブデモ</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="animation-example"&gt;
+    &lt;div class="container"&gt;
+        &lt;p class="animation"&gt;あなたは私たちの惑星を訪れるために寒い夜を選びました。&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;button class="activate" type="button"&gt;アニメーションを有効にする&lt;/button&gt;
+    &lt;div class="event-log"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.container {
+  height: 3rem;
+}
+
+.event-log {
+  width: 25rem;
+  height: 2rem;
+  border: 1px solid black;
+  margin: 0.2rem;
+  padding: 0.2rem;
+}
+
+.animation.active {
+  animation-duration: 2s;
+  animation-name: slidein;
+  animation-iteration-count: 2;
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(100%) scaleX(3);
+  }
+  to {
+    transform: translateX(0) scaleX(1);
+  }
+}
+</pre>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const animation = document.querySelector('p.animation');
+const animationEventLog = document.querySelector('.animation-example&gt;.event-log');
+const applyAnimation = document.querySelector('.animation-example&gt;button.activate');
+let iterationCount = 0;
+
+animation.addEventListener('animationstart', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション開始' `;
+});
+
+animation.addEventListener('animationiteration', () =&gt; {
+  iterationCount++;
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション反復: ${iterationCount}' `;
+});
+
+animation.addEventListener('animationend', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション終了'`;
+  animation.classList.remove('active');
+  applyAnimation.textContent = "アニメーションを有効にする";
+});
+
+animation.addEventListener('animationcancel', () =&gt; {
+  animationEventLog.textContent = `${animationEventLog.textContent}'アニメーション取り消し'`;
+});
+
+applyAnimation.addEventListener('click', () =&gt; {
+  animation.classList.toggle('active');
+  animationEventLog.textContent = '';
+  iterationCount = 0;
+  let active = animation.classList.contains('active');
+  if (active) {
+    applyAnimation.textContent = "アニメーションを取り消す";
+  } else {
+    applyAnimation.textContent = "アニメーションを有効にする";
+  }
+});
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</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("CSS3 Animations", "#eventdef-animationevent-animationstart")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>初回定義</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.HTMLElement.animationstart_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>関連イベント: {{domxref("HTMLElement/animationend_event", "animationend")}}, {{domxref("HTMLElement/animationiteration_event", "animationiteration")}}, {{domxref("HTMLElement/animationcancel_event", "animationcancel")}}</li>
+ <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/animationstart_event", "animationstart")}}</li>
+ <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/animationstart_event", "animationstart")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/beforeinput_event/index.html b/files/ja/web/api/htmlelement/beforeinput_event/index.html
new file mode 100644
index 0000000000..4939f3e9b8
--- /dev/null
+++ b/files/ja/web/api/htmlelement/beforeinput_event/index.html
@@ -0,0 +1,101 @@
+---
+title: 'HTMLElement: beforeinput イベント'
+slug: Web/API/HTMLElement/beforeinput_event
+tags:
+  - DOM
+  - Event
+  - Experimental
+  - InputEvent
+  - Reference
+  - beforeinput
+translation_of: Web/API/HTMLElement/beforeinput_event
+---
+<div>{{APIRef}} {{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">DOM の <strong><code>beforeinput</code></strong> イベントは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、または {{HTMLElement("textarea")}} 要素の値が変更されようとしているときに発生します。 このイベントは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} が有効になっている要素、および {{domxref("Document.designMode", "designMode")}} がオンになっている要素にも適用されます。</span></p>
+
+<p><code>contenteditable</code> や <code>designMode</code> の場合、イベントのターゲットは<em>編集ホスト</em>です。 これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th>キャンセル</th>
+   <td>可</td>
+  </tr>
+  <tr>
+   <th>インターフェイス</th>
+   <td>{{DOMxRef("InputEvent")}}</td>
+  </tr>
+  <tr>
+   <th>イベントハンドラプロパティ</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th>同期 / 非同期</th>
+   <td>同期</td>
+  </tr>
+  <tr>
+   <th>Composed</th>
+   <td>はい</td>
+  </tr>
+  <tr>
+   <th>デフォルトのアクション</th>
+   <td>DOM 要素の更新</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、{{HtmlElement("input")}} 要素の値を変更する直前に値を記録します。</p>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input placeholder="テキストを入力" name="name"/&gt;
+&lt;p id="values"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript" name="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('beforeinput', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.beforeinput_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント: <code><a href="/ja/docs/Web/API/HTMLElement/input_event">input</a></code></li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/change_event/index.html b/files/ja/web/api/htmlelement/change_event/index.html
new file mode 100644
index 0000000000..2449327908
--- /dev/null
+++ b/files/ja/web/api/htmlelement/change_event/index.html
@@ -0,0 +1,147 @@
+---
+title: 'HTMLElement: change イベント'
+slug: Web/API/HTMLElement/change_event
+tags:
+  - Change
+  - Event
+  - HTML
+  - HTML DOM
+  - HTMLElement
+  - Reference
+  - Web
+translation_of: Web/API/HTMLElement/change_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>change</code> イベントは {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素において、ユーザーによる要素の値の変更が確定したときに発生します。 {{domxref("HTMLElement/input_event", "input")}} イベントとは異なり、 <code>change</code> イベントは要素の値 (<code>value</code>) が変更されるたびに発生するとは限りません。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers/onchange", "onchange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>変更される要素の種類やユーザーが要素を操作する方法によって、 <code>change</code> イベントは異なる時点で発生します。</p>
+
+<ul>
+ <li><code>{{HTMLElement('input/radio', '&lt;input type="radio"&gt;')}}</code> および <code>{{HTMLElement('input/checkbox', '&lt;input type="checkbox"&gt;')}}</code> の場合は、 (クリックまたはキーボードを使用して) 要素が <code>:checked</code> になったとき。</li>
+ <li>ユーザが明示的に変更を確定したとき (たとえば、 {{HTMLElement("select")}} のドロップダウンの値をマウスクリックで選択した場合、 <code>{{HTMLElement('input/date', '&lt;input type="date"&gt;')}}</code> の日付ピッカーで日付を選択した場合、 <code>{{HTMLElement('input/file', '&lt;input type="file"&gt;')}}</code> のファイル選択ダイアログでファイルを選択した場合など)。</li>
+ <li>要素の値が変更されたが、確定しないうちに要素がフォーカスを失ったとき (たとえば、 {{HTMLElement("textarea")}} または <code>{{HTMLElement('input/text', '&lt;input type="text"&gt;')}}</code> の値を編集した後に、要素がフォーカスを失った場合)。</li>
+</ul>
+
+<p>HTML 仕様書には、 <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply"><code>change</code> イベントを発生させる <code>&lt;input&gt;</code> 型</a>の一覧があります。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="&lt;select>_element" name="&lt;select>_element">&lt;select&gt; 要素</h3>
+
+<div id="select-example">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;label&gt;アイスクリームの味:
+  &lt;select class="ice-cream" name="ice-cream"&gt;
+    &lt;option value=""&gt;1つ選択してください …&lt;/option&gt;
+    &lt;option value="chocolate"&gt;チョコレート&lt;/option&gt;
+    &lt;option value="sardine"&gt;イワシ&lt;/option&gt;
+    &lt;option value="vanilla"&gt;バニラ&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/label&gt;
+
+&lt;div class="result"&gt;&lt;/div&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  display: grid;
+  grid-template-areas: "select result";
+}
+
+select {
+  grid-area: select;
+}
+
+.result {
+  grid-area: result;
+}
+</pre>
+</div>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const selectElement = document.querySelector('.ice-cream');
+
+selectElement.addEventListener('change', (event) =&gt; {
+  const result = document.querySelector('.result');
+  result.textContent = `You like ${event.target.value}`;
+});
+</pre>
+</div>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('select-example', '100%', '75px') }}</p>
+
+<h3 id="Text_input_element" name="Text_input_element">テキスト入力要素</h3>
+
+<p><code>&lt;input type="text"&gt;</code> など一部の要素では、コントロールがフォーカスを失うまで <code>change</code> イベントが発生しません。以下のフィールドに何かを入力してから、他の部分をクリックするとイベントが発生します。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;input placeholder="何かテキストを入力" name="name"/&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js notranslate">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('change', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.srcElement.value;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{ EmbedLiveSample('Text_input_element', '100%', '75px') }}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "indices.html#event-change", "change")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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.HTMLElement.change_event")}}</p>
+
+<p>すべてのブラウザーにおいて、特定の操作で <code>change</code> イベントが発生するかどうかが同じであるとは限りません。例えば、 Gecko では {{HTMLElement("select")}} 要素をキーボードで操作すると、 <code>change</code> イベントは Enter を押すか <code>&lt;select&gt;</code> からフォーカスが離れるまで発生しませんでした ({{bug("126379")}} を参照)。ただし、 Firefox 63 (Quantum) からは、すべての主要なブラウザーと同じ動作になりました。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
diff --git a/files/ja/web/api/htmlelement/click/index.html b/files/ja/web/api/htmlelement/click/index.html
new file mode 100644
index 0000000000..2f801a0b12
--- /dev/null
+++ b/files/ja/web/api/htmlelement/click/index.html
@@ -0,0 +1,84 @@
+---
+title: HTMLElement.click()
+slug: Web/API/HTMLElement/click
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Method
+  - Reference
+translation_of: Web/API/HTMLElement/click
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><span class="seoSummary"><code><strong>HTMLElement.click()</strong></code> メソッドは、要素のマウスクリックをシミュレートします。</span></p>
+
+<p>サポートしている要素（{{HTMLElement("input")}} など）で <code>click()</code> を使用すると、要素の <code>click</code> イベントが発生します。 このイベントは、ドキュメントツリー (またはイベントチェーン) の上位の要素にバブルアップし、<code>click</code> イベントを発生させます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><em>element</em>.click()</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>チェックボックスの上にマウスポインタを移動させたときのマウスクリックをシミュレートします。</p>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;input type="checkbox" id="myCheck" onmouseover="myFunction()" onclick="alert('click イベントが発生しました')"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="JavaScript" name="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">// マウスオーバーで、myFunction を実行します
+function myFunction() {
+  document.getElementById("myCheck").click();
+}
+</pre>
+
+<h2 id="Specification" name="Specification">仕様</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('HTML WHATWG', 'interaction.html#dom-click')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div>
+
+<p>{{Compat("api.HTMLElement.click")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベントハンドラ
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onclick")}}</li>
+   <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li>
+   <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<div id="eJOY__extension_root"></div>
diff --git a/files/ja/web/api/htmlelement/contenteditable/index.html b/files/ja/web/api/htmlelement/contenteditable/index.html
new file mode 100644
index 0000000000..f845ec1c49
--- /dev/null
+++ b/files/ja/web/api/htmlelement/contenteditable/index.html
@@ -0,0 +1,63 @@
+---
+title: HTMLElement.contentEditable
+slug: Web/API/HTMLElement/contentEditable
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Property
+  - Reference
+translation_of: Web/API/HTMLElement/contentEditable
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">{{domxref("HTMLElement")}} インターフェイスの <strong><code>contentEditable</code></strong> プロパティは、要素が編集可能かどうかを指定します。</span> この列挙属性には、次の値を設定できます。</p>
+
+<ul>
+ <li>'<code>true</code>' は、要素の内容が編集可能 (<code>contenteditable</code>) であることを示します。</li>
+ <li>'<code>false</code>' は、要素が編集できないことを示します。</li>
+ <li>'<code>inherit</code>' は、要素がその親の編集可能状態を継承することを示します。</li>
+</ul>
+
+<p>{{domxref("HTMLElement.isContentEditable")}} プロパティを使用して、このプロパティの計算された {{jsxref("Boolean")}} 値をテストできます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>editable</var> = <var>element</var>.contentEditable
+<var>element</var>.contentEditable = 'true'
+</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('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初回定義</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.HTMLElement.contentEditable")}}</p>
+
+<p>Internet Explorer では、<code>contenteditable</code> を {{htmlelement("table")}}、{{htmlelement("col")}}、{{htmlelement("colgroup")}}、{{htmlelement("tbody")}}、{{htmlelement("td")}}、{{htmlelement("tfoot")}}、{{htmlelement("th")}}、{{htmlelement("thead")}}、および {{htmlelement("tr")}} 要素に直接適用することはできません。 コンテンツを編集可能な {{htmlelement("span")}} または {{htmlelement("div")}} 要素を、表の個々のセル内に配置できます。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツを編集可能にする</a></li>
+ <li>{{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>{{htmlattrxref("contenteditable")}} グローバル属性</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/contextmenu/index.html b/files/ja/web/api/htmlelement/contextmenu/index.html
new file mode 100644
index 0000000000..555502b761
--- /dev/null
+++ b/files/ja/web/api/htmlelement/contextmenu/index.html
@@ -0,0 +1,44 @@
+---
+title: HTMLElement.contextMenu
+slug: Web/API/HTMLElement/contextMenu
+tags:
+  - API
+  - Deprecated
+  - Element
+  - HTML
+  - HTML DOM
+  - Property
+  - Reference
+  - UX
+translation_of: Web/API/HTMLElement/contextMenu
+---
+<div>{{APIRef("HTML DOM")}}{{deprecated_header()}}
+<p><span class="seoSummary"><code><strong>HTMLElement.contextMenu</strong></code> プロパティは、{{htmlattrxref("contextmenu")}} 属性を使用して要素に割り当てられたコンテキストメニューを参照します。 メニュー自体は、{{HTMLElement("menu")}} 要素を使用して作成されます。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <var>elementContextMenu</var> = <var>element</var>.contextMenu;
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">var contextMenu = document.getElementById("element").contextMenu;
+
+// 最初のメニューエントリのラベルを変更する
+contextMenu.firstElementChild.label = "新しいラベル";
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.contextMenu")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{htmlattrxref("contextmenu")}}</li>
+ <li>{{HTMLElement("menu")}}</li>
+ <li>{{HTMLElement("menuitem")}}</li>
+</ul>
+</div>
diff --git a/files/ja/web/api/htmlelement/dir/index.html b/files/ja/web/api/htmlelement/dir/index.html
new file mode 100644
index 0000000000..b8c4c2d963
--- /dev/null
+++ b/files/ja/web/api/htmlelement/dir/index.html
@@ -0,0 +1,86 @@
+---
+title: HTMLElement.dir
+slug: Web/API/HTMLElement/dir
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Property
+  - Reference
+translation_of: Web/API/HTMLElement/dir
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><code><strong>HTMLElement.dir</strong></code> プロパティは、現在の要素のコンテンツのテキストを書く書字方向を取得または設定します。</p>
+
+<p>要素のテキストを書く書字方向 (text writing directionality) は、テキストが向かう方向です (異なる言語体系のサポートのため)。 アラビア語とヘブライ語は、 RTL 書字方向を使用する典型的な言語です。</p>
+
+<p>画像の <code>dir</code> プロパティを "<code>rtl</code>" に設定できます。 この場合、HTML 属性の <code>title</code> と <code>alt</code> は、 "<code>rtl</code>" としてフォーマットされ、定義されます。</p>
+
+<p>表の <code>dir</code> が "<code>rtl</code>" に設定されている場合、列の順序は右から左に配置されます。</p>
+
+<p>要素の <code>dir</code> が "<code>auto</code>" に設定されている場合、要素の方向は、最初の明確な書字方向文字 (strong directionality character)、または既定で親要素の書字方向に基づいて決定されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em><var>currentWritingDirection</var></em> = <em>elementNodeReference</em>.dir;
+<em>elementNodeReference</em>.dir = <em><var>newWritingDirection</var></em>;
+</pre>
+
+<ul>
+ <li><code><var>currentWritingDirection</var></code> は、現在の要素のテキストを書く方向を表す文字列変数です。</li>
+ <li><code><var>newWritingDirection</var></code> は、テキストを書く方向の値を表す文字列変数です。</li>
+</ul>
+
+<p><code>dir</code> が取り得る値は、左から右への <code>ltr</code>、右から左への <code>rtl</code>、および要素の内容に基づいて要素の方向を決定する必要があることを指定する <code>auto</code> です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">var parg = document.getElementById("para1");
+parg.dir = "rtl";
+// "para1" として識別される段落のテキストの方向を変更します
+</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('HTML WHATWG', '#dom-dir', 'dir')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>{{SpecName('DOM2 HTML')}} からの変更はありません。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>{{SpecName('DOM1')}} からの変更はありません。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-52460740', 'dir')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>初期定義</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.HTMLElement.dir")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("document.dir")}}</li>
+ <li>HTML の <a href="/ja/docs/Web/HTML/Global_attributes/dir"><code>dir</code></a> グローバル属性</li>
+ <li>CSS の {{cssxref("direction")}} プロパティ</li>
+ <li>CSS の {{cssxref(":dir")}} 擬似クラス</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/forcespellcheck/index.html b/files/ja/web/api/htmlelement/forcespellcheck/index.html
new file mode 100644
index 0000000000..107b076917
--- /dev/null
+++ b/files/ja/web/api/htmlelement/forcespellcheck/index.html
@@ -0,0 +1,32 @@
+---
+title: HTMLElement.forceSpellCheck()
+slug: Web/API/HTMLElement/forceSpellCheck
+tags:
+  - API
+  - Experimental
+  - HTML DOM
+  - HTMLElement
+  - Method
+  - Reference
+translation_of: Web/API/HTMLElement/forceSpellCheck
+---
+<p>{{ APIRef("HTML DOM") }}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">{{domxref("HTMLElement")}} インターフェイスの <strong><code>forceSpellCheck()</code></strong> メソッドは、ユーザーが要素にフォーカスしていない場合でも、HTML 要素のスペルチェックと文法チェックを強制します。 このメソッドは、{{glossary("user agent","ユーザーエージェント")}} の振る舞いをオーバーライドします。 チェックの特定のユーザーインターフェイス（赤い下線が表示されるかどうかなど）は、ユーザーエージェントによって決定されます。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>element</em>.forceSpellCheck()</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.forceSpellCheck")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Controlling_spell_checking_in_HTML_formsControlling_spell_checking_in_HTML_forms">Controlling spell checking in HTML forms</a></li>
+ <li>{{htmlattrxref("spellcheck")}} 属性</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/gotpointercapture_event/index.html b/files/ja/web/api/htmlelement/gotpointercapture_event/index.html
new file mode 100644
index 0000000000..423fd520a5
--- /dev/null
+++ b/files/ja/web/api/htmlelement/gotpointercapture_event/index.html
@@ -0,0 +1,102 @@
+---
+title: 'HTMLElement: gotpointercapture イベント'
+slug: Web/API/HTMLElement/gotpointercapture_event
+tags:
+  - DOM
+  - Event
+  - PointerEvent
+  - Reference
+translation_of: Web/API/HTMLElement/gotpointercapture_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>gotpointercapture</code></strong> イベントは、{{domxref("Element.setPointerCapture","setPointerCapture()")}} を使用して要素がポインタをキャプチャしたときに発生します。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("PointerEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td>{{domxref("GlobalEventHandlers/ongotpointercapture", "ongotpointercapture")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では <code>&lt;p&gt;</code> 要素を取得し、<code>gotpointercapture</code> イベントをリッスンします。 それから、<code>pointerdown</code> イベントの要素に対して <code>setPointerCapture()</code> を呼び出します。 これは <code>gotpointercapture</code> をトリガーします。</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('gotpointercapture', () =&gt; {
+  console.log('キャプチャされた！')
+});
+
+para.addEventListener('pointerdown', (event) =&gt; {
+  para.setPointerCapture(event.pointerId);
+});
+</pre>
+
+<p><code>ongotpointercapture</code> イベントハンドラプロパティを使用した同じ例</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.ongotpointercapture = () =&gt; {
+  console.log('キャプチャされた！')
+};
+
+para.addEventListener('pointerdown', (event) =&gt; {
+  para.setPointerCapture(event.pointerId);
+});</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-gotpointercapture-event')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.gotpointercapture_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント
+  <ul>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/ongotpointercapture">ongotpointercapture</a></code> イベントハンドラプロパティ</li>
+ <li><code>Document</code> でのこのイベント: <code><a href="/ja/docs/Web/API/Document/gotpointercapture_event">gotpointercapture</a></code> イベント</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/hidden/index.html b/files/ja/web/api/htmlelement/hidden/index.html
new file mode 100644
index 0000000000..390321e26a
--- /dev/null
+++ b/files/ja/web/api/htmlelement/hidden/index.html
@@ -0,0 +1,155 @@
+---
+title: HTMLElement.hidden
+slug: Web/API/HTMLElement/hidden
+tags:
+  - API
+  - Attribute
+  - Element
+  - HTML
+  - HTML element
+  - Property
+  - Reference
+  - hidden
+translation_of: Web/API/HTMLElement/hidden
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><span class="seoSummary">{{domxref("HTMLElement")}} の <strong><code>hidden</code></strong> プロパティは {{jsxref("Boolean")}}  で、要素が非表示の場合は <code>true</code> で、それ以外の場合は <code>false</code> です。 これは、CSS プロパティの {{cssxref("display")}} を使用して要素の可視性を制御することとはまったく異なります。</span> <code>hidden</code> プロパティはすべてのプレゼンテーションモードに適用され、ユーザーが直接アクセスできるコンテンツを非表示にするために使用しないでください。</p>
+
+<p><code>hidden</code> の適切な使用例は次のとおりです。</p>
+
+<ul>
+ <li>まだ関連性はないが、後で必要になる可能性のあるコンテンツ</li>
+ <li>以前は必要であったが、もはや存在しないコンテンツ</li>
+ <li>テンプレートのようにページの他の部分で再利用されるコンテンツ</li>
+ <li>描画バッファとしてオフスクリーンのキャンバスを作成する</li>
+</ul>
+
+<p>不適切な使用例には次のものがあります。</p>
+
+<ul>
+ <li>タブ付きダイアログボックスでのパネルの非表示</li>
+ <li>あるプレゼンテーションでコンテンツを非表示にし、他のプレゼンテーションでは表示されるようにする</li>
+</ul>
+
+<div class="note">
+<p><code>hidden</code> でない要素は、<code>hidden</code> 要素にリンクしてはいけません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>isHidden</em> = <em>HTMLElement</em>.hidden;
+
+
+<em>HTMLElement</em>.hidden = true | false;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>要素がビューから隠されている場合に <code>true</code> になる <code>Boolean</code>。 それ以外の場合、値は <code>false</code> です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次に、非表示のブロックを使用して、ユーザーが珍しい要求に同意した後に表示されるお礼のメッセージを含める例を示します。</p>
+
+<h3 id="JavaScript" name="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.getElementById("okButton")
+        .addEventListener("click", function() {
+  document.getElementById("welcome").hidden = true;
+  document.getElementById("awesome").hidden = false;
+}, false);</pre>
+
+<p>このコードは、ウェルカムパネルを非表示にして、その場所に "awesome" という名前のフォローアップパネルを表示する、ウェルカムパネルの [OK] ボタンのハンドラを設定します。</p>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<p>2つのボックスの HTML は次のとおりです。</p>
+
+<h4 id="The_welcome_panel" name="The_welcome_panel">ウェルカムパネル</h4>
+
+<pre class="brush: html">&lt;div id="welcome" class="panel"&gt;
+  &lt;h1&gt;Foobar.com へようこそ！&lt;/h1&gt;
+  &lt;p&gt;[OK] をクリックすると、あなたは毎日が素晴らしいことに同意します！&lt;/p&gt;
+  &lt;button class="button" id="okButton"&gt;OK&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>この HTML は、ユーザーをサイトに歓迎し、[OK] ボタンをクリックして同意していることを伝えるパネルを（{{HTMLElement("div")}} ブロック内に）作成します。</p>
+
+<h4 id="The_follow-up_panel" name="The_follow-up_panel">フォローアップパネル</h4>
+
+<p>ユーザーがウェルカムパネルの [OK] ボタンをクリックすると、JavaScript コードは2つのパネルのそれぞれの <code>hidden</code> の値を変更して2つのパネルを入れ替えます。 フォローアップパネルは、HTML では次のようになります。</p>
+
+<pre class="brush: html">&lt;div id="awesome" class="panel" hidden&gt;
+  &lt;h1&gt;ありがとう！&lt;/h1&gt;
+  &lt;p&gt;今日は素晴らしいことに同意してくれてありがとう！
+  さあ、世界をもっと素晴らしいものにするために、
+  そこから出て、素晴らしいことをしてください！&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<p>コンテンツは、以下の CSS を使用してスタイル設定されます。</p>
+
+<pre class="brush: css">.panel {
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border: 1px solid #22d;
+  padding: 12px;
+  width: 500px;
+  text-align: center;
+}
+
+.button {
+  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
+  padding: 5px 36px;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 175%;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example', 560, 200) }}</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.hidden")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Element.hidden")}}</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/index.html b/files/ja/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..acca58a5ab
--- /dev/null
+++ b/files/ja/web/api/htmlelement/index.html
@@ -0,0 +1,277 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Interface
+  - NeedsNewLayout
+  - Reference
+translation_of: Web/API/HTMLElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLElement</code></strong> インターフェイスは、任意の <a href="/ja/docs/Web/HTML">HTML</a> 要素を表します。要素によってはこのインターフェイスで直接実装しており、その他の要素はこれを継承したインターフェイスを通して実装されています。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="プロパティ">プロパティ</h2>
+
+<p><em>親である {{DOMxRef("Element")}} からプロパティを継承しており、{{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("ElementCSSInlineStyle")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("HTMLOrForeignElement")}}, {{DOMxRef("TouchEventHandlers")}} からのプロパティを実装しています。</em></p>
+
+<dl>
+ <dt>{{DOMxRef("HTMLElement.accessKey")}}</dt>
+ <dd>要素に割り当てられたアクセスキーを表す {{DOMxRef("DOMString")}} です。</dd>
+ <dt>{{DOMxRef("HTMLElement.accessKeyLabel")}} {{ReadOnlyInline}}</dt>
+ <dd>要素に割り当てられたアクセスキーを含む {{DOMxRef("DOMString")}} を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.contentEditable")}}</dt>
+ <dd>{{DOMxRef("DOMString")}}。この文字列が <code>true</code> の場合は要素が編集可能、<code>false</code> の場合は編集不可です。</dd>
+ <dt>{{DOMxRef("HTMLElement.isContentEditable")}} {{ReadOnlyInline}}</dt>
+ <dd>要素のコンテンツが編集可能か否かを示す {{DOMxRef("Boolean")}} を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.contextMenu")}} {{Deprecated_Inline}}</dt>
+ <dd>要素に割り当てたコンテキストメニューを表す {{DOMxRef("HTMLMenuElement")}} です。<code>null</code> になる可能性があります。</dd>
+ <dt>{{DOMxRef("HTMLOrForeignElement.dataset")}} {{ReadOnlyInline}}</dt>
+ <dd>要素の <a href="docs/Web/Guide/HTML/Using_data_attributes">カスタムデータ属性</a> (<code>data-*</code>) を読み書きできるスクリプトの {{DOMxRef("DOMStringMap")}} を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.dir")}}</dt>
+ <dd>要素の記述方向を表す <code>dir</code> グローバル属性を反映する {{DOMxRef("DOMString")}} です。可能な値は、<code>"ltr"</code> および <code>"rtl"</code>、<code>"auto"</code> です。</dd>
+ <dt>{{DOMxRef("HTMLElement.draggable")}}</dt>
+ <dd>要素がドラッグ可能かどうかを示す {{jsxref("Boolean")}} です。</dd>
+ <dt>{{DOMxRef("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
+ <dd><code>dropzone</code> グローバル属性を反映し、要素のドロップ操作に関する動作を記述する {{DOMxRef("DOMSettableTokenList")}} を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.hidden")}}</dt>
+ <dd>要素が hidden か否かを示す {{jsxref("Boolean")}} です。</dd>
+ <dt>{{DOMxRef("HTMLElement.inert")}}</dt>
+ <dd>{{JSxRef("Boolean")}} で、ユーザー操作イベント、ページ内テキスト検索 (「ページ内を検索」)、テキストの選択において、ユーザーエージェントが指定したノードがないかのように動作するかどうかを示します。</dd>
+ <dt>{{DOMxRef("HTMLElement.innerText")}}</dt>
+ <dd>ノードやその子孫の「描画される」テキストの内容を表します。ゲッターとしては、およそユーザーがカーソルで要素の内容を選択してからクリップボードにコピーしたときのテキストに相当します。</dd>
+ <dt>{{DOMxRef("HTMLElement.itemScope")}} {{Experimental_Inline}}</dt>
+ <dd>アイテムのスコープを表す {{jsxref("Boolean")}} です。</dd>
+ <dt>{{DOMxRef("HTMLElement.itemType")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>{{DOMxRef("DOMSettableTokenList")}}… を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.itemId")}} {{Experimental_Inline}}</dt>
+ <dd>アイテム ID を表す {{DOMxRef("DOMString")}} です。</dd>
+ <dt>{{DOMxRef("HTMLElement.itemRef")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>{{DOMxRef("DOMSettableTokenList")}}… を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.itemProp")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>{{DOMxRef("DOMSettableTokenList")}}… を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.itemValue")}} {{Experimental_Inline}}</dt>
+ <dd>アイテムの値を表す {{jsxref("Object")}} を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.lang")}}</dt>
+ <dd>要素の属性およびテキスト、要素のコンテンツの言語を表す {{DOMxRef("DOMString")}} です。</dd>
+ <dt>{{DOMxRef("HTMLElement.noModule")}}</dt>
+ <dd>{{JSxRef("Boolean")}} であり、モジュールスクリプトに対応しているユーザーエージェントでインポートしたスクリプトが実行されるかどうかを示します。</dd>
+ <dt>{{DOMxRef("HTMLOrForeignElement.nonce")}}</dt>
+ <dd>指定されたフェッチが実行を許可されるかどうかを判断するために Content Security Policy が使用する、一度だけ使用される暗号学的な数値を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.offsetHeight")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>レイアウトに対して相対的な要素の高さを含む <code>double</code> 値を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.offsetLeft")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>この要素の左境界線からその <code>offsetParent</code> の左境界線までの距離である <code>double</code> 値を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.offsetParent")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>現在計算済みのすべてのオフセット計算値からの要素である {{DOMxRef("Element")}} を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.offsetTop")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>要素の上境界線からその <code>offsetParent</code> の上境界線までの距離である <code>double</code> 値を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.offsetWidth")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>レイアウトに対して相対的な要素の幅を含む <code>double</code> 値を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.properties")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>{{DOMxRef("HTMLPropertiesCollection")}}… を返します。</dd>
+ <dt>{{DOMxRef("HTMLElement.spellcheck")}}{{Gecko_MinVersion_Inline("1.9")}}</dt>
+ <dd><a href="/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="/Controlling_spell_checking_in_HTML_forms">スペルチェック</a> を制御する {{jsxref("Boolean")}} です。これはすべての HTML 要素上で提供されていますが、すべての要素に効果があるとは限りません。</dd>
+ <dt>{{DOMxRef("HTMLElement.style")}}</dt>
+ <dd>要素の style 属性の宣言を表すオブジェクトである {{DOMxRef("CSSStyleDeclaration")}} です。</dd>
+ <dt>{{DOMxRef("HTMLOrForeignElement.tabIndex")}}</dt>
+ <dd>タブ順内の要素の位置を表す <code>long</code> 値です。</dd>
+ <dt>{{DOMxRef("HTMLElement.title")}}</dt>
+ <dd>マウスポインターが要素上に置かれた時に現れるポップアップボックスのテキストを含む {{DOMxRef("DOMString")}} です。</dd>
+ <dt>{{DOMxRef("HTMLElement.translate")}} {{Experimental_Inline}}</dt>
+ <dd>translation を表す {{jsxref("Boolean")}} です。</dd>
+</dl>
+
+<h3 id="Event_handlers" name="Event_handlers">イベントハンドラー</h3>
+
+<p>ほとんどのイベントハンドラープロパティは、<code>onXYZ</code> の形であり、{{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("TouchEventHandlers")}} の何れかのインターフェイスで定義されていて、<code>HTMLElement</code> により実装されています。さらに <code>HTMLElement</code> 固有のイベントプロパティがいくつかあります。</p>
+
+<dl>
+ <dt>{{DOMxRef("HTMLElement.oncopy")}} {{Non-standard_Inline}}</dt>
+ <dd><code>copy</code> イベントのイベントハンドリングコードを返します ({{bug("280959")}})。</dd>
+ <dt>{{DOMxRef("HTMLElement.oncut")}} {{Non-standard_Inline}}</dt>
+ <dd><code>cut</code> イベントのイベントハンドリングコードを返します ({{bug("280959")}})。</dd>
+ <dt>{{DOMxRef("HTMLElement.onpaste")}} {{Non-standard_Inline}}</dt>
+ <dd><code>paste</code> イベントのイベントハンドリングコードを返します ({{bug("280959")}})。</dd>
+ <dt>{{DOMxRef("TouchEventHandlers.ontouchstart")}} {{Non-standard_Inline}}</dt>
+ <dd>{{domxref("Element/touchstart_event", "touchstart")}} イベントのイベントハンドリングコードを返します。</dd>
+ <dt>{{DOMxRef("TouchEventHandlers.ontouchend")}} {{Non-standard_Inline}}</dt>
+ <dd>{{domxref("Element/touchend_event", "touchend")}} イベントのイベントハンドリングコードを返します。</dd>
+ <dt>{{DOMxRef("TouchEventHandlers.ontouchmove")}} {{Non-standard_Inline}}</dt>
+ <dd>{{domxref("Element/touchmove_event", "touchmove")}} イベントのイベントハンドリングコードを返します。</dd>
+ <dt>{{DOMxRef("TouchEventHandlers.ontouchenter")}} {{Non-standard_Inline}}</dt>
+ <dd>{{event("touchenter")}} イベントのイベントハンドリングコードを返します。</dd>
+ <dt>{{DOMxRef("TouchEventHandlers.ontouchleave")}} {{Non-standard_Inline}}</dt>
+ <dd>{{event("touchleave")}} イベントのイベントハンドリングコードを返します。</dd>
+ <dt>{{DOMxRef("TouchEventHandlers.ontouchcancel")}} {{Non-standard_Inline}}</dt>
+ <dd>{{domxref("Element/touchcancel_event", "touchcancel")}} イベントのイベントハンドリングコードを返します。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p><em>親である {{DOMxRef("Element")}} からメソッドを継承しており、{{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("ElementCSSInlineStyle")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("HTMLOrForeignElement")}}, {{DOMxRef("TouchEventHandlers")}} からのメソッドを実装しています。</em></p>
+
+<dl>
+ <dt>{{DOMxRef("HTMLElement.attachInternals()")}} {{Experimental_Inline}}</dt>
+ <dd>{{DOMxRef("ElementInternals")}} のインスタンスをカスタム要素に割り当てます。</dd>
+ <dt>{{DOMxRef("HTMLOrForeignElement.blur()")}}</dt>
+ <dd>現在フォーカスされている要素からキーボードフォーカスを外します。</dd>
+ <dt>{{DOMxRef("HTMLElement.click()")}}</dt>
+ <dd>要素にマウスクリックイベントを送信します。</dd>
+ <dt>{{DOMxRef("HTMLOrForeignElement.focus()")}}</dt>
+ <dd>要素に現在のキーボードフォーカスを当てます。</dd>
+ <dt>{{DOMxRef("HTMLElement.forceSpellCheck()")}} {{Experimental_Inline}}</dt>
+ <dd>要素上のコンテンツに対してスペルチェックを実行します。</dd>
+</dl>
+
+<h2 id="Events" name="Events">イベント</h2>
+
+<p>これらのイベントを待ち受けするには <code>addEventListener()</code> を用いるか、イベントリスナーをこのインターフェイスの <code>on<em>イベント名</em></code> プロパティに代入するかしてください。</p>
+
+<dl>
+ <dt>{{domxref("HTMLElement/invalid_event", "invalid")}}</dt>
+ <dd>制約の検証で、要素が制約を満たさなかった場合に発行されます。<br>
+ {{domxref("GlobalEventHandlers/oninvalid", "oninvalid")}} プロパティからも利用できます。</dd>
+</dl>
+
+<h3 id="Animation_events" name="Animation_events">アニメーションイベント</h3>
+
+<dl>
+ <dt>{{domxref("HTMLElement/animationcancel_event", "animationcancel")}}</dt>
+ <dd>アニメーションが予期せず中断されたときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/animationend_event", "animationend")}}</dt>
+ <dd>アニメーションが正常に完了したときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onanimationend", "onanimationend")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/animationiteration_event", "animationiteration")}}</dt>
+ <dd>アニメーションが 1 回分完了したときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/animationstart_event", "animationstart")}}</dt>
+ <dd>アニメーションが開始されたときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} プロパティからも利用できます。</dd>
+</dl>
+
+<h3 id="Input_events" name="Input_events">入力イベント</h3>
+
+<dl>
+ <dt>{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}</dt>
+ <dd>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} のいずれかの要素が変更される前に発行されます。</dd>
+ <dt>{{domxref("HTMLElement/input_event", "input")}}</dt>
+ <dd>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} のいずれかの要素の <code>value</code> が変更されたときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/oninput", "oninput")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/change_event", "change")}}</dt>
+ <dd>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} のいずれかの要素の <code>value</code> が変更され、ユーザーが確定したときに発行されます。{{domxref("HTMLElement/input_event", "input")}} イベントとは異なり、<code>change</code> イベントは要素の <code>value</code> が変更されるたびに発行されるわけではありません。</dd>
+</dl>
+
+<h3 id="Pointer_events" name="Pointer_events">ポインターイベント</h3>
+
+<dl>
+ <dt>{{domxref("HTMLElement/gotpointercapture_event", "gotpointercapture")}}</dt>
+ <dd>{{domxref("Element/setPointerCapture", "setPointerCapture()")}} を用いて要素がポインターをキャプチャしたときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/ongotpointercapture", "ongotpointercapture")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/lostpointercapture_event", "lostpointercapture")}}</dt>
+ <dd><a href="/ja/docs/Web/API/Pointer_events#Pointer_capture">キャプチャされたポインター</a>が解放されたときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onlostpointercapture", "onlostpointercapture")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/pointercancel_event", "pointercancel")}}</dt>
+ <dd>ポインターイベントがキャンセルされたときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onpointercancel", "onpointercancel")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/pointerdown_event", "pointerdown")}}</dt>
+ <dd>ポインターがアクティブになったときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onpointerdown", "onpointerdown")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/pointerenter_event", "pointerenter")}}</dt>
+ <dd>ポインターが要素またはその子孫の一つのヒットテスト境界に入ったときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onpointerenter", "onpointerenter")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/pointerleave_event", "pointerleave")}}</dt>
+ <dd>ポインターが要素のヒットテスト境界から出たときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onpointerleave", "onpointerleave")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/pointermove_event", "pointermove")}}</dt>
+ <dd>ポインターの座標が変化したときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onpointermove", "onpointermove")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/pointerout_event", "pointerout")}}</dt>
+ <dd>ポインターが要素の<em>ヒットテスト</em>境界を (他の理由で) 出たときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onpointerout", "onpointerout")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/pointerover_event", "pointerover")}}</dt>
+ <dd>ポインターが要素のヒットテスト境界に入ったときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onpointerover", "onpointerover")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/pointerup_event", "pointerup")}}</dt>
+ <dd>ポインターがアクティブではなくなったときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/onpointerup", "onpointerup")}} プロパティからも利用できます。</dd>
+</dl>
+
+<h3 id="Transition_events" name="Transition_events">トランジションイベント</h3>
+
+<dl>
+ <dt>{{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</dt>
+ <dd><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>がキャンセルされたときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/transitionend_event", "transitionend")}}</dt>
+ <dd><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>が完了したときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/transitionrun_event", "transitionrun")}}</dt>
+ <dd><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a> が最初に作成されたときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("HTMLElement/transitionstart_event", "transitionstart")}}</dt>
+ <dd><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>が実際に開始されたときに発行されます。<br>
+ {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} プロパティからも利用できます。</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>ｓ</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>次のプロパティを追加: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, <code>offsetHeight</code>。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>次のプロパティを追加: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, <code>itemValue</code>。<br>
+    次のメソッドを追加: <code>forceSpellcheck()</code>。<br>
+    <code>onXYZ</code> 属性を {{DOMxRef("GlobalEventHandlers")}} インターフェイスへ移動し、そこから継承したプロパティを追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>次のプロパティを追加: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, およびすべての <code>onXYZ</code> プロパティ。<br>
+    <code>id</code> と <code>className</code> プロパティを {{DOMxRef("Element")}} インターフェイスへ移動。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>{{SpecName('DOM2 HTML')}} からの変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>初回定義</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.HTMLElement")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{DOMxRef("Element")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/innertext/index.html b/files/ja/web/api/htmlelement/innertext/index.html
new file mode 100644
index 0000000000..e5db44dba4
--- /dev/null
+++ b/files/ja/web/api/htmlelement/innertext/index.html
@@ -0,0 +1,91 @@
+---
+title: HTMLElement.innerText
+slug: Web/API/HTMLElement/innerText
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Property
+  - Reference
+  - プロパティ
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><code><strong>innerText</strong></code> は {{domxref("HTMLElement")}} のプロパティで、ノードとその子孫の「レンダリングされた」テキスト内容を示します。</span>ゲッターとして、カーソルで要素の内容を選択しクリップボードにコピーした際のテキストに近いものを取得することができます。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> <code>innerText</code> は {{domxref("Node.textContent")}} と混同しやすいのですが、両者には重要な違いがあります。基本的に <code>innerText</code> はテキストがレンダリングされる表示を意識しますが、 <code>textContent</code> はそうではありません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">const <em>renderedText</em> = <em>htmlElement</em>.innerText
+<em>htmlElement</em>.innerText = <em>string</em></pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>{{domxref("DOMString")}} で、要素の表示されたテキストの内容を表します。要素自身が<a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered">表示されないとき</a> (例えば、文書から切り離されたり、表示から隠されたりしている場合)、返値は {{domxref("Node.textContent")}} プロパティと同じ値になります。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では <code>innerText</code> と {{domxref("Node.textContent")}} を比較しています。 <code>innerText</code> が {{htmlElement("br")}} 要素のようなものをどのように意識するかや、非表示の要素を無視することに注意してください。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;h3&gt;元の要素:&lt;/h3&gt;
+&lt;p id="source"&gt;
+  &lt;style&gt;#source { color: red; }&lt;/style&gt;
+  このテキストが&lt;br&gt;どのように扱われるか&lt;br&gt;
+       下で見てみてください。
+  &lt;span style="display:none"&gt;隠しテキスト&lt;/span&gt;
+&lt;/p&gt;
+&lt;h3&gt;textContent の結果:&lt;/h3&gt;
+&lt;textarea id="textContentOutput" rows="6" cols="30" readonly&gt;...&lt;/textarea&gt;
+&lt;h3&gt;innerText の結果:&lt;/h3&gt;
+&lt;textarea id="innerTextOutput" rows="6" cols="30" readonly&gt;...&lt;/textarea&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">const source = document.getElementById('source');
+const textContentOutput = document.getElementById('textContentOutput');
+const innerTextOutput = document.getElementById('innerTextOutput');
+
+textContentOutput.value = source.textContent;
+innerTextOutput.value = source.innerText;</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 700, 450)}}</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('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>導入。 <a href="https://github.com/rocallahan/innerText-spec">innerText の仕様書の草稿</a>に基づく。履歴は <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> および <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> を参照。</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.HTMLElement.innerText")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/input_event/index.html b/files/ja/web/api/htmlelement/input_event/index.html
new file mode 100644
index 0000000000..5b8c2f71cf
--- /dev/null
+++ b/files/ja/web/api/htmlelement/input_event/index.html
@@ -0,0 +1,100 @@
+---
+title: 'HTMLElement: input イベント'
+slug: Web/API/HTMLElement/input_event
+translation_of: Web/API/HTMLElement/input_event
+---
+<p>{{APIRef}}</p>
+
+<p><strong><code>input</code></strong> イベントは、 {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} の各要素の <code>value</code> が変更されたときに発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{DOMxRef("InputEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers.oninput")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>このイベントは、 {{domxref("HTMLElement.contentEditable", "contenteditable")}} を有効にした要素、 {{domxref("Document.designMode", "designMode")}} を有効にしたすべての要素にも適用されます。 <code>contenteditable</code> や <code>designMode</code> の場合、イベントのターゲットは<em>編集ホスト</em>です。これらのプロパティが複数の要素に適用された場合、編集ホストは親が編集可能ではない直近の祖先要素になります。</p>
+
+<p><code>&lt;input&gt;</code> 要素が <code>type=checkbox</code> または <code>type=radio</code> 型であった場合、 <a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2">HTML5 仕様書</a>によれば、 <code>input</code> イベントはユーザーがコントロールの状態を変更するたびに発生することになっています。しかし、歴史的に常にそうなるとは限りません。互換性に注意するか、これらの種類の要素では、代わりに {{domxref("HTMLElement/change_event", "change")}} イベントを使用するようにするかしてください。</p>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> <code>input</code> イベントは、要素の <code>value</code> の値が変化するたびに発生します。これは、 {{domxref("HTMLElement/change_event", "change")}} イベントが Enter キーが押されたり、選択肢から値が選択されたりするような、値が決定したときに発生するのとは異なります。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、 {{HtmlElement("input")}} 要素の値が変化するたびに値をログ出力します。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;input placeholder="Enter some text" name="name"/&gt;
+&lt;p id="values"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('input', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td>
+   <td>{{Spec2('DOM3 Events')}}</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.HTMLElement.input_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント
+  <ul>
+   <li>{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}</li>
+   <li>{{domxref("HTMLElement/change_event", "change")}}</li>
+   <li>{{domxref("HTMLInputElement/invalid_event", "invalid")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/iscontenteditable/index.html b/files/ja/web/api/htmlelement/iscontenteditable/index.html
new file mode 100644
index 0000000000..19ea1d2d5e
--- /dev/null
+++ b/files/ja/web/api/htmlelement/iscontenteditable/index.html
@@ -0,0 +1,85 @@
+---
+title: HTMLElement.isContentEditable
+slug: Web/API/HTMLElement/isContentEditable
+tags:
+  - API
+  - Editing
+  - HTML DOM
+  - HTMLElement
+  - Property
+  - Read-only
+  - Reference
+  - プロパティ
+  - 編集
+  - 読取専用
+translation_of: Web/API/HTMLElement/isContentEditable
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLElement.isContentEditable</code></strong> は読み取り専用のプロパティで、 {{jsxref("Boolean")}} 型で、要素の内容が編集可能な場合は <code>true</code> を返します。それ以外の場合は <code>false</code> を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>editable</em> = <em>element</em>.isContentEditable
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="myText1"&gt;編集不可能な段落&lt;/p&gt;
+&lt;p id="myText2" contentEditable="true"&gt;編集可能な段落&lt;/p&gt;
+
+&lt;p id="infoText1"&gt;最初の段落を編集できますか？&lt;/p&gt;
+&lt;p id="infoText2"&gt;2番目の段落を編集できますか？&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.getElementById('infoText1').innerHTML += document.getElementById('myText1').isContentEditable;
+document.getElementById('infoText2').innerHTML += document.getElementById('myText2').isContentEditable;</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>{{SpecName('HTML WHATWG')}} のスナップショット、 {{SpecName('HTML5 W3C')}} から変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。</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.HTMLElement.isContentEditable")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement/contentEditable")}}</li>
+ <li>{{htmlattrxref("contenteditable")}} グローバル属性</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/lang/index.html b/files/ja/web/api/htmlelement/lang/index.html
new file mode 100644
index 0000000000..bd94498888
--- /dev/null
+++ b/files/ja/web/api/htmlelement/lang/index.html
@@ -0,0 +1,61 @@
+---
+title: HTMLElement.lang
+slug: Web/API/HTMLElement/lang
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Property
+  - Reference
+translation_of: Web/API/HTMLElement/lang
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary"><code><strong>HTMLElement.lang</strong></code> プロパティは、要素の属性値とテキストコンテンツの基本言語を取得または設定します。</span></p>
+
+<p>このプロパティによって返される言語コードは、IETF 文書の<em><a href="https://www.ietf.org/rfc/bcp/bcp47.txt">言語を識別するタグ（BCP47）</a></em>（英語）で定義されています。 一般的な例には、英語の "en"、日本語の "ja"、スペイン語の "es" などがあります。 この属性のデフォルト値は <code>unknown</code>（不明）です。 この属性は、ここで説明する個々の要素レベルで有効ですが、ほとんどの場合、ドキュメントのルート要素に対して指定されます。</p>
+
+<p>これも <code>lang</code> 属性でのみ機能し、<code>xml:lang</code> では機能しません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <var>languageUsed</var> = elementNodeReference.lang; // lang の値を取得
+elementNodeReference.lang = <var>NewLanguage</var>; // lang に新しい値を設定
+</pre>
+
+<p><var>languageUsed</var> は、現在の要素のテキストを記述している言語を取得する文字列変数です。 <var>NewLanguage</var> は、現在の要素のテキストを記述している言語を設定する値を持つ文字列変数です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">// このスニペットは基本言語を比較し、
+// 言語に基づいて別の URL にリダイレクトするものです
+if (document.documentElement.lang === "en") {
+  window.location.href = "Some_document.html.en";
+} else if (document.documentElement.lang === "ru") {
+  window.location.href = "Some_document.html.ru";
+}</pre>
+
+<h2 id="Specification" name="Specification">仕様</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('DOM2 HTML', 'html.html#ID-59132807', 'lang')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.lang")}}</p>
diff --git a/files/ja/web/api/htmlelement/lostpointercapture_event/index.html b/files/ja/web/api/htmlelement/lostpointercapture_event/index.html
new file mode 100644
index 0000000000..4491291c79
--- /dev/null
+++ b/files/ja/web/api/htmlelement/lostpointercapture_event/index.html
@@ -0,0 +1,103 @@
+---
+title: 'HTMLElement: lostpointercapture イベント'
+slug: Web/API/HTMLElement/lostpointercapture_event
+tags:
+  - DOM
+  - Event
+  - PointerEvent
+  - Reference
+translation_of: Web/API/HTMLElement/lostpointercapture_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>lostpointercapture</code></strong> イベントは、<a href="/ja/docs/Web/API/Pointer_events#Pointer_capture">キャプチャされたポインタ</a>が解放されたときに発生します。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("PointerEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/Element/onlostpointercapture">onlostpointercapture</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、要素の <code>lostpointercapture</code> イベントをリッスンし、<code>pointerdown</code> で要素のポインタをキャプチャします。 その後ユーザーがポインタを離すと、<code>lostpointercapture</code> イベントが発生します。</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('lostpointercapture', () =&gt; {
+  console.log('解放された！')
+});
+
+para.addEventListener('pointerdown', (event) =&gt; {
+  para.setPointerCapture(event.pointerId);
+});
+</pre>
+
+<p>同じ例ですが、<code>onlostpointercapture</code> イベントハンドラプロパティを使用します。</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.onlostpointercapture = () =&gt; {
+  console.log('解放された！')
+};
+
+para.addEventListener('pointerdown', (event) =&gt; {
+  para.setPointerCapture(event.pointerId);
+});
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-lostpointercapture-event')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.lostpointercapture_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント
+  <ul>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onlostpointercapture">onlostpointercapture</a></code> イベントハンドラプロパティ</li>
+ <li><code>Document</code> でのこのイベント: <code><a href="/ja/docs/Web/API/Document/lostpointercapture_event">lostpointercapture</a></code> イベント</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/offsetheight/index.html b/files/ja/web/api/htmlelement/offsetheight/index.html
new file mode 100644
index 0000000000..b2b4037ecc
--- /dev/null
+++ b/files/ja/web/api/htmlelement/offsetheight/index.html
@@ -0,0 +1,72 @@
+---
+title: HTMLElement.offsetHeight
+slug: Web/API/HTMLElement/offsetHeight
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Reference
+translation_of: Web/API/HTMLElement/offsetHeight
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary"><strong><code>HTMLElement.offsetHeight</code></strong> 読み取り専用プロパティは、垂直パディングや境界線を含む要素の高さを整数として返します。</span></p>
+
+<p>通常、<code>offsetHeight</code> は、境界線、パディング、および水平スクロールバー（レンダリングされている場合）を含む、要素の CSS height のピクセル単位の測定値です。 <code>::before</code> や <code>::after</code> などの擬似要素の高さは含まれません。 ドキュメントの body オブジェクトの場合、測定値には、要素の CSS height ではなく、線形コンテンツの高さの合計が含まれます。 他の線形コンテンツの下に広がる浮動要素は無視されます。</p>
+
+<p>（例えば、要素またはその祖先のいずれかで <code>style.display</code> を <code>"none"</code> に設定することにより）要素が非表示の場合、<code>0</code> が返されます。</p>
+
+<div class="note">
+<p>このプロパティは、値を整数に丸めます。 小数値が必要な場合は、{{ domxref("element.getBoundingClientRect()") }} を使用します。</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">構文</h2>
+
+<pre class="syntaxbox">var <em>intElemOffsetHeight</em> = <em>element</em>.offsetHeight;</pre>
+
+<p><code><em>intElemOffsetHeight</em></code> は、要素の <code>offsetHeight</code> ピクセル値に対応する整数を格納する変数です。 <code>offsetHeight</code> プロパティは読み取り専用です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>             <img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+<p>上のサンプル画像は、スクロールバーにより、ウィンドウに収まる場合の <code>offsetHeight</code> を示しています。 ただし、スクロールできない要素には、目に見えるコンテンツよりもはるかに大きい大きな <code>offsetHeight</code> 値が含まれる場合があります。 これらの要素は通常、スクロール可能な要素内に含まれています。 その結果、これらの非スクロール要素は、スクロール可能なコンテナの <code>scrollTop</code> の設定に応じて、完全にまたは部分的に非表示になる場合があります。</p>
+
+<h2 id="Specification" name="Specification">仕様</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('CSSOM View', '#dom-htmlelement-offsetheight', 'offsetHeight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">ノート</h3>
+
+<p><code>offsetHeight</code> は、MSIE によって最初に導入された <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> オブジェクトモデルのプロパティです。 要素の物理的/グラフィカルな寸法、または要素の境界ボックスの高さ（border-box height）と呼ばれることもあります。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.offsetHeight")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements" title="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN 要素の寸法と位置の測定</a>（英語）</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/offsetleft/index.html b/files/ja/web/api/htmlelement/offsetleft/index.html
new file mode 100644
index 0000000000..e0aff57121
--- /dev/null
+++ b/files/ja/web/api/htmlelement/offsetleft/index.html
@@ -0,0 +1,89 @@
+---
+title: HTMLElement.offsetLeft
+slug: Web/API/HTMLElement/offsetLeft
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/HTMLElement/offsetLeft
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLElement.offsetLeft</code></strong> プロパティは読み取り専用で、現在の要素の<em>左上隅</em>が {{domxref("HTMLElement.offsetParent")}} ノード内の左へのオフセットをピクセル数を返します。</p>
+
+<p>ブロックレベル要素では、 <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, <code>offsetHeight</code> が <code>offsetParent</code> からの相対的な要素の境界ボックスを記述します。</p>
+
+<p>しかし、 (<strong>span</strong> などの) インラインレベル要素は行をまたいで折り返すことがあるので、 <code>offsetTop</code> および <code>offsetLeft</code> は<em>最初の</em>境界ボックス (その幅と高さを取得するには {{domxref("Element.getClientRects()")}} を使用) の位置を記述するのに対し、 <code>offsetWidth</code> および <code>offsetHeight</code> は<em>囲む</em>境界ボックス (位置を取得するには {{domxref("Element.getBoundingClientRect()")}} を使用) の寸法を記述します。したがって、 <code>offsetLeft</code>, <code>offsetTop</code>, <code>offsetWidth</code>, <code>offsetHeight</code> による左、上、幅、高さは折り返されたテキストの区間を囲むボックスにはなりません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="eval"><var>left</var> = <var>element</var>.offsetLeft;
+</pre>
+
+<p><code><var>left</var></code> は整数で、<em>最も近くの相対配置された</em>親要素からの左へのオフセットをピクセル数で表します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre>var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft &gt; 5) {
+  // large left offset: do something here
+}
+</pre>
+
+<p>この例は、 div 内で折り返す「長い」文を青い境界線で表示し、 span の境界を記述すると考えられるものを赤いボックスで表示します。</p>
+
+<p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></p>
+
+<pre>&lt;div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;"&gt;
+  &lt;span&gt;Short span. &lt;/span&gt;
+  &lt;span id="long"&gt;Long span that wraps within this div.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10"&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
+  box.style.top = long.offsetTop + document.body.scrollTop + "px";
+  box.style.width = long.offsetWidth + "px";
+  box.style.height = long.offsetHeight<span style="line-height: normal;"> + "px"</span><span style="line-height: normal;">;
+</span><span style="line-height: normal;">&lt;/script&gt; </span></pre>
+
+<h2 id="Specification" name="Specification">仕様書</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('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </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.HTMLElement.offsetLeft")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetParent")}}, {{domxref("HTMLElement.offsetTop")}}, {{domxref("HTMLElement.offsetWidth")}}, {{domxref("HTMLElement.offsetHeight")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/offsetparent/index.html b/files/ja/web/api/htmlelement/offsetparent/index.html
new file mode 100644
index 0000000000..a2e338f0f5
--- /dev/null
+++ b/files/ja/web/api/htmlelement/offsetparent/index.html
@@ -0,0 +1,63 @@
+---
+title: HTMLElement.offsetParent
+slug: Web/API/HTMLElement/offsetParent
+tags:
+  - API
+  - CSSOM View
+  - NeedsMarkupWork
+  - Property
+  - Reference
+  - プロパティ
+translation_of: Web/API/HTMLElement/offsetParent
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><strong><code>HTMLElement.offsetParent</code></strong> は読み取り専用プロパティで、要素を含む最も近くにある (包含階層で最も近い) 位置指定されたオブジェクトへの参照を返します。要素が位置指定されていない (静的位置指定の) 場合、最も近い祖先である <code>td</code>, <code>th</code>, <code>table</code> を返し、表要素の祖先がない場合は <code>body</code> を返します。</p>
+
+<div class="blockIndicator note">
+<p><strong>注: </strong></p>
+
+<p><strong>次の状況では、<code>offsetParent</code> は <code>null</code> を返します。</strong></p>
+
+<ul>
+ <li>要素またはその親要素の <code>display</code> プロパティが <code>none</code> に設定されている。</li>
+ <li>要素の <code>position</code> プロパティが <code>fixed</code> (固定位置指定) に設定されている (firefox は <code>&lt;body&gt;</code> を返します)。</li>
+ <li>要素が <code>&lt;body&gt;</code> または <code>&lt;html&gt;</code> 要素である。</li>
+</ul>
+</div>
+
+<p><code>offsetParent</code> が有用なのは、 {{domxref("HTMLElement.offsetTop","offsetTop")}} と {{domxref("HTMLElement.offsetLeft","offsetLeft")}} がパディング境界からの相対だからです。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>parentObj</var> = <var>element</var>.offsetParent;
+</pre>
+
+<ul>
+ <li><code><var>parentObj</var></code> は、現在の要素がオフセットされている要素へのオブジェクト参照です。</li>
+</ul>
+
+<h2 id="Specification" name="Specification">仕様書</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('CSSOM View', '#dom-htmlelement-offsetparent', 'offsetParent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td></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.HTMLElement.offsetParent")}}</p>
diff --git a/files/ja/web/api/htmlelement/offsettop/index.html b/files/ja/web/api/htmlelement/offsettop/index.html
new file mode 100644
index 0000000000..76d4588b63
--- /dev/null
+++ b/files/ja/web/api/htmlelement/offsettop/index.html
@@ -0,0 +1,62 @@
+---
+title: HTMLElement.offsetTop
+slug: Web/API/HTMLElement/offsetTop
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/HTMLElement/offsetTop
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLElement.offsetTop</code></strong> 読み取り専用プロパティは、{{domxref("element.offsetParent","offsetParent")}} ノードの上端に対して現在の要素の距離を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><var>topPos</var> = element.offsetTop;</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<ul>
+ <li><code>topPos</code> は、<em>相対的に最も近い</em>親要素の一番上からのピクセル数です。</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js">var d = document.getElementById("div1");
+var topPos = d.offsetTop;
+
+if (topPos &gt; 10) {
+  // 要素が offsetParent から 11px 以上離れている場合の処理をここに記述
+}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">ブラウザー互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.offsetTop")}}</p>
+
+<p>仕様に従って、要素が非表示 (この要素または任意の祖先の <code>style.display</code> が <code>"none"</code>)である場合、または要素自体の <code>style.position</code> が <code>"fixed"</code> に設定される場合、このプロパティは WebKit で <code>null</code> を返します。</p>
+
+<p>このプロパティは、要素自体の <code>style.position</code> が <code>"fixed"</code> に設定されている場合、Internet Explorer (9) で <code>null</code> を返します。(<code>display:none</code> であってもこのブラウザに影響しません。)</p>
diff --git a/files/ja/web/api/htmlelement/offsetwidth/index.html b/files/ja/web/api/htmlelement/offsetwidth/index.html
new file mode 100644
index 0000000000..0cb4ed2322
--- /dev/null
+++ b/files/ja/web/api/htmlelement/offsetwidth/index.html
@@ -0,0 +1,70 @@
+---
+title: HTMLElement.offsetWidth
+slug: Web/API/HTMLElement/offsetWidth
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/HTMLElement/offsetWidth
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary"><code><strong>HTMLElement.offsetWidth</strong></code> 読み取り専用プロパティは、要素のレイアウト幅を整数として返します。</span></p>
+
+<p>通常、<code>offsetWidth</code> は、境界線、パディング、および垂直スクロールバー（レンダリングされている場合）を含む、要素の CSS width のピクセル単位の測定値です。 <code>::before</code> や <code>::after</code> などの擬似要素の幅は含まれません。</p>
+
+<p>（例えば、要素またはその祖先のいずれかで <code>style.display</code> を <code>"none"</code> に設定することにより）要素が非表示の場合、<code>0</code> が返されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>intElemOffsetWidth</em> = <em>element</em>.offsetWidth;
+</pre>
+
+<p><code>intElemOffsetWidth</code> は、要素の <code>offsetWidth</code> ピクセル値に対応する整数を格納する変数です。 <code>offsetWidth</code> プロパティは読み取り専用です。</p>
+
+<div class="note">
+<p>このプロパティは、値を整数に丸めます。 小数値が必要な場合は、{{ domxref("element.getBoundingClientRect()") }} を使用します。</p>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+<h2 id="Specification" name="Specification">仕様</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('CSSOM View', '#dom-htmlelement-offsetwidth', 'offsetWidth')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">ノート</h3>
+
+<p><code>offsetWidth</code> は、MSIE によって最初に導入された <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> オブジェクトモデルのプロパティです。 要素の物理的/グラフィカルな寸法、または要素の境界ボックスの幅（border-box width）と呼ばれることもあります。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.offsetWidth")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/ja/docs/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/oncopy/index.html b/files/ja/web/api/htmlelement/oncopy/index.html
new file mode 100644
index 0000000000..52f3c816f6
--- /dev/null
+++ b/files/ja/web/api/htmlelement/oncopy/index.html
@@ -0,0 +1,85 @@
+---
+title: HTMLElement.oncopy
+slug: Web/API/HTMLElement/oncopy
+tags:
+  - API
+  - Event Handler
+  - Experimental
+  - HTMLElement
+  - NeedsSpecTable
+  - Property
+  - Reference
+translation_of: Web/API/HTMLElement/oncopy
+---
+<div>{{ APIRef("HTML DOM") }}{{SeeCompatTable}} {{ Fx_minversion_header(3) }}</div>
+
+<p><strong><code>oncopy</code></strong> プロパティは  {{domxref("HTMLElement")}}  インターフェイスのプロパティで、 {{domxref("Element/copy_event", "copy")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。</p>
+
+<p><code>copy</code> イベントはユーザーがテキストをコピーしようとしたときに発生します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>target</var>.oncopy = <var>functionRef</var>;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p><code><var>functionRef</var></code> は関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は {{domxref("ClipboardEvent")}} オブジェクトを唯一の引数として受け取ります。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、 {{htmlElement("textarea")}} からのすべてのコピーと貼り付けをブロックします。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;h3&gt;Play with this text area:&lt;/h3&gt;
+&lt;textarea id="editor" rows="3"&gt;Try copying and pasting text into this field!&lt;/textarea&gt;
+
+&lt;h3&gt;Log:&lt;/h3&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">const log = document.getElementById('log');
+
+function logCopy(event) {
+  log.innerText = 'Copy blocked!\n' + log.innerText;
+  event.preventDefault();
+}
+
+function logPaste(event) {
+  log.innerText = 'Paste blocked!\n' + log.innerText;
+  event.preventDefault();
+}
+
+const editor = document.getElementById('editor');
+
+editor.oncopy = logCopy;
+editor.onpaste = logPaste;</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 700, 300)}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<p><a href="https://html.spec.whatwg.org/multipage/webappapis.html#handler-oncopy">WHATWG Standard</a></p>
+
+<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.HTMLElement.oncopy")}}</p>
+
+<p>Firefox 13 から、この機能は設定 <code>dom.event.clipboardevents.enabled</code> で制御されます。既定値は <code>true</code> ですが無効化できます。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>Clipboard API のイベント {{domxref("Element/copy_event", "copy")}}</li>
+ <li>関連するイベントハンドラー
+  <ul>
+   <li>{{domxref("HTMLElement.oncut")}}</li>
+   <li>{{domxref("HTMLElement.onpaste")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/oncut/index.html b/files/ja/web/api/htmlelement/oncut/index.html
new file mode 100644
index 0000000000..81c6f5d9d6
--- /dev/null
+++ b/files/ja/web/api/htmlelement/oncut/index.html
@@ -0,0 +1,64 @@
+---
+title: element.oncut
+slug: Web/API/HTMLElement/oncut
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/HTMLElement/oncut
+---
+<p> </p>
+<p>{{ Fx_minversion_header(3) }} {{ 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;
+</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>
+<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>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/element.oncut" } ) }}</p>
diff --git a/files/ja/web/api/htmlelement/onpaste/index.html b/files/ja/web/api/htmlelement/onpaste/index.html
new file mode 100644
index 0000000000..71c5e05538
--- /dev/null
+++ b/files/ja/web/api/htmlelement/onpaste/index.html
@@ -0,0 +1,86 @@
+---
+title: HTMLElement.onpaste
+slug: Web/API/HTMLElement/onpaste
+tags:
+  - API
+  - API
+  - HTMLElement
+  - HTMLElement
+  - イベントハンドラー
+  - イベントハンドラー
+  - プロパティ
+  - プロパティ
+  - リファレンス
+  - 標準外
+translation_of: Web/API/HTMLElement/onpaste
+---
+<div>{{ APIRef("HTML DOM") }} {{Non-standard_header}}</div>
+
+<p><strong>onpaste</strong> プロパティは、現在の要素の onPaste イベントハンドラーを返します。 {{event("paste")}} の W3C 草稿を参照してください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>element</em>.onpaste = <em>functionRef</em>;</pre>
+
+<p>ここでの <em>functionRef</em> は関数です。それはたいてい、他の場所で宣言された関数の名前、あるいは <em>function 式</em>です。詳しくは <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function">JavaScript リファレンス:Functions</a> を参照してください。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;onpaste event example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;h1&gt;Play with this editor!&lt;/h1&gt;
+&lt;textarea id="editor" rows="3" cols="80"&gt;
+Try pasting text into this area!
+&lt;/textarea&gt;
+
+&lt;script&gt;
+function log(txt) {
+  document.getElementById("log").appendChild(document.createTextNode(txt + "\n"));
+}
+
+function pasteIntercept(evt) {
+  log("Pasting!");
+}
+
+document.getElementById("editor").addEventListener("paste", pasteIntercept, false);
+&lt;/script&gt;
+
+&lt;h2&gt;Log&lt;/h2&gt;
+&lt;textarea rows="15" cols="80" id="log" readonly="true"&gt;&lt;/textarea&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>この例は、テキストエリアへの貼り付けのログを表示します。</p>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<p>このイベントは、ユーザがテキストを貼り付けしようとしたときに発生します。</p>
+
+<p>Firefox 13 から、この機能は設定 <code>dom.event.clipboardevents.enabled</code> で制御されます。既定値は <code>true</code> ですが無効化できます。</p>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<p>仕様の一部ではありません。</p>
+
+<h2 id="Notes_2" name="Notes_2">メモ</h2>
+
+<p>現在、 DOM だけでペーストされたテキストを得る方法はありません。その情報を得るためには {{ Interface("nsIClipboard") }} を用いる必要があります。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("api.HTMLElement.onpaste")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{event("paste")}}</li>
+ <li>{{domxref("HTMLElement.oncopy")}}</li>
+ <li>{{domxref("HTMLElement.oncut")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/outertext/index.html b/files/ja/web/api/htmlelement/outertext/index.html
new file mode 100644
index 0000000000..c672be742e
--- /dev/null
+++ b/files/ja/web/api/htmlelement/outertext/index.html
@@ -0,0 +1,35 @@
+---
+title: HTMLElement.outerText
+slug: Web/API/HTMLElement/outerText
+tags:
+  - API
+  - DOM
+  - Non-standard
+  - Property
+  - Reference
+translation_of: Web/API/HTMLElement/outerText
+---
+<div>{{APIRef("DOM")}} {{ Non-standard_header() }}</div>
+
+<p><span class="seoSummary"><strong><code>HTMLElement.outerText</code></strong> は非標準のプロパティです。 取得するときは、{{domxref("Node.innerText")}} と同じ値を返します。 設定するときは、現在のノードを取り除き、指定されたテキストに置き換えます。</span></p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p><a href="http://stackoverflow.com/a/18481435">StackOverflow の回答</a>（英語）をご覧ください。</p>
+
+<h2 id="Specification" name="Specification">仕様</h2>
+
+<p>仕様の一部ではありません。 標準化への議論: <a href="https://github.com/whatwg/html/issues/668">whatwg/html#668</a>。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.outerText")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.outerHTML")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/pointercancel_event/index.html b/files/ja/web/api/htmlelement/pointercancel_event/index.html
new file mode 100644
index 0000000000..a5d55aa305
--- /dev/null
+++ b/files/ja/web/api/htmlelement/pointercancel_event/index.html
@@ -0,0 +1,109 @@
+---
+title: 'HTMLElement: pointercancel イベント'
+slug: Web/API/HTMLElement/pointercancel_event
+tags:
+  - DOM
+  - Event
+  - Pointer Events
+  - PointerEvent
+  - Reference
+  - pointercancel
+  - user input
+translation_of: Web/API/HTMLElement/pointercancel_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>pointercancel</code></strong> イベントは、これ以上ポインタイベントがないとブラウザーが判断したとき、または {{event("pointerdown")}} イベントが発生した後に、パン、ズーム、スクロールによってビューポートを操作するためにポインタを使用する場合に発生します。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("PointerEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointercancel">onpointercancel</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>pointercancel</code> イベントを引き起こす状況の例</p>
+
+<ul>
+ <li>ポインタの活動をキャンセルするハードウェアイベントが発生した。 これには、例えば、アプリ切り替えインターフェイスやモバイルデバイスの「ホーム」ボタンを使用したユーザーのアプリ切り替えが含まれる場合があります。</li>
+ <li>ポインタがアクティブなときに、デバイスの画面の向きが変わった。</li>
+ <li>ブラウザーが、ユーザーが誤ってポインタ入力を開始したと判断した。 これは、例えば、スタイラスを使用しているときにディスプレイ上に手を置いて誤ってトリガしないように、ハードウェアが手のひら拒否をサポートしている場合に発生する可能性があります。</li>
+ <li>{{cssxref("touch-action")}} CSS プロパティが、入力を続行しないようにした。</li>
+</ul>
+
+<div class="note">
+<p><code>pointercancel</code> イベントが発生した後、ブラウザーは {{event("pointerout")}} とそれに続く {{event("pointerleave")}} も送信します。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>addEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('pointercancel', (event) =&gt; {
+  console.log('ポインタイベントがキャンセルされた');
+});</pre>
+
+<p><code>onpointercancel</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.onpointercancel = (event) =&gt; {
+  console.log('ポインタイベントがキャンセルされた');
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-pointercancel-event')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.pointercancel_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント
+  <ul>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></li>
+   <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointercancel">onpointercancel</a></code> イベントハンドラプロパティ</li>
+ <li><code>Document</code> でのこのイベント: <code><a href="/ja/docs/Web/API/Document/pointercancel_event">pointercancel</a></code> イベント</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/pointerdown_event/index.html b/files/ja/web/api/htmlelement/pointerdown_event/index.html
new file mode 100644
index 0000000000..2f709b5981
--- /dev/null
+++ b/files/ja/web/api/htmlelement/pointerdown_event/index.html
@@ -0,0 +1,80 @@
+---
+title: 'HTMLElement: pointerdown イベント'
+slug: Web/API/HTMLElement/pointerdown_event
+tags:
+  - DOM
+  - Event
+  - PointerEvent
+  - Reference
+translation_of: Web/API/HTMLElement/pointerdown_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><code>pointerdown</code> イベントは、ポインタがアクティブになったときに発生します。</span> マウスの場合は、ボタンが押されていない状態から少なくとも1つのボタンが押された状態に移行したときに発生します。 タッチの場合は、物理的な接触がデジタイザとなされたときに発生します。 ペンの場合は、スタイラスがデジタイザと物理的に接触したときに発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("PointerEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointerdown">onpointerdown</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>addEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('pointerdown', (event) =&gt; {
+  console.log('ポインタダウンイベント');
+});</pre>
+
+<p><code>onpointerdown</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.onpointerdown = (event) =&gt; {
+  console.log('ポインタダウンイベント');
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-pointerdown-event')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.pointerdown_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointerdown">onpointerdown</a></code> イベントハンドラプロパティ</li>
+ <li><code>Document</code> でのこのイベント: <code><a href="/ja/docs/Web/API/Document/pointerdown_event">pointerdown</a></code> イベント</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/pointerenter_event/index.html b/files/ja/web/api/htmlelement/pointerenter_event/index.html
new file mode 100644
index 0000000000..547cc35bc1
--- /dev/null
+++ b/files/ja/web/api/htmlelement/pointerenter_event/index.html
@@ -0,0 +1,89 @@
+---
+title: 'HTMLElement: pointerenter イベント'
+slug: Web/API/HTMLElement/pointerenter_event
+tags:
+  - DOM
+  - Event
+  - PointerEvent
+  - Reference
+translation_of: Web/API/HTMLElement/pointerenter_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><code>pointerenter</code> イベントは、ポインティングデバイスが要素またはその子孫の1つのヒットテスト境界内に移動したときに発生します。</span> これには、ホバーをサポートしていないデバイスからの {{event("pointerdown")}} イベントの結果も含まれます（{{event("pointerdown")}} を参照）。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("PointerEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointerenter">onpointerenter</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>addEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('pointerenter', (event) =&gt; {
+  console.log('ポインタが要素に進入しました');
+});</pre>
+
+<p><code>onpointerenter</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.onpointerenter = (event) =&gt; {
+  console.log('ポインタが要素に進入しました');
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-pointerenter-event')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.pointerenter_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointerenter">onpointerenter</a></code> イベントハンドラプロパティ</li>
+ <li> Document でのこのイベント: <code><a href="/ja/docs/Web/API/Document/pointerenter_event">pointerenter</a></code> イベント</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/pointerleave_event/index.html b/files/ja/web/api/htmlelement/pointerleave_event/index.html
new file mode 100644
index 0000000000..68cf610095
--- /dev/null
+++ b/files/ja/web/api/htmlelement/pointerleave_event/index.html
@@ -0,0 +1,89 @@
+---
+title: 'HTMLElement: pointerleave イベント'
+slug: Web/API/HTMLElement/pointerleave_event
+tags:
+  - DOM
+  - Event
+  - PointerEvent
+  - Reference
+translation_of: Web/API/HTMLElement/pointerleave_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><code>pointerleave</code> イベントは、ポインティングデバイスが要素のヒットテスト境界から外れると発生します。</span> ペンデバイスの場合、このイベントは、スタイラスがデジタイザによって検出可能なホバー範囲を離れたときに発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("PointerEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointerleave">onpointerleave</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>addEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('pointerleave', (event) =&gt; {
+  console.log('ポインタが要素から離脱しました');
+});</pre>
+
+<p><code>onpointerleave</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.onpointerleave = (event) =&gt; {
+  console.log('ポインタが要素から離脱しました');
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-pointerleave-event')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.pointerleave_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointerleave">onpointerleave</a></code> イベントハンドラプロパティ</li>
+ <li><code>Document</code> でのこのイベント: <code><a href="/ja/docs/Web/API/Document/pointerleave_event">pointerleave</a></code> イベント</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/pointermove_event/index.html b/files/ja/web/api/htmlelement/pointermove_event/index.html
new file mode 100644
index 0000000000..7567c14ced
--- /dev/null
+++ b/files/ja/web/api/htmlelement/pointermove_event/index.html
@@ -0,0 +1,98 @@
+---
+title: 'HTMLElement: pointermove イベント'
+slug: Web/API/HTMLElement/pointermove_event
+tags:
+  - Event
+  - HTML DOM
+  - HTMLElement
+  - PointerEvent
+  - Reference
+translation_of: Web/API/HTMLElement/pointermove_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>pointermove</code> イベントは、ポインターの座標が変更され、ブラウザーの <a href="/ja/docs/Web/CSS/touch-action">touch-action</a> によってポインターが<a href="/ja/docs/Web/Events/pointercancel">キャンセルされて</a>いない場合に発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("PointerEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers/onpointermove", "onpointermove")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p>{{domxref("PointerEvent")}} 型のイベントは、ポインティングデバイスによるユーザーの対話に必要なすべての情報を提供します。位置、移動距離、ボタンの状態などです。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>pointermove</code> イベントのハンドラーを {{domxref("EventTarget.addEventListener", "addEventListener()")}} で追加する場合です。</p>
+
+<pre class="brush: js notranslate">const para = document.querySelector('p');
+
+para.addEventListener('pointermove', (event) =&gt; {
+  console.log('ポインターが移動しました');
+});</pre>
+
+<p><code>onpointermove</code> イベントハンドラープロパティを使用することもできます。</p>
+
+<pre class="brush: js notranslate">const para = document.querySelector('p');
+
+para.onpointermove = (event) =&gt; {
+  console.log('ポインターが移動しました');
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-pointermove-event')}}</td>
+   <td>{{Spec2('Pointer Events')}}</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.HTMLElement.pointermove_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointermove">onpointermove</a></code> イベントハンドラプロパティ</li>
+ <li><code>Document</code> でのこのイベント: <code><a href="/ja/docs/Web/API/Document/pointermove_event">pointermove</a></code> イベント</li>
+</ul>
+
+<p>Internet Explorer は、<code>MSPointerHover</code> という名前のイベントもサポートしていました。 これは、接触（通常はペン）が表面に触れずに要素上を移動したときに発生します。 この独自の方法は Internet Explorer に固有のものであり、Internet Explorer 11 以降、推奨されなくなりました。 IE11 以降では、<code><a href="/ja/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code> イベントがすべてのペンの動きに対して発生します（ホバーしているかどうかにかかわらず）。</p>
diff --git a/files/ja/web/api/htmlelement/pointerout_event/index.html b/files/ja/web/api/htmlelement/pointerout_event/index.html
new file mode 100644
index 0000000000..df2a3342c9
--- /dev/null
+++ b/files/ja/web/api/htmlelement/pointerout_event/index.html
@@ -0,0 +1,89 @@
+---
+title: 'HTMLElement: pointerout イベント'
+slug: Web/API/HTMLElement/pointerout_event
+tags:
+  - DOM
+  - Event
+  - PointerEvent
+  - Reference
+translation_of: Web/API/HTMLElement/pointerout_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><code>pointerout </code>イベントは、次のようないくつかの理由で発生します。 ポインティングデバイスが要素の<em>ヒットテスト</em>境界から外れた。 ホバーをサポートしていないデバイスに {{event("pointerup")}} イベントが発生した（{{event("pointerup")}} を参照）。 {{event("pointercancel")}} イベントの発生後（{{event("pointercancel")}} を参照）。 ペンスタイラスがデジタイザによって検出可能なホバー範囲を離脱したとき。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("PointerEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointerout">onpointerout</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>addEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('pointerout', (event) =&gt; {
+  console.log('ポインタが外に移動しました');
+});</pre>
+
+<p><code>onpointerout</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.onpointerout = (event) =&gt; {
+  console.log('ポインタが外に移動しました');
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-pointerout-event')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.pointerout_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointerout">onpointerout</a></code> イベントハンドラプロパティ</li>
+ <li><code>Document</code> でのこのイベント: <code><a href="/ja/docs/Web/API/Document/pointerout_event">pointerout</a></code> イベント</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/pointerover_event/index.html b/files/ja/web/api/htmlelement/pointerover_event/index.html
new file mode 100644
index 0000000000..cf37b5be9a
--- /dev/null
+++ b/files/ja/web/api/htmlelement/pointerover_event/index.html
@@ -0,0 +1,89 @@
+---
+title: 'HTMLElement: pointerover イベント'
+slug: Web/API/HTMLElement/pointerover_event
+tags:
+  - DOM
+  - Event
+  - PointerEvent
+  - Reference
+translation_of: Web/API/HTMLElement/pointerover_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>pointerover</code> イベントは、ポインティングデバイスが要素のヒットテスト境界内に移動したときに発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("PointerEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointerover">onpointerover</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>addEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('pointerover', (event) =&gt; {
+  console.log('ポインタが内に移動しました');
+});</pre>
+
+<p><code>onpointerover</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.onpointerover = (event) =&gt; {
+  console.log('ポインタが内に移動しました');
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-pointerover-event')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.pointerover_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointerover">onpointerover</a></code> イベントハンドラプロパティ</li>
+ <li><code>Document</code> でのこのイベント: <code><a href="/ja/docs/Web/API/Document/pointerover_event">pointerover</a></code> イベント</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/pointerup_event/index.html b/files/ja/web/api/htmlelement/pointerup_event/index.html
new file mode 100644
index 0000000000..dcbddd385e
--- /dev/null
+++ b/files/ja/web/api/htmlelement/pointerup_event/index.html
@@ -0,0 +1,89 @@
+---
+title: 'HTMLElement: pointerup イベント'
+slug: Web/API/HTMLElement/pointerup_event
+tags:
+  - DOM
+  - Event
+  - PointerEvent
+  - Reference
+translation_of: Web/API/HTMLElement/pointerup_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>pointerup</code> イベントは、ポインタがアクティブでなくなったときに発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("PointerEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointerup">onpointerup</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>addEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('pointerup', (event) =&gt; {
+  console.log('ポインタアップ');
+});</pre>
+
+<p><code>onpointerup</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.onpointerup = (event) =&gt; {
+  console.log('ポインタアップ');
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-pointerup-event')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.pointerup_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onpointerup">onpointerup</a></code> イベントハンドラプロパティ</li>
+ <li><code><a href="/ja/docs/Web/API/Document">Document</a></code> でのこのイベント: <code><a href="/ja/docs/Web/API/Document/pointerup_event">pointerup</a></code></li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/title/index.html b/files/ja/web/api/htmlelement/title/index.html
new file mode 100644
index 0000000000..6f90c74316
--- /dev/null
+++ b/files/ja/web/api/htmlelement/title/index.html
@@ -0,0 +1,69 @@
+---
+title: HTMLElement.title
+slug: Web/API/HTMLElement/title
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Property
+  - Reference
+translation_of: Web/API/HTMLElement/title
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary"><strong><code>HTMLElement.title</code></strong> プロパティは、要素のタイトルを表します。 通常、テキストは、マウスがノード上にあるときに「ツールチップ」ポップアップに表示されます。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>str</em> = <em>element</em>.title;
+<em>element</em>.title = <em>str</em>;
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">const link = document.createElement('a');
+link.innerText = 'ブドウ';
+link.href = 'https://ja.wikipedia.org/wiki/ブドウ';
+link.title = 'ブドウに関するウィキペディアのページ';
+</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('HTML WHATWG', '#dom-title', 'title')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>{{SpecName('DOM2 HTML')}} からの変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>{{SpecName('DOM1')}} からの変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.title")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>HTML の <code><a href="/ja/docs/Web/HTML/Global_attributes/title"><strong>title</strong></a></code> グローバル属性</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/transitioncancel_event/index.html b/files/ja/web/api/htmlelement/transitioncancel_event/index.html
new file mode 100644
index 0000000000..f83b5f4643
--- /dev/null
+++ b/files/ja/web/api/htmlelement/transitioncancel_event/index.html
@@ -0,0 +1,97 @@
+---
+title: 'HTMLElement: transitioncancel イベント'
+slug: Web/API/HTMLElement/transitioncancel_event
+tags:
+  - CSS Transitions
+  - CSS トランジション
+  - DOM
+  - Event
+  - HTMLElement
+  - Reference
+  - TransitionEvent
+  - events
+  - transitioncancel
+  - イベント
+translation_of: Web/API/HTMLElement/transitioncancel_event
+---
+<div>{{APIRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>transitioncancel</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>がキャンセルされたときに発生します。</p>
+
+<p>詳しくは {{domxref("GlobalEventHandlers.ontransitioncancel")}} をご覧ください。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("TransitionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードは、トランジションが定義され、 <code>transitioncancel</code> イベントにリスナーを追加した要素を取得します。</p>
+
+<pre class="brush: js">const transition = document.querySelector('.transition');
+
+transition.addEventListener('transitioncancel', () =&gt; {
+  console.log('Transition canceled');
+});</pre>
+
+<p>同様に、 {{domxref("GlobalEventHandlers.ontransitioncancel", "ontransitioncancel")}} プロパティを <code>addEventListener()</code> の代わりに使用すると以下のようになります。</p>
+
+<pre class="brush: js">const transition = document.querySelector('.transition');
+
+transition.ontransitioncancel = () =&gt; {
+  console.log('Transition canceled');
+};
+</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('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>初回定義</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.HTMLElement.transitioncancel_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.ontransitioncancel")}} イベントハンドラー</li>
+ <li>{{domxref("TransitionEvent")}} インターフェイス</li>
+ <li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li>
+ <li>関連イベント: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitionend_event", "transitionend")}}</li>
+ <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/transitioncancel_event", "transitioncancel")}}</li>
+ <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/transitioncancel_event", "transitioncancel")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/transitionend_event/index.html b/files/ja/web/api/htmlelement/transitionend_event/index.html
new file mode 100644
index 0000000000..f83e0644b6
--- /dev/null
+++ b/files/ja/web/api/htmlelement/transitionend_event/index.html
@@ -0,0 +1,95 @@
+---
+title: 'HTMLElement: transitionend イベント'
+slug: Web/API/HTMLElement/transitionend_event
+tags:
+  - CSS Transitions
+  - CSS トランジション
+  - DOM
+  - Event
+  - Reference
+  - TransitionEvent
+  - Web
+  - events
+  - transitionend
+  - イベント
+  - ウェブ
+translation_of: Web/API/HTMLElement/transitionend_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>transitionend</code></strong> イベントは、 <a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が完了したときに発生します。トランジションが完了前に削除された場合、例えば {{cssxref("transition-property")}} が削除されたり {{cssxref("display")}} が <code>none</code> に設定されたりした場合、このイベントは生成されません。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル可能</th>
+   <td>はい</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("TransitionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードは、トランジションが定義されており、 <code>transitionend</code> イベントにリスナーを追加している要素を取得します。</p>
+
+<pre class="brush: js">const transition = document.querySelector('.transition');
+
+transition.addEventListener('transitionend', () =&gt; {
+  console.log('トランジション終了');
+});</pre>
+
+<p>同様に、 {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} を使用した例です。</p>
+
+<pre class="brush: js">const transition = document.querySelector('.transition');
+
+transition.ontransitionend = () =&gt; {
+  console.log('トランジション終了');
+};</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("CSS3 Transitions", "#transitionend", "transitionend")}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>初回定義</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.HTMLElement.transitionend_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.ontransitionend")}} イベントハンドラー</li>
+ <li>{{domxref("TransitionEvent")}} インターフェイス</li>
+ <li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li>
+ <li>関連イベント: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</li>
+ <li>{{domxref("Document")}} に対するこのイベント: {{domxref("Document/transitionend_event", "transitionend")}}</li>
+ <li>{{domxref("Window")}} に対するこのイベント: {{domxref("Window/transitionend_event", "transitionend")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/transitionrun_event/index.html b/files/ja/web/api/htmlelement/transitionrun_event/index.html
new file mode 100644
index 0000000000..18733814d9
--- /dev/null
+++ b/files/ja/web/api/htmlelement/transitionrun_event/index.html
@@ -0,0 +1,144 @@
+---
+title: 'HTMLElement: transitionrun イベント'
+slug: Web/API/HTMLElement/transitionrun_event
+tags:
+  - CSS Transitions
+  - CSS トランジション
+  - DOM
+  - Event
+  - Reference
+  - Transitions
+  - Web
+  - events
+  - transitionrun
+  - イベント
+  - ウェブ
+  - トランジション
+translation_of: Web/API/HTMLElement/transitionrun_event
+---
+<div>{{APIRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>transitionrun</code></strong> イベントは、 <a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が最初に生成されたとき、すなわち、 {{cssxref("transition-delay")}} が始まる前に発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル可能</th>
+   <td>いいえ</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("TransitionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードは <code>transitionrun</code> イベントのリスナーを追加します。</p>
+
+<pre class="brush: js notranslate">el.addEventListener('transitionrun', () =&gt; {
+  console.log('Transition is running but hasn\'t necessarily started transitioning yet');
+});</pre>
+
+<p>同じですが、 <code><a href="/ja/docs/Web/API/GlobalEventHandlers/ontransitionrun">ontransitionrun</a></code> プロパティを <code>addEventListener()</code> の代わりに使用した例です。</p>
+
+<pre class="brush: js notranslate">el.ontransitionrun = () =&gt; {
+  console.log('Transition started running, and will start transitioning when the transition delay has expired');
+};</pre>
+
+<div>
+<h3 id="Live_example" name="Live_example">ライブ例</h3>
+
+<p>以下の例では、単純な {{htmlelement("div")}} 要素を用い、遅延を含むトランジションでスタイル付けしています。</p>
+
+<pre class="brush: html notranslate">&lt;div class="transition"&gt;Hover over me&lt;/div&gt;
+&lt;div class="message"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255,0,0,1);
+  transition-property: transform, background;
+  transition-duration: 2s;
+  transition-delay: 1s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255,0,0,0);
+}</pre>
+
+<p>このために、 {{domxref("HTMLElement/transitionstart_event", "transitionstart")}} および {{domxref("HTMLElement/transitionrun_event", "transitionrun")}} イベントが発生する場所を示す JavaScript を追加します。</p>
+
+<pre class="brush: js notranslate">const el = document.querySelector('.transition');
+const message = document.querySelector('.message');
+
+el.addEventListener('transitionrun', function() {
+  message.textContent = 'transitionrun fired';
+});
+
+el.addEventListener('transitionstart', function() {
+  message.textContent = 'transitionstart fired';
+});
+
+el.addEventListener('transitionend', function() {
+  message.textContent = 'transitionend fired';
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p>
+</div>
+
+<p>相違点は以下のとおりです。</p>
+
+<ul>
+ <li><code>transitionrun</code> は、トランジションが生成されるときに発生します (つまり、遅延時間の始め)。</li>
+ <li><code>transitionstart</code> は実際にアニメーションが始まるときに発生します。 (つまり、遅延時間の終わり)。</li>
+</ul>
+
+<p><code>transitionrun</code> は、遅延時間が終わる前にトランジションが中止されたときにも発生します。トランジションの遅延時間がなかったり、 transition-delay が負の数であった場合には、 <code>transitionrun</code> と <code>transitionstart</code> の両方が発生します。</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('CSS3 Transitions', '#transitionrun', 'transitionrun')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>初回定義</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.HTMLElement.transitionrun_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.ontransitionsrun")}} イベントハンドラー</li>
+ <li>{{domxref("TransitionEvent")}} インターフェイス</li>
+ <li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li>
+ <li>関連イベント: {{domxref("HTMLElement/transitionend_event", "transitionend")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</li>
+ <li>{{domxref("Document")}} に対するこのイベント: {{domxref("Document/transitionrun_event", "transitionrun")}}</li>
+ <li>{{domxref("Window")}} に対するこのイベント: {{domxref("Window/transitionrun_event", "transitionrun")}}</li>
+</ul>
diff --git a/files/ja/web/api/htmlelement/transitionstart_event/index.html b/files/ja/web/api/htmlelement/transitionstart_event/index.html
new file mode 100644
index 0000000000..b345251185
--- /dev/null
+++ b/files/ja/web/api/htmlelement/transitionstart_event/index.html
@@ -0,0 +1,136 @@
+---
+title: 'HTMLElement: transitionstart イベント'
+slug: Web/API/HTMLElement/transitionstart_event
+tags:
+  - CSS Transitions
+  - CSS トランジション
+  - DOM
+  - Event
+  - Reference
+  - TransitionEvent
+  - transitionstart
+  - イベント
+translation_of: Web/API/HTMLElement/transitionstart_event
+---
+<div>{{APIRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>transitionstart</code></strong> イベントは、<a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>が実際に開始されたとき、すなわち、{{cssxref("transition-delay")}} が終了したときに発生します。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>あり</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル可能</th>
+   <td>いいえ</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("TransitionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラープロパティ</th>
+   <td>{{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>このコードでは <code>transitionstart</code> イベントにリスナーを追加しています:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">element<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'transitionstart'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Started transitioning'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>似ていますが、 <code>addEventListener()</code>の代わりに <code><a href="https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/ontransitionrun">ontransitionstart</a></code> プロパティを使っています:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">element<span class="punctuation token">.</span><span class="function function-variable token">ontransitionrun</span> <span class="operator token">=</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Started transitioning'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Live_example" name="Live_example">Live example</h3>
+
+<p>以下の例では、単純な {{htmlelement("div")}} 要素を用い、遅延を含むトランジションでスタイル付けしています。</p>
+
+<pre class="brush: html">&lt;div class="transition"&gt;&lt;/div&gt;
+&lt;div class="message"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255,0,0,1);
+  transition-property: transform background;
+  transition-duration: 2s;
+  transition-delay: 2s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255,0,0,0);
+}</pre>
+
+<p>これに、{{domxref("HTMLElement/transitionstart_event", "transitionstart")}} および {{domxref("HTMLElement/transitionrun_event", "transitionrun")}} イベントが発生する場所を示す JavaScript を追加します。</p>
+
+<pre class="brush: js">const transition = document.querySelector('.transition');
+const message = document.querySelector('.message');
+
+transition.addEventListener('transitionrun', function() {
+  message.textContent = 'transitionrun fired';
+});
+
+transition.addEventListener('transitionstart', function() {
+  message.textContent = 'transitionstart fired';
+});
+
+transition.addEventListener('transitionend', function() {
+  message.textContent = '<code class="language-js"><span class="string token">transitionend fired</span></code><code>'</code>;
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Examples', '100%', '150px') }}</p>
+
+<p>相違点は以下のとおりです。</p>
+
+<ul>
+ <li>transitionrun は、トランジションが生成されるときに発生します (つまり、あらゆる遅延時間の始め)。</li>
+ <li>transitionstart は実際にアニメーションが始まるときに発生します。(つまり、あらゆる遅延時間の終わり)。</li>
+</ul>
+
+<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('CSS3 Transitions', '#transitionstart', 'transitionstart')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>初回定義</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.HTMLElement.transitionstart_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.ontransitionstart")}} イベントハンドラー</li>
+ <li>{{domxref("TransitionEvent")}} インターフェイス</li>
+ <li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li>
+ <li>関連イベント: {{domxref("HTMLElement/transitionend_event", "transitionend")}}, {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</li>
+ <li>{{domxref("Document")}} に対するこのイベント: {{domxref("Document/transitionstart_event", "transitionstart")}}</li>
+ <li>{{domxref("Window")}} に対するこのイベント: {{domxref("Window/transitionstart_event", "transitionstart")}}</li>
+</ul>