From f42172f5271f70f69e541d8a0f0f925113180de8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 7 Nov 2021 21:52:55 +0900 Subject: CSS Box Model 関係の文書の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/css_box_model/index.html | 114 ---------------- files/ja/web/css/css_box_model/index.md | 114 ++++++++++++++++ .../introduction_to_the_css_box_model/index.html | 79 ----------- .../introduction_to_the_css_box_model/index.md | 79 +++++++++++ .../mastering_margin_collapsing/index.html | 89 ------------ .../mastering_margin_collapsing/index.md | 89 ++++++++++++ .../ja/web/css/visual_formatting_model/index.html | 150 --------------------- files/ja/web/css/visual_formatting_model/index.md | 150 +++++++++++++++++++++ 8 files changed, 432 insertions(+), 432 deletions(-) delete mode 100644 files/ja/web/css/css_box_model/index.html create mode 100644 files/ja/web/css/css_box_model/index.md delete mode 100644 files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.md delete mode 100644 files/ja/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/ja/web/css/css_box_model/mastering_margin_collapsing/index.md delete mode 100644 files/ja/web/css/visual_formatting_model/index.html create mode 100644 files/ja/web/css/visual_formatting_model/index.md diff --git a/files/ja/web/css/css_box_model/index.html b/files/ja/web/css/css_box_model/index.html deleted file mode 100644 index 64fc11ed1d..0000000000 --- a/files/ja/web/css/css_box_model/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: CSS 基本ボックスモデル -slug: Web/CSS/CSS_Box_Model -tags: - - CSS - - CSS Box Model - - CSS 基本ボックスモデル - - Overview - - Reference -translation_of: Web/CSS/CSS_Box_Model ---- -
{{CSSRef}}
- -

CSS 基本ボックスモデルは CSS のモジュールの1つで、要素に対して作成され、パディングやマージンを含む長方形のボックス定義します。視覚整形モデルによって配置されます。

- -

リファレンス

- -

プロパティ

- -

ボックス内のコンテンツの流れを制御するプロパティ

- -
- -
- -

ボックスの寸法を制御するプロパティ

- -
- -
- -

ボックスのマージンを制御するプロパティ

- -
- -
- -

ボックスのパディングを制御するプロパティ

- -
- -
- -

その他のプロパティ

- -
- -
- -

ガイド

- -
-
CSS ボックスモデルの紹介
-
CSS の基礎的概念の1つである、ボックスモデルを説明します。このモデルは CSS が要素とその内容、パディング、境界線、マージン領域をどのように配置するかを定義します。
-
マージンの相殺の理解
-
2つの隣接するマージンが1つに相殺されることがあります。この記事ではいつなぜそれが発生し、どのように制御するかを説明します。
-
視覚整形モデル
-
視覚整形モデルを説明します。
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}初回定義
diff --git a/files/ja/web/css/css_box_model/index.md b/files/ja/web/css/css_box_model/index.md new file mode 100644 index 0000000000..64fc11ed1d --- /dev/null +++ b/files/ja/web/css/css_box_model/index.md @@ -0,0 +1,114 @@ +--- +title: CSS 基本ボックスモデル +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - CSS 基本ボックスモデル + - Overview + - Reference +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

CSS 基本ボックスモデルは CSS のモジュールの1つで、要素に対して作成され、パディングやマージンを含む長方形のボックス定義します。視覚整形モデルによって配置されます。

+ +

リファレンス

+ +

プロパティ

+ +

ボックス内のコンテンツの流れを制御するプロパティ

+ +
+ +
+ +

ボックスの寸法を制御するプロパティ

+ +
+ +
+ +

ボックスのマージンを制御するプロパティ

+ +
+ +
+ +

ボックスのパディングを制御するプロパティ

+ +
+ +
+ +

その他のプロパティ

+ +
+ +
+ +

ガイド

+ +
+
CSS ボックスモデルの紹介
+
CSS の基礎的概念の1つである、ボックスモデルを説明します。このモデルは CSS が要素とその内容、パディング、境界線、マージン領域をどのように配置するかを定義します。
+
マージンの相殺の理解
+
2つの隣接するマージンが1つに相殺されることがあります。この記事ではいつなぜそれが発生し、どのように制御するかを説明します。
+
視覚整形モデル
+
視覚整形モデルを説明します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}初回定義
diff --git a/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.html deleted file mode 100644 index 80bf608f4f..0000000000 --- a/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: CSS 基本ボックスモデル入門 -slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -tags: - - CSS - - CSS Box Model - - CSS 基本ボックスモデル - - Guide - - Reference -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -
{{CSSRef}}
- -

ブラウザーのレンダリングエンジンは文書をレイアウトする際に、それぞれの要素を標準的な CSS ボックスモデルに基づいた長方形のボックスとして表現します。 CSS はこれらのボックスの寸法、位置、プロパティ（色、背景、境界線の太さなど）を決定します。

- -

それぞれのボックスは4つの部品 (または領域) から構成され、それぞれの辺についてコンテンツ境界 (content edge)、パディング境界 (padding edge)、ボーダー境界 (border edge)、マージン境界 (margin edge) が定義されています。

