2024/10/09 時点の英語版に基づき更新

mdn · Dec 22, 2024 · 43675c8 · 43675c8
1 parent 89a2f5f
commit 43675c8
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 44 deletions.
diff --git a/files/ja/web/css/margin-bottom/index.md b/files/ja/web/css/margin-bottom/index.md
@@ -2,7 +2,7 @@
 title: margin-bottom
 slug: Web/CSS/margin-bottom
 l10n:
-  sourceCommit: 5e7d1f9ae2cce0cb3f7693dfb8dc6e8d375b2231
+  sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43
 ---
 
 {{CSSRef}}
@@ -43,7 +43,7 @@ margin-bottom: unset;
 - {{cssxref("&lt;percentage&gt;")}}
   - : マージンの寸法を[包含ブロック](/ja/docs/Web/CSS/Containing_block)のインラインサイズ（{{cssxref("writing-mode")}} で横書き言語と定義されている場合は _width_）に対するパーセント値で示したものです。
 - `auto`
-  - : ブラウザ―が適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。
+  - : ブラウザー―が適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。
 
 ## 公式定義
 
@@ -59,19 +59,19 @@ margin-bottom: unset;
 
 #### HTML
 
-```html
+```html-nolint live-sample___setting_positive_and_negative_bottom_margins
 <div class="container">
-  <div class="box0">Box 0</div>
-  <div class="box1">Box 1</div>
-  <div class="box2">Box one's negative margin pulls me up</div>
+  <div class="box0">ボックス 0</div>
+  <div class="box1">ボックス 1</div>
+  <div class="box2">ボックス 1 の負のマージンがこのボックスを引き上げています</div>
 </div>
 ```
 
 #### CSS
 
 div に margin-bottom と height を設定する CSS です。
 
-```css
+```css live-sample___setting_positive_and_negative_bottom_margins
 .box0 {
   margin-bottom: 1em;
   height: 3em;
@@ -89,7 +89,7 @@ div に margin-bottom と height を設定する CSS です。
 
 包含要素と div の定義の一部です。これによってマージンの効果がより明確に見えます。
 
-```css
+```css live-sample___setting_positive_and_negative_bottom_margins
 .container {
   background-color: orange;
   width: 320px;
@@ -103,7 +103,7 @@ div {
 
 #### 結果
 
-{{ EmbedLiveSample('正および負の数の下側のマージンの設定',350,200) }}
+{{ EmbedLiveSample('Setting_positive_and_negative_bottom_margins',350,200) }}
 
 ## 仕様書
 
@@ -115,5 +115,8 @@ div {
 
 ## 関連情報
 
-- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定
-- 対応する論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
+- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-left")}}
+- 一括指定の {{cssxref("margin")}}
+- {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}
+- 一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール
diff --git a/files/ja/web/css/margin-left/index.md b/files/ja/web/css/margin-left/index.md
@@ -2,7 +2,7 @@
 title: margin-left
 slug: Web/CSS/margin-left
 l10n:
-  sourceCommit: 5e7d1f9ae2cce0cb3f7693dfb8dc6e8d375b2231
+  sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43
 ---
 
 {{CSSRef}}
@@ -139,19 +139,13 @@ margin-left: unset;
 
 ## 例
 
-`margin-left` をパーセント値で指定すると、コンテナーのインラインサイズに対する相対になります。
+### margin-left をパーセント値で指定
 
-### CSS
+`margin-left` をパーセント値で指定すると、コンテナーのインラインサイズに対する相対サイズになります。
 
-```css
-.example {
-  margin-left: 50%;
-}
-```
-
-### HTML
+#### HTML
 
-```html
+```html live-sample___setting_margin-left_as_a_percentage
 <p>
   A large rose-tree stood near the entrance of the garden: the roses growing on
   it were white, but there were three gardeners at it, busily painting them red.
@@ -166,9 +160,17 @@ margin-left: unset;
 </p>
 ```
 
+#### CSS
+
+```css live-sample___setting_margin-left_as_a_percentage
+.example {
+  margin-left: 50%;
+}
+```
+
 ### 結果
 
-{{EmbedLiveSample("","","250")}}
+{{EmbedLiveSample("Setting margin-left as a percentage","","250")}}
 
 ## 仕様書
 
@@ -180,5 +182,8 @@ margin-left: unset;
 
 ## 関連情報
 
-- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} と {{cssxref("margin")}} 一括指定
-- 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
+- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}
+- 一括指定の {{cssxref("margin")}}
+- {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}
+- 一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール
diff --git a/files/ja/web/css/margin-right/index.md b/files/ja/web/css/margin-right/index.md
@@ -2,7 +2,7 @@
 title: margin-right
 slug: Web/CSS/margin-right
 l10n:
-  sourceCommit: 5e7d1f9ae2cce0cb3f7693dfb8dc6e8d375b2231
+  sourceCommit: b2833ddfd45cae1bb5e050d24637865e9327408d
 ---
 
 {{CSSRef}}
@@ -143,7 +143,7 @@ margin-right: unset;
 .content {
   margin-right: 5%;
 }
-.sidebox {
+.side-box {
   margin-right: 10px;
 }
 .logo {
@@ -161,5 +161,8 @@ margin-right: unset;
 
 ## 関連情報
 
-- {{cssxref("margin-top")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定
-- 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
+- {{cssxref("margin-top")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}
+- 一括指定の {{cssxref("margin")}}
+- {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}
+- 一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール
diff --git a/files/ja/web/css/margin-top/index.md b/files/ja/web/css/margin-top/index.md
@@ -2,7 +2,7 @@
 title: margin-top
 slug: Web/CSS/margin-top
 l10n:
-  sourceCommit: fab1f9cef824066b3ce6a5b25f6c6db539f5d042
+  sourceCommit: b2833ddfd45cae1bb5e050d24637865e9327408d
 ---
 
 {{CSSRef}}
@@ -59,7 +59,7 @@ margin-top: unset;
 .content {
   margin-top: 5%;
 }
-.sidebox {
+.side-box {
   margin-top: 10px;
 }
 .logo {
@@ -80,5 +80,8 @@ margin-top: unset;
 
 ## 関連情報
 
-- {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定
-- 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
+- {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}
+- 一括指定の {{cssxref("margin")}}
+- {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}
+- 一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール
diff --git a/files/ja/web/css/margin/index.md b/files/ja/web/css/margin/index.md
@@ -2,7 +2,7 @@
 title: margin
 slug: Web/CSS/margin
 l10n:
-  sourceCommit: fab1f9cef824066b3ce6a5b25f6c6db539f5d042
+  sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43
 ---
 
 {{CSSRef}}
@@ -68,9 +68,9 @@ top および bottom のマージンは、 {{HTMLElement("span")}} または {{H
 
 ### 水平方向の中央揃え
 
-最近のブラウザーで何かを中央揃えしたい場合は、{{cssxref("display")}}`: flex;` {{cssxref("justify-content")}}`: center;` を使用することができます。
+`margin: 0 auto;` を設定すると、親要素内で要素を水平方向に中央揃えすることができます。
 
-しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 `margin: 0 auto;` を使用してください。
+要素を水平方向に中央揃えにする一般的な方法としては、コンテナー内で `display: flex;` および [`justify-content: center;`](/ja/docs/Web/CSS/justify-content) を設定する方法があります。これにより、[フレックスアイテムの子要素が中央揃え](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)になります。
 
 ### マージンの相殺
 
@@ -90,15 +90,15 @@ top および bottom のマージンは、 {{HTMLElement("span")}} または {{H
 
 #### HTML
 
-```html
-<div class="center">This element is centered.</div>
+```html-nolint live-sample___simple_example
+<div class="center">この要素は中央揃えされています。</div>
 
-<div class="outside">This element is positioned outside of its container.</div>
+<div class="outside">この要素はコンテナーの外側に配置されています。</div>
 ```
 
 #### CSS
 
-```css
+```css live-sample___simple_example
 .center {
   margin: auto;
   background: lime;
@@ -112,7 +112,7 @@ top および bottom のマージンは、 {{HTMLElement("span")}} または {{H
 }
 ```
 
-{{ EmbedLiveSample('簡単な例','100%',120) }}
+{{ EmbedLiveSample('Simple_example','100%',120) }}
 
 ### その他の例
 
@@ -150,7 +150,9 @@ margin: auto; /* 上と下: 0 のマージン     */
 
 ## 関連情報
 
-- [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")}}
+- {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}
+- 一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
+- [マージンの相殺の習得](/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
+- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
+- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール