コードブロックのハイライトを利用

Author: nakaterm

docs/2-browser-apps/05-css-layout/index.mdx

@@ -93,7 +93,8 @@ body {
 ```css
 .card {
   background-color: #fff;
-  width: 240px; /* 追加 */
+  // highlight-next-line
+  width: 240px;
 }
 ```
 
@@ -110,7 +111,8 @@ body {
   background-color: #0d6efd;
   color: #fff;
   font-size: 16px;
-  width: 100%; /* 追加 */
+  // highlight-next-line
+  width: 100%;
 }
 ```
 
@@ -135,7 +137,8 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 .card {
   background-color: #fff;
   width: 240px;
-  border: 1px solid #bbb; /* 追加 */
+  // highlight-next-line
+  border: 1px solid #bbb;
 }
 ```
 
@@ -149,7 +152,8 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
   color: #fff;
   font-size: 16px;
   width: 100%;
-  border: none; /* 追加 */
+  // highlight-next-line
+  border: none;
 }
 ```
 
@@ -164,7 +168,8 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
   background-color: #fff;
   width: 240px;
   border: 1px solid #bbb;
-  border-radius: 8px; /* 追加 */
+  // highlight-next-line
+  border-radius: 8px;
 }
 ```
 
@@ -175,7 +180,8 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
   font-size: 16px;
   width: 100%;
   border: none;
-  border-radius: 8px; /* 追加 */
+  // highlight-next-line
+  border-radius: 8px;
 }
 ```
 
@@ -193,7 +199,8 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
   width: 240px;
   border: 1px solid #bbb;
   border-radius: 8px;
-  padding: 16px; /* 追加 */
+  // highlight-next-line
+  padding: 16px;
 }
 ```
 
@@ -205,7 +212,8 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
   width: 100%;
   border: none;
   border-radius: 8px;
-  padding: 12px; /* 追加 */
+  // highlight-next-line
+  padding: 12px;
 }
 ```
 
@@ -224,7 +232,8 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
   border: 1px solid #bbb;
   border-radius: 8px;
   padding: 16px;
-  margin: 16px; /* 追加 */
+  // highlight-next-line
+  margin: 16px;
 }
 ```
 
@@ -245,7 +254,8 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
   border: none;
   border-radius: 8px;
   padding: 12px;
-  margin-top: 16px; /* 追加 */
+  // highlight-next-line
+  margin-top: 16px;
 }
 ```