2021/09/15 時点の英語版に同期

author: Masahiro FUJIMOTO <mfujimot@gmail.com> 2022-02-28 23:27:56 +0900
committer: Masahiro FUJIMOTO <mfujimot@gmail.com> 2022-03-08 23:45:59 +0900
commit: 10ba082441b43b1b232a2439ee2d181316bae8fa (patch)
tree: 66d1d76d94b16bddeda776ec6bc27ca81a0962e7
parent: fcaf278de3a2d71b1a94cabdaa934b895b3916bf (diff)
download: translated-content-10ba082441b43b1b232a2439ee2d181316bae8fa.tar.gz
translated-content-10ba082441b43b1b232a2439ee2d181316bae8fa.tar.bz2
translated-content-10ba082441b43b1b232a2439ee2d181316bae8fa.zip
9 files changed, 324 insertions, 335 deletions
diff --git a/files/ja/web/api/element/attributes/index.md b/files/ja/web/api/element/attributes/index.md
index f3653263ef..05f85d4bf7 100644
--- a/files/ja/web/api/element/attributes/index.md
+++ b/files/ja/web/api/element/attributes/index.md
@@ -6,113 +6,85 @@ tags:
   - Attributes
   - DOM
   - Element
-  - Property
   - プロパティ
   - リファレンス
-  - 属性
+browser-compat: api.Element.attributes
 translation_of: Web/API/Element/attributes
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p><strong><code>Element.attributes</code></strong> プロパティは、そのノードに登録された全ての属性ノードのコレクションを返却します。返却される値は {{domxref("NamedNodeMap")}} であり、 <code><strong>Array</strong></code> ではありません。つまり、 {{jsxref("Array")}} のメソッドは持っておらず、 {{domxref("Attr")}} ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、 <code><strong>attributes</strong></code> はその属性に関するあらゆる情報を表す文字列のキーと値の組です。</p>
+**`Element.attributes`** プロパティは、そのノードに登録されたすべての属性ノードの生きたコレクションを返却します。返却される値は {{domxref("NamedNodeMap")}} であり、 `Array` ではありません。つまり、 {{jsxref("Array")}} のメソッドは持っておらず、 {{domxref("Attr")}} ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、 `attributes` はその属性に関するあらゆる情報を表す文字列のキーと値の組です。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
-</pre>
+```js
+var attr = element.attributes;
+```
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="Basic_examples" name="Basic_examples">基本的な例</h3>
+### 基本的な例
 
-<pre class="brush: js">// ドキュメント内の最初の &lt;p&gt; 要素を取得する
+```js
+// 文書内の最初の <p> 要素を取得
 var para = document.getElementsByTagName("p")[0];
-var atts = para.attributes;</pre>
+var atts = para.attributes;
+```
 
-<h3 id="Enumerating_elements_attributes" name="Enumerating_elements_attributes">要素の属性を列挙する</h3>
+### 要素の属性を列挙する
 
