diff --git a/files/ja/web/css/margin-block-end/index.md b/files/ja/web/css/margin-block-end/index.md
index 8f6efbb58e06f1..3e013b25e7f6bb 100644
--- a/files/ja/web/css/margin-block-end/index.md
+++ b/files/ja/web/css/margin-block-end/index.md
@@ -52,15 +52,15 @@ margin-block-end: unset;
 
 #### HTML
 
-```html
+```html live-sample___setting_block_end_margin
 <div>
-  <p class="exampleText">Example text</p>
+  <p class="exampleText">テキストの例</p>
 </div>
 ```
 
 #### CSS
 
-```css
+```css live-sample___setting_block_end_margin
 div {
   background-color: yellow;
   width: 120px;
@@ -76,7 +76,7 @@ div {
 
 #### 結果
 
-{{EmbedLiveSample("ブロック方向の末尾のマージンを設定", 140, 140)}}
+{{EmbedLiveSample("Setting_block_end_margin", 140, 140)}}
 
 ## 仕様書
 
diff --git a/files/ja/web/css/margin-block-start/index.md b/files/ja/web/css/margin-block-start/index.md
index 3b977c52173e18..b964a6f39c820f 100644
--- a/files/ja/web/css/margin-block-start/index.md
+++ b/files/ja/web/css/margin-block-start/index.md
@@ -52,15 +52,15 @@ margin-block-start: unset;
 
 #### HTML
 
-```html
+```html live-sample___setting_block_start_margin
 <div>
-  <p class="exampleText">Example text</p>
+  <p class="exampleText">テキストの例</p>
 </div>
 ```
 
 #### CSS
 
-```css
+```css live-sample___setting_block_start_margin
 div {
   background-color: yellow;
   width: 120px;
@@ -76,7 +76,7 @@ div {
 
 #### 結果
 
-{{EmbedLiveSample("ブロック方向の先頭のマージンの設定", 140, 140)}}
+{{EmbedLiveSample("Setting_block_start_margin", 140, 140)}}
 
 ## 仕様書
 
diff --git a/files/ja/web/css/margin-block/index.md b/files/ja/web/css/margin-block/index.md
index 99d7a442565a20..c2592fb4ac2d0d 100644
--- a/files/ja/web/css/margin-block/index.md
+++ b/files/ja/web/css/margin-block/index.md
@@ -55,7 +55,7 @@ margin-block: unset;
 
 ## 形式文法
 
-{{CSSSyntax}}
+{{csssyntax}}
 
 ## 例
 
@@ -63,7 +63,7 @@ margin-block: unset;
 
 #### CSS
 
-```css
+```css live-sample___setting_block_start_and_end_margins
 div {
   background-color: yellow;
   width: 120px;
@@ -84,18 +84,18 @@ p {
 
 #### HTML
 
-```html
+```html live-sample___setting_block_start_and_end_margins
 <div>
-  <p>Example text</p>
+  <p>テキストの例</p>
 </div>
 <div class="verticalExample">
-  <p>Example text</p>
+  <p>テキストの例</p>
 </div>
 ```
 
 #### 結果
 
-{{EmbedLiveSample("ブロック方向の先頭と末尾のマージンを設定", 140, 200)}}
+{{EmbedLiveSample("Setting_block_start_and_end_margins", 140, 200)}}
 
 ## 仕様書
 
diff --git a/files/ja/web/css/margin-inline-end/index.md b/files/ja/web/css/margin-inline-end/index.md
index 08e55e33ea0936..480f750413ed99 100644
--- a/files/ja/web/css/margin-inline-end/index.md
+++ b/files/ja/web/css/margin-inline-end/index.md
@@ -50,15 +50,15 @@ margin-inline-end: unset;
 
 #### HTML
 
-```html
+```html live-sample___setting_inline_end_margin
 <div>
-  <p class="exampleText">Example text</p>
+  <p class="exampleText">テキストの例</p>
 </div>
 ```
 
 #### CSS
 
-```css
+```css live-sample___setting_inline_end_margin
 div {
   background-color: yellow;
   width: 120px;
@@ -74,7 +74,7 @@ div {
 
 #### 結果
 
-{{EmbedLiveSample("インライン方向の末尾側のマージンの設定", 140, 140)}}
+{{EmbedLiveSample("Setting_inline_end_margin", 140, 140)}}
 
 ## 仕様書
 
diff --git a/files/ja/web/css/margin-inline-start/index.md b/files/ja/web/css/margin-inline-start/index.md
index 89f742095e6f27..ac0715bfc4abff 100644
--- a/files/ja/web/css/margin-inline-start/index.md
+++ b/files/ja/web/css/margin-inline-start/index.md
@@ -50,15 +50,15 @@ margin-inline-start: unset;
 
 #### HTML
 
-```html
+```html live-sample___setting_inline_start_margin
 <div>
-  <p class="exampleText">Example text</p>
+  <p class="exampleText">テキストの例</p>
 </div>
 ```
 
 #### CSS
 
-```css
+```css live-sample___setting_inline_start_margin
 div {
   background-color: yellow;
   width: 120px;
@@ -74,7 +74,7 @@ div {
 
 #### 結果
 
-{{EmbedLiveSample("インライン方向の先頭側のマージンの設定", 140, 140)}}
+{{EmbedLiveSample("Setting_inline_start_margin", 140, 140)}}
 
 ## 仕様書
 
diff --git a/files/ja/web/css/margin-inline/index.md b/files/ja/web/css/margin-inline/index.md
index d8b1a0de83f6ec..0af30f5955d069 100644
--- a/files/ja/web/css/margin-inline/index.md
+++ b/files/ja/web/css/margin-inline/index.md
@@ -63,7 +63,7 @@ margin-inline: unset;
 
 #### CSS
 
-```css
+```css live-sample___setting_inline_start_and_end_margins
 div {
   background-color: yellow;
   width: 120px;
@@ -84,18 +84,18 @@ p {
 
 #### HTML
 
-```html
+```html live-sample___setting_inline_start_and_end_margins
 <div>
-  <p>Example text</p>
+  <p>テキストの例</p>
 </div>
 <div class="verticalExample">
-  <p>Example text</p>
+  <p>テキストの例</p>
 </div>
 ```
 
 #### 結果
 
-{{EmbedLiveSample("インライン方向の先頭と末尾のマージンの設定", 140, 240)}}
+{{EmbedLiveSample("Setting_inline_start_and_end_margins", 140, 240)}}
 
 ## 仕様書