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 ++++++++++++++++ 6 files changed, 282 insertions(+), 282 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 (limited to 'files/ja/web/css/css_box_model') 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")}}初回定義
+ +

関連情報

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