-<p>ある要素の全ての属性を走査したい時には、インデックスを使うと便利です。<br>
- 次の例では、 "paragraph" を id に持つ要素の全ての属性ノードを走査し、その属性の値を表示します。</p>
+ある要素のすべての属性を走査したい場合は、数値のインデックスを使うと便利です。
+次の例では、 "paragraph" を id に持つ要素のすべての属性ノードを走査し、その属性の値を表示します。
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
+```html
+<!DOCTYPE html>
 
-&lt;html&gt;
+<html>
 
- &lt;head&gt;
-  &lt;title&gt;Attributes example&lt;/title&gt;
-  &lt;script type="text/javascript"&gt;
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
    function listAttributes() {
      var paragraph = document.getElementById("paragraph");
      var result = document.getElementById("result");
 
-     // まず、最初の段落(p1)がなんらかの属性を持っているか確かめよう
+     // まず、段落に属性があるか確かめる
      if (paragraph.hasAttributes()) {
        var attrs = paragraph.attributes;
        var output = "";
-       for(var i = attrs.length - 1; i &gt;= 0; i--) {
-         output += attrs[i].name + "-&gt;" + attrs[i].value;
+       for(var i = attrs.length - 1; i >= 0; i--) {
+         output += attrs[i].name + "->" + attrs[i].value;
        }
        result.value = output;
      } else {
-       result.value = "No attributes to show";
+       result.value = "表示する属性はありません";
      }
    }
-  &lt;/script&gt;
- &lt;/head&gt;
-
-&lt;body&gt;
- &lt;p id="paragraph" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
- &lt;form action=""&gt;
-  &lt;p&gt;
-    &lt;input type="button" value="Show first attribute name and value"
-      onclick="listAttributes();"&gt;
-    &lt;input id="result" type="text" value=""&gt;
-  &lt;/p&gt;
- &lt;/form&gt;
-&lt;/body&gt;
-&lt;/html&gt;</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('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>{{SpecName('DOM3 Core')}} 以降、 {{domxref("Node")}} から {{domxref("Element")}} へ移動</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>{{SpecName('DOM2 Core')}} から変更無し</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>{{SpecName('DOM1')}}から変更無し</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("api.Element.attributes")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>返却される値のインターフェースである {{domxref("NamedNodeMap")}}</li>
- <li><a href="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> におけるブラウザー間の互換性への配慮</li>
-</ul>
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" style="color: green;">サンプルの段落</p>
+ <form action="">
+  <p>
+    <input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 返却される値のインターフェースである {{domxref("NamedNodeMap")}}
+- [quirksmode](https://www.quirksmode.org/dom/w3c_core.html#attributes) におけるブラウザー間の互換性の考慮事項
diff --git a/files/ja/web/api/element/childelementcount/index.md b/files/ja/web/api/element/childelementcount/index.md
index c3520c9a31..1e869a7dc2 100644
--- a/files/ja/web/api/element/childelementcount/index.md
+++ b/files/ja/web/api/element/childelementcount/index.md
@@ -4,39 +4,40 @@ slug: Web/API/Element/childElementCount
 tags:
   - API
   - DOM
-  - Property
-  - Reference
+  - プロパティ
+  - リファレンス
 browser-compat: api.Element.childElementCount
 translation_of: Web/API/Element/childElementCount
 original_slug: Web/API/ParentNode/childElementCount
 ---
-<div>{{ APIRef("DOM") }}</div>
+{{ APIRef("DOM") }}
 
-<p><code><strong>Element.childElementCount</strong></code> は読み取り専用のプロパティで、この要素の子要素の数を返します。</p>
+**`Element.childElementCount`** は読み取り専用のプロパティで、この要素の子要素の数を返します。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js">element.childElementCount;</pre>
+```js
+element.childElementCount;
+```
 
-<h2 id="Example">例</h2>
+## 例
 
-<pre class="brush:js">let sidebar = document.getElementById('sidebar');
-if (sidebar.childElementCount &gt; 0) {
-  // 何もしない
+```js
+let sidebar = document.getElementById('sidebar');
+if (sidebar.childElementCount > 0) {
+  // 何かを行う
 }
-</pre>
+```
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Document.childElementCount")}}</li>
-  <li>{{domxref("DocumentFragment.childElementCount")}}</li>
-</ul>
+- {{domxref("Document.childElementCount")}}
+- {{domxref("DocumentFragment.childElementCount")}}
diff --git a/files/ja/web/api/element/children/index.md b/files/ja/web/api/element/children/index.md
index 5dd887af4f..01e0dc6627 100644
--- a/files/ja/web/api/element/children/index.md
+++ b/files/ja/web/api/element/children/index.md
@@ -6,53 +6,50 @@ tags:
   - DOM
   - Element
   - HTMLCollection
-  - Property
+  - プロパティ
   - children
 browser-compat: api.Element.children
 translation_of: Web/API/Element/children
 original_slug: Web/API/ParentNode/children
 ---
-<div>{{ APIRef("DOM") }}</div>
+{{ APIRef("DOM") }}
 
-<p><strong><code>children</code></strong> は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。</p>
+**`children`** は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。
 
-<p><code>Element.children</code> は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。</p>
+`Element.children` は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js">
-// Getter
+```js
+// ゲッター
 collection = myElement.children;
 
