diff options
Diffstat (limited to 'files/ja/web/css/contain/index.md')
| -rw-r--r-- | files/ja/web/css/contain/index.md | 34 |
1 files changed, 17 insertions, 17 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 --- <div>{{CSSRef}}</div> -<p><strong><code>contain</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ある要素とその内容が、できる限り多く、文書ツリーの他の部分から<em>独立している</em>ことを示します。これによってブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うことで、性能上の明らかな利点をもたらします。</p> +<p><strong>`contain`</strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ある要素とその内容が、できる限り多く、文書ツリーの他の部分から<em>独立している</em>ことを示します。これによってブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うことで、性能上の明らかな利点をもたらします。</p> <p>このプロパティはページ上にそれぞれ独立したたくさんのウィジェットがあるときに有益であり、ウィジェットの内部を、ウィジェットの囲みボックスの外側の副作用から守るために使用することができます。</p> <div class="blockIndicator note"> -<p><strong>注:</strong> (<code>paint</code>, <code>strict</code>, <code>content</code> のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。</p> +<p><strong>注:</strong> (`paint`, `strict`, `content` のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。</p> <ol> - <li>新しい<a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a> (対象は {{cssxref("position")}} プロパティが <code>absolute</code> または <code>fixed</code> の子孫)。</li> + <li>新しい<a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a> (対象は {{cssxref("position")}} プロパティが `absolute` または `fixed` の子孫)。</li> <li>新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>。</li> <li>新しい<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>。</li> </ol> @@ -50,29 +50,29 @@ contain: inherit; contain: initial; contain: unset;</pre> -<p><code>contain</code> プロパティは以下のうちの一つで指定します。</p> +<p>`contain` プロパティは以下のうちの一つで指定します。</p> <ul> - <li><code>none</code>, <code>strict</code>, <code>content</code> の何れかのキーワードを単独で使用。</li> - <li><code>size</code>, <code>layout</code>, <code>style</code>, and <code>paint</code> の各キーワードを1つ以上、任意の順序で使用。</li> + <li>`none`, `strict`, `content` の何れかのキーワードを単独で使用。</li> + <li>`size`, `layout`, `style`, and `paint` の各キーワードを1つ以上、任意の順序で使用。</li> </ul> <h3 id="Values" name="Values">値</h3> <dl> - <dt><code>none</code></dt> + <dt>`none`</dt> <dd>その要素が通常通り描画され、抑制を適用しないことを示します。</dd> - <dt><code>strict</code></dt> - <dd><code>style</code> を除くすべての抑制規則がその要素に適用されることを示します。これは <code>contain: size layout paint</code> と同等です。</dd> - <dt><code>content</code></dt> - <dd><code>size</code> および <code>style</code> 以外の抑制規則がその要素に適用されることを示します。これは <code>contain: layout paint</code> と同等です。</dd> - <dt><code>size</code></dt> + <dt>`strict`</dt> + <dd>`style` を除くすべての抑制規則がその要素に適用されることを示します。これは `contain: size layout paint` と同等です。</dd> + <dt>`content`</dt> + <dd>`size` および `style` 以外の抑制規則がその要素に適用されることを示します。これは `contain: layout paint` と同等です。</dd> + <dt>`size`</dt> <dd>子孫の寸法を確認する必要なく、その要素の寸法を変更できることを示します。</dd> - <dt><code>layout</code></dt> + <dt>`layout`</dt> <dd>要素の外側が内部のレイアウトなどに影響しないことを示します。</dd> - <dt><code>style</code></dt> + <dt>`style`</dt> <dd>ある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしないことを示します。なお、この値は仕様書で「リスクあり」と位置づけられており、どこでも対応しているとは限りません。</dd> - <dt><code>paint</code></dt> + <dt>`paint`</dt> <dd>その要素の子孫を、境界の外に表示しないことを示します。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はありません。 — そのボックスに完全に含まれていれば、やはり画面外にあるからです。そして、子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られます。</dd> </dl> @@ -101,7 +101,7 @@ contain: unset;</pre> <p>More content here.</p> </article></pre> -<p>それぞれの <code><article></code> および <code><img></code> には境界があり、画像は浮動状態です。</p> +<p>それぞれの `<article>` および `<img>` には境界があり、画像は浮動状態です。</p> <pre class="brush: css notranslate">img { float: left; @@ -147,7 +147,7 @@ article { <h3 id="Fixing_with_contain" name="Fixing_with_contain">contain による修正</h3> -<p>それぞれの <code>article</code> の <code>contain</code> プロパティを <code>content</code> の値を設定することで、新しい要素が挿入されたときに、ブラウザーはそれが含まれる要素のサブツリーの再計算をするだけで、その外側には何もする必要がないことを理解します。</p> +<p>それぞれの `article` の `contain` プロパティを `content` の値を設定することで、新しい要素が挿入されたときに、ブラウザーはそれが含まれる要素のサブツリーの再計算をするだけで、その外側には何もする必要がないことを理解します。</p> <div class="hidden"> <pre class="brush: html notranslate"><h1>My blog</h1> |