2023/11/22 時点の英語版に基づき更新 (#18226)

* 2023/11/22 時点の英語版に基づき更新 * linter の無意味な指摘を回避 * Update files/ja/web/css/_colon_scope/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/css/_colon_scope/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
mdn · Feb 18, 2024 · aaab02c · aaab02c
1 parent b0c02ec
commit aaab02c
Showing 1 changed file with 96 additions and 30 deletions.
diff --git a/files/ja/web/css/_colon_scope/index.md b/files/ja/web/css/_colon_scope/index.md
@@ -1,6 +1,8 @@
 ---
 title: ":scope"
 slug: Web/CSS/:scope
+l10n:
+  sourceCommit: 88930816e169c5b51afdfcd22c3b2c54383a22b7
 ---
 
 {{CSSRef}}
@@ -14,58 +16,108 @@ slug: Web/CSS/:scope
 }
 ```
 
-現在、スタイルシートで使用したときは、現時点ではスコープ付きの要素を明確に確立する方法がないため、 `:scope` は {{cssxref(":root")}} と同じです。 DOM API ({{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}}, {{domxref("Element.closest()")}} など) で使用したときは、 `:scope` はメソッドを呼び出した要素を選択します。
+どの要素が `:scope` に一致するかは、そ使用されるコンテキストによって変わります。
+
+- スタイルシートのルートレベルで使用する場合、 `:scope` は {{cssxref(":root")}} と等価であり、通常の HTML 文書内の {{htmlelement("html")}} 要素に一致します。
+- {{cssxref("@scope")}} ブロックの中で使用した場合、 `:scope` はブロックの定義するスコープのルートに一致します。これは `@scope` ブロック自身からスコープのルートにスタイル設定を適用する方法を提供します。
+- DOM API 呼び出し（{{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}}, {{domxref("Element.closest()")}} など）で使用した場合、 `:scope` はメソッドを呼び出した要素を選択します。
 
 ## 構文
 
-```
-:scope
+```css
+:scope {
+  /* ... */
+}
 ```
 
 ## 例
 
-### ID の一致
+### `:scope` を `:root` で代用
 
-この例では、 {{domxref("Element.matches()")}} メソッドから `:scope` を使用して呼び出される要素を選択する方法を紹介します。
+この例では、スタイルシートのルートレベルで使用した場合、 `:scope` が `:root` と等価であることを示しています。この場合、指定された CSS は `<html>` 要素の背景をオレンジ色に着色しています。
 
-#### JavaScript
+#### HTML
 
-```js
-let paragraph = document.getElementById("para");
-let output = document.getElementById("output");
+```html
+<html></html>
+```
+
+#### CSS
 
-if (paragraph.matches(":scope")) {
-  output.innerText = "はい、この要素は自分自身のスコープ内にあります！";
+```css
+:scope {
+  background-color: orange;
 }
 ```
 
+#### 結果
+
+{{ EmbedLiveSample("Using :scope as an alternative to :root", "100%", 50) }}
+
+### `:scope` を使用して `@scope` ブロック内のスコープルートにスタイル設定
+
+この例では、 2 つの別個の `@scope` ブロックを使用して、それぞれ `.light-scheme` と `.dark-scheme` クラスを持つ要素内のリンクと照合しています。また、 `:scope` がスコープルート自体を選択し、スタイル設定を提供するために使用されていることに注意してください。この例では、スコープルートは {{htmlelement("div")}} 要素であり、それらにクラスが適用されています。
+
 #### HTML
 
-```html
-<p id="para">これは段落です。面白い段落ではありません。すみません。</p>
-<p id="output"></p>
+```html-nolint
+<div class="light-scheme">
+  <p>
+    MDN には、
+    <a href="/ja/docs/Web/HTML">HTML</a>, <a href="/ja/docs/Web/CSS">CSS</a>,
+    <a href="/ja/docs/Web/JavaScript">JavaScript</a>
+    に関するたくさんの情報が含まれています。
+  </p>
+</div>
+
+<div class="dark-scheme">
+  <p>
+    MDN には、
+    <a href="/ja/docs/Web/HTML">HTML</a>, <a href="/ja/docs/Web/CSS">CSS</a>,
+    <a href="/ja/docs/Web/JavaScript">JavaScript</a>
+    に関するたくさんの情報が含まれています。
+  </p>
+</div>
 ```
 
-#### 結果
+#### CSS
+
+```css hidden
+div {
+  padding: 10px;
+}
+```
 
-{{ EmbedLiveSample('Identity_match') }}
+```css
+@scope (.light-scheme) {
+  :scope {
+    background-color: plum;
+  }
+
+  a {
+    color: darkmagenta;
+  }
+}
 
-### 直接の子
+@scope (.dark-scheme) {
+  :scope {
+    background-color: darkmagenta;
+    color: antiquewhite;
+  }
 
-`:scope` 擬似クラスが有用だと示されるのは、すでに受け取っている {{domxref("Element")}} の直接の子を取得する必要がある場合です。
+  a {
+    color: plum;
+  }
+}
+```
 
-#### JavaScript
+#### 結果
 
-```js
-var context = document.getElementById("context");
-var selected = context.querySelectorAll(":scope > div");
+{{ EmbedLiveSample("Using :scope to style the scope root in a @scope block", "100%", 150) }}
 
-document.getElementById("results").innerHTML = Array.prototype.map
-  .call(selected, function (element) {
-    return "#" + element.getAttribute("id");
-  })
-  .join(", ");
-```
+### JavaScript における `:scope` の使用
+
+`:scope` 擬似クラスが有用だと示されるのは、すでに受け取っている {{domxref("Element")}} の直接の子を取得する必要がある場合です。
 
 #### HTML
 
@@ -80,14 +132,27 @@ document.getElementById("results").innerHTML = Array.prototype.map
   </div>
 </div>
 <p>
-  Selected elements ids :
+  選択された要素の ID:
   <span id="results"></span>
 </p>
 ```
 
+#### JavaScript
+
+```js
+const context = document.getElementById("context");
+const selected = context.querySelectorAll(":scope > div");
+
+document.getElementById("results").innerHTML = Array.prototype.map
+  .call(selected, (element) => `#${element.getAttribute("id")}`)
+  .join(", ");
+```
+
 #### 結果
 
-{{ EmbedLiveSample('Direct_children') }}
+`context` のスコープは [`id`](/ja/docs/Web/HTML/Global_attributes#id) が `context` である要素です。選択される要素は、そのコンテキストの直接の子である `<div>` 要素、すなわち `element-1` と `element-2` です。
+
+{{ EmbedLiveSample('Using :scope in JavaScript') }}
 
 ## 仕様書
 
@@ -99,6 +164,7 @@ document.getElementById("results").innerHTML = Array.prototype.map
 
 ## 関連情報
 
+- {{cssxref("@scope")}} [アットルール](/ja/docs/Web/CSS/At-rule)
 - {{cssxref(":root")}} [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)
 - [セレクターを使用した DOM 要素の特定](/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
 - {{domxref("Element.querySelector()")}} および {{domxref("Element.querySelectorAll()")}}