From 376c645e2bb44c10317c3f3b8aca53f16da0975a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 8 Nov 2021 10:35:25 +0900 Subject: CSS Box Model のプロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/07 時点の英語版に同期 --- files/ja/web/css/margin/index.md | 195 +++++++++++++++++---------------------- 1 file changed, 87 insertions(+), 108 deletions(-) (limited to 'files/ja/web/css/margin') diff --git a/files/ja/web/css/margin/index.md b/files/ja/web/css/margin/index.md index e8e2379d73..620ad1d306 100644 --- a/files/ja/web/css/margin/index.md +++ b/files/ja/web/css/margin/index.md @@ -5,27 +5,29 @@ tags: - CSS - CSS プロパティ - CSS 基本ボックスモデル - - Reference + - recipe:css-shorthand-property +browser-compat: css.properties.margin translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new --- -
{{CSSRef}}
+{{CSSRef}} -

margin は CSS のプロパティで、要素の全四辺のマージン領域を設定します。これはすべての個別のマージン ({{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}) の一括指定です。

+**`margin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の全四辺の[マージン領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#マージン領域)を設定します。 -
{{EmbedInteractiveExample("pages/css/margin.html")}}
+{{EmbedInteractiveExample("pages/css/margin.html")}} - +## 構成要素のプロパティ -

top および bottom のマージンは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} などの置換要素ではないインライン要素には効果がありません。

+このプロパティは以下の CSS プロパティの一括指定です。 -
-

注: マージンは要素の周りに追加の領域を作成します。それに対して、 {{cssxref("padding")}} は要素内に追加の領域を作成します。

-
+- {{cssxref("margin-bottom")}} +- {{cssxref("margin-left")}} +- {{cssxref("margin-right")}} +- {{cssxref("margin-top")}} -

構文

+## 構文 -
/* 四辺すべてに適用 */
+```css
+/* 四辺すべてに適用 */
 margin: 1em;
 margin: -3px;
 
@@ -41,62 +43,84 @@ margin: 2px 1em 0 auto;
 /* グローバル値 */
 margin: inherit;
 margin: initial;
+margin: revert;
 margin: unset;
-
+``` -

margin プロパティは1～4つの値を使って指定することができます。それぞれの値は <length>、 <percentage>、 または auto キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。

+`margin` プロパティは 1 ～ 4 つの値を使って指定することができます。それぞれの値は {{cssxref("<length>")}}、{{cssxref("<percentage>")}}、 または `auto` キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。 - +- 値が **1 つ**指定された場合、**全四辺**に同じマージンが適用される。 +- 値が **2 つ**指定された場合、1 つ目のマージンは**上下**、2 つ目は**左右**の辺に適用される。 +- 値が **3 つ**指定された場合、1 つ目のマージンは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。 +- 値が **4 つ**指定された場合、マージンはそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。 -

値

+### 値 -
-
{{cssxref("length")}}
-
固定値によるマージンの寸法です。
-
{{cssxref("percentage")}}
-
内包ブロックの width に対するパーセントによるマージンの寸法です。
-
auto
-
ブラウザーが適切なマージンを選択して使用します。例えば、特定の場合に要素を中央揃えするためにこの値を使用します。
-
+- {{cssxref("length")}} + - : マージンの寸法を固定値で表したものです。 +- {{cssxref("percentage")}} + - : マージンの寸法を[包含ブロック](/ja/docs/Web/CSS/Containing_block)の*幅*に対するパーセント値で表したものです。 +- `auto` + - : ブラウザーが適切なマージンを選択して使用します。例えば、要素を中央揃えするためにこの値を使用することもあります。 -

形式文法

+## 解説 + +このプロパティを使用して、要素の全四辺のマージンを設定することができます。マージンは要素の周りに追加の領域を作成します。それに対して、 {{cssxref("padding")}} は要素*内部*に追加の領域を作成します。 + +top および bottom のマージンは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} などの[置換要素](/ja/docs/Web/CSS/Replaced_element)ではないインライン要素には効果がありません。 + +### 水平方向の中央揃え + +最近のブラウザーで何かを中央揃えしたい場合は、{{cssxref("display")}}`: flex; `{{cssxref("justify-content")}}`: center;` を使用することができます。 + +しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 `margin: 0 auto;` を使用してください。 + +### マージンの相殺 + +要素の上下のマージンは、相殺されて 2 つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくは[マージンの相殺の習得](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)を参照してください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

単純な例

+

単純な例

-

HTML

+#### HTML -
<div class="center">This element is centered.</div>
+```html
+
This element is centered.

 
-<div class="outside">This element is positioned outside of its container.</div>
+
This element is positioned outside of its container.
+``` -

CSS

+#### CSS -
.center {
-  margin: auto;
-  background: lime;
-  width: 66%;
+```css
+.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
 }
 
 .outside {
-  margin: 3rem 0 0 -3rem;
-  background: cyan;
-  width: 66%;
-}
+  margin: 3rem 0 0 -3rem; +  background: cyan; +  width: 66%; +} +``` -

{{ EmbedLiveSample('Simple_example','100%',120) }}

+{{ EmbedLiveSample('Simple_example','100%',120) }} -

その他の例

+### その他の例 -
margin: 5%;                /* 全辺: 5% のマージン */
+```css
+margin: 5%;                /* 全辺: 5% のマージン */
 
 margin: 10px;              /* 全辺: 10px のマージン */
 
@@ -117,64 +141,19 @@ margin: 2em auto;           /* 上と下: 2em のマージン   */
 
 margin: auto;               /* 上と下: 0 のマージン     */
                             /* ボックスは水平方向に中央 */
-
- -

注

- -

水平方向の中央揃え

- -

最近のブラウザーで何かを中央揃えしたい場合は、 display: flex; justify-content: center; を使用することができます。

- -

しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 margin: 0 auto; を使用してください。

- -

マージンの相殺

- -

要素の上下のマージンは、相殺されて2つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくはマージンの相殺の理解を参照してください。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}有意な変更なし。
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}margin をアニメーション可能として定義。
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}インライン要素における top および bottom マージンの効果を削除。
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.margin")}}

- -

関連情報

- - +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) +- [マージンの相殺](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) +- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} +- 対応する論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}} -- cgit v1.2.3-54-g00ecf