- -

CSS ボックスモデル

- -

コンテンツ領域は、コンテンツ境界に囲まれた領域で、文字列、画像、動画プレイヤー等の「実際の」コンテンツを含みます。領域の寸法はコンテンツ幅（またはコンテンツボックスの幅）とコンテンツの高さ（またはコンテンツボックスの高さ）です。背景色や背景画像を持っていることがあります。

- -

{{cssxref("box-sizing")}} プロパティが content-box (既定値) に設定されており、要素がブロック要素である場合は、コンテンツ領域の寸法は {{cssxref("width")}}、 {{cssxref("min-width")}}、 {{cssxref("max-width")}}、 {{cssxref("height")}}、 {{cssxref("min-height")}}、 {{cssxref("max-height")}} の各プロパティによって正確に定義することができます。

- -

パディング領域は、パディング境界に囲まれた領域で、コンテンツ領域に要素のパディングを含めて拡張したものです。寸法はパディングボックスの幅とパディングボックスの高さです。

- -

パディングの幅は、 {{cssxref("padding-top")}}、 {{cssxref("padding-right")}}、 {{cssxref("padding-bottom")}}、 {{cssxref("padding-left")}} の各プロパティおよび一括指定プロパティの {{cssxref("padding")}} で決定されます。

- -

ボーダー領域は、ボーダー境界に囲まれた領域で、パディング領域に要素の境界線を含めて拡張したものです。寸法はボーダーボックスの幅とボーダーボックスの高さ になります。

- -

境界線の幅は、 {{cssxref("border-width")}} および一括指定プロパティの {{cssxref("border")}} で決定されます。 {{cssxref("box-sizing")}} プロパティが border-box に設定されていた場合、ボーダー領域の寸法は {{cssxref("width")}}、 {{cssxref("min-width")}}、 {{cssxref("max-width")}}、 {{ cssxref("height") }}, {{cssxref("min-height")}}、 {{cssxref("max-height")}} の各プロパティで正確に定義することができます。ボックスに背景（{{cssxref("background-color")}} 又は {{cssxref("background-image")}}）が設定されている場合、背景はボーダー境界の外枠まで拡張されます（つまり、 Z 順で境界線の下にまで拡張されます）。これは既定の振る舞いで、 CSS の {{cssxref("background-clip")}} プロパティで変更することができます。

- -

マージン領域は、マージン境界に囲まれた領域で、ボーダー領域に、隣の要素と分離するために使用する空の領域を含めて拡張したものです。この領域の大きさは、マージンボックスの幅とマージンボックスの高さになります。

- -

マージン領域の寸法は、 {{cssxref("margin-top")}}、 {{cssxref("margin-right")}}、 {{cssxref("margin-bottom")}}、 {{cssxref("margin-left")}} の各プロパティおよび一括指定プロパティである {{cssxref("margin")}} で決定されます。マージンの相殺 (margin collapsing)が発生したときは、マージンがボックス間で共有されるため、マージン領域が明確に定義されません。

- -

置換要素ではないインライン要素については、空間の大きさは {{cssxref('line-height')}} プロパティによって決定され、行の高さに寄与します。この場合も境界線とパディングは、コンテンツの周囲に視覚的に現れます。

- -

関連情報

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Box', '#intro')}}{{Spec2('CSS3 Box')}}
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}言葉遣いをより正確にしたが、有意な変更点はなし
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}初回定義
- -

関連情報

- - diff --git a/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.md b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.md new file mode 100644 index 0000000000..80bf608f4f --- /dev/null +++ b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.md @@ -0,0 +1,79 @@ +--- +title: CSS 基本ボックスモデル入門 +slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +tags: + - CSS + - CSS Box Model + - CSS 基本ボックスモデル + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

ブラウザーのレンダリングエンジンは文書をレイアウトする際に、それぞれの要素を標準的な CSS ボックスモデルに基づいた長方形のボックスとして表現します。 CSS はこれらのボックスの寸法、位置、プロパティ（色、背景、境界線の太さなど）を決定します。

+ +

それぞれのボックスは4つの部品 (または領域) から構成され、それぞれの辺についてコンテンツ境界 (content edge)、パディング境界 (padding edge)、ボーダー境界 (border edge)、マージン境界 (margin edge) が定義されています。

+ +

CSS ボックスモデル

+ +

コンテンツ領域は、コンテンツ境界に囲まれた領域で、文字列、画像、動画プレイヤー等の「実際の」コンテンツを含みます。領域の寸法はコンテンツ幅（またはコンテンツボックスの幅）とコンテンツの高さ（またはコンテンツボックスの高さ）です。背景色や背景画像を持っていることがあります。

+ +

{{cssxref("box-sizing")}} プロパティが content-box (既定値) に設定されており、要素がブロック要素である場合は、コンテンツ領域の寸法は {{cssxref("width")}}、 {{cssxref("min-width")}}、 {{cssxref("max-width")}}、 {{cssxref("height")}}、 {{cssxref("min-height")}}、 {{cssxref("max-height")}} の各プロパティによって正確に定義することができます。

+ +

