initial commit

3 files changed, 282 insertions, 0 deletions

diff --git a/files/ja/web/css/css_box_model/index.html b/files/ja/web/css/css_box_model/index.html
new file mode 100644
index 0000000000..64fc11ed1d
--- /dev/null
+++ b/files/ja/web/css/css_box_model/index.html
@@ -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
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 基本ボックスモデル</strong>は CSS のモジュールの1つで、要素に対して作成され、パディングやマージンを含む長方形のボックス定義します。<a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a>によって配置されます。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<h4 id="Properties_controlling_the_flow_of_content_in_a_box" name="Properties_controlling_the_flow_of_content_in_a_box">ボックス内のコンテンツの流れを制御するプロパティ</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("overflow")}}</li>
+ <li>{{CSSxRef("overflow-x")}}</li>
+ <li>{{CSSxRef("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_size_of_a_box" name="Properties_controlling_the_size_of_a_box">ボックスの寸法を制御するプロパティ</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+ <li>{{CSSxRef("max-height")}}</li>
+ <li>{{CSSxRef("max-width")}}</li>
+ <li>{{CSSxRef("min-height")}}</li>
+ <li>{{CSSxRef("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_margins_of_a_box" name="Properties_controlling_the_margins_of_a_box">ボックスのマージンを制御するプロパティ</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("margin")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_paddings_of_a_box" name="Properties_controlling_the_paddings_of_a_box">ボックスのパディングを制御するプロパティ</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("padding")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Other_properties" name="Other_properties">その他のプロパティ</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS ボックスモデルの紹介</a></dt>
+ <dd>CSS の基礎的概念の1つである、ボックスモデルを説明します。このモデルは CSS が要素とその内容、パディング、境界線、マージン領域をどのように配置するかを定義します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺の理解</a></dt>
+ <dd>2つの隣接するマージンが1つに相殺されることがあります。この記事ではいつなぜそれが発生し、どのように制御するかを説明します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a></dt>
+ <dd>視覚整形モデルを説明します。</dd>
+</dl>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
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
new file mode 100644
index 0000000000..80bf608f4f
--- /dev/null
+++ b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.html
@@ -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
+---
+<div>{{CSSRef}}</div>
+
+<p>ブラウザーのレンダリングエンジンは文書をレイアウトする際に、それぞれの要素を標準的な <strong>CSS ボックスモデル</strong>に基づいた長方形のボックスとして表現します。 CSS はこれらのボックスの寸法、位置、プロパティ（色、背景、境界線の太さなど）を決定します。</p>
+
+<p>それぞれのボックスは4つの部品 (または<em>領域</em>) から構成され、それぞれの辺について<em>コンテンツ境界 (content edge)</em>、<em>パディング境界 (padding edge)</em>、<em>ボーダー境界 (border edge)</em>、<em>マージン境界 (margin edge)</em> が定義されています。</p>
+
+<p><img alt="CSS ボックスモデル" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p>
+
+<p id="content-area"><strong>コンテンツ領域</strong>は、コンテンツ境界に囲まれた領域で、文字列、画像、動画プレイヤー等の「実際の」コンテンツを含みます。領域の寸法は<em>コンテンツ幅</em>（または<em>コンテンツボックスの幅</em>）と<em>コンテンツの高さ</em>（または<em>コンテンツボックスの高さ）</em>です。背景色や背景画像を持っていることがあります。</p>
+
+<p>{{cssxref("box-sizing")}} プロパティが <code>content-box</code> (既定値) に設定されており、要素がブロック要素である場合は、コンテンツ領域の寸法は {{cssxref("width")}}、 {{cssxref("min-width")}}、 {{cssxref("max-width")}}、 {{cssxref("height")}}、 {{cssxref("min-height")}}、 {{cssxref("max-height")}} の各プロパティによって正確に定義することができます。</p>
+
+<p id="padding-area"><strong>パディング領域</strong>は、パディング境界に囲まれた領域で、コンテンツ領域に要素のパディングを含めて拡張したものです。寸法は<em>パディングボックスの幅</em>と<em>パディングボックスの高さ</em>です。</p>
+
+<p>パディングの幅は、 {{cssxref("padding-top")}}、 {{cssxref("padding-right")}}、 {{cssxref("padding-bottom")}}、 {{cssxref("padding-left")}} の各プロパティおよび一括指定プロパティの {{cssxref("padding")}} で決定されます。</p>
+
+<p id="border-area"><strong>ボーダー領域</strong>は、ボーダー境界に囲まれた領域で、パディング領域に要素の境界線を含めて拡張したものです。寸法は<em>ボーダーボックスの幅</em>と<em>ボーダーボックスの高さ</em> になります。</p>
+
+<p>境界線の幅は、 {{cssxref("border-width")}} および一括指定プロパティの {{cssxref("border")}} で決定されます。 {{cssxref("box-sizing")}} プロパティが <code>border-box</code> に設定されていた場合、ボーダー領域の寸法は {{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")}} プロパティで変更することができます。</p>
+
+<p id="margin-area"><strong>マージン領域</strong>は、マージン境界に囲まれた領域で、ボーダー領域に、隣の要素と分離するために使用する空の領域を含めて拡張したものです。この領域の大きさは、<em>マージンボックスの幅</em>と<em>マージンボックスの高さ</em>になります。</p>
+
+<p>マージン領域の寸法は、 {{cssxref("margin-top")}}、 {{cssxref("margin-right")}}、 {{cssxref("margin-bottom")}}、 {{cssxref("margin-left")}} の各プロパティおよび一括指定プロパティである {{cssxref("margin")}} で決定されます。<a href="/ja/docs/Web/CSS/margin_collapsing" title="CSS/margin_collapsing">マージンの相殺</a> (margin collapsing)が発生したときは、マージンがボックス間で共有されるため、マージン領域が明確に定義されません。</p>
+
+<p>置換要素ではないインライン要素については、空間の大きさは {{cssxref('line-height')}} プロパティによって決定され、行の高さに寄与します。この場合も境界線とパディングは、コンテンツの周囲に視覚的に現れます。</p>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Containing_block">レイアウトと包含ブロック</a></li>
+ <li><a href="/ja/docs/Web/CSS/Cascade">CSS カスケードの紹介</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">カスケードと継承</a></li>
+</ul>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#intro')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>言葉遣いをより正確にしたが、有意な変更点はなし</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS1","#formatting-model")}}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also_2" name="See_also_2">関連情報</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>
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
new file mode 100644
index 0000000000..1e62749980
--- /dev/null
+++ b/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.html
@@ -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
+---
+<div>{{CSSRef}}</div>
+
+<p>ブロックの<a href="/ja/docs/Web/CSS/margin-top">先頭</a>と<a href="/ja/docs/Web/CSS/margin-bottom">末尾</a>のマージンは、それぞれのマージンの最も大きい寸法 (または等しい場合はいずれか1つ) の単一のマージンに結合される (<ruby>折り畳まれる<rp> (</rp><rt>collapsed</rt><rp>)</rp></ruby>) ことがあり、<strong>マージンの相殺</strong>という動作として知られています。なお、<a href="/ja/docs/Web/CSS/float">浮動</a>要素と<a href="/ja/docs/Web/CSS/position#absolute">絶対位置指定</a>要素では折り畳まれません。</p>
+
+<p>マージンの相殺は、基本的に3つの場合に発生します。</p>
+
+<dl>
+ <dt>隣接兄弟要素</dt>
+ <dd>隣接兄弟要素のマージンは相殺されます (後ろの兄弟要素がそれ以前の浮動状態を <a href="/ja/docs/Web/CSS/clear">解除 (clear)</a> する必要がある場合を除く)。</dd>
+ <dt>親と子孫を隔てるコンテンツがない場合</dt>
+ <dd>あるブロックの {{cssxref("margin-top")}} と、1つ以上の子孫ブロックの {{cssxref("margin-top")}} を隔てる境界、パディング、インライン部分、 <a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>の生成、<em><a href="/ja/docs/Web/CSS/clear">浮動の解除 (clear)</a></em> のいずれもがない場合、もしくは、あるブロックの {{cssxref("margin-bottom")}} と1つ以上の子孫ブロックの {{cssxref("margin-bottom")}} を隔て境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}} のいずれもがない場合、それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。</dd>
+ <dt>空ブロック</dt>
+ <dd>あるブロックの {{cssxref("margin-top")}} を {{cssxref("margin-bottom")}} と隔てる境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}} のいずれもがない場合、上端と下端のマージンは相殺されます。</dd>
+</dl>
+
+<p>注意すべきことがいくつかあります。</p>
+
+<ul>
+ <li>これらのケースが組み合わさると、もっと複雑な (3つ以上の) マージンの相殺が発生します。</li>
+ <li>このルールはマージン幅がゼロの場合にも当てはまるので、親要素のマージンがゼロであるかどうかに関わらず、先頭/末尾の子要素のマージンは最終的に、 (上のルールに従って) その親要素より外側に出ます。</li>
+ <li>負のマージンが含まれる場合には、相殺されるマージンの大きさは、一番大きな正のマージンと一番小さな (もっともマイナス寄りの) マージンの合計値になります。</li>
+ <li>すべてのマージンが負の場合、折りたたまれたマージンのサイズは、最小の (最もマイナス寄りの) マージンとなります。これは、隣接する要素と入れ子になった要素の両方に適用されます。</li>
+</ul>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;The bottom margin of this paragraph is collapsed …&lt;/p&gt;
+&lt;p&gt;… with the top margin of this paragraph, yielding a margin of &lt;code&gt;1.2rem&lt;/code&gt; in between.&lt;/p&gt;
+
+&lt;div&gt;This parent element contains two paragraphs!
+  &lt;p&gt;This paragraph has a &lt;code&gt;.4rem&lt;/code&gt; margin between it and the text above.&lt;/p&gt;
+  &lt;p&gt;My bottom margin collapses with my parent, yielding a bottom margin of &lt;code&gt;2rem&lt;/code&gt;.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p&gt;I am &lt;code&gt;2rem&lt;/code&gt; below the element above.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}</pre>
+
+<h3 id="Result" name="Result">例</h3>
+
+<p>{{EmbedLiveSample('Examples', 'auto', 350)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>