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

3 files changed, 164 insertions, 0 deletions

diff --git a/files/ja/web/api/cssrulelist/index.md b/files/ja/web/api/cssrulelist/index.md
new file mode 100644
index 0000000000..ea0603819c
--- /dev/null
+++ b/files/ja/web/api/cssrulelist/index.md
@@ -0,0 +1,76 @@
+---
+title: CSSRuleList
+slug: Web/API/CSSRuleList
+tags:
+  - API
+  - CSSOM
+  - インターフェイス
+  - リファレンス
+browser-compat: api.CSSRuleList
+translation_of: Web/API/CSSRuleList
+---
+{{ APIRef("CSSOM") }}
+
+`CSSRuleList` は読み取り専用の {{domxref("CSSRule")}} オブジェクトの順序付きコレクションを表します。
+
+`CSSRuleList` オブジェクトは読み取り専用であり、直接変更することはできませんが、内容が変化していくことがあるので `live` オブジェクトと見なされます。
+
+`CSSRule` オブジェクトが返す基本ルールを編集するには、 {{domxref("CSSStyleSheet")}} のメソッドである {{domxref("CSSStyleSheet.insertRule()")}} と {{domxref("CSSStyleSheet.deleteRule()")}} を使用します。
+
+このインターフェイスにはコンストラクターがありません。 `CSSRuleList` のインスタンスは {{domxref("CSSStyleSheet.cssRules")}} と {{domxref("CSSKeyframesRule.cssRules")}} から返却されます。
+
+## プロパティ
+
+- {{domxref("CSSRuleList.length")}}{{ReadOnlyInline}}
+  - : このコレクション内の {{domxref("CSSRule")}} オブジェクトの数を表す整数を返します。
+
+## メソッド
+
+- {{domxref("CSSRuleList.item()")}}
+  - : 単一の {{domxref("CSSRule")}} を取得します。
+
+## 例
+
+以下の例には、 3 つのルールがあるスタイルシートがあります。 {{domxref("CSSStyleSheet.cssRules")}} を使用すると `CSSRuleList` を返し、それがコンソールに出力されます。
+
+リスト内のルールの数は、 {{domxref("CSSRuleList.length")}} を使用してコンソールに出力されます。最初の {{domxref("CSSRule")}} は `0` を {{domxref("CSSRuleList.item")}} の引数に指定することで返されます。この例では `body` セレクターのルールセットが返されます。
+
+### CSS
+
+```css
+body {
+  font-family: system-ui,-apple-system,sans-serif;
+  margin: 2em;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+.container > * {
+  background-color: #3740ff;
+  color: #fff;
+}
+```
+
+### JavaScript
+
+```js
+let myRules = document.styleSheets[0].cssRules;
+console.log(myRules);
+console.log(myRules.length);
+console.log(myRules[0]);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`CSSRule`](/ja/docs/Web/API/CSSRule)
diff --git a/files/ja/web/api/cssrulelist/item/index.md b/files/ja/web/api/cssrulelist/item/index.md
new file mode 100644
index 0000000000..26a448e1fc
--- /dev/null
+++ b/files/ja/web/api/cssrulelist/item/index.md
@@ -0,0 +1,46 @@
+---
+title: CSSRuleList.item()
+slug: Web/API/CSSRuleList/item
+tags:
+  - API
+  - メソッド
+  - リファレンス
+  - item
+  - CSSRuleList
+browser-compat: api.CSSRuleList.item
+---
+{{ APIRef("CSSOM") }}
+
+**`item()`** は {{domxref("CSSRuleList")}} インターフェイスのメソッドで、 `index` で指定された {{domxref("CSSRule")}} オブジェクトを返します。指定された `index` が存在しなければ `null` を返します。
+
+## 構文
+
+```js
+CSSRuleList.item(index);
+```
+
+### 引数
+
+- `index`
+  - : 整数です。
+
+### 返値
+
+{{domxref("CSSRule")}} です。
+
+## 例
+
+以下の例では、 `myRules` という名前の {{domxref("CSSRuleList")}} の最初のアイテムをコンソールに出力します。
+
+```js
+let myRules = document.styleSheets[0].cssRules;
+console.log(myRules[0]);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cssrulelist/length/index.md b/files/ja/web/api/cssrulelist/length/index.md
new file mode 100644
index 0000000000..6847644d23
--- /dev/null
+++ b/files/ja/web/api/cssrulelist/length/index.md
@@ -0,0 +1,42 @@
+---
+title: CSSRuleList.length
+slug: Web/API/CSSRuleList/length
+tags:
+  - API
+  - プロパティ
+  - リファレンス
+  - length
+  - CSSRuleList
+browser-compat: api.CSSRuleList.length
+translation_of: Web/API/CSSRuleList/length
+---
+{{ APIRef("CSSOM") }}
+
+**`length`** は {{domxref("CSSRuleList")}} インターフェイスのプロパティで、リスト内の {{domxref("CSSRule")}} オブジェクトの数を返します。
+
+## 構文
+
+```js
+let length = CSSRuleList.length;
+```
+
+### 値
+
+整数です。
+
+## 例
+
+以下の例では、 `myRules` という名前の {{domxref("CSSRuleList")}} にあるアイテムの数をコンソールに出力します。
+
+```js
+let myRules = document.styleSheets[0].cssRules;
+console.log(myRules.length);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}