From fb72298beae301c207efc5efd288438cc4e76410 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 7 Nov 2021 23:53:04 +0900 Subject: CSS Box Model 関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/06 時点の英語版に同期 --- files/ja/web/css/css_box_model/index.md | 190 +++++++++------------ .../boxmodel-(3).png | Bin 0 -> 4337 bytes .../introduction_to_the_css_box_model/index.md | 90 ++++------ .../mastering_margin_collapsing/index.md | 110 +++++------- files/ja/web/css/visual_formatting_model/index.md | 158 +++++++++-------- 5 files changed, 242 insertions(+), 306 deletions(-) create mode 100644 files/ja/web/css/css_box_model/introduction_to_the_css_box_model/boxmodel-(3).png diff --git a/files/ja/web/css/css_box_model/index.md b/files/ja/web/css/css_box_model/index.md index 64fc11ed1d..c877e5a4df 100644 --- a/files/ja/web/css/css_box_model/index.md +++ b/files/ja/web/css/css_box_model/index.md @@ -1,114 +1,88 @@ --- -title: CSS 基本ボックスモデル +title: CSS ボックスモデル slug: Web/CSS/CSS_Box_Model tags: - CSS - - CSS Box Model - - CSS 基本ボックスモデル - - Overview - - Reference + - CSS ボックスモデル + - ガイド + - 概要 + - リファレンス 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")}}初回定義
+{{CSSRef}} + +**CSS ボックスモデル**は CSS のモジュールの一つで、要素に対して作成され、パディングやマージンを含む長方形のボックス定義します。[視覚整形モデル](/ja/docs/Web/CSS/Visual_formatting_model)によって配置されます。 + +## ボックスモデル + +CSS のボックスは、テキスト、画像、その他の HTML 要素が表示されるコンテンツ領域で構成されています。この領域は、パディング、境界、マージンによって、1 つ以上の辺で囲まれることがあります。ボックスモデルは、これらの要素がどのように連携して CSS で表示されるボックスを作成するかを説明します。詳しくは、[CSS ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)をご覧ください。 + +### ボックスの辺のキーワード + +ボックスモデルの仕様書では、ボックスの各部分の辺を参照する一連のキーワードが定義されています。これらは、{{cssxref("box-sizing")}} プロパティの値など、CSS のキーワード値としても使用され、ボックスモデルがどのように寸法を計算するかを制御します。 + +- `content-box` + - : そのボックスのコンテンツ領域の辺です。 +- `padding-box` + - : そのボックスのパディングの辺です。その方向にパディングがなかった場合は、 `content-box` と同じになります。 +- `border-box` + - : そのボックスの境界の辺です。その方向に境界がなかった場合は、 `padding-box` と同じになります。 +- `margin-box` + - : そのボックスのマージンの辺です。その方向にマージンがなかった場合は、 `border-box` と同じになります。 +- `stroke-box` + - : SVG では、ストロークの囲みボックスを指します。 CSS では `content-box` として扱われます。 +- `view-box` + - : SVG では、最も近い SVG ビューポート要素の原点ボックスを指します。これはその要素の {{svgattr("viewBox")}} 属性によって確立された初期の SVG ユーザー座標系の幅と高さを持つ長方形です。CSS では `border-box` として扱われます。 + +## リファレンス + +### プロパティ + +> **Note:** 本仕様では、物理的なパディングとマージンのプロパティを定義しています。テキストの方向に関係するフローに関連したプロパティは、[論理的プロパティと値](/ja/docs/Web/CSS/CSS_Logical_Properties)で定義されています。 + +#### ボックスのマージンを制御するプロパティ + +マージンは、ボックスの境界を囲み、ボックス同士の間隔を確保するものです。 + +- {{CSSxRef("margin")}} +- {{CSSxRef("margin-bottom")}} +- {{CSSxRef("margin-left")}} +- {{CSSxRef("margin-right")}} +- {{CSSxRef("margin-top")}} +- {{CSSxRef("margin-trim")}} {{Experimental_Inline}} + +#### ボックスのパディングを制御するプロパティ + +パディングは、ボックスの境界の縁と内容物の縁の間に挿入されます。 + +- {{CSSxRef("padding")}} +- {{CSSxRef("padding-bottom")}} +- {{CSSxRef("padding-left")}} +- {{CSSxRef("padding-right")}} +- {{CSSxRef("padding-top")}} + +#### その他のプロパティ + +ボックスモデルに関連するプロパティは他にもあり、それらは別の場所で定義されています。 + +- [境界](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders) + - : 境界のプロパティは、境界の太さ、描画スタイル、色を指定します。 +- [オーバーフロー](/ja/docs/Web/CSS/overflow) + - : 内容物が多すぎてボックスに入りきらない場合に起こることを制御します。 + +## ガイド + +- [CSS ボックスモデルの紹介](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) + - : CSS の基礎的概念の 1 つである、ボックスモデルを解説します。このモデルは CSS が要素とそのコンテンツ領域、パディング領域、境界領域、マージン領域をどのように配置するかを定義しています。 +- [マージンの相殺の理解](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) + - : 2 つの隣接するマージンが 1 つに相殺されることがあります。この記事ではいつなぜそれが発生し、どのように制御するかを説明します。 +- [視覚整形モデル](/ja/docs/Web/CSS/Visual_formatting_model) + - : 視覚整形モデルを説明します。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ---------------------------------- | --------------------- | -------------------- | +| {{SpecName("CSS3 Box")}} | {{Spec2("CSS3 Box")}} | `margin-trim` を追加 | +| {{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/boxmodel-(3).png b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/boxmodel-(3).png new file mode 100644 index 0000000000..24caeaeed0 Binary files /dev/null and b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/boxmodel-(3).png differ 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 index 80bf608f4f..d55475d276 100644 --- 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 @@ -3,77 +3,59 @@ title: CSS 基本ボックスモデル入門 slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model tags: - CSS - - CSS Box Model - - CSS 基本ボックスモデル - - Guide - - Reference + - CSS ボックスモデル + - ガイド + - リファレンス translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

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