-// No setter; read-only property
-</pre>
+// セッターはありません。読み取り専用プロパティです。
+```
 
-<h3 id="Return_value">返値</h3>
+### 返値
 
-<p>生きた {{ domxref("HTMLCollection") }} で、 <code><var>node</var></code> の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p>
+生きた {{ domxref("HTMLCollection") }} で、 `node` の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。
 
-<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p>
+ノードが子要素を持たない場合、 `children` は要素を含まず、`length` は `0` です。
 
-<h2 id="Example">例 </h2>
+## 例
 
-<pre class="brush: js">const myElement = document.getElementById('foo');
-for (let i = 0; i &lt; myElement.children.length; i++) {
+```js
+const myElement = document.getElementById('foo');
+for (let i = 0; i < myElement.children.length; i++) {
   console.log(myElement.children[i].tagName);
 }
-</pre>
+```
 
-<h2 id="Specification">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>
-    {{domxref("Node.childNodes")}}
-  </li>
-</ul>
+- {{domxref("Node.childNodes")}}
diff --git a/files/ja/web/api/element/classname/index.md b/files/ja/web/api/element/classname/index.md
index 00f15100e7..bbdbcc000b 100644
--- a/files/ja/web/api/element/classname/index.md
+++ b/files/ja/web/api/element/classname/index.md
@@ -1,35 +1,61 @@
 ---
-title: element.className
+title: Element.className
 slug: Web/API/Element/className
 tags:
+  - API
   - DOM
   - Gecko
-  - Gecko DOM Reference
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.className
 translation_of: Web/API/Element/className
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p><strong>className</strong> は要素の <code>class</code> 属性の値の取得 / 設定に用います。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>cName</var> = <var>elementNodeReference</var>.className;
-<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
-<ul>
- <li><var>cName</var> : クラス名（文字列）</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">var elm = document.getElementById("div1"); //対象要素を取得
-
-if (elm.className == "fixed") {
-  // 対象要素のクラス名が "fixed" であった場合の処理をここに記述
-}</pre>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>"class" という語句はプログラミングに於いて様々な文脈で用いられる為、競合を防ぐために <code>className</code> という名称となっています。</p>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li>{{domxref("element.classList")}}</li>
-</ul>
+{{APIRef("DOM")}}
+
+**`className`** は {{domxref("Element")}} インターフェイスのプロパティで、この要素の [`class` 属性](/ja/docs/Web/HTML/Global_attributes/class)の値を取得したり設定したりします。
+
+## 構文
+
+```js
+var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+```
+
+- `cName` は文字列変数で、現在の要素のクラスまたは空白区切りのクラス群を表します。
+
+## 例
+
+```js
+let el = document.getElementById('item');
+
+if (el.className === 'active'){
+  el.className = 'inactive';
+} else {
+  el.className = 'active';
+}
+```
+
+## メモ
+
+このプロパティでは、 `className` という名前が `class` の代わりに使用されています。
+これは DOM を操作するために使用される多くの言語と "class" キーワードが競合するためです。
+
+`className` は {{domxref("SVGAnimatedString")}} のインスタンスにも、 `element` が {{domxref("SVGElement")}} であれば存在する可能性があります。 SVG 要素を扱っている場合は、要素の `className` は {{domxref("Element.getAttribute")}} や {{domxref("Element.setAttribute")}} を使用して取得したり設定したりした方がいいでしょう。しかし、その要素の [`class` 属性](/ja/docs/Web/HTML/Global_attributes/class)が空であった場合、 {{domxref("Element.getAttribute")}} は`""` ではなく [`null`](/ja/docs/Web/JavaScript/Reference/Global_Objects/null) を返すことに注意してください。
+
+```js
+elm.setAttribute('class', elm.getAttribute('class'))
+```
+
+> **Note:** `class` は **HTML 属性**であり、 `className` は **DOM プロパティ**です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("element.classList")}}
diff --git a/files/ja/web/api/element/clientheight/index.md b/files/ja/web/api/element/clientheight/index.md
index 4cde36518d..15d1cc596a 100644
--- a/files/ja/web/api/element/clientheight/index.md
+++ b/files/ja/web/api/element/clientheight/index.md
@@ -5,63 +5,47 @@ tags:
   - API
   - CSSOM View
   - NeedsMarkupWork
-  - Property
-  - Reference
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.clientHeight
 translation_of: Web/API/Element/clientHeight
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>Element.clientHeight</code></strong> は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 水平スクロールバーは含みません。</p>
+**`Element.clientHeight`** は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、（もしあれば）水平スクロールバーは含みません。
 
-<p><code>clientHeight</code> は CSS <code>height</code> + CSS <code>padding</code> - 水平スクロールバーの高さ(height) (もしあれば) として計算できます。</p>
+`clientHeight` は CSS `height` + CSS `padding` - 水平スクロールバーの高さ (もしあれば) として計算できます。
 
-<p><code>clientHeight</code> がルート要素 (<code>&lt;html&gt;</code> 要素) (または文書が後方互換モードである場合は <code>&lt;body&gt;</code>) に使用された場合、 (スクロールバーを除いた) ビューポートの高さが返されます。<a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight">これは <code>clientHeight</code> の特例です</a>。</p>
+`clientHeight` がルート要素（`<html>` 要素）（または文書が後方互換モードである場合は `<body>`）に使用された場合、（スクロールバーを除いた）ビューポートの高さが返されます。[これは `clientHeight` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight)。
 
-<div class="note">
-<p><strong>注:</strong> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p>
-</div>
+> **Note:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox notranslate">var <var>intElemClientHeight</var> = <var>element</var>.clientHeight;</pre>
+```js
+var intElemClientHeight = element.clientHeight;
+```
 
-<p><code><var>intElemClientHeight</var></code> は <code><var>element</var></code> の <code>clientHeight</code> をピクセル単位で表す整数値です。 <code>clientHeight</code> プロパティは読み取り専用です。</p>
+`intElemClientHeight` は `element` の `clientHeight` をピクセル単位で表す整数値です。 `clientHeight` プロパティは読み取り専用です。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+![](dimensions-client.png)
 
-<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-element-clientheight', 'clientHeight')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h3 id="Notes" name="Notes">注</h3>
+### メモ
 
-<p><code>clientHeight</code> は Internet Explorer オブジェクトモデルで導入されたプロパティです。</p>
+`clientHeight` は Internet Explorer オブジェクトモデルで導入されたプロパティです。
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.Element.clientHeight")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{domxref("HTMLElement.offsetHeight")}}</li>
- <li>{{domxref("Element.scrollHeight")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
-</ul>
+- {{domxref("HTMLElement.offsetHeight")}}
+- {{domxref("Element.scrollHeight")}}
+- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
diff --git a/files/ja/web/api/element/clientwidth/index.md b/files/ja/web/api/element/clientwidth/index.md
index 47753e0077..af5d5481ca 100644
--- a/files/ja/web/api/element/clientwidth/index.md
+++ b/files/ja/web/api/element/clientwidth/index.md
@@ -4,62 +4,46 @@ slug: Web/API/Element/clientWidth
 tags:
   - API
   - CSSOM View
-  - Property
-  - Reference
+  - NeedsMarkupWork
+  - リファレンス
   - プロパティ
+browser-compat: api.Element.clientWidth
 translation_of: Web/API/Element/clientWidth
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>Element.clientWidth</strong></code> プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 垂直スクロールバーは含みません。</p>
+**`Element.clientWidth`** プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、（もしあれば）垂直スクロールバーは含みません。
 
-<p><code>clientWidth</code> がルート要素 (<code>&lt;html&gt;</code> 要素) (または文書が後方互換モードである場合は <code>&lt;body&gt;</code>) に使用された場合、 (スクロールバーの幅を除く) ビューポートの幅が返されます。<a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth">これは <code>clientWidth</code></a> の特例です。</p>
+`clientWidth` がルート要素（`<html>` 要素）（または文書が後方互換モードである場合は `<body>`）に使用された場合、（スクロールバーを除いた）ビューポートの高さが返されます。[これは `clientWidth` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth)。
 
-<div class="note">
-<p><strong>メモ:</strong> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p>
-</div>
+> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre>
+```js
+var intElemClientWidth = element.clientWidth;
+```
 
-<p><code><var>intElemClientWidth</var></code> は <code><var>element</var></code> の <code>clientWidth</code> をピクセル数で表す整数値です。 <code>clientWidth</code> プロパティは読み取り専用です。</p>
+`intElemClientWidth` は `element` の `clientWidth` をピクセル数で表す整数値です。 `clientWidth` プロパティは読み取り専用です。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+![](dimensions-client.png)
 
-<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-element-clientwidth', 'clientWidth')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h3 id="Notes" name="Notes">メモ</h3>
+## メモ
 
-<p><code>clientWidth</code> は MS IE DHTML オブジェクトモデルにおいて初めて導入されました。</p>
+`clientTop` は MS IE DHTML オブジェクトモデルで最初に導入されました。
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.Element.clientWidth")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{domxref("HTMLElement.offsetWidth")}}</li>
- <li>{{domxref("Element.scrollWidth")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
-</ul>
+- {{domxref("HTMLElement.offsetWidth")}}
+- {{domxref("Element.scrollWidth")}}
+- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
diff --git a/files/ja/web/api/element/localname/index.md b/files/ja/web/api/element/localname/index.md
index b92152fbfa..c676607ad5 100644
--- a/files/ja/web/api/element/localname/index.md
+++ b/files/ja/web/api/element/localname/index.md
@@ -6,82 +6,80 @@ tags:
 - DOM
 - NeedsBrowserCompatibility
 - NeedsMobileBrowserCompatibility
-- Property
-- Reference
+- プロパティ
+- リファレンス
 browser-compat: api.Element.localName
 translation_of: Web/API/Element/localName
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>Element.localName</code></strong> は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。</p>
+**`Element.localName`** は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js"><var>name</var> = <var>element</var>.localName
-</pre>
+```js
+name = element.localName
+```
 
-<h3 id="Return_value">返値</h3>
+### 返値
 
-<p>要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}} です。
-</p>
+要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}} です。
 
-<h2 id="Example">例</h2>
+## 例
 
-<p>(<code>text/xml</code> や <code>application/xhtml+xml</code> のような、XML のコンテンツタイプで送出される必要があります。)</p>
+(`text/xml` や `application/xhtml+xml` のような、XML のコンテンツタイプで送出される必要があります。)
 
-<pre class="brush:xml">&lt;html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:svg="http://www.w3.org/2000/svg"&gt;
-&lt;head&gt;
-  &lt;script type="application/javascript"&gt;&lt;![CDATA[
+```xml
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <script type="application/javascript"><![CDATA[
   function test() {
     var text = document.getElementById('text');
     var circle = document.getElementById('circle');
 
-    text.value = "&lt;svg:circle&gt; has:\n" +
+    text.value = "<svg:circle> has:\n" +
                  "localName = '" + circle.localName + "'\n" +
                  "namespaceURI = '" + circle.namespaceURI + "'";
   }
-  ]]&gt;&lt;/script&gt;
-&lt;/head&gt;
-&lt;body onload="test()"&gt;
-  &lt;svg:svg version="1.1"
+  ]]></script>
+</head>
+<body onload="test()">
+  <svg:svg version="1.1"
     width="100px" height="100px"
