From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../guide/css/block_formatting_context/index.html | 191 +++++++++++++++++++++ 1 file changed, 191 insertions(+) create mode 100644 files/ja/web/guide/css/block_formatting_context/index.html (limited to 'files/ja/web/guide/css/block_formatting_context') diff --git a/files/ja/web/guide/css/block_formatting_context/index.html b/files/ja/web/guide/css/block_formatting_context/index.html new file mode 100644 index 0000000000..6f0f4f7964 --- /dev/null +++ b/files/ja/web/guide/css/block_formatting_context/index.html @@ -0,0 +1,191 @@ +--- +title: ブロック整形コンテキスト +slug: Web/Guide/CSS/Block_formatting_context +tags: + - CSS + - Guide + - Reference + - Web + - ウェブ + - ガイド +translation_of: Web/Guide/CSS/Block_formatting_context +--- +
{{ CSSRef }}
+ +

ブロック整形コンテキスト (block formatting context) は、ウェブページにおける CSS の視覚的なレンダリングの一部です。ブロックボックスのレイアウトが行われ、浮動が他の要素と相互作用する領域です。

+ +

ブロック整形コンテキストは、以下のうちの少なくとも一つから生成されます。

+ + + +

ブロック整形コンテキストは、それを生成する要素の内側にあるすべてのものを含みます。

+ +

ブロック整形コンテキストは、浮動要素の配置設定 ({{ cssxref("float") }} を参照) と解除 ({{ cssxref("clear") }}を参照) にとって重要です。浮動要素の配置設定と解除の規則は、同一のブロック整形コンテキスト内にあるものにだけ適用されます。浮動要素は他のブロック整形コンテキストの内容のレイアウトには影響せず、 clear は同じブロック整形コンテキスト内の以前の浮動要素のみを解除します。マージンの相殺も、同じブロック整形コンテキストに所属するブロック同士でしか発生しません。

+ +

例

+ +

浮動コンテンツとその横のコンテンツの高さを同じにする

+ +
+

いくつかの例を見て、新しいブロック整形コンテキスト (BFC) を生成することによる効果を確認してみましょう。

+ +

以下の例では、 <div> に border が適用されている中に浮動要素があります。その <div> の内容は、浮動要素の横にあります。浮動要素の内容がその横のコンテンツよりも高いので、 <div> の境界は浮動要素を突き抜けてしまいます。フロー内とフローの外の要素のガイドで説明している通り、浮動要素はフローから出るので、 <div> の background および border はコンテンツのみを含みますが、浮動要素は含みません。

+ +

HTML

+ +
<div class="box">
+    <div class="float">I am a floated box!</div>
+    <p>I am content inside the container.</p>
+</div>
+ +

CSS

+ +
.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+}
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}
+ +

{{EmbedLiveSample("example1", 200, 200)}}

+
+ +
+

overflow: auto; の使用

+ +

新しいブロック整形コンテキスト (BFC) を生成すると、浮動要素を含むようになります。以前からよくある方法は、 overflow: auto を設定するか、初期値である overflow: visible 以外の値を設定するものです。

+ +

CSS

+ + + +
.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+    overflow: auto;
+}
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}
+ +

{{EmbedLiveSample("With_overflow", 200, 200)}}

+
+ +

overflow: auto を設定することで浮動要素を含む新しい BFC を生成しました。 <div> はレイアウトの中のミニレイアウトになりました。すべての子要素はその中に含まれます。

+ +

overflow を使用して新しい BFC を生成することの問題は、 overflow プロパティがブラウザーにあふれた内容をどのように扱いたいかを伝えるためのものであることです。このプロパティを純粋に使用して BFC を作成すると、不要なスクロールバーやクリップされた影が表示される場合があります。また、この目的で overflow を使用した理由が明らかではない可能性があるため、将来の開発者にとっては読みにくくなる可能性があります。 overflow を使用する場合、コードに説明するためのコメントをすることをお勧めします。

+ +

display: flow-root の使用

+ +
+

A newer value of display lets us create a new BFC without any other potentially problematic side-effects. Using display: flow-root on the containing block creates a new BFC .

+ +

CSS

+ + + +
.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+    display: flow-root
+}
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}
+ +

{{EmbedLiveSample("flowroot", 200, 200)}}

+
+ +

With display: flow-root; on the <div>, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.

+ +

The value name of flow-root makes sense when you understand you are creating something that acts like the root element (<html> element in browser) in terms of how it creates a new context for the flow layout inside it.

+ +
+

Note: display: flow-root; is not supported by Safari.

+
+ +

マージンの相殺

+ +

Creating a new BFC to avoid the margin collapsing between two neighbor div:

+ +

HTML

+ +
<div class="blue"></div>
+<div class="red-outer">
+  <div class="red-inner">red inner</div>
+</div>
+
+ +

CSS

+ +
.blue, .red-inner {
+  height: 50px;
+  margin: 10px 0;
+}
+
+.blue {
+  background: blue;
+}
+
+.red-outer {
+  overflow: hidden;
+  background: red;
+}
+
+ +

{{EmbedLiveSample("Margin_collapsing", 120, 120)}}

+ +

仕様書

+ + + +

関連情報

+ + -- cgit v1.2.3-54-g00ecf