パディング領域は、パディング境界に囲まれた領域で、コンテンツ領域に要素のパディングを含めて拡張したものです。寸法はパディングボックスの幅とパディングボックスの高さです。

+ +

パディングの幅は、 {{cssxref("padding-top")}}、 {{cssxref("padding-right")}}、 {{cssxref("padding-bottom")}}、 {{cssxref("padding-left")}} の各プロパティおよび一括指定プロパティの {{cssxref("padding")}} で決定されます。

+ +

ボーダー領域は、ボーダー境界に囲まれた領域で、パディング領域に要素の境界線を含めて拡張したものです。寸法はボーダーボックスの幅とボーダーボックスの高さ になります。

+ +

境界線の幅は、 {{cssxref("border-width")}} および一括指定プロパティの {{cssxref("border")}} で決定されます。 {{cssxref("box-sizing")}} プロパティが border-box に設定されていた場合、ボーダー領域の寸法は {{cssxref("width")}}、 {{cssxref("min-width")}}、 {{cssxref("max-width")}}、 {{ cssxref("height") }}, {{cssxref("min-height")}}、 {{cssxref("max-height")}} の各プロパティで正確に定義することができます。ボックスに背景（{{cssxref("background-color")}} 又は {{cssxref("background-image")}}）が設定されている場合、背景はボーダー境界の外枠まで拡張されます（つまり、 Z 順で境界線の下にまで拡張されます）。これは既定の振る舞いで、 CSS の {{cssxref("background-clip")}} プロパティで変更することができます。

+ +

マージン領域は、マージン境界に囲まれた領域で、ボーダー領域に、隣の要素と分離するために使用する空の領域を含めて拡張したものです。この領域の大きさは、マージンボックスの幅とマージンボックスの高さになります。

+ +

マージン領域の寸法は、 {{cssxref("margin-top")}}、 {{cssxref("margin-right")}}、 {{cssxref("margin-bottom")}}、 {{cssxref("margin-left")}} の各プロパティおよび一括指定プロパティである {{cssxref("margin")}} で決定されます。マージンの相殺 (margin collapsing)が発生したときは、マージンがボックス間で共有されるため、マージン領域が明確に定義されません。

+ +

置換要素ではないインライン要素については、空間の大きさは {{cssxref('line-height')}} プロパティによって決定され、行の高さに寄与します。この場合も境界線とパディングは、コンテンツの周囲に視覚的に現れます。

+ +

関連情報

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Box', '#intro')}}{{Spec2('CSS3 Box')}}
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}言葉遣いをより正確にしたが、有意な変更点はなし
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}初回定義
+ +

関連情報

+ + diff --git a/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.html deleted file mode 100644 index 1e62749980..0000000000 --- a/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: マージンの相殺 -slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -tags: - - CSS - - CSS Box Model - - CSS ボックスモデル - - Guide - - Reference -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -

ブロックの先頭と末尾のマージンは、それぞれのマージンの最も大きい寸法 (または等しい場合はいずれか1つ) の単一のマージンに結合される (折り畳まれる (collapsed)) ことがあり、マージンの相殺という動作として知られています。なお、浮動要素と絶対位置指定要素では折り畳まれません。

- -

マージンの相殺は、基本的に3つの場合に発生します。

- -
-
隣接兄弟要素
-
隣接兄弟要素のマージンは相殺されます (後ろの兄弟要素がそれ以前の浮動状態を 解除 (clear) する必要がある場合を除く)。
-
親と子孫を隔てるコンテンツがない場合
-
あるブロックの {{cssxref("margin-top")}} と、1つ以上の子孫ブロックの {{cssxref("margin-top")}} を隔てる境界、パディング、インライン部分、 ブロック整形コンテキストの生成、浮動の解除 (clear) のいずれもがない場合、もしくは、あるブロックの {{cssxref("margin-bottom")}} と1つ以上の子孫ブロックの {{cssxref("margin-bottom")}} を隔て境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}} のいずれもがない場合、それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。
-
空ブロック
-
あるブロックの {{cssxref("margin-top")}} を {{cssxref("margin-bottom")}} と隔てる境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}} のいずれもがない場合、上端と下端のマージンは相殺されます。
-
- -

注意すべきことがいくつかあります。

- - - -

例

- -

HTML

- -
<p>The bottom margin of this paragraph is collapsed …</p>
-<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
-
-<div>This parent element contains two paragraphs!
-  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
-  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
-</div>
-
-<p>I am <code>2rem</code> below the element above.</p>
- -

CSS

- -
div {
-  margin: 2rem 0;
-  background: lavender;
-}
-
-p {
-  margin: .4rem 0 1.2rem 0;
-  background: yellow;
-}
- -

例

- -