-    viewBox="0 0 100 100"&gt;
-    &lt;svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/&gt;
-  &lt;/svg:svg&gt;
-  &lt;textarea id="text" rows="4" cols="55"/&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+    viewBox="0 0 100 100">
+    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
+  </svg:svg>
+  <textarea id="text" rows="4" cols="55"/>
+</body>
+</html>
+```
 
-<h2 id="Notes">注</h2>
+## メモ
 
-<p>ノードのローカル名とは、ノードの修飾名の、コロンの後に続く部分です。 XML において修飾名は、一般に特定の XML 文書の名前空間の一部として使われます。例えば、<code>ecomm:partners</code> という修飾名において、 <code>partners</code> はローカル名、<code>ecomm</code> は接頭辞です。</p>
+ノードのローカル名とは、ノードの修飾名の、コロンの後に続く部分です。 XML において修飾名は、一般に特定の XML 文書の名前空間の一部として使われます。例えば、`ecomm:partners` という修飾名において、 `partners` はローカル名、`ecomm` は接頭辞です。
 
-<pre class="brush:xml">&lt;ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"&gt;
-  &lt;ecomm:partners&gt;
-    &lt;ecomm:partner id="1001"&gt;Tony's Syrup Warehouse
-    &lt;/ecomm:partner&gt;
-  &lt;/ecomm:partner&gt;
-&lt;/ecomm:business&gt;
-</pre>
+```xml
+<ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
+  <ecomm:partners>
+    <ecomm:partner id="1001">Tony's Syrup Warehouse
+    </ecomm:partner>
+  </ecomm:partner>
+</ecomm:business>
+```
 
-<div class="note">
-<p><strong>注: </strong>{{Gecko("1.9.2")}} 以前、このプロパティは、HTML DOM における HTML 要素ではローカル名を大文字で返していました（XML DOM における XHTML 要素とは対照的に）。最新バージョンでは HTML5 に従い、このプロパティは内部の DOM ストレージの場合、 HTML DOM における HTML要素と XHTML DOM における XHTML要素のいずれも、小文字で返します。{{domxref("element.tagName","tagName")}} プロパティは引き続き、 HTML DOM における HTML 要素では大文字で返します。</p>
-</div>
+> **Note:** {{Gecko("1.9.2")}} 以前、このプロパティは、HTML DOM における HTML 要素ではローカル名を大文字で返していました（XML DOM における XHTML 要素とは対照的に）。最新バージョンでは HTML5 に従い、このプロパティは内部の DOM ストレージの場合、 HTML DOM における HTML 要素と XHTML DOM における XHTML 要素のいずれも、小文字で返します。{{domxref("element.tagName","tagName")}} プロパティは引き続き、 HTML DOM における HTML 要素では大文字で返します。
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Element.namespaceURI")}}</li>
-  <li>{{domxref("Element.prefix")}}</li>
-  <li>{{domxref("Attr.localName")}}</li>
-</ul>
+- {{domxref("Element.namespaceURI")}}
+- {{domxref("Element.prefix")}}
+- {{domxref("Attr.localName")}}
diff --git a/files/ja/web/api/element/prefix/index.md b/files/ja/web/api/element/prefix/index.md
index b2baf67888..e45b334480 100644
--- a/files/ja/web/api/element/prefix/index.md
+++ b/files/ja/web/api/element/prefix/index.md
@@ -6,43 +6,43 @@ tags:
 - DOM
 - NeedsBrowserCompatibility
 - NeedsMobileBrowserCompatibility
-- Property
-- Reference
+- プロパティ
+- リファレンス
 browser-compat: api.Element.prefix
 translation_of: Web/API/Element/prefix
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>Element.prefix</strong></code> は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は <code>null</code> を返します。</p>
+**`Element.prefix`** は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は `null` を返します。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js"><var>string</var> = <var>element</var>.prefix
-</pre>
+```js
+string = element.prefix
+```
 
-<h2 id="Examples">例</h2>
+## 例
 
-<p>次の例はコンソールに "x" を記録します。</p>
+次の例はコンソールに "x" を記録します。
 
-<pre class="brush:xml">&lt;x:div onclick="console.log(this.prefix)"/&gt;
-</pre>
+```xml
+<x:div onclick="console.log(this.prefix)"/>
+```
 
-<h2 id="Notes">注</h2>
+## 注
 
-<p>これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。</p>
+これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Element.namespaceURI")}}</li>
-  <li>{{domxref("Element.localName")}}</li>
-  <li>{{domxref("Attr.prefix")}}</li>
-</ul>
+- {{domxref("Element.namespaceURI")}}
+- {{domxref("Element.localName")}}
+- {{domxref("Attr.prefix")}}
diff --git a/files/ja/web/api/element/tagname/index.md b/files/ja/web/api/element/tagname/index.md
index e10c5acf43..520ec73461 100644
--- a/files/ja/web/api/element/tagname/index.md
+++ b/files/ja/web/api/element/tagname/index.md
@@ -1,36 +1,63 @@
 ---
-title: element.tagName
+title: Element.tagName
 slug: Web/API/Element/tagName
 tags:
+  - API
   - DOM
+  - DOM リファレンス
+  - Element
   - Gecko
-  - Gecko DOM Reference
+  - NeedsBrowserCompatibility
+  - プロパティ
+  - 読み取り専用
+  - リファレンス
+  - tagName
+browser-compat: api.Element.tagName
 translation_of: Web/API/Element/tagName
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>要素の名前を返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>elementName</var> = element.tagName
-</pre>
-<ul>
- <li><code>elementName</code> : 現在の要素の名前を含む文字列</li>
-</ul>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>XML (および XHTML など XML ベースの言語) では、tagName は大文字・小文字が保たれます。HTML では、<code>tagName</code> は標準的な大文字で要素名を返します。 <code>tagName</code> の値は <a href="/ja/docs/Web/API/Node.nodeName">nodeName</a> の値と同じになります。</p>
-<h2 id="Example" name="Example">例</h2>
-<p>以下のようなマークアップを想定します。</p>
-<pre class="brush:html">&lt;span id="born"&gt;When I was born...&lt;/span&gt;
-</pre>
-<p>上記 HTML に対し以下のスクリプトを実行した場合...</p>
-<pre class="brush:js">var span = document.getElementById("born");
-
-alert(span.tagName);
-</pre>
-<p>XHTML (および他の XML 形式) では、「span」という警告ダイアログが表示されます。HTML では、その代わりに「SPAN」と表示されます。</p>
-<h2 id="Specifications" name="Specifications">仕様</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
-</ul>
+{{ApiRef("DOM")}}
+
+**`tagName`** は {{domxref("Element")}} インターフェイスのプロパティで、呼び出された要素のタグ名を返します。
+
+例えば、この要素が {{HTMLElement("img")}} であれば、 `tagName` プロパティは `"IMG"` となります（HTML 文書の場合。 XML/XHTML 文書では大文字小文字が違うかもしれません）。
+
+## 構文
+
+```js
+elementName = Element.tagName;
+```
+
+### 値
+
+この要素のタグ名を示す文字列です。文字列が大文字であるかどうかは、文書型によって変わります。
+
+- HTML 文書を表す DOM ツリーでは、タグ名は常に大文字に正規化されます。例えば、 `tagName` が {{HTMLElement("div")}} 要素で呼び出された場合は、 `"DIV"` を返します。
+- XML の DOM ツリー内にある要素のタグ名は、元の XML ファイルに書かれているのと大文字小文字が同じになります。 XML 文書に `"<SomeTag>"` タグがあった場合、 `tagName` プロパティの値は `"SomeTag"` になります。
+
+{{domxref("Element")}} オブジェクトにおいては、 `tagName` の値は要素オブジェクトの継承元である {{domxref("Node")}} の {{domxref("Node.nodeName", "nodeName")}} プロパティの値と同じになります。
+
+## 例
+
+### HTML
+
+```html
+<span id="born">When I was born...</span>
+```
+
+### JavaScript
+
+```js
+var span = document.getElementById("born");
+console.log(span.tagName);
+```
+
+XHTML (および他の XML 形式) では、元の大文字小文字が保持されるので、元のタグ名が小文字で生成されている場合は `"span"` が出力されます。
+HTML では、元の文書を生成したときに大文字小文字のどちらが使われたかに関わらず、 `"SPAN"` と出力されます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
author	Masahiro FUJIMOTO <mfujimot@gmail.com>	2022-02-28 23:27:56 +0900
committer	Masahiro FUJIMOTO <mfujimot@gmail.com>	2022-03-08 23:45:59 +0900
commit	10ba082441b43b1b232a2439ee2d181316bae8fa (patch)
tree	66d1d76d94b16bddeda776ec6bc27ca81a0962e7
parent	fcaf278de3a2d71b1a94cabdaa934b895b3916bf (diff)
download	translated-content-10ba082441b43b1b232a2439ee2d181316bae8fa.tar.gz translated-content-10ba082441b43b1b232a2439ee2d181316bae8fa.tar.bz2 translated-content-10ba082441b43b1b232a2439ee2d181316bae8fa.zip