From 4c212053deaca3391b1d0be8a0a3bcde7a560aa8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 6 Nov 2021 11:17:40 +0900 Subject: 合成と混合の各文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/05 時点の英語版に同期 --- files/ja/web/css/isolation/index.md | 110 ++++++++++++++++++------------------ 1 file changed, 54 insertions(+), 56 deletions(-) (limited to 'files/ja/web/css/isolation') diff --git a/files/ja/web/css/isolation/index.md b/files/ja/web/css/isolation/index.md index 5074d09743..e9df8116e3 100644 --- a/files/ja/web/css/isolation/index.md +++ b/files/ja/web/css/isolation/index.md @@ -5,58 +5,72 @@ tags: - CSS - CSS プロパティ - 合成と混合 + - NeedsContent + - isolation + - recipe:css-property +browser-compat: css.properties.isolation translation_of: Web/CSS/isolation --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の isolation プロパティは、要素が新しい{{glossary("stacking context", "重ね合わせコンテキスト")}}を生成する必要があるかどうかを定義します。

+[CSS](/ja/docs/Web/CSS) の **`isolation`** プロパティは、要素が新しい{{glossary("stacking context", "重ね合わせコンテキスト")}}を生成する必要があるかどうかを定義します。 -
{{EmbedInteractiveExample("pages/css/isolation.html")}}
+{{EmbedInteractiveExample("pages/css/isolation.html")}} - +このプロパティは {{cssxref("mix-blend-mode")}} との組み合わせで使用すると特に有用です。 -

このプロパティは {{cssxref("mix-blend-mode")}} との組み合わせで使用すると特に有用です。

+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 isolation: auto;
 isolation: isolate;
 
 /* グローバル値 */
 isolation: inherit;
 isolation: initial;
+isolation: revert;
 isolation: unset;
-
+``` + +`isolation` プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。 -

isolation プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

+### 値 -

値

+- `auto` + - : 何れかのプロパティが必要な要素に適用された場合にのみ、新しい重ね合わせコンテキストが作成されます。 +- `isolate` + - : 新しい重ね合わせコンテキストが必ず作成されます。 -
-
auto
-
何れかのプロパティが必要な要素に適用された場合にのみ、新しい重ね合わせコンテキストが作成されます。
-
isolate
-
新しい重ね合わせコンテキストが必ず作成されます。
-
+## Formal definition -

形式文法

+{{cssinfo}} + +## Formal syntax {{csssyntax}} -

例

+## 例 + +

要素で強制的に新しい重ね合わせコンテキストを生成

-
<div id="b" class="a">
-  <div id="d">
-    <div class="a c">auto</div>
-  </div>
-  <div id="e">
-    <div class="a c">isolate</div>
-  </div>
-</div>
-
+#### HTML -
.a {
+```html
+

+  

+    
auto

+  

+  

+    
isolate

+  

+

+```
+
+#### CSS
+
+```css
+.a {
   background-color: rgb(0,255,0);
 }
 #b {
@@ -75,38 +89,22 @@ isolation: unset;
 }
 #e {
   isolation: isolate;
-}
+} +``` -

{{ EmbedLiveSample('Examples', 230, 230) }}

+#### 結果 -

仕様書

+{{ EmbedLiveSample('Forcing_a_new_stacking_context_for_an_element', 230, 230) }} - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('Compositing', '#isolation', 'Isolation') }}{{ Spec2('Compositing') }}Initial definition
+## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

{{Compat("css.properties.isolation")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- {{cssxref("<blend-mode>")}} +- {{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}} -- cgit v1.2.3-54-g00ecf