{{EmbedLiveSample('Examples', 'auto', 350)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}初回定義
- -

関連情報

- - diff --git a/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.md b/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.md new file mode 100644 index 0000000000..1e62749980 --- /dev/null +++ b/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.md @@ -0,0 +1,89 @@ +--- +title: マージンの相殺 +slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +tags: + - CSS + - CSS Box Model + - CSS ボックスモデル + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

ブロックの先頭と末尾のマージンは、それぞれのマージンの最も大きい寸法 (または等しい場合はいずれか1つ) の単一のマージンに結合される (折り畳まれる (collapsed)) ことがあり、マージンの相殺という動作として知られています。なお、浮動要素と絶対位置指定要素では折り畳まれません。

+ +

マージンの相殺は、基本的に3つの場合に発生します。

+ +
+
隣接兄弟要素
+
隣接兄弟要素のマージンは相殺されます (後ろの兄弟要素がそれ以前の浮動状態を 解除 (clear) する必要がある場合を除く)。
+
親と子孫を隔てるコンテンツがない場合
+
あるブロックの {{cssxref("margin-top")}} と、1つ以上の子孫ブロックの {{cssxref("margin-top")}} を隔てる境界、パディング、インライン部分、 ブロック整形コンテキストの生成、浮動の解除 (clear) のいずれもがない場合、もしくは、あるブロックの {{cssxref("margin-bottom")}} と1つ以上の子孫ブロックの {{cssxref("margin-bottom")}} を隔て境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}} のいずれもがない場合、それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。
+
空ブロック
+
あるブロックの {{cssxref("margin-top")}} を {{cssxref("margin-bottom")}} と隔てる境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}} のいずれもがない場合、上端と下端のマージンは相殺されます。
+
+ +

注意すべきことがいくつかあります。

+ + + +

例

+ +

HTML

+ +
<p>The bottom margin of this paragraph is collapsed …</p>
+<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
+
+<div>This parent element contains two paragraphs!
+  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
+  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
+</div>
+
+<p>I am <code>2rem</code> below the element above.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

例

+ +

