From 96d304fbf245458d503548584cd9b9f27a5b1eeb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 20 Feb 2022 01:12:42 +0900 Subject: 2021/09/15 時点の英語版に基づき新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/cssrulelist/index.md | 76 ++++++++++++++++++++++++++++ files/ja/web/api/cssrulelist/item/index.md | 46 +++++++++++++++++ files/ja/web/api/cssrulelist/length/index.md | 42 +++++++++++++++ 3 files changed, 164 insertions(+) create mode 100644 files/ja/web/api/cssrulelist/index.md create mode 100644 files/ja/web/api/cssrulelist/item/index.md create mode 100644 files/ja/web/api/cssrulelist/length/index.md 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}} -- cgit v1.2.3-54-g00ecf