From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/margin/index.html | 181 +++++++++++++++++++++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 files/ja/web/css/margin/index.html (limited to 'files/ja/web/css/margin') diff --git a/files/ja/web/css/margin/index.html b/files/ja/web/css/margin/index.html new file mode 100644 index 0000000000..876e9526ea --- /dev/null +++ b/files/ja/web/css/margin/index.html @@ -0,0 +1,181 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS プロパティ + - CSS 基本ボックスモデル + - Reference +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/margin.html")}}
+ + + +

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

+ +
+

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

+
+ +

構文

+ +
/* 四辺すべてに適用 */
+margin: 1em;
+margin: -3px;
+
+/* 上下 | 左右 */
+margin: 5% auto;
+
+/* 上 | 左右 | 下 */
+margin: 1em auto 2em;
+
+/* 上 | 右 | 下 | 左 */
+margin: 2px 1em 0 auto;
+
+/* グローバル値 */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

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

+ + + +

値

+ +
+
{{cssxref("length")}}
+
固定値によるマージンの寸法です。
+
{{cssxref("percentage")}}
+
内包ブロックの width に対するパーセントによるマージンの寸法です。
+
auto
+
ブラウザーが適切なマージンを選択して使用します。例えば、特定の場合に要素を中央揃えするためにこの値を使用します。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

単純な例

+ +

HTML

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

CSS

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

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

+ +

その他の例

+ +
margin: 5%;                /* 全辺: 5% のマージン */
+
+margin: 10px;              /* 全辺: 10px のマージン */
+
+margin: 1.6em 20px;         /* 上と下: 1.6em のマージン */
+                            /* 左と右: 20px のマージン  */
+
+margin: 10px 3% -1em;       /* 上:     10px のマージン */
+                            /* 左と右: 3% のマージン   */
+                            /* 下:     -1em のマージン  */
+
+margin: 10px 3px 30px 5px;  /* 上:     10px のマージン */
+                            /* 右:     3px のマージン  */
+                            /* 下:     30px のマージン */
+                            /* 右:     5px のマージン  */
+
+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")}}

+ +

関連情報

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