{{EmbedLiveSample('Examples', 'auto', 350)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}初回定義
+ +

関連情報

+ + diff --git a/files/ja/web/css/visual_formatting_model/index.html b/files/ja/web/css/visual_formatting_model/index.html deleted file mode 100644 index 4501dbb707..0000000000 --- a/files/ja/web/css/visual_formatting_model/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: 視覚整形モデル -slug: Web/CSS/Visual_formatting_model -tags: - - CSS - - CSS Box Model - - Guide - - Reference - - visual formatting model -translation_of: Web/CSS/Visual_formatting_model ---- -
{{CSSRef}}
- -

CSS の視覚整形モデル (visual formatting model) は、ユーザーエージェントが文書ツリーをどのように受け取り、視覚メディア用に処理して表示するかを説明するものです。これには、コンピューター画面のような{{glossary("continuous media", "連続メディア")}}と、ブラウザーの印刷機能によって印刷された本や文書のような{{glossary("paged media", "ページ付きメディア")}}が含まれます。情報の大部分は、連続メディアとページ付きメディアに等しく適用されます。

- -

視覚整形モデルでは、文書ツリーの各要素は、モデルに応じてゼロ個以上のボックスを生成します。これらのボックスのレイアウトは、次のようにして制御されます。

- - - -

視覚整形モデルに関する情報の多くは CSS2 で定義されていますが、様々なレベル 3 の仕様書ではこの情報が追加されています。仕様書を読む際には、 CSS2 で定義されているモデルが参照されていることが多いので、他のレイアウト仕様書を読む際には、 CSS2 で定義されているモデルとそれを説明するために使用されている用語を理解しておくことが重要です。

- -

この文書では、モデルを定義して関連する用語や概念をいくつか紹介し、より詳細な情報を説明している MDN のより具体的なページへのリンクを紹介します。

- -

ビューポートの役割

- -

連続メディアでは、{{glossary("viewport", "ビューポート")}}はブラウザーのウィンドウから見える領域です。ユーザーエージェントはビューポートの寸法が変更されたときに、ページのレイアウトを変更することがあります。 — 例えば、ウィンドウの寸法を変更した場合や、モバイル端末の向きを変更した場合です。

- -

ビューポートが文書の寸法よりも小さい場合、ユーザーエージェントは文書の表示されていない部分へスクロールする方法を提供する必要があります。もっともよくあるのは、横書きで、上から下へ書く言語の場合、ブロック方向のスクロールです。しかし、インライン方向のスクロールを設計する必要がある場合もあるかもしれません。

- -

ボックスの生成

- -

ボックスの生成は CSS の視覚整形モデルの一部で、文書内の要素からボックスを作ることです。生成されたボックスは様々な種類を持ち、視覚整形モデルに影響します。生成されるボックスの種類は CSS の {{cssxref("display")}} プロパティによって決まります。

- -

当初 CSS2 で定義された display プロパティは、 CSS Display Module Level 3 で拡張されました。これに加え、 display にまつわる用語の一部が CSS2 から何年にもわたって更新され明確化されました。

- -

CSS はソース文書を読み取り、キャンバスにレンダリングします。これを行うために、中間的な構造であるボックスツリーを生成し、レンダリングされる文書の書式構造を表現します。ボックスツリー内のそれぞれのボックスは、キャンバス上の空間や時間において対応する要素 (または擬似要素) を表現しており、ボックスツリー内のテキストは対応するテキストノードの内容のように表現します。

- -

それから、それぞれの要素について、 CSS はその要素の display プロパティの値に応じてゼロ個以上のボックスを生成します。

- -
-

Note: ボックスはよく display の種類によって参照されます。例えば、 display: block の要素によって生成されたボックスは「ブロックボックス」と呼ばれたり、単に「ブロック」と呼ばれたりします。ただし、ブロックボックス、ブロックレベルボックス、ボックスコンテナーはすべて微妙に異なることに注意してください。詳しくは下記の{{anch("Block boxes", "ブロックボックス")}}を参照してください。

-
- -

主ボックス

- -

要素が1つ以上のボックスを生成する場合、そのうちの一つが主ボックス (principal box) となります。これがボックスツリー内の子孫ボックスと生成コンテンツを含み、様々な配置方法の対象となるボックスとなります。

- -

要素によっては、主ボックスに加えて追加のボックスを生成することがあり、例えば、 display: list-item は複数のボックス (例えば 主ブロックボックスや子マーカーボックス) を生成します。また、値によっては (none や contents など) 要素やその子孫が全くボックスを生成しなくなります。

- -

無名ボックス

- -

無名ボックス (anonymous box) は、ボックスに使用する HTML 要素がない場合に作成されます。このような状況は、例えば、親要素で display: flex を宣言した場合に、その中に他の要素に含まれないテキストが直接存在する場合に発生します。ボックスツリーを修正するために、そのテキストの周りに無名ボックスが作成されます。これはフレックスアイテムとして動作しますが、対象となる要素がないため、通常のボックスのように対象を設定したり、スタイルを設定したりすることはできません。

- -

{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-flex.html", '100%', 720)}}

- -

同じことは、ブロック要素にテキストが混在している場合にも起こります。次の例では、 <div> の中に文字列があり、文字列の中央にはテキストの一部を含む <p> 要素があります。

- -

{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-block.html", '100%', 720)}}

- -

文字列はボックスツリーの中で3つのボックスに分割されます。段落要素の前の文字列の部分は無名ボックスに包まれ、次にボックスを生成する <p> があり、さらに別の無名ボックスがあります。

- -

これらの無名ボックスについて考慮すべきことは、直接の親からスタイルを継承するということですが、無名ボックスを対象にして、それらがどのように見えるかを変更することはできません。この例では、コンテナーの子を対象にするために直接子セレクターを使用しています。これは、無名ボックスは親ブロックの子ではないので、無名ボックスを変更するものではありません。

- -

インライン無名ボックスは、文字列がインライン要素によって分割されたとき、、例えば文に <em></em> で囲まれた区間がある場合に作成されます。これにより、文が3つのインラインボックスに分割されます。強調された区間の前の無名インラインボックス、 <em> 要素で包まれた区間、そして最後の無名インラインボックスです。無名ブロックボックスと同様に、これらの無名インラインボックスは <em> の場合とは異なり、独立してスタイルを設定することはできず、コンテナーのスタイルを継承するだけです。

- -

他にも無名ボックスを生成する整形コンテキストがあります。グリッドレイアウトは上記のフレックスボックスの例と同様に動作し、テキストの文字列を無名ボックス付きのグリッドアイテムに変換します。段組みレイアウトは段の周りに無名の段ボックスを生成します。これらもスタイル付けなどの対象にすることはできません。表レイアウトは適切な表構造を生成するために無名ボックスを追加します。例えば、 display: table-row が付いたボックスがない場合、無名の表の行を追加するなどです。

- -

行ボックス

- -

行ボックスは、テキストの各行を包むボックスのことです。アイテムを浮動させた後に、背景色のあるブロックを続けると、行ボックスとそれを含むブロックの違いがわかります。

- -

次の例では、浮動している <div> の後に続く行ボックスは、浮動要素を回り込むように短くなっています。浮動したアイテムがフローから抜けるので、ボックスの背景は浮動要素の後ろを走っています。

- -

{{EmbedGHLiveSample("css-examples/visual-formatting/line-boxes.html", '100%', 720)}}

- -

配置の仕組みとフロー内・フロー外の要素

- -

CSS では、ボックスをレイアウトするための配置の仕組みが3種類あります。 — 通常フロー、浮動、絶対位置指定です。

- -

通常フロー

- -

CSS において、通常フロー (normal flow) にはブロックボックスのブロックレベル整形、インラインボックスのインラインレベル整形、それにブロックレベルおよびインラインレベルボックスの相対位置指定と粘着位置指定があります。

- -

詳しくは フローレイアウトを参照してください。

- -

浮動要素

- -

浮動モデルでは、ボックスは、まず通常の流れに従ってレイアウトされ、その後、流れから取り出され、ふつう左または右に配置されます。コンテンツは、フロートの側面に沿って折り返されます。

- -

詳しくは浮動要素を参照してください。

- -

絶対位置指定

- -

絶対位置指定モデルでは (固定位置指定も含む)、ボックスは完全に通常フローから外され、包含ブロック (固定位置指定の場合はビューポート) を基準とした位置に配置されます。

- -

要素が浮動要素、絶対位置指定、ルート要素のいずれかであれば、フロー外と呼ばれます。フロー外ではない要素はフロー内と呼ばれます。

- -

詳しくはCSS 位置指定レイアウトを参照してください。

- -

整形コンテキストと display プロパティ

- -

ボックスは外部表示型、すなわち block または inline で表すことができます。この外部表示型はページ上でそのボックスが他の要素との間でどのようにふるまうかを示します。

- -

ボックスには内部表示型もあり、これは子がどのように動作するかを示します。通常ブロックかつインラインレイアウト、または通常フローであれば、この表示型は flow です。これは、子要素が block または inline のどちらかであることを示します。

- -

しかし、内部表示型は grid や flex になる可能性もあり、この場合は直接の子がグリッドまたはフレックスアイテムとして表示されます。このような場合、要素はグリッドやフレックスの整形コンテキストを生成しているといいます。多くの点でこれはブロックの整形コンテキストに似ていますが、子要素は通常のフローのアイテムではなく、フレックスやグリッドのアイテムとして動作します。

- -

ブロックレベルとインラインレベルの各ボックスの相互作用は、 {{cssxref("display")}} の MDN ドキュメントで説明しています。

- -

また、 display の特定の値については、ボックスレイアウトの観点から、これらの整形コンテキストがどのように機能するかを以下のリファレンスで説明しています。

- - - -

独立整形コンテキスト

- -

要素は、それを含むブロックの整形コンテキストに参加するか、独立した整形コンテキストを確立するかします。例えば、グリッドコンテナーは、その子に対して新しいグリッド整形コンテキストを確立します。

- -

独立整形コンテキストには浮動要素を含み、マージンは整形コンテキストの境界を越えて相殺されることはありません。そのため、新しいブロック整形コンテキストを作成することで、ボックス内に浮動要素が収まるようにすることができます。浮動状態を解除するために {{cssxref("overflow")}} プロパティの値を変更して、新しいブロック整形コンテキストが生成することがあります。新しい値 display: flow-root は、 overflow の値が変更されたことによって望ましくない問題が発生することなく、この有用な効果を得るために新しいブロック整形コンテキストを生成します。

- -

ブロックボックス

- -

仕様書では、ブロックボックス、ブロックレベルボックス、ブロックコンテナーのことを、あるところではブロックボックスと呼んでいます。これらはやや異なるものであり、ブロックボックスという用語は曖昧さがない場合にのみ使用すべきです。

- -

ブロックコンテナー

- -

ブロックコンテナーは、インライン整形コンテキストに参加するインラインレベルのボックスのみを含むか、ブロック整形コンテキストに参加するブロックレベルのボックスのみを含むかします。このため、上で説明した動作では、すべてのアイテムがブロックまたはインラインの書式設定コンテキストに参加できるように、無名ボックスが導入されています。要素は、ブロックレベルまたはインラインレベルのボックスを含む場合にのみ、ブロックコンテナーとなります。

- -

インラインレベルボックスとブロックレベルボックス

- -

これらはブロックコンテナーの内部に含まれるボックスであり、それぞれインラインレイアウトとブロックレイアウトに参加します。

- -

ブロックボックスの場合

- -

ブロックボックスとは、ブロックレベルボックスでありながらブロックコンテナーでもあるものを指します。 CSS の display で説明されているように、ボックスがブロックレベルのボックスであってもブロックコンテナーにはならないこともあります (例えば、フレックスコンテナーやグリッドコンテナーになることもあります)。

- -

関連情報

- - diff --git a/files/ja/web/css/visual_formatting_model/index.md b/files/ja/web/css/visual_formatting_model/index.md new file mode 100644 index 0000000000..4501dbb707 --- /dev/null +++ b/files/ja/web/css/visual_formatting_model/index.md @@ -0,0 +1,150 @@ +--- +title: 視覚整形モデル +slug: Web/CSS/Visual_formatting_model +tags: + - CSS + - CSS Box Model + - Guide + - Reference + - visual formatting model +translation_of: Web/CSS/Visual_formatting_model +--- +
{{CSSRef}}
+ +

CSS の視覚整形モデル (visual formatting model) は、ユーザーエージェントが文書ツリーをどのように受け取り、視覚メディア用に処理して表示するかを説明するものです。これには、コンピューター画面のような{{glossary("continuous media", "連続メディア")}}と、ブラウザーの印刷機能によって印刷された本や文書のような{{glossary("paged media", "ページ付きメディア")}}が含まれます。情報の大部分は、連続メディアとページ付きメディアに等しく適用されます。

+ +

視覚整形モデルでは、文書ツリーの各要素は、モデルに応じてゼロ個以上のボックスを生成します。これらのボックスのレイアウトは、次のようにして制御されます。

+ + + +

視覚整形モデルに関する情報の多くは CSS2 で定義されていますが、様々なレベル 3 の仕様書ではこの情報が追加されています。仕様書を読む際には、 CSS2 で定義されているモデルが参照されていることが多いので、他のレイアウト仕様書を読む際には、 CSS2 で定義されているモデルとそれを説明するために使用されている用語を理解しておくことが重要です。

+ +

この文書では、モデルを定義して関連する用語や概念をいくつか紹介し、より詳細な情報を説明している MDN のより具体的なページへのリンクを紹介します。

+ +

ビューポートの役割

+ +

連続メディアでは、{{glossary("viewport", "ビューポート")}}はブラウザーのウィンドウから見える領域です。ユーザーエージェントはビューポートの寸法が変更されたときに、ページのレイアウトを変更することがあります。 — 例えば、ウィンドウの寸法を変更した場合や、モバイル端末の向きを変更した場合です。

+ +

ビューポートが文書の寸法よりも小さい場合、ユーザーエージェントは文書の表示されていない部分へスクロールする方法を提供する必要があります。もっともよくあるのは、横書きで、上から下へ書く言語の場合、ブロック方向のスクロールです。しかし、インライン方向のスクロールを設計する必要がある場合もあるかもしれません。

+ +

ボックスの生成

+ +

ボックスの生成は CSS の視覚整形モデルの一部で、文書内の要素からボックスを作ることです。生成されたボックスは様々な種類を持ち、視覚整形モデルに影響します。生成されるボックスの種類は CSS の {{cssxref("display")}} プロパティによって決まります。

+ +

当初 CSS2 で定義された display プロパティは、 CSS Display Module Level 3 で拡張されました。これに加え、 display にまつわる用語の一部が CSS2 から何年にもわたって更新され明確化されました。

+ +

CSS はソース文書を読み取り、キャンバスにレンダリングします。これを行うために、中間的な構造であるボックスツリーを生成し、レンダリングされる文書の書式構造を表現します。ボックスツリー内のそれぞれのボックスは、キャンバス上の空間や時間において対応する要素 (または擬似要素) を表現しており、ボックスツリー内のテキストは対応するテキストノードの内容のように表現します。

+ +

それから、それぞれの要素について、 CSS はその要素の display プロパティの値に応じてゼロ個以上のボックスを生成します。

+ +
+

Note: ボックスはよく display の種類によって参照されます。例えば、 display: block の要素によって生成されたボックスは「ブロックボックス」と呼ばれたり、単に「ブロック」と呼ばれたりします。ただし、ブロックボックス、ブロックレベルボックス、ボックスコンテナーはすべて微妙に異なることに注意してください。詳しくは下記の{{anch("Block boxes", "ブロックボックス")}}を参照してください。

+
+ +

主ボックス

+ +

要素が1つ以上のボックスを生成する場合、そのうちの一つが主ボックス (principal box) となります。これがボックスツリー内の子孫ボックスと生成コンテンツを含み、様々な配置方法の対象となるボックスとなります。

+ +

要素によっては、主ボックスに加えて追加のボックスを生成することがあり、例えば、 display: list-item は複数のボックス (例えば 主ブロックボックスや子マーカーボックス) を生成します。また、値によっては (none や contents など) 要素やその子孫が全くボックスを生成しなくなります。

+ +

無名ボックス

+ +

無名ボックス (anonymous box) は、ボックスに使用する HTML 要素がない場合に作成されます。このような状況は、例えば、親要素で display: flex を宣言した場合に、その中に他の要素に含まれないテキストが直接存在する場合に発生します。ボックスツリーを修正するために、そのテキストの周りに無名ボックスが作成されます。これはフレックスアイテムとして動作しますが、対象となる要素がないため、通常のボックスのように対象を設定したり、スタイルを設定したりすることはできません。

+ +

{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-flex.html", '100%', 720)}}

+ +

同じことは、ブロック要素にテキストが混在している場合にも起こります。次の例では、 <div> の中に文字列があり、文字列の中央にはテキストの一部を含む <p> 要素があります。

+ +

{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-block.html", '100%', 720)}}

+ +

文字列はボックスツリーの中で3つのボックスに分割されます。段落要素の前の文字列の部分は無名ボックスに包まれ、次にボックスを生成する <p> があり、さらに別の無名ボックスがあります。

+ +

これらの無名ボックスについて考慮すべきことは、直接の親からスタイルを継承するということですが、無名ボックスを対象にして、それらがどのように見えるかを変更することはできません。この例では、コンテナーの子を対象にするために直接子セレクターを使用しています。これは、無名ボックスは親ブロックの子ではないので、無名ボックスを変更するものではありません。

+ +

インライン無名ボックスは、文字列がインライン要素によって分割されたとき、、例えば文に <em></em> で囲まれた区間がある場合に作成されます。これにより、文が3つのインラインボックスに分割されます。強調された区間の前の無名インラインボックス、 <em> 要素で包まれた区間、そして最後の無名インラインボックスです。無名ブロックボックスと同様に、これらの無名インラインボックスは <em> の場合とは異なり、独立してスタイルを設定することはできず、コンテナーのスタイルを継承するだけです。

+ +

他にも無名ボックスを生成する整形コンテキストがあります。グリッドレイアウトは上記のフレックスボックスの例と同様に動作し、テキストの文字列を無名ボックス付きのグリッドアイテムに変換します。段組みレイアウトは段の周りに無名の段ボックスを生成します。これらもスタイル付けなどの対象にすることはできません。表レイアウトは適切な表構造を生成するために無名ボックスを追加します。例えば、 display: table-row が付いたボックスがない場合、無名の表の行を追加するなどです。

+ +

行ボックス

+ +

行ボックスは、テキストの各行を包むボックスのことです。アイテムを浮動させた後に、背景色のあるブロックを続けると、行ボックスとそれを含むブロックの違いがわかります。

+ +

次の例では、浮動している <div> の後に続く行ボックスは、浮動要素を回り込むように短くなっています。浮動したアイテムがフローから抜けるので、ボックスの背景は浮動要素の後ろを走っています。

+ +

{{EmbedGHLiveSample("css-examples/visual-formatting/line-boxes.html", '100%', 720)}}

+ +

配置の仕組みとフロー内・フロー外の要素

+ +

CSS では、ボックスをレイアウトするための配置の仕組みが3種類あります。 — 通常フロー、浮動、絶対位置指定です。

+ +

通常フロー

+ +

CSS において、通常フロー (normal flow) にはブロックボックスのブロックレベル整形、インラインボックスのインラインレベル整形、それにブロックレベルおよびインラインレベルボックスの相対位置指定と粘着位置指定があります。

+ +

詳しくは フローレイアウトを参照してください。

+ +

浮動要素

+ +

浮動モデルでは、ボックスは、まず通常の流れに従ってレイアウトされ、その後、流れから取り出され、ふつう左または右に配置されます。コンテンツは、フロートの側面に沿って折り返されます。

+ +

詳しくは浮動要素を参照してください。

+ +

絶対位置指定

+ +

絶対位置指定モデルでは (固定位置指定も含む)、ボックスは完全に通常フローから外され、包含ブロック (固定位置指定の場合はビューポート) を基準とした位置に配置されます。

+ +

要素が浮動要素、絶対位置指定、ルート要素のいずれかであれば、フロー外と呼ばれます。フロー外ではない要素はフロー内と呼ばれます。

+ +

詳しくはCSS 位置指定レイアウトを参照してください。

+ +

整形コンテキストと display プロパティ

+ +

ボックスは外部表示型、すなわち block または inline で表すことができます。この外部表示型はページ上でそのボックスが他の要素との間でどのようにふるまうかを示します。

+ +

ボックスには内部表示型もあり、これは子がどのように動作するかを示します。通常ブロックかつインラインレイアウト、または通常フローであれば、この表示型は flow です。これは、子要素が block または inline のどちらかであることを示します。

+ +

しかし、内部表示型は grid や flex になる可能性もあり、この場合は直接の子がグリッドまたはフレックスアイテムとして表示されます。このような場合、要素はグリッドやフレックスの整形コンテキストを生成しているといいます。多くの点でこれはブロックの整形コンテキストに似ていますが、子要素は通常のフローのアイテムではなく、フレックスやグリッドのアイテムとして動作します。

+ +

ブロックレベルとインラインレベルの各ボックスの相互作用は、 {{cssxref("display")}} の MDN ドキュメントで説明しています。

+ +

また、 display の特定の値については、ボックスレイアウトの観点から、これらの整形コンテキストがどのように機能するかを以下のリファレンスで説明しています。

+ + + +

独立整形コンテキスト

+ +

要素は、それを含むブロックの整形コンテキストに参加するか、独立した整形コンテキストを確立するかします。例えば、グリッドコンテナーは、その子に対して新しいグリッド整形コンテキストを確立します。

+ +

独立整形コンテキストには浮動要素を含み、マージンは整形コンテキストの境界を越えて相殺されることはありません。そのため、新しいブロック整形コンテキストを作成することで、ボックス内に浮動要素が収まるようにすることができます。浮動状態を解除するために {{cssxref("overflow")}} プロパティの値を変更して、新しいブロック整形コンテキストが生成することがあります。新しい値 display: flow-root は、 overflow の値が変更されたことによって望ましくない問題が発生することなく、この有用な効果を得るために新しいブロック整形コンテキストを生成します。

+ +

ブロックボックス

+ +

仕様書では、ブロックボックス、ブロックレベルボックス、ブロックコンテナーのことを、あるところではブロックボックスと呼んでいます。これらはやや異なるものであり、ブロックボックスという用語は曖昧さがない場合にのみ使用すべきです。

+ +

ブロックコンテナー

+ +

ブロックコンテナーは、インライン整形コンテキストに参加するインラインレベルのボックスのみを含むか、ブロック整形コンテキストに参加するブロックレベルのボックスのみを含むかします。このため、上で説明した動作では、すべてのアイテムがブロックまたはインラインの書式設定コンテキストに参加できるように、無名ボックスが導入されています。要素は、ブロックレベルまたはインラインレベルのボックスを含む場合にのみ、ブロックコンテナーとなります。

+ +

インラインレベルボックスとブロックレベルボックス

+ +

これらはブロックコンテナーの内部に含まれるボックスであり、それぞれインラインレイアウトとブロックレイアウトに参加します。

+ +

ブロックボックスの場合

+ +

ブロックボックスとは、ブロックレベルボックスでありながらブロックコンテナーでもあるものを指します。 CSS の display で説明されているように、ボックスがブロックレベルのボックスであってもブロックコンテナーにはならないこともあります (例えば、フレックスコンテナーやグリッドコンテナーになることもあります)。

+ +

関連情報

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