Web/API/CSSStyleDeclaration 以下を更新 (#1482)

* Web/API/CSSStyleDeclaration/cssText を新規翻訳

2021/06/13 時点の英語版に基づき新規翻訳

* Web/API/CSSStyleDeclaration 以下を整備

Web/API/CSSStyleDeclaration 以下について、2021/07/10時点の内容に同期。未翻訳の記事については新規翻訳

11 files changed, 580 insertions, 146 deletions

diff --git a/files/ja/web/api/cssstyledeclaration/cssfloat/index.html b/files/ja/web/api/cssstyledeclaration/cssfloat/index.html
new file mode 100644
index 0000000000..a95cca1f9d
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/cssfloat/index.html
@@ -0,0 +1,47 @@
+---
+title: CSSStyleDeclaration.cssFloat
+slug: Web/API/CSSStyleDeclaration/cssFloat
+tags:
+  - API
+  - CSSOM
+  - CSSStyleDeclaration
+  - Reference
+browser-compat: api.CSSStyleDeclaration.cssFloat
+translation_of: Web/API/CSSStyleDeclaration/cssFloat
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><span class="seoSummary"><code><strong>cssFloat</strong></code> は {{domxref("CSSStyleDeclaration")}} インターフェイスのプロパティで、 {{DOMxRef("CSSStyleDeclaration.getPropertyValue()")}} を <code>float</code> を引数として呼び出したときの結果を返します。</span></p>
+<p>設定したときは、 {{DOMxRef("CSSStyleDeclaration.setProperty()")}} を <code>float</code> を第一引数、指定された値を第二引数として呼び出します。指定された値は {{cssxref("float")}} プロパティで有効な値でなければなりません。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">var <var>float</var> = <var>CSSStyleDeclaration</var>.cssFloat();
+<var>CSSStyleDeclaration</var>.cssFloat = <var>"right"</var></pre>
+
+<h3>値</h3>
+<p>{{domxref('CSSOMString')}} です。</p>
+
+<h2 id="Example">例</h2>
+
+<p>以下の例では、スタイルシートには、 1 つだけのルール <code>.box</code> に {{cssxref("float")}} プロパティの値が <code>left</code> と設定されています。この値は <code>cssFloat</code> から返されます。次に、 <code>cssFloat</code> を使用して値を "right" に設定し、新しい値を返します。</p>
+
+<pre class="brush: css">.box {
+  float: left;
+  inline-size: 300px;
+}
+</pre>
+
+<pre class="brush: js">let myRules = document.styleSheets[0].cssRules;
+let rule = myRules[0];
+console.log(rule.style.cssFloat); // "left"
+rule.style.cssFloat = "right";
+console.log(rule.style.cssFloat); //right</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
diff --git a/files/ja/web/api/cssstyledeclaration/csstext/index.html b/files/ja/web/api/cssstyledeclaration/csstext/index.html
new file mode 100644
index 0000000000..33cb0c7d90
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/csstext/index.html
@@ -0,0 +1,36 @@
+---
+title: CSSStyleDeclaration.cssText
+slug: Web/API/CSSStyleDeclaration/cssText
+tags:
+  - API
+  - CSSOM
+  - NeedsSpecTable
+  - Reference
+browser-compat: api.CSSStyleDeclaration.cssText
+translation_of: Web/API/CSSStyleDeclaration/cssText
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><span class="seoSummary"><code><strong>cssText</strong></code> は {{domxref("CSSStyleDeclaration")}} インターフェイスのプロパティで、その要素の<strong>インライン</strong>スタイル宣言のみのテキストを返したり設定したりします。</span><strong>スタイルシート</strong>の規則を動的に設定するためには、<a href="/ja/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">動的なスタイル情報の利用</a>を参照してください。</p>
+
+<p>スタイルシートのスタイル規則である {{domxref("CSSRule.cssText")}} と混同しないようにしてください。</p>
+
+<h2 id="Example">例</h2>
+
+<pre class="brush: html">&lt;span id=&quot;s1&quot; style=&quot;color: red;&quot;&gt;
+  Some text
+&lt;/span&gt;
+
+&lt;script&gt;
+  var elem = document.getElementById(&quot;s1&quot;);
+  alert(elem.style.cssText); // &quot;color: red;&quot;
+&lt;/script&gt;
+</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
diff --git a/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.html b/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.html
index f3ce66652d..4889ed135a 100644
--- a/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.html
+++ b/files/ja/web/api/cssstyledeclaration/getpropertycssvalue/index.html
@@ -2,64 +2,58 @@
 title: CSSStyleDeclaration.getPropertyCSSValue()
 slug: Web/API/CSSStyleDeclaration/getPropertyCSSValue
 tags:
-  - API
-  - CSSOM
-  - Method
-  - Obsolete
-  - Reference
+- API
+- CSSOM
+- Method
+- Deprecated
+- Reference
+browser-compat: api.CSSStyleDeclaration.getPropertyCSSValue
 translation_of: Web/API/CSSStyleDeclaration/getPropertyCSSValue
 ---
-<p>{{ APIRef("CSSOM") }} {{Obsolete_header}}</p>
+<p>{{ APIRef("CSSOM") }} {{deprecated_header}}</p>
 
-<p><span class="seoSummary"><strong>CSSStyleDeclaration.getPropertyCSSValue()</strong> メソッドインターフェイスは、プロパティの CSS 値を含む {{domxref('CSSValue')}} を返します。</span> プロパティ名が省略プロパティの場合は <code>null</code> を返すことに注意して下さい。</p>
+<p><strong>CSSStyleDeclaration.getPropertyCSSValue()</strong> メソッドインターフェイスは、プロパティの CSS 値を含む {{domxref('CSSValue')}} を返します。プロパティ名が一括指定プロパティの場合は <code>null</code> を返すことに注意して下さい。</p>
 
-<p>代わりに {{domxref("CSSStyleDeclaration.getPropertyValue()")}} を使用する必要があります。</p>
+<div class="notecard note">
+  <p><strong>注:</strong> このインターフェースは、型付けされた CSS オブジェクトモデルを作成する試みの一部でした。この試みは放棄されており、ほとんどのブラウザーは実装していません。</p>
+  <p>この目的を達成するには、以下のものを使用することができます。</p>
+  <ul>
+    <li>{{domxref("CSSStyleDeclaration.getPropertyValue()")}} が型付けなしの <a href="/ja/docs/Web/API/CSS_Object_Model">CSS オブジェクトモデル</a>にあり、広く対応されています。</li>
+    <li>{{domxref("Element.computedStyleMap()")}} が最近の <a href="/ja/docs/Web/API/CSS_Typed_OM_API">CSS 型付きオブジェクトモデル API</a> にありますが、対応が少なく実験的なものと考えられています。</li>
+  </ul>
+</div>
 
-<h2 id="構文">構文</h2>
+<h2 id="Syntax">構文</h2>
 
-<pre class="syntaxbox notranslate">var <em>value</em> = <em>style</em>.getPropertyCSSValue(<em>property</em>);</pre>
+<pre
+  class="brush: js">var <em>value</em> = <em>style</em>.getPropertyCSSValue(<em>property</em>);</pre>
 
-<h3 id="パラメータ">パラメータ</h3>
+<h3 id="Parameters">引数</h3>
 
 <ul>
- <li><em><code>property</code></em> は、取得するプロパティ名を表す {{domxref('DOMString')}} です。</li>
+  <li><em><code>property</code></em> は、取得するプロパティ名を表す {{domxref('DOMString')}} です。</li>
 </ul>
 
-<h3 id="返り値">返り値</h3>
+<h3 id="Return_value">返値</h3>
 
 <ul>
  <li><code><em>value</em></code> は、プロパティの CSS 値を含む {{domxref('CSSValue')}} です。存在しない場合は <code>null</code> を返します。</li>
 </ul>
 
-<h2 id="例">例</h2>
+<h2 id="Example">例</h2>
 
-<p>次の JavaScript コードは、 <code>color</code> CSS プロパティの計算された RGB 値を含むオブジェクトを取得します:</p>
+<p>次の JavaScript コードは、 CSS の <code>color</code> プロパティの計算済みの RGB 値を含むオブジェクトを取得します。</p>
 
-<pre class="brush: js notranslate">var style = window.getComputedStyle(elem, null);
+<pre class="brush: js">var style = window.getComputedStyle(elem, null);
 var rgbObj = style.getPropertyCSSValue('color').getRGBColorValue();
 </pre>
 
-<h2 id="仕様">仕様</h2>
+<h2 id="Specifications">仕様書</h2>
 
-<table>
- <thead>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}}</td>
-   <td>{{Spec2('DOM2 Style')}}</td>
-   <td><a href="https://lists.w3.org/Archives/Public/www-style/2003Oct/0347.html">2003年7月</a>に廃止と宣言</td>
-  </tr>
- </tbody>
-</table>
+<p>この機能はもともと、 <a href="https://www.w3.org/TR/DOM-Level-2-Style">DOM Style Level 2</a> 仕様書で定義されていましたが、それ以降の標準化の取り組みからは外れています。</p>
 
