Merge branch 'main' into fix-typo-client-side-web-apis-intro-ja

1 files changed, 97 insertions, 0 deletions

diff --git a/files/ja/web/api/stylepropertymapreadonly/index.md b/files/ja/web/api/stylepropertymapreadonly/index.md
new file mode 100644
index 0000000000..c7849699c3
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/index.md
@@ -0,0 +1,97 @@
+---
+title: StylePropertyMapReadOnly
+slug: Web/API/StylePropertyMapReadOnly
+tags:
+  - API
+  - CSS 型付きオブジェクトモデル API
+  - 実験的
+  - Houdini
+  - インターフェイス
+  - リファレンス
+  - StylePropertyMapReadOnly
+browser-compat: api.StylePropertyMapReadOnly
+translation_of: Web/API/StylePropertyMapReadOnly
+---
+{{SeeCompatTable}}{{APIRef("CSS Typed Object Model API")}}
+
+**`StylePropertyMapReadOnly`** は [CSS 型付きオブジェクトモデル API](/ja/docs/Web/API/CSS_Typed_Object_Model_API) のインターフェイスで、 {{domxref("CSSStyleDeclaration")}} の代替となる読み取り専用の CSS 宣言ブロックの表現を提供します。このインターフェイスのインスタンスを取得するには、 {{domxref('Element.computedStyleMap','Element.computedStyleMap()')}} を使用してください。
+
+## プロパティ
+
+- {{domxref('StylePropertyMapReadOnly.size')}}
+  - : `StylePropertyMapReadOnly` オブジェクトの大きさを、符号なし長整数値で返します。
+
+## メソッド
+
+- {{domxref('StylePropertyMapReadOnly.entries()')}}
+  - : このオブジェクト自身の列挙可能なプロパティ `[key, value]` の組を、 {{jsxref("Statements/for...in", "for...in")}} ループが提供するものと同じ順序で配列として返します（違いは、 for-in ループがプロトタイプチェーン内のプロパティも列挙することです）。
+- {{domxref('StylePropertyMapReadOnly.forEach()')}}
+  - : 指定された関数を `StylePropertyMapReadOnly` のそれぞれの要素について 1 回ずつ実行します。
+- {{domxref('StylePropertyMapReadOnly.get()')}}
+  - : 指定されたプロパティの値を返します。
+- {{domxref('StylePropertyMapReadOnly.getAll()')}}
+  - : 指定されたプロパティの値を含む {{domxref("CSSStyleValue")}} オブジェクトの配列を返します。
+- {{domxref('StylePropertyMapReadOnly.has()')}}
+  - : 指定されたプロパティが `StylePropertyMapReadOnly` オブジェクトにあるかどうかを示します。
+- {{domxref('StylePropertyMapReadOnly.keys()')}}
+  - : `StylePropertyMapReadOnly` 内のそれぞれの項目のキーを含む新しい*配列反復子*を返します。
+- {{domxref('StylePropertyMapReadOnly.values()')}}
+  - : `StylePropertyMapReadOnly` 内のそれぞれの項目の値を含む新しい*配列反復子*を返します。
+
+## 例
+
+観察するための要素を用意します。
+
+```html
+<p>
+   これは、いくつかのテキストを含む段落です。 CSS を追加することもできますし、しないこともできます。スタイルマップには、既定のものと継承されたすべての CSS プロパティ値が含まれます。
+</p>
+<dl id="output"></dl>
+```
+
+出力をよりよくするに、カスタムプロパティで CSS を少々追加します。
+
+```css
+p {
+   --someVariable: 1.6em;
+   --someOtherVariable: translateX(33vw);
+   --anotherVariable: 42;
+   line-height: var(--someVariable);
+}
+```
+
+JavaScript を追加して段落を取得し、 {{domxref('Element.computedStyleMap()')}} を使って、すべての既定の CSS プロパティ値の定義リストを返します。
+
+```js
+// 要素を取得
+const myElement = document.querySelector('p');
+
+// 入力する <dl> を取得
+const stylesList = document.querySelector('#output');
+
+// computedStyleMap() ですべての計算済みスタイルを取得
+const stylePropertyMap = myElement.computedStyleMap();
+
+// すべてのプロパティと値のマップを反復処理して、それぞれ <dt> と <dd> を追加
+for (const [prop, val] of stylePropertyMap) {
+  // プロパティ
+  const cssProperty = document.createElement('dt');
+  cssProperty.innerText = prop;
+  stylesList.appendChild(cssProperty);
+
+  // 値
+  const cssValue = document.createElement('dd');
+  cssValue.innerText = val;
+  stylesList.appendChild(cssValue);
+}
+```
+
+{{EmbedLiveSample("Examples", 120, 300)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}