diff options
Diffstat (limited to 'files/ja/web/css/css_box_model/index.md')
-rw-r--r-- | files/ja/web/css/css_box_model/index.md | 114 |
1 files changed, 114 insertions, 0 deletions
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 +--- +<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> |