-<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
+<p>この機能は、最新の、しかし互換性のない、 <a href="/ja/docs/Web/API/CSS_Typed_OM_API">CSS Typed Object Model API</a> に取って代わられ、現在は標準化されています。</p>
 
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-
-<p>{{Compat("api.CSSStyleDeclaration.getPropertyCSSValue")}}</p>
+<p>{{Compat}}</p>
diff --git a/files/ja/web/api/cssstyledeclaration/getpropertypriority/index.html b/files/ja/web/api/cssstyledeclaration/getpropertypriority/index.html
new file mode 100644
index 0000000000..36a6406cf0
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/getpropertypriority/index.html
@@ -0,0 +1,47 @@
+---
+title: CSSStyleDeclaration.getPropertyPriority()
+slug: Web/API/CSSStyleDeclaration/getPropertyPriority
+tags:
+- API
+- CSSOM
+- Method
+- Reference
+browser-compat: api.CSSStyleDeclaration.getPropertyPriority
+translation_of: Web/API/CSSStyleDeclaration/getPropertyPriority
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p><strong>CSSStyleDeclaration.getPropertyPriority()</strong> メソッドインターフェイスは、 {{domxref('DOMString')}} でその CSS プロパティに明示的に設定されたすべての優先度を返します。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre
+  class="brush: js">var <em>priority</em> = <em>style</em>.getPropertyPriority(<em>property</em>);</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<ul>
+  <li><em><code>property</code></em> は {{domxref('DOMString')}} で、チェックするプロパティ名を表します。</li>
+</ul>
+
+<h3 id="Return_value">返値</h3>
+
+<ul>
+  <li><code><em>priority</em></code> は {{domxref('DOMString')}} で、存在する場合は優先度 (<code>"important"</code> など) を表します。存在しない場合は、空文字列を返します。</li>
+</ul>
+
+<h2 id="Example">例</h2>
+
+<p>以下の JavaScript コードは、 <code>margin</code> が CSS セレクターの規則で important と記されているかどうかをチェックします。</p>
+
+<pre class="brush: js">var declaration = document.styleSheets[0].cssRules[0].style;
+var isImportant = declaration.getPropertyPriority('margin') === 'important';
+</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
diff --git a/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.html b/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.html
index feb4705491..6b403a875b 100644
--- a/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.html
+++ b/files/ja/web/api/cssstyledeclaration/getpropertyvalue/index.html
@@ -2,66 +2,46 @@
 title: CSSStyleDeclaration.getPropertyValue()
 slug: Web/API/CSSStyleDeclaration/getPropertyValue
 tags:
-  - API
-  - CSSOM
-  - Method
-  - Reference
+- API
+- CSSOM
+- Method
+- Reference
+browser-compat: api.CSSStyleDeclaration.getPropertyValue
 translation_of: Web/API/CSSStyleDeclaration/getPropertyValue
 ---
 <p>{{ APIRef("CSSOM") }}</p>
 
 <p><strong>CSSStyleDeclaration.getPropertyValue()</strong> メソッドインターフェイスは、指定された CSS プロパティの値を含む {{domxref('DOMString')}} を返します。</p>
 
-<h2 id="構文">構文</h2>
+<h2 id="Syntax">構文</h2>
 
-<pre class="syntaxbox notranslate">var <em>value</em> = <em>style</em>.getPropertyValue(<em>property</em>);</pre>
+<pre
+  class="brush: js">var <em>value</em> = <em>style</em>.getPropertyValue(<em>property</em>);</pre>
 
-<h3 id="パラメータ">パラメータ</h3>
+<h3 id="Parameters">引数</h3>
 
 <ul>
- <li><em><code>property</code></em> は、チェックされるプロパティ名を表す {{domxref('DOMString')}} です。</li>
+  <li><em><code>property</code></em> は、チェックされるプロパティ名 (ハイフン区切り) を表す {{domxref('DOMString')}} です。</li>
 </ul>
 
-<h3 id="返り値">返り値</h3>
+<h3 id="Return_value">返値</h3>
 
 <ul>
- <li><code><em>value</em></code> は、プロパティの値を含む {{domxref('DOMString')}} です。設定されていない場合、空の文字列を返します。</li>
+ <li><code><em>value</em></code> は、プロパティの値を含む {{domxref('DOMString')}} です。設定されていない場合、空文字列を返します。</li>
 </ul>
 
-<h2 id="例">例</h2>
+<h2 id="Example">例</h2>
 
-<p>次の JavaScript コードは CSS セレクタールールの <code>margin</code> プロパティの値をクエリします:</p>
+<p>次の JavaScript コードは、 CSS セレクター規則の <code>margin</code> プロパティの値を問い合わせます。</p>
 
-<pre class="brush: js notranslate">var declaration = document.styleSheets[0].cssRules[0].style;
+<pre class="brush: js">var declaration = document.styleSheets[0].cssRules[0].style;
 var value = declaration.getPropertyValue('margin'); // "1px 2px"
 </pre>
 
