From 2328332f1c82299c60e6a7b7d1210ce2a24a5b2c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 15 Dec 2021 23:36:24 +0900 Subject: 2021/11/07 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/contain/index.md | 34 +++--- files/ja/web/css/css_containment/index.md | 168 +++++++++++++++++------------- 2 files changed, 113 insertions(+), 89 deletions(-) diff --git a/files/ja/web/css/contain/index.md b/files/ja/web/css/contain/index.md index e4fc76e8ef..b679d3f074 100644 --- a/files/ja/web/css/contain/index.md +++ b/files/ja/web/css/contain/index.md @@ -16,15 +16,15 @@ translation_of: Web/CSS/contain ---
{{CSSRef}}
-

contain は CSS のプロパティで、ある要素とその内容が、できる限り多く、文書ツリーの他の部分から独立していることを示します。これによってブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うことで、性能上の明らかな利点をもたらします。

+

`contain` は CSS のプロパティで、ある要素とその内容が、できる限り多く、文書ツリーの他の部分から独立していることを示します。これによってブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うことで、性能上の明らかな利点をもたらします。

このプロパティはページ上にそれぞれ独立したたくさんのウィジェットがあるときに有益であり、ウィジェットの内部を、ウィジェットの囲みボックスの外側の副作用から守るために使用することができます。

-

注: (paint, strict, content のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。

+

注: (`paint`, `strict`, `content` のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。

    -
  1. 新しい包含ブロック (対象は {{cssxref("position")}} プロパティが absolute または fixed の子孫)。
    2. +
  2. 新しい包含ブロック (対象は {{cssxref("position")}} プロパティが `absolute` または `fixed` の子孫)。
  3. 新しい重ね合わせコンテキスト。
  4. 新しいブロック整形コンテキスト。
@@ -50,29 +50,29 @@ contain: inherit; contain: initial; contain: unset; -

contain プロパティは以下のうちの一つで指定します。

+

`contain` プロパティは以下のうちの一つで指定します。

値

-
none
+
`none`
その要素が通常通り描画され、抑制を適用しないことを示します。
-
strict
-
style を除くすべての抑制規則がその要素に適用されることを示します。これは contain: size layout paint と同等です。
-
content
-
size および style 以外の抑制規則がその要素に適用されることを示します。これは contain: layout paint と同等です。
-
size
+
`strict`
+
`style` を除くすべての抑制規則がその要素に適用されることを示します。これは `contain: size layout paint` と同等です。
+
`content`
+
`size` および `style` 以外の抑制規則がその要素に適用されることを示します。これは `contain: layout paint` と同等です。
+
`size`
子孫の寸法を確認する必要なく、その要素の寸法を変更できることを示します。
-
layout
+
`layout`
要素の外側が内部のレイアウトなどに影響しないことを示します。
-
style
+
`style`
ある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしないことを示します。なお、この値は仕様書で「リスクあり」と位置づけられており、どこでも対応しているとは限りません。
-
paint
+
`paint`
その要素の子孫を、境界の外に表示しないことを示します。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はありません。 — そのボックスに完全に含まれていれば、やはり画面外にあるからです。そして、子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られます。
@@ -101,7 +101,7 @@ contain: unset; <p>More content here.</p> </article> -

それぞれの <article> および <img> には境界があり、画像は浮動状態です。

+

それぞれの `<article>` および `<img>` には境界があり、画像は浮動状態です。

img {
   float: left;
@@ -147,7 +147,7 @@ article {
 
 
contain による修正

 
-
それぞれの article の contain プロパティを content の値を設定することで、新しい要素が挿入されたときに、ブラウザーはそれが含まれる要素のサブツリーの再計算をするだけで、その外側には何もする必要がないことを理解します。

+
それぞれの `article` の `contain` プロパティを `content` の値を設定することで、新しい要素が挿入されたときに、ブラウザーはそれが含まれる要素のサブツリーの再計算をするだけで、その外側には何もする必要がないことを理解します。