CSS ボックスモデル

+![CSS ボックスモデル]() -

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

+## コンテンツ領域 -

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

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

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

+{{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("padding-top")}}、{{cssxref("padding-right")}}、{{cssxref("padding-bottom")}}、{{cssxref("padding-left")}} の各プロパティおよび一括指定プロパティの {{cssxref("padding")}} で決定されます。 -

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

+## 境界領域 -

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

+**境界領域**は、境界の縁に囲まれた領域で、パディング領域に要素の境界を含めた広がりです。この領域の寸法は、*境界ボックスの幅*と*境界ボックスの高さ* になります。 -

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

+境界の幅は、 {{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")}} で決定されます。[マージンの相殺](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)が発生したときは、マージンがボックス間で共有されるため、マージン領域が明確に定義されません。 - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Box', '#intro')}}{{Spec2('CSS3 Box')}}
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}言葉遣いをより正確にしたが、有意な変更点はなし
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}初回定義
+置換要素ではないインライン要素については、空間の大きさは {{cssxref('line-height')}} プロパティによって決定され、行の高さに寄与します。この場合も境界とパディングは、コンテンツの周囲に視覚的に現れます。 -

関連情報

+## 関連情報 - +- [レイアウトと包含ブロック](/ja/docs/Web/CSS/Containing_block) +- [CSS カスケードの紹介](/ja/docs/Web/CSS/Cascade) +- [カスケードと継承](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------- | --------------------- | ------------------------------------------------ | +| {{SpecName('CSS3 Box', '#intro')}} | {{Spec2('CSS3 Box')}} | | +| {{ SpecName("CSS2.1","box.html#box-dimensions")}} | {{ Spec2('CSS2.1') }} | 言葉遣いをより正確にしたが、有意な変更点はなし。 | +| {{ SpecName("CSS1","#formatting-model")}} | {{ Spec2('CSS1') }} | 初回定義 | + +## 関連情報 + +- {{css_key_concepts}} 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 index 1e62749980..ed20cd38df 100644 --- 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 @@ -1,55 +1,53 @@ --- -title: マージンの相殺 +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}}
+{{CSSRef}} -

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