-<h2 id="仕様">仕様</h2>
+<h2 id="Specifications">Specifications</h2>
 
-<table>
- <thead>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM', '#dom-cssstyledeclaration-getpropertyvalue', 'CSSStyleDeclaration.getPropertyValue()')}}</td>
-   <td>{{Spec2('CSSOM')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}}</td>
-   <td>{{Spec2('DOM2 Style')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-
-
-<p>{{Compat("api.CSSStyleDeclaration.getPropertyValue")}}</p>
+<p>{{Compat}}</p>
diff --git a/files/ja/web/api/cssstyledeclaration/index.html b/files/ja/web/api/cssstyledeclaration/index.html
index 7055ef0943..43e40972cb 100644
--- a/files/ja/web/api/cssstyledeclaration/index.html
+++ b/files/ja/web/api/cssstyledeclaration/index.html
@@ -1,66 +1,68 @@
 ---
 title: CSSStyleDeclaration
 slug: Web/API/CSSStyleDeclaration
+tags:
+  - API
+  - CSSOM
+  - CSSRule
+  - Interface
+  - Reference
+browser-compat: api.CSSStyleDeclaration
 translation_of: Web/API/CSSStyleDeclaration
 ---
 <div>{{APIRef("CSSOM")}}</div>
 
-<p><strong><code>CSSStyleDeclaration</code></strong>インターフェースはCSS宣言ブロックオブジェクトを表し、スタイル情報やスタイル関連のメソッド、プロパティを提供します。</p>
+<p><strong><code>CSSStyleDeclaration</code></strong> インターフェースは CSS 宣言ブロックのオブジェクトを表し、スタイル情報や様々なスタイルに関するメソッドやプロパティを提供します。</p>
 
-<p><code>CSSStyleDeclaration</code> オブジェクトは下記の３つのAPIによって使用されます。</p>
+<p><code>CSSStyleDeclaration</code> オブジェクトは、下記の 3 つの API によって使用されます。</p>
 
 <ul>
- <li>{{DOMxRef("HTMLElement.style")}}。<br>
-  DOM要素をインラインスタイルで扱う際。(例, <code>&lt;div style="..."&gt;</code>).</li>
- <li>{{DOMxRef("CSSStyleSheet")}} API。<br>
-  例えば<code>document.styleSheets[0].cssRules[0].style</code> は、<code>CSSStyleDeclaration</code> を返します。</li>
- <li>{{DOMxRef("Window.getComputedStyle()")}}。<br>
-  これは読み取り専用インターフェースとして、<code>CSSStyleDeclaration</code> オブジェクトを返します。</li>
+ <li>単一の要素のインラインスタイルを扱う {{DOMxRef("HTMLElement.style")}} から (例: <code>&lt;div style="..."&gt;</code>)。</li>
+ <li>{{DOMxRef("CSSStyleSheet")}} API から。例えば <code>document.styleSheets[0].cssRules[0].style</code> は、その文書の最初のスタイルシートの最初の CSS 規則を <code>CSSStyleDeclaration</code> を返します。</li>
+ <li>{{DOMxRef("Window.getComputedStyle()")}} で、 <code>CSSStyleDeclaration</code> オブジェクトを<strong>読み取り専用</strong>インターフェイスとして返します。</li>
 </ul>
 
 <h2 id="属性">属性</h2>
 
 <dl>
  <dt>{{DOMxRef("CSSStyleDeclaration.cssText")}}</dt>
- <dd>Textual representation of the declaration block. Setting this attribute changes the style.<br>
- CSSブロック宣言をテキスト表示する。この属性を与えることでスタイルを変化させることが可能。</dd>
+ <dd>宣言ブロックのテキスト表現です。この属性を設定すると、スタイルが変化します。</dd>
  <dt>{{DOMxRef("CSSStyleDeclaration.length")}}{{ReadOnlyInline}}</dt>
- <dd>プロパティの数を表す。後述の{{DOMxRef("CSSStyleDeclaration.item()", 'item()')}}メソッドを参照のこと。<br>
-  </dd>
+ <dd>プロパティの数を表します。後述の {{DOMxRef("CSSStyleDeclaration.item()", 'item()')}} メソッドを参照のこと。</dd>
  <dt>{{DOMxRef("CSSStyleDeclaration.parentRule")}}{{ReadOnlyInline}}</dt>
- <dd>{{DOMxRef("CSSRule")}}を含むコンテナを表す。</dd>
+ <dd>所属する {{DOMxRef("CSSRule")}} を表します。</dd>
 </dl>
 
-<h3 id="CSS_プロパティ">CSS プロパティ</h3>
+<h3 id="CSS_Properties">CSS プロパティ</h3>
 
 <dl>
- <dt>{{DOMxRef("CSSStyleDeclaration.named_properties", "CSSStyleDeclaration.cssFloat")}}</dt>
- <dd>{{CSSxRef("float")}} CSSプロパティのエイリアス。</dd>
- <dt>{{DOMxRef("CSSStyleDeclaration.named_properties", '<code>CSSStyleDeclaration</code> named properties', "", 1)}}</dt>
- <dd>全てのCSSプロパティに対して、その値を取得する。</dd>
+ <dt>{{DOMxRef("CSSStyleDeclaration.cssFloat", "CSSStyleDeclaration.cssFloat")}}</dt>
+ <dd>CSS の {{CSSxRef("float")}} プロパティのエイリアスです。</dd>
+ <dt>{{DOMxRef("CSSStyleDeclaration.named_properties", '<code>CSSStyleDeclaration</code> の名前付きプロパティ', "", 1)}}</dt>
+ <dd>対応するすべての CSS プロパティを、ダッシュおよびキャメルケースにした属性です。</dd>
 </dl>
 
-<h2 id="メソッド">メソッド</h2>
+<h2 id="Methods">メソッド</h2>
 
 <dl>
  <dt>{{DOMxRef("CSSStyleDeclaration.getPropertyPriority()")}}</dt>
- <dd>Returns the optional priority, "important".</dd>
+ <dd>オプションの優先度、 "important" を返します。</dd>
  <dt>{{DOMxRef("CSSStyleDeclaration.getPropertyValue()")}}</dt>
- <dd>Returns the property value given a property name.</dd>
+ <dd>指定されたプロパティ名のプロパティ値を返します。</dd>
  <dt>{{DOMxRef("CSSStyleDeclaration.item()")}}</dt>
- <dd>Returns a CSS property name by its index, or the empty string if the index is out-of-bounds.</dd>
- <dd>An alternative to accessing <code>nodeList[<var>i</var>]</code> (which instead returns <code>undefined</code> when <code><var>i</var></code> is out-of-bounds). This is mostly useful for non-JavaScript DOM implementations.</dd>
+ <dd>位置から CSS プロパティ名を返します。位置が範囲を超えていた場合は空文字列を返します。</dd>
+ <dd>代替方法は <code>nodeList[<var>i</var>]</code> にアクセスすることです (これは <code><var>i</var></code> が範囲外であった場合は <code>undefined</code> を返します)。これは JavaScript 以外の DOM 実装の多くで最も有用です。</dd>
  <dt>{{DOMxRef("CSSStyleDeclaration.removeProperty()")}}</dt>
- <dd>Removes a property from the CSS declaration block.</dd>
+ <dd>CSS 宣言ブロックからプロパティを削除します。</dd>
  <dt>{{DOMxRef("CSSStyleDeclaration.setProperty()")}}</dt>
- <dd>Modifies an existing CSS property or creates a new CSS property in the declaration block.</dd>
- <dt>{{DOMxRef("CSSStyleDeclaration.getPropertyCSSValue()")}} {{Obsolete_Inline}}</dt>
- <dd><strong>Only supported via getComputedStyle in Firefox.</strong> Returns the property value as a {{DOMxRef("CSSPrimitiveValue")}} or <code>null</code> for <a href="/en-US/docs/Web/CSS/Shorthand_properties" title="en/Guide to Shorthand CSS">shorthand properties</a>.</dd>
+ <dd>宣言ブロック内の既存の CSS プロパティを変更するか、新しい CSS プロパティを生成するかします。</dd>
+ <dt>{{DOMxRef("CSSStyleDeclaration.getPropertyCSSValue()")}} {{deprecated_inline}}</dt>
+ <dd><strong>Firefox の getComputedStyle のみ対応</strong> プロパティの値を {{DOMxRef("CSSPrimitiveValue")}} として、または<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>では <code>null</code> を返します。</dd>
 </dl>
 
-<h2 id="例">例</h2>
+<h2 id="Example">例</h2>
 
-<pre class="brush: js notranslate">var styleObj = document.styleSheets[0].cssRules[0].style;
+<pre class="brush: js">var styleObj = document.styleSheets[0].cssRules[0].style;
 console.log(styleObj.cssText);
 
 for (var i = styleObj.length; i--;) {
@@ -70,52 +72,16 @@ for (var i = styleObj.length; i--;) {
 
 console.log(styleObj.cssText);</pre>
 
-<h2 id="仕様">仕様</h2>
+<h2 id="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('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}</td>
-   <td>{{Spec2('CSSOM')}}</td>
-   <td>Merged the <strong>DOM Level 2 Style</strong> <code>CSS2Properties</code> interface into <code>CSSStyleDeclaration</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSStyleDeclaration')}}</td>
-   <td>{{Spec2('DOM2 Style')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
+<p>{{Compat}}</p>
 
-
-<p>{{Compat("api.CSSStyleDeclaration")}}</p>
-
-<h2 id="関連情報">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a></li>
 </ul>
-
-<div class="jfk-bubble gtx-bubble">
-<div class="jfk-bubble-content-id" id="bubble-8">
-<div id="gtx-host" style="max-width: 400px;"></div>
-</div>
-
-<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
-
-<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 163.5px;">
-<div class="jfk-bubble-arrowimplbefore"></div>
-
-<div class="jfk-bubble-arrowimplafter"></div>
-</div>
-</div>
diff --git a/files/ja/web/api/cssstyledeclaration/item/index.html b/files/ja/web/api/cssstyledeclaration/item/index.html
new file mode 100644
index 0000000000..0ee3b526f3
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/item/index.html
@@ -0,0 +1,50 @@
+---
+title: CSSStyleDeclaration.item()
+slug: Web/API/CSSStyleDeclaration/item
+tags:
+- API
+- CSSOM
+- Method
+- Reference
+browser-compat: api.CSSStyleDeclaration.item
+translation_of: Web/API/CSSStyleDeclaration/item
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p id="Summary"><span class="seoSummary"><code>CSSStyleDeclaration.item()</code> メソッドインターフェイスは、位置を指定して {{domxref('CSSStyleDeclaration')}} の CSS プロパティ名を返します。</span>このメソッドは与えた値による例外が発生しません。位置が範囲外だった場合は空文字列が返され、引数が与えられなかった場合は <code>TypeError</code> が発生します。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">var <em>propertyName</em> = <em>style</em>.item(<em>index</em>);
+</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<ul>
+  <li><em><code>index</code></em> は読み取るノードの位置です。位置は 0 から始まります。</li>
+</ul>
+
+<h3 id="Return_value">返値</h3>
+
+<ul>
+  <li><em><code>propertyName</code></em> は {{domxref('DOMString')}} で、指定された位置にある CSS プロパティの名前を返します。</li>
+</ul>
+
+<p>JavaScript には、 NodeList から位置を指定して項目を取得するための簡単な特別な構文があります。
+</p>
+
+<pre class="brush: js">var propertyName = style[index];
+</pre>
+
+<h2 id="Example">例</h2>
+
+<pre class="brush: js">var style = document.getElementById('div1').style;
+var propertyName = style.item(1); // または style[1] - リスト中の 2 番目のスタイルを返します</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
diff --git a/files/ja/web/api/cssstyledeclaration/length/index.html b/files/ja/web/api/cssstyledeclaration/length/index.html
new file mode 100644
index 0000000000..8da1caf745
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/length/index.html
@@ -0,0 +1,43 @@
+---
+title: CSSStyleDeclaration.length
+slug: Web/API/CSSStyleDeclaration/length
+tags:
+- API
+- CSSOM
+- Property
+- Reference
+browser-compat: api.CSSStyleDeclaration.length
+translation_of: Web/API/CSSStyleDeclaration/length
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p><span class="seoSummary">読み取り専用のプロパティで、この CSS 宣言ブロックにあるスタイル宣言の数を整数で表します。</span></p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre
+	class="brush: js">var <em>num</em> = <em>styles</em>.length;</pre>
+
+<h3 id="Value">値</h3>
+
+<p>このインスタンスの親に明示的に設定されているスタイルの数を示す整数です。</p>
+
+<h2 id="Example">例</h2>
+
+<p>次の例は、以下の HTML 要素に明示的に設定されたスタイルの数を取得します。
+</p>
+
+<pre
+	class="brush: html">&lt;div id="div1" style="margin: 0 10px; background-color: #CA1; font-family: monospace"&gt;&lt;/div&gt;</pre>
+
+<p>JavaScript コード:</p>
+
+<pre>var myDiv = document.getElementById('div1'); var divStyle = myDiv.style; var len = divStyle.length; // 6</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
diff --git a/files/ja/web/api/cssstyledeclaration/parentrule/index.html b/files/ja/web/api/cssstyledeclaration/parentrule/index.html
new file mode 100644
index 0000000000..d8def05ea5
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/parentrule/index.html
@@ -0,0 +1,38 @@
+---
+title: CSSStyleDeclaration.parentRule
+slug: Web/API/CSSStyleDeclaration/parentRule
+tags:
+- API
+- CSSOM
+- Property
+- Reference
+browser-compat: api.CSSStyleDeclaration.parentRule
+translation_of: Web/API/CSSStyleDeclaration/parentRule
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p><span class="seoSummary"><strong>CSSStyleDeclaration.parentRule</strong> は読み取り専用のプロパティで、このスタイルブロックの親である {{domxref('CSSRule')}} を返します。</span>例えば、 CSS セレクターのスタイルを表す {{domxref('CSSStyleRule')}} です。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">var <em>rule</em> = <em>styles</em>.parentRule;</pre>
+
+<h3 id="Value">値</h3>
+
+<p>この宣言ブロックを含む CSS 規則、またはこの {{domxref('CSSStyleDeclaration')}} が {{domxref('CSSRule')}} に割り当てられていない場合は <code>null</code> を返します。</p>
+
+<h2 id="Example">例</h2>
+
+<p>次の JavaScript コードは、 {{domxref('CSSStyleDeclaration')}} から親の CSS スタイル規則を取得します。</p>
+
+<pre class="brush: js">var declaration = document.styleSheets[0].rules[0].style;
+var rule = declaration.parentRule;
+</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
diff --git a/files/ja/web/api/cssstyledeclaration/removeproperty/index.html b/files/ja/web/api/cssstyledeclaration/removeproperty/index.html
new file mode 100644
index 0000000000..a1a2600d10
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/removeproperty/index.html
@@ -0,0 +1,53 @@
+---
+title: CSSStyleDeclaration.removeProperty()
+slug: Web/API/CSSStyleDeclaration/removeProperty
+tags:
+- API
+- CSSOM
+- Method
+- Reference
+browser-compat: api.CSSStyleDeclaration.removeProperty
+translation_of: Web/API/CSSStyleDeclaration/removeProperty
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p><strong><code>CSSStyleDeclaration.removeProperty()</code></strong> メソッドインターフェイスは、 CSS スタイル宣言オブジェクトからプロパティを削除します。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre
+  class="brush: js">var <em>oldValue</em> = <em>style</em>.removeProperty(<em>property</em>);</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<ul>
+  <li><em><code>property</code></em> は {{domxref('DOMString')}} で、削除するプロパティ名を表します。なお、複数語からなるプロパティ名はハイフン区切りであって、キャメルケースではありません。</li>
+</ul>
+
+<h3 id="Return_value">返値</h3>
+
+<ul>
+  <li><code><em>oldValue</em></code> は {{domxref('DOMString')}} で、削除される前の CSS プロパティの値と等しいものです。</li>
+</ul>
+
+<h3 id="Exceptions">例外</h3>
+
+<ul>
+  <li>{{domxref('DOMException')}} NO_MODIFICATION_ALLOWED_ERR: プロパティまたは宣言ブロックが読取専用の場合。</li>
+</ul>
+
+<h2 id="Example">例</h2>
+
+<p>次の JavaScript コードは、 CSS の <code>background-color</code> プロパティをセレクター規則から削除します。</p>
+
+<pre class="brush: js">var declaration = document.styleSheets[0].rules[0].style;
+var oldValue = declaration.removeProperty('background-color');
+</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
diff --git a/files/ja/web/api/cssstyledeclaration/setproperty/index.html b/files/ja/web/api/cssstyledeclaration/setproperty/index.html
new file mode 100644
index 0000000000..68628b771d
--- /dev/null
+++ b/files/ja/web/api/cssstyledeclaration/setproperty/index.html
@@ -0,0 +1,180 @@
+---
+title: CSSStyleDeclaration.setProperty()
+slug: Web/API/CSSStyleDeclaration/setProperty
+tags:
+- API
+- CSSOM
+- Method
+- Reference
+browser-compat: api.CSSStyleDeclaration.setProperty
+translation_of: Web/API/CSSStyleDeclaration/setProperty
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p><span class="seoSummary"><strong><code>CSSStyleDeclaration.setProperty()</code></strong> メソッドインターフェイスは、 CSS スタイル宣言オブジェクトのプロパティに新しい値を設定します。</span></p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre
+  class="brush: js"><em>style</em>.setProperty(<em>propertyName</em>, <em>value, priority</em>);</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<ul>
+  <li><em><code>propertyName</code></em> は {{domxref('DOMString')}} で、変更する CSS プロパティ名 (ハイフン区切り) です。</li>
+  <li><em><code>value</code></em> {{optional_inline}} は
+    {{domxref('DOMString')}} で、新しいプロパティ値が入ります。指定されなかった場合は、空文字列として扱われます。
+    <ul>
+      <li>注: <em><code>value</code></em> は <code>"!important"</code> を含んではいけません。 --
+        これは <em><code>priority</code></em> 引数を使用して設定してください。</li>
+    </ul>
+  </li>
+  <li><em><code>priority</code></em> {{optional_inline}} は
+    {{domxref('DOMString')}} で、 CSS の優先度 "important" を設定することができます。指定されなかった場合は、空文字列として扱われます。以下の値を受け付けます。
+    <ul>
+      <li>文字列値 <code>"important"</code></li>
+      <li>キーワード <code>undefined</code></li>
+      <li>空文字列値 <code>""</code></li>
+    </ul>
+  </li>
+</ul>
+
+<h3 id="Return_value">返値</h3>
+
+<ul>
+  <li>{{jsxref('undefined')}}</li>
+</ul>
+
+<h3 id="Exceptions">例外</h3>
+
+<ul>
+  <li>{{domxref('DOMException')}} (NoModificationAllowedError): このプロパティまたは宣言ブロックが読み取り専用であった場合。</li>
+</ul>
+
+<p><em><code>priority</code></em> が省略できる場合、 JavaScript にはスタイル宣言オブジェクトの CSS プロパティの設定に特別な簡単な構文があります。</p>
+
+<pre class="brush: js"><em>style</em>.cssPropertyName = 'value';</pre>
+
+<h2 id="Examples">例</h2>
+
+<p>この例では、 3 つのボタンが用意されており、これらのボタンを押すことで、ボックス段落の境界、背景色、テキスト色をランダムな値に動的に変更することができます (この節の最後にあるライブサンプルを参照)。</p>
+
+<p>変更したい規則は、このページに適用されている 2 つ目のスタイルシートに含まれていることが分かっているので、 <code><a href="/ja/docs/Web/API/Document/styleSheetSets">document.styleSheets[1]</a></code> を使ってその参照を取得します。次に、 <code><a href="/ja/docs/Web/API/CSSStyleSheet/cssRules">stylesheet.cssRules</a></code> の配列に含まれている、スタイルシート内のさまざまな規則を反復処理します。それぞれの規則について、 <code><a href="/ja/docs/Web/API/CSSStyleRule/selectorText">CSSStyleRule.selectorText</a></code> プロパティがセレクター <code>.box p</code> と等しいかどうかを確認します。</p>
+
+<p>等しい場合、この <code>CSSStyleRule</code> オブジェクトへの参照を変数に格納します。次に、 3 つの関数を使って問題のプロパティにランダムな値を生成し、これらの値で規則を更新します。それぞれの場合において、これは <code>setProperty()</code> メソッドで行います (<code>boxParaRule.style.setProperty('border', newBorder);</code> のように)。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="controls"&gt;
+  &lt;button class="border"&gt;Border&lt;/button&gt;
+  &lt;button class="bgcolor"&gt;Background&lt;/button&gt;
+  &lt;button class="color"&gt;Text&lt;/button&gt;
+&lt;/div&gt;
+&lt;div class="box"&gt;
+  &lt;p&gt;Box&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">html {
+  background: orange;
+  font-family: sans-serif;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  width: 80%;
+  min-width: 500px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+div button {
+  flex: 1;
+  margin: 20px;
+  height: 30px;
+  line-height: 30px;
+}
+
+.box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100% - 70px);
+}
+
+.box p {
+  width: 50%;
+  text-align: center;
+  font-weight: bold;
+  font-size: 40px;
+  height: 150px;
+  line-height: 150px;
+  background: red;
+  border: 5px solid purple;
+  color: white;
+  transition: all 1s;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const borderBtn = document.querySelector('.border');
+const bgColorBtn = document.querySelector('.bgcolor');
+const colorBtn = document.querySelector('.color');
+const box = document.querySelector('.box');
+
+function random(min,max) {
+  const num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}
+
+function randomColor() {
+  return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) +  ')';
+}
+
+const stylesheet = document.styleSheets[1];
+let boxParaRule;
+
+for(let i = 0; i &lt; stylesheet.cssRules.length; i++) {
+  if(stylesheet.cssRules[i].selectorText === '.box p') {
+    boxParaRule = stylesheet.cssRules[i];
+  }
+}
+
+function setRandomBorder() {
+  const newBorder = random(1, 50) + 'px solid ' + randomColor();
+  boxParaRule.style.setProperty('border', newBorder);
+}
+
+function setRandomBgColor() {
+  const newBgColor = randomColor();
+  boxParaRule.style.setProperty('background-color', newBgColor);
+}
+
+function setRandomColor() {
+  const newColor = randomColor();
+  boxParaRule.style.setProperty('color', newColor);
+}
+
+borderBtn.addEventListener('click', setRandomBorder);
+bgColorBtn.addEventListener('click', setRandomBgColor);
+colorBtn.addEventListener('click', setRandomColor);</pre>
+
+<h3 id="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples', '100%', 400)}}</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>