From f3342730753b5572677b7c938f889f6fcd9cd869 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 16 Dec 2021 09:22:22 +0900 Subject: 2021/08/16 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/contain/index.md | 242 ++++++++++++++++++-------------------- 1 file changed, 116 insertions(+), 126 deletions(-) (limited to 'files/ja/web/css/contain') diff --git a/files/ja/web/css/contain/index.md b/files/ja/web/css/contain/index.md index b679d3f074..15561de126 100644 --- a/files/ja/web/css/contain/index.md +++ b/files/ja/web/css/contain/index.md @@ -3,36 +3,34 @@ title: contain slug: Web/CSS/contain tags: - CSS - - CSS Containment - - CSS Property - - Layout + - CSS 封じ込め + - CSS プロパティ + - レイアウト - NeedsExample - Paint - - Reference + - リファレンス - Style - - Web - - 'recipe:css-property' + - ウェブ + - recipe:css-property +browser-compat: css.properties.contain translation_of: Web/CSS/contain --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

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

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

+> **Note:** (`paint`, `strict`, `content` のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。 +> +> 1. 新しい[包含ブロック](/ja/docs/Web/CSS/Containing_block) ({{cssxref("position")}} プロパティが `absolute` または `fixed` である子孫を対象とする)。 +> 2. 新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)。 +> 3. 新しい[ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)。 -
    -
  1. 新しい包含ブロック (対象は {{cssxref("position")}} プロパティが `absolute` または `fixed` の子孫)。
    2. -
  2. 新しい重ね合わせコンテキスト。
    3. -
  3. 新しいブロック整形コンテキスト。
    4. -
-
+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 contain: none;
 contain: strict;
 contain: content;
@@ -48,122 +46,129 @@ contain: size layout paint;
 /* グローバル値 */
 contain: inherit;
 contain: initial;
-contain: unset;
+contain: revert; +contain: unset; +``` -

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

+`contain` プロパティは、以下のうちの一つで指定します。 - +- `none`, `strict`, `content` の何れかのキーワードを単独で使用。 +- `size`, `layout`, `style`, and `paint` の各キーワードを 1 つ以上、任意の順序で使用。 -

値

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

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

単純なレイアウト

+### 単純なレイアウト -

以下のマークアップは多数のコンテンツを持つ記事からなるものです。

+以下のマークアップは多数のコンテンツを持つ記事からなるものです。 -
<h1>My blog</h1>
-<article>
-  <h2>Heading of a nice article</h2>
-  <p>Content here.</p>
-</article>
-<article>
-  <h2>Another heading of another article</h2>
-  <img src="graphic.jpg" alt="photo">
-  <p>More content here.</p>
-</article>
+```html +

My blog

+
+

Heading of a nice article

+

Content here.

+
+
+

Another heading of another article

+ photo +

More content here.

+
+``` -

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

+それぞれの `
` および `` には境界があり、画像は浮動状態です。 -
img {
+```css
+img {
   float: left;
   border: 3px solid black;
 }
 
 article {
   border: 1px solid black;
-}
+} +``` + +{{EmbedGHLiveSample("css-examples/contain/simple-layout.html", '100%', 400)}} -

{{EmbedLiveSample('Simple_layout', '100%', '300')}}

+問題はすぐにわかるでしょう。 — 記事の最下部を超えている浮動要素を解消する対策をしていません。

浮動要素の干渉

-

1つ目の記事の下部に別の画像を挿入すると、 DOM ツリーの大部分が再レイアウトされたり、再描画されたりする可能性があり、2つ目の記事のレイアウトにも支障をきたしてしまいます。

- -
<h1>My blog</h1>
-<article>
-  <h2>Heading of a nice article</h2>
-  <p>Content here.</p>
-  <img src="i-just-showed-up.jpg" alt="social">
-</article>
-<article>
-  <h2>Another heading of another article</h2>
-  <img src="graphic.jpg" alt="photo">
-  <p>More content here.</p>
-</article>
- - +} +``` -

ご覧の通り、浮動要素の動作方法が原因で、最初の画像が2つ目の記事の領域内に掛かってしまっています。

+ご覧の通り、浮動要素の動作方法が原因で、最初の画像が 2 つ目の記事の領域内に掛かってしまっています。 -

{{EmbedLiveSample('Float_interference', '100%', '300')}}

+{{EmbedGHLiveSample("css-examples/contain/float-interference.html", '100%', 400)}} -

contain による修正

+### contain による修正 -

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

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

My blog

+
+

Heading of a nice article

+

Content here.

+ social +
+
+

Another heading of another article

+ photo +

More content here.

+
+``` -
img {
+```css
+img {
   float: left;
   border: 3px solid black;
 }
@@ -171,38 +176,23 @@ article {
 article {
   border: 1px solid black;
   contain: content;
-}
+} +``` -

これで、最初の画像が2つ目の記事の下に浮いてくることなく、包含する要素の範囲内に留まることも意味します。

+これは最初の画像についても、 2 つ目の記事の下に浮遊せずに、包含する要素の範囲内に留まることも意味します。 -

{{EmbedLiveSample('Fixing_with_contain', '100%', '330')}}

+{{EmbedGHLiveSample("css-examples/contain/contain-fix.html", '100%', 500)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Containment')}}{{Spec2('CSS Containment')}}初回定義
+{{Specifications}} -

ブラウザーの互換性

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

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

+{{Compat}} -

関連情報

+## 関連情報 - +- [CSS 封じ込め](/ja/docs/Web/CSS/CSS_Containment) +- CSS の {{cssxref("content-visibility")}} プロパティ +- CSS の {{cssxref("position")}} プロパティ -- cgit v1.2.3-54-g00ecf