+ブロックの[上端](/ja/docs/Web/CSS/margin-top)と[下端](/ja/docs/Web/CSS/margin-bottom)のマージンは、それぞれのマージンの最も大きい寸法 (または等しい場合はいずれか 1 つ) の単一のマージンに結合される (折り畳まれる、collapsed) ことがあり、**マージンの相殺**という動作として知られています。なお、[浮動](/ja/docs/Web/CSS/float)要素と[絶対位置指定](/ja/docs/Web/CSS/position#types_of_positioning)要素では折り畳まれません。 -

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

+マージンの相殺は、基本的に 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")}} のいずれもがない場合、上端と下端のマージンは相殺されます。
-
+- 隣接兄弟要素 + - : 隣接兄弟要素のマージンは相殺されます (後ろの兄弟要素がそれ以前の浮動状態を[解除](/ja/docs/Web/CSS/clear) する必要がある場合を除く)。 +- 親と子孫を隔てるコンテンツがない場合 + - : あるブロックの {{cssxref("margin-top")}} と、1 つ以上の子孫ブロックの {{cssxref("margin-top")}} を隔てる境界、パディング、インライン部分、 [ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)の生成、_[浮動の解除](/ja/docs/Web/CSS/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")}} のいずれもがない場合、上端と下端のマージンは相殺されます。 -

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

+注意すべきことがいくつかあります。 - +- これらのケースが組み合わさると、もっと複雑な (3 つ以上の) マージンの相殺が発生します。 +- このルールはマージン幅がゼロの場合にも当てはまるので、親要素のマージンがゼロであるかどうかに関わらず、先頭/末尾の子要素のマージンは最終的に、 (上のルールに従って) その親要素より外側に出ます。 +- 負のマージンが含まれる場合には、相殺されるマージンの大きさは、一番大きな正のマージンと一番小さな (もっともマイナス寄りの) マージンの合計値になります。 +- すべてのマージンが負の場合、折りたたまれたマージンのサイズは、最小の (最もマイナス寄りの) マージンとなります。これは、隣接する要素と入れ子になった要素の両方に適用されます。 -

例

+

例

-

HTML

+### 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>
+```html
+
この段落の下端マージンは相殺されています …

+
… この段落の上端マージンとの間で 1.2rem のマージンになります。

 
-<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>
+
この親要素には 2 つの段落があります。
+  
この段落には上のテキストとの間に .4rem のマージンがあります。

+  
下端マージンは親と相殺され、下端マージンは 2rem になります。

+

 
-<p>I am <code>2rem</code> below the element above.</p>
+

上の要素から下に 2rem の位置です。

+``` -

CSS

+### CSS -
div {
+```css
+div {
   margin: 2rem 0;
   background: lavender;
 }
@@ -57,33 +55,19 @@ translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
 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")}}初回定義
- -

関連情報

- - +} +``` + +### 結果 + +{{EmbedLiveSample('Examples', 'auto', 350)}} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------- | ------------------- | -------- | +| {{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}} | {{Spec2("CSS2.1")}} | 初回定義 | + +## 関連情報 + +- {{css_key_concepts}} diff --git a/files/ja/web/css/visual_formatting_model/index.md b/files/ja/web/css/visual_formatting_model/index.md index 4501dbb707..b034432964 100644 --- a/files/ja/web/css/visual_formatting_model/index.md +++ b/files/ja/web/css/visual_formatting_model/index.md @@ -3,148 +3,144 @@ title: 視覚整形モデル slug: Web/CSS/Visual_formatting_model tags: - CSS - - CSS Box Model - - Guide - - Reference - - visual formatting model + - CSS ボックスモデル + - ガイド + - リファレンス + - 視覚整形モデル translation_of: Web/CSS/Visual_formatting_model --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

+視覚整形モデルでは、文書ツリーの各要素は、モデルに応じてゼロ個以上のボックスを生成します。これらのボックスのレイアウトは、次のようにして制御されます。 - +- ボックスの寸法と種類 +- 位置決定方法 (通常フロー、浮動、絶対位置指定) +- 文書ツリー内の他の要素 +- 外部情報 ({{glossary("viewport", "ビューポート")}}の寸法、画像の固有の寸法、など) -

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

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

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

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

ビューポートの役割

+## ビューポートの役割 -

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

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

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

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

ボックスの生成

+## ボックスの生成 -

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

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

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

+当初 CSS2 で定義された `display` プロパティは、 [CSS Display Module Level 3](https://www.w3.org/TR/css-display-3/) で拡張されました。これに加え、 display にまつわる用語の一部が CSS2 から何年にもわたって更新され明確化されました。 -

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

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

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

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

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

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

主ボックス

+## 主ボックス -

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

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

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

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

無名ボックス

+### 無名ボックス -

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

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

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

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

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

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

` 要素があります。 -

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

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

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

+文字列はボックスツリーの中で3つのボックスに分割されます。段落要素の前の文字列の部分は無名ボックスに包まれ、次にボックスを生成する `

` があり、さらに別の無名ボックスがあります。 -

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

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

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

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

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

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

行ボックス

+### 行ボックス -

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

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

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

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

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

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

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

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

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

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

通常フロー

+### 通常フロー -

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

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

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

+詳しくは [フローレイアウト](/ja/docs/Web/CSS/CSS_Flow_Layout)を参照してください。 -

浮動要素

+## 浮動要素 -

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

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

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

+詳しくは[浮動要素](/ja/docs/Learn/CSS/CSS_layout/Floats)を参照してください。 -

絶対位置指定

+### 絶対位置指定 -

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

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

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

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

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

+詳しくは[CSS 位置指定レイアウト](/ja/docs/Web/CSS/CSS_Positioning)を参照してください。 -

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

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

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

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

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

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

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

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

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

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

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

+また、 display の特定の値については、ボックスレイアウトの観点から、これらの整形コンテキストがどのように機能するかを以下のリファレンスで説明しています。 - +- [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout) +- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout) +- [CSS 表レイアウト](/ja/docs/Web/CSS/CSS_Table) +- [リスト](/ja/docs/Web/CSS/CSS_Lists_and_Counters) -

独立整形コンテキスト

+### 独立整形コンテキスト -

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

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

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

+**独立整形コンテキスト**は浮動要素を含み、マージンは整形コンテキストの境界を越えて相殺されることはありません。そのため、新しいブロック整形コンテキストを作成することで、ボックス内に浮動要素が収まるようにすることができます。このためには、`display: flow-root` を新しい[ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)を生成したいボックスに追加してください。 -

ブロックボックス

+次の例は、`display: flow-root` の効果を示しています。黒い背景のボックスが、浮動アイテムとテキストを包み込むように見えます。編集可能な CSS から `display: flow-root` を削除すると、浮動アイテムがボックスの底から突き出てしまい、アイテムが収まらなくなります。 -

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

+{{EmbedGHLiveSample("css-examples/display/two-value/block-flow-root.html", '100%', 720)}} -

ブロックコンテナー

+### ブロックボックス -

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

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

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

+#### ブロックコンテナー -

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

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

ブロックボックスの場合

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

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

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

関連情報

+#### ブロックボックスの場合 -
    -
  • {{css_key_concepts}}
    • -
+ブロックボックスとは、ブロックレベルボックスでありながらブロックコンテナーでもあるものを指します。 CSS の `display` で説明されているように、ボックスがブロックレベルのボックスであってもブロックコンテナーにはならないこともあります (例えば、フレックスコンテナーやグリッドコンテナーになることもあります)。 + +## 関連情報 + +- {{css_key_concepts}} -- cgit v1.2.3-54-g00ecf