diff --git a/.prettierignore b/.prettierignore
index aaac3a8394d137..34df48ab7b678d 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -39,13 +39,10 @@ build/
 /files/es/web/javascript/reference/**/*.md
 
 # fr
-/files/fr/web/css/**/*.md
 /files/fr/web/javascript/**/*.md
 
 # ja
-/files/ja/learn/css/**/*.md
 /files/ja/learn/javascript/**/*.md
-/files/ja/learn/server-side/**/*.md
 /files/ja/mdn/**/*.md
 /files/ja/web/api/**/*.md
 /files/ja/web/css/**/*.md
diff --git a/files/fr/web/css/_colon_-moz-broken/index.md b/files/fr/web/css/_colon_-moz-broken/index.md
index 0448f9b100ecb4..8a9db85e9d8c64 100644
--- a/files/fr/web/css/_colon_-moz-broken/index.md
+++ b/files/fr/web/css/_colon_-moz-broken/index.md
@@ -13,7 +13,8 @@ Ce sélecteur est principalement destiné à être utilisé par les développeur
 ## Syntaxe
 
 ```css
-:-moz-broken {}
+:-moz-broken {
+}
 ```
 
 ## Exemples
diff --git a/files/fr/web/css/_colon_-moz-loading/index.md b/files/fr/web/css/_colon_-moz-loading/index.md
index fe8faf5562f999..6ae2a32b58d241 100644
--- a/files/fr/web/css/_colon_-moz-loading/index.md
+++ b/files/fr/web/css/_colon_-moz-loading/index.md
@@ -13,7 +13,8 @@ Cette pseudo-classe est principalement destinée aux développeurs de thèmes.
 ## Syntaxe
 
 ```css
-:-moz-loading {}
+:-moz-loading {
+}
 ```
 
 ## Exemples
diff --git a/files/fr/web/css/_colon_-moz-submit-invalid/index.md b/files/fr/web/css/_colon_-moz-submit-invalid/index.md
index 912cae0dcdbb0a..c5054149726ce1 100644
--- a/files/fr/web/css/_colon_-moz-submit-invalid/index.md
+++ b/files/fr/web/css/_colon_-moz-submit-invalid/index.md
@@ -13,7 +13,8 @@ Par défaut, aucun style n'est appliqué. Vous pouvez utiliser cette pseudo-clas
 ## Syntaxe
 
 ```css
-:-moz-submit-invalid {}
+:-moz-submit-invalid {
+}
 ```
 
 ## Spécifications
diff --git a/files/fr/web/css/_colon_-moz-suppressed/index.md b/files/fr/web/css/_colon_-moz-suppressed/index.md
index 8d0ae315d2aea3..939beae28f9b5e 100644
--- a/files/fr/web/css/_colon_-moz-suppressed/index.md
+++ b/files/fr/web/css/_colon_-moz-suppressed/index.md
@@ -13,7 +13,8 @@ Ce sélecteur est principalement destiné aux développeurs de thèmes.
 ## Syntaxe
 
 ```css
-:-moz-suppressed {}
+:-moz-suppressed {
+}
 ```
 
 ## Exemple
diff --git a/files/fr/web/css/_colon_-moz-user-disabled/index.md b/files/fr/web/css/_colon_-moz-user-disabled/index.md
index 1b5780c2e14520..e3a0bdee1db082 100644
--- a/files/fr/web/css/_colon_-moz-user-disabled/index.md
+++ b/files/fr/web/css/_colon_-moz-user-disabled/index.md
@@ -13,7 +13,8 @@ Ce sélecteur est destiné principalement à une utilisation par les développeu
 ## Syntaxe
 
 ```css
-:-moz-user-disabled {}
+:-moz-user-disabled {
+}
 ```
 
 ## Exemples
diff --git a/files/fr/web/css/_colon_focus-visible/index.md b/files/fr/web/css/_colon_focus-visible/index.md
index 585baaaa05166f..86912774b8d774 100644
--- a/files/fr/web/css/_colon_focus-visible/index.md
+++ b/files/fr/web/css/_colon_focus-visible/index.md
@@ -15,7 +15,8 @@ On notera que Firefox prend en charge cette fonctionnalité via une ancienne pse
 ## Syntaxe
 
 ```css
-:focus-visible {}
+:focus-visible {
+}
 ```
 
 ## Exemples
diff --git a/files/fr/web/css/_colon_has/index.md b/files/fr/web/css/_colon_has/index.md
index 3182fd83b947a2..81669c64a7d58c 100644
--- a/files/fr/web/css/_colon_has/index.md
+++ b/files/fr/web/css/_colon_has/index.md
@@ -34,13 +34,15 @@ var test = document.querySelector("a:has(> img)");
 Dans l'exemple suivant, le sélecteur permet de cibler uniquement les éléments {{HTMLElement("a")}} qui contiennent un fils direct {{HTMLElement("img")}} :
 
 ```css
-a:has(> img) {}
+a:has(> img) {
+}
 ```
 
 Le sélecteur qui suit correspond aux éléments {{HTMLElement("h1")}} qui précèdent directement un élément {{HTMLElement("p")}} :
 
 ```css
-h1:has(+ p) {}
+h1:has(+ p) {
+}
 ```
 
 ## Spécifications
diff --git a/files/fr/web/css/_colon_host-context/index.md b/files/fr/web/css/_colon_host-context/index.md
index 078d867a500fa5..12e067a58a8fc8 100644
--- a/files/fr/web/css/_colon_host-context/index.md
+++ b/files/fr/web/css/_colon_host-context/index.md
@@ -41,8 +41,9 @@ p {
 
 ## Syntaxe
 
-```css
-:host-context( <selecteur-composite> ) {}
+```css-nolint
+:host-context(<selecteur-composite>) {
+}
 ```
 
 ## Exemples
diff --git a/files/fr/web/css/_colon_is/index.md b/files/fr/web/css/_colon_is/index.md
index c860c41b3b90b1..dfce4fafff471d 100644
--- a/files/fr/web/css/_colon_is/index.md
+++ b/files/fr/web/css/_colon_is/index.md
@@ -317,7 +317,8 @@ L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pa
 Ainsi :
 
 ```css
-.a > :-moz-any(.b, .c) {}
+.a > :-moz-any(.b, .c) {
+}
 ```
 
 sera plus lent que
diff --git a/files/fr/web/css/_colon_not/index.md b/files/fr/web/css/_colon_not/index.md
index 0e9eaa7f8ddedb..d2d58af52ab250 100644
--- a/files/fr/web/css/_colon_not/index.md
+++ b/files/fr/web/css/_colon_not/index.md
@@ -64,9 +64,7 @@ body :not(.classy, p) {
 ```html
 <p>Un peu de texte.</p>
 <p class="classy">Encore du texte.</p>
-<span>
-  Et toujours du texte.
-</span>
+<span> Et toujours du texte. </span>
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/_doublecolon_grammar-error/index.md b/files/fr/web/css/_doublecolon_grammar-error/index.md
index 4615d096d9da88..c44234c69d4e3e 100644
--- a/files/fr/web/css/_doublecolon_grammar-error/index.md
+++ b/files/fr/web/css/_doublecolon_grammar-error/index.md
@@ -30,7 +30,8 @@ Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une
 ## Syntaxe
 
 ```css
-::grammar-error {}
+::grammar-error {
+}
 ```
 
 ## Exemples
diff --git a/files/fr/web/css/_doublecolon_spelling-error/index.md b/files/fr/web/css/_doublecolon_spelling-error/index.md
index 71300c77451d75..5e77d154ebd2cb 100644
--- a/files/fr/web/css/_doublecolon_spelling-error/index.md
+++ b/files/fr/web/css/_doublecolon_spelling-error/index.md
@@ -30,7 +30,8 @@ Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une
 ## Syntaxe
 
 ```css
-::spelling-error {}
+::spelling-error {
+}
 ```
 
 ## Exemples
diff --git a/files/fr/web/css/counter/index.md b/files/fr/web/css/counter/index.md
index d1a9fb532148fd..d132da3f55d803 100644
--- a/files/fr/web/css/counter/index.md
+++ b/files/fr/web/css/counter/index.md
@@ -61,7 +61,8 @@ li {
   counter-increment: listCounter;
 }
 li::after {
-  content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman) "]";
+  content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman)
+    "]";
 }
 ```
 
diff --git a/files/fr/web/css/pointer-events/index.md b/files/fr/web/css/pointer-events/index.md
index 0b384aeb96cecb..2568e16c260e96 100644
--- a/files/fr/web/css/pointer-events/index.md
+++ b/files/fr/web/css/pointer-events/index.md
@@ -106,7 +106,8 @@ Dans l'exemple qui suit, on désactive les événements de pointeur pour le lien
 #### CSS
 
 ```css
-a[href="http://example.com"] {
+a[href="http://example.com"]
+{
   pointer-events: none;
 }
 ```
diff --git a/files/ja/learn/css/building_blocks/advanced_styling_effects/index.md b/files/ja/learn/css/building_blocks/advanced_styling_effects/index.md
index 93275e2541d5c6..39743f449e22d9 100644
--- a/files/ja/learn/css/building_blocks/advanced_styling_effects/index.md
+++ b/files/ja/learn/css/building_blocks/advanced_styling_effects/index.md
@@ -23,7 +23,10 @@ slug: Learn/CSS/Building_blocks/Advanced_styling_effects
 
 ```html
 <article class="simple">
-  <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
+  <p>
+    <strong>Warning</strong>: The thermostat on the cosmic transcender has
+    reached a critical level.
+  </p>
 </article>
 ```
 
@@ -38,11 +41,15 @@ article {
   max-width: 500px;
   padding: 10px;
   background-color: red;
-  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.25)
+  );
 }
 
 .simple {
-  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
 }
 ```
 
@@ -65,7 +72,10 @@ article {
 
 ```html hidden
 <article class="multiple">
-  <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
+  <p>
+    <strong>Warning</strong>: The thermostat on the cosmic transcender has
+    reached a critical level.
+  </p>
 </article>
 ```
 
@@ -78,16 +88,21 @@ article {
   max-width: 500px;
   padding: 10px;
   background-color: red;
-  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.25)
+  );
 }
 
 .multiple {
-  box-shadow: 1px 1px 1px black,
-              2px 2px 1px black,
-              3px 3px 1px red,
-              4px 4px 1px red,
-              5px 5px 1px black,
-              6px 6px 1px black;
+  box-shadow:
+    1px 1px 1px black,
+    2px 2px 1px black,
+    3px 3px 1px red,
+    4px 4px 1px red,
+    5px 5px 1px black,
+    6px 6px 1px black;
 }
 ```
 
@@ -115,19 +130,22 @@ button {
   border-radius: 10px;
   border: none;
   background-image: linear-gradient(to bottom right, #777, #ddd);
-  box-shadow: 1px 1px 1px black,
-              inset 2px 3px 5px rgba(0,0,0,0.3),
-              inset -2px -3px 5px rgba(255,255,255,0.5);
+  box-shadow:
+    1px 1px 1px black,
+    inset 2px 3px 5px rgba(0, 0, 0, 0.3),
+    inset -2px -3px 5px rgba(255, 255, 255, 0.5);
 }
 
-button:focus, button:hover {
+button:focus,
+button:hover {
   background-image: linear-gradient(to bottom right, #888, #eee);
 }
 
 button:active {
-  box-shadow: inset 2px 2px 1px black,
-              inset 2px 3px 5px rgba(0,0,0,0.3),
-              inset -2px -3px 5px rgba(255,255,255,0.5);
+  box-shadow:
+    inset 2px 2px 1px black,
+    inset 2px 3px 5px rgba(0, 0, 0, 0.3),
+    inset -2px -3px 5px rgba(255, 255, 255, 0.5);
 }
 ```
 
@@ -166,12 +184,12 @@ p {
 }
 
 .filter {
-  -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
-  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
+  -webkit-filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.7));
+  filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.7));
 }
 
 .box-shadow {
-  box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
+  box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.7);
 }
 ```
 
@@ -208,10 +226,8 @@ CSS でブレンドモードを使用する次の 2 つのプロパティがあ
 ここでも、これをよりよく理解できるように、いくつかの例を見てみましょう。 まず、{{cssxref("background-blend-mode")}} です — ここでは次のいくつかの簡単な {{htmlelement("div")}} を示すことで、オリジナルとブレンドバージョンを比較できます。
 
 ```html
-<div>
-</div>
-<div class="multiply">
-</div>
+<div></div>
+<div class="multiply"></div>
 ```
 
 次にいくつかの CSS です — `<div>` に 1 つの背景画像と緑色の背景色を追加しています。
@@ -243,20 +259,14 @@ div {
 ```html
 <article>
   No mix blend mode
-  <div>
-
-  </div>
-  <div>
-  </div>
+  <div></div>
+  <div></div>
 </article>
 
 <article>
   Multiply mix
-  <div class="multiply-mix">
-
-  </div>
-  <div>
-  </div>
+  <div class="multiply-mix"></div>
+  <div></div>
 </article>
 ```
 
@@ -331,13 +341,24 @@ article div:last-child {
 間違えた場合は、_Reset_ ボタンを使用して例をいつでもリセットできます。
 
 ```html hidden
-<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
+<div
+  class="body-wrapper"
+  style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
   <h2>HTML Input</h2>
-  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me">
-</div></textarea>
+  <textarea
+    id="code"
+    class="html-input"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
+<div class="style-me">
+</div></textarea
+  >
 
   <h2>CSS Input</h2>
-  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me {
+  <textarea
+    id="code"
+    class="css-input"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
+.style-me {
   width: 280px;
   height: 130px;
   padding: 10px;
@@ -346,12 +367,19 @@ article div:last-child {
   background-color: red;
   background: url(colorful-heart.png) no-repeat center 20px,
               linear-gradient(to bottom right, #f33, #a33);
-} </textarea>
+} </textarea
+  >
 
   <h2>Output</h2>
-  <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div>
+  <div
+    class="output"
+    style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div>
   <div class="controls">
-    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
+    <input
+      id="reset"
+      type="button"
+      value="Reset"
+      style="margin: 10px 10px 0 0;" />
   </div>
 </div>
 ```
@@ -364,8 +392,8 @@ var htmlCode = htmlInput.value;
 var cssCode = cssInput.value;
 var output = document.querySelector(".output");
 
-var styleElem = document.createElement('style');
-var headElem = document.querySelector('head');
+var styleElem = document.createElement("style");
+var headElem = document.querySelector("head");
 headElem.appendChild(styleElem);
 
 function drawOutput() {
@@ -373,7 +401,7 @@ function drawOutput() {
   styleElem.textContent = cssInput.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   htmlInput.value = htmlCode;
   cssInput.value = cssCode;
   drawOutput();
diff --git a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.md
index 72645c43006c3d..f26aa4dbecd481 100644
--- a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -17,8 +17,14 @@ CSS の {{cssxref("background")}} プロパティは、このレッスンで説
 
 ```css
 .box {
-  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
-  url(big-star.png) center no-repeat, rebeccapurple;
+  background:
+    linear-gradient(
+        105deg,
+        rgba(255, 255, 255, 0.2) 39%,
+        rgba(51, 56, 57, 1) 96%
+      ) center center / 400px 200px no-repeat,
+    url(big-star.png) center no-repeat,
+    rebeccapurple;
 }
 ```
 
@@ -156,9 +162,12 @@ CSS の {{cssxref("background")}} プロパティは、このレッスンで説
 他の`background-*`プロパティも、`background-image`と同じ方法でコンマ区切りの値を持つことができます:
 
 ```css
-background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-image: url(image1.png), url(image2.png), url(image3.png),
+  url(image1.png);
 background-repeat: no-repeat, repeat-x, repeat;
-background-position: 10px 20px,  top right;
+background-position:
+  10px 20px,
+  top right;
 ```
 
 プロパティに指定した複数のプロパティ値は、他のプロパティの同じ位置にある値と対応します。上の例で、`image1`の`background-repeat`値は`no-repeat`です。では、プロパティごとに値の個数が異なるとどうなるでしょうか？答えは、個数が少ない値が繰り返し使われる、ということです。上の例では、4 つの背景画像がありますが、2 つの `background-position` の値しかありません。最初の 2 つの位置の値は対応する位置の画像に適用され、その後は繰り返されます。つまり、`image3`には 1 番目、`image4`には 2 番目の値がふたたび使われます。
diff --git a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.md
index 8000c02b22756e..156982316e9740 100644
--- a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -182,13 +182,13 @@ CSS の一括指定プロパティ [`all`](/ja/docs/Web/CSS/all) を使用して
 
 次の表でわかりやすいいくつかの例を示します。これらを試してみて、なぜ詳細度が与えられるのかをしっかり理解してください。セレクターについてはまだ詳しく説明していませんが、MDN の [CSS セレクター](/ja/docs/Web/CSS/CSS_Selectors)で詳細を参照することができます。
 
-| セレクター                                  | ID | クラス | 要素 | 詳細度の合計 |
-| ----------------------------------------- | ----------- | ------- | -------- | ----------------- |
-| `h1`                                      | 0           | 0       | 1        | 0-0-1             |
-| `h1 + p::first-letter`                    | 0           | 0       | 3        | 0-0-3             |
-| `li > a[href*="en-US"] > .inline-warning` | 0           | 2       | 2        | 0-2-2             |
-| `#identifier`                             | 1           | 0       | 0        | 1-0-0             |
-| `button:not(#mainBtn, .cta`)              | 1           | 0       | 1        | 1-0-1             |
+| セレクター                                | ID  | クラス | 要素 | 詳細度の合計 |
+| ----------------------------------------- | --- | ------ | ---- | ------------ |
+| `h1`                                      | 0   | 0      | 1    | 0-0-1        |
+| `h1 + p::first-letter`                    | 0   | 0      | 3    | 0-0-3        |
+| `li > a[href*="en-US"] > .inline-warning` | 0   | 2      | 2    | 0-2-2        |
+| `#identifier`                             | 1   | 0      | 0    | 1-0-0        |
+| `button:not(#mainBtn, .cta`)              | 1   | 0      | 1    | 1-0-1        |
 
 先に進む前に、実例を見てみましょう。
 
diff --git a/files/ja/learn/css/building_blocks/cascade_layers/index.md b/files/ja/learn/css/building_blocks/cascade_layers/index.md
index 970070852aa0e0..86cf983a1124bd 100644
--- a/files/ja/learn/css/building_blocks/cascade_layers/index.md
+++ b/files/ja/learn/css/building_blocks/cascade_layers/index.md
@@ -77,7 +77,7 @@ CSS の C は "Cascading" （カスケード）の略です。スタイルが連
 
 オリジンの優先順位は、常にセレクターの詳細度よりも優先されます。要素プロパティが複数のオリジンで通常のスタイル宣言でスタイル設定されている場合、作成者スタイルシートは、ユーザーまたはユーサーエージェントスタイルシートで宣言された冗長な通常プロパティが常に優先されます。スタイルが重要な場合、 ユーザーエージェントスタイルシートは、常に作成者スタイルやユーザースタイルよりも優先されます。カスケードオリジンの優先順位は、オリジン間の詳細度競合が決して起こらないことを確実にします。
 
-移動する前にもう一つメモしておくと、現れる順番、つまり_近接性は、優先されるオリジンで競合する宣言が同じ詳細度を持つ場合にのみ関係するようになります。
+移動する前にもう一つメモしておくと、現れる順番、つまり近接性は、優先されるオリジンで競合する宣言が同じ詳細度を持つ場合にのみ関係するようになります。
 
 ## カスケードレイヤーの概要
 
@@ -97,7 +97,7 @@ CSS の C は "Cascading" （カスケード）の略です。スタイルが連
 
 ### カスケードレイヤーが解決できる課題
 
-大規模なコードベースでは、複数のチーム、コンポーネントライブラリー、フレームワーク、サードパーティからスタイルがもたらされることがあります。どんなに多くのスタイルシートが記載されていても、これらのスタイルはすべて単一のオリジンである_作成者スタイルシートでカスケードされます。
+大規模なコードベースでは、複数のチーム、コンポーネントライブラリー、フレームワーク、サードパーティからスタイルがもたらされることがあります。どんなに多くのスタイルシートが記載されていても、これらのスタイルはすべて単一のオリジンである作成者スタイルシートでカスケードされます。
 
 多くのソースから提供されたスタイルが一緒にカスケードされること、特に一緒に作業していないチームから提供されたスタイルが一緒にカスケードされることは、問題を引き起こす可能性があります。チームごとに異なる手法を持っているかもしれません。あるチームは詳細度を縮小することをベストプラクティスとし、別のチームは各セレクターに `id` を含めることを標準仕様としているかもしれません。
 
diff --git a/files/ja/learn/css/building_blocks/images_media_form_elements/index.md b/files/ja/learn/css/building_blocks/images_media_form_elements/index.md
index f7db7d661eb6a9..fc8f3ee4bede08 100644
--- a/files/ja/learn/css/building_blocks/images_media_form_elements/index.md
+++ b/files/ja/learn/css/building_blocks/images_media_form_elements/index.md
@@ -96,8 +96,8 @@ button,
 input,
 select,
 textarea {
-  font-family : inherit;
-  font-size : 100%;
+  font-family: inherit;
+  font-size: 100%;
 }
 ```
 
@@ -140,7 +140,8 @@ textarea {
   font-family: inherit;
   font-size: 100%;
   box-sizing: border-box;
-  padding: 0; margin: 0;
+  padding: 0;
+  margin: 0;
 }
 
 textarea {
diff --git a/files/ja/learn/css/building_blocks/organizing/index.md b/files/ja/learn/css/building_blocks/organizing/index.md
index e80f331744f99b..640b2b8107ba96 100644
--- a/files/ja/learn/css/building_blocks/organizing/index.md
+++ b/files/ja/learn/css/building_blocks/organizing/index.md
@@ -48,8 +48,13 @@ slug: Learn/CSS/Building_blocks/Organizing
 CSS をフォーマットする方法には、いくつかの方法を見かけるでしょう。開発者によっては、次のようにすべてのルールを 1 行に配置しています。
 
 ```css
-.box { background-color: #567895; }
-h2 { background-color: black; color: white; }
+.box {
+  background-color: #567895;
+}
+h2 {
+  background-color: black;
+  color: white;
+}
 ```
 
 また、すべてを新しい行に分割したがる開発者もいます。
@@ -121,13 +126,24 @@ CSS に書かれていることの多くは自明なことなので、いちい
 ```css
 /* || 一般的なスタイル */
 
-body { /* … */ }
+body {
+  /* … */
+}
 
-h1, h2, h3, h4 { /* … */ }
+h1,
+h2,
+h3,
+h4 {
+  /* … */
+}
 
-ul { /* … */ }
+ul {
+  /* … */
+}
 
-blockquote { /* … */ }
+blockquote {
+  /* … */
+}
 ```
 
 この部分の後で、いくつかのユーティリティクラスを定義することができます。例えば、フレックスアイテムとして表示するリストや他の方法で表示するリストの既定リストスタイルを削除するクラスなどです。多くの異なる要素に適用することが分かっているいくつかのスタイル指定がある場合、この部分に記述することができます。
@@ -149,9 +165,13 @@ blockquote { /* … */ }
 ```css
 /* || サイト全体 */
 
-.main-nav { /* … */ }
+.main-nav {
+  /* … */
+}
 
-.logo { /* … */ }
+.logo {
+  /* … */
+}
 ```
 
 最後に、特定のものを使用するための CSS を、それらが使用されるコンテキスト、ページ、あるいはコンポーネントごとに分けて記載します。
@@ -159,9 +179,13 @@ blockquote { /* … */ }
 ```css
 /* || 店のページ */
 
-.product-listing { /* … */ }
+.product-listing {
+  /* … */
+}
 
-.product-box { /* … */ }
+.product-box {
+  /* … */
+}
 ```
 
 このように物事を順番に並べることで、少なくともスタイルシートのどの部分に変更したいものがあるのかを知ることができます。
@@ -221,7 +245,7 @@ CSS を記述するための独自のルールを考え出す代わりに、コ
 }
 
 .comment .content {
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
 
 .list-item {
@@ -231,7 +255,7 @@ CSS を記述するための独自のルールを考え出す代わりに、コ
 }
 
 .list-item .content {
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
 ```
 
@@ -244,7 +268,7 @@ OOCSS では、`media` と呼ばれる 1 つのパターンを作成して、両
 }
 
 .media .content {
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
 
 .comment img {
@@ -285,9 +309,7 @@ BEM とは、 Block Element Modifier の略です。 BEM では、ブロック
 ```html
 <form class="form form--theme-xmas form--simple">
   <input class="form__input" type="text" />
-  <input
-    class="form__submit form__submit--disabled"
-    type="submit" />
+  <input class="form__submit form__submit--disabled" type="submit" />
 </form>
 ```
 
diff --git a/files/ja/learn/css/building_blocks/overflowing_content/index.md b/files/ja/learn/css/building_blocks/overflowing_content/index.md
index 65f81c229861a2..838ab910347e71 100644
--- a/files/ja/learn/css/building_blocks/overflowing_content/index.md
+++ b/files/ja/learn/css/building_blocks/overflowing_content/index.md
@@ -5,7 +5,7 @@ slug: Learn/CSS/Building_blocks/Overflowing_content
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
 
-このレッスンでは、CSS のもう 1 つの重要な概念である **オーバーフロー（overflow）を見ていきます。オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。このガイドでは、その詳細とそれらについてどのように対処するかを学びます。
+このレッスンでは、CSS のもう 1 つの重要な概念である オーバーフロー（overflow）を見ていきます。オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。このガイドでは、その詳細とそれらについてどのように対処するかを学びます。
 
 | 前提条件: | 基本的なコンピューターリテラシー、[基本的なソフトウェアがインストールされている](/ja/Learn/Getting_started_with_the_web/Installing_basic_software)こと、[ファイルの扱い](/ja/Learn/Getting_started_with_the_web/Dealing_with_files)、HTML の基本（[HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)）および CSS に関するアイデア（[CSS の第一歩](/ja/docs/Learn/CSS/First_steps)）に関する基本的な知識を得ている。 |
 | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/files/ja/learn/css/building_blocks/selectors/combinators/index.md b/files/ja/learn/css/building_blocks/selectors/combinators/index.md
index d5518fdb2a1ba3..7adaf613eca33f 100644
--- a/files/ja/learn/css/building_blocks/selectors/combinators/index.md
+++ b/files/ja/learn/css/building_blocks/selectors/combinators/index.md
@@ -70,7 +70,8 @@ p ~ img
 ドキュメントの一部を選択するために、前のレッスンで発見したセレクタをコンビネータと組み合わせることができます。 たとえば、`<ul>` の直接の子であるクラス "a"のリストアイテムを選択する場合、次のように使用できます。
 
 ```css
-ul > li[class="a"]  {  }
+ul > li[class="a"] {
+}
 ```
 
 ただし、文書の特定の部分を選択する大きなセレクタのリストを作成する際には注意が必要です。マークアップの中でその要素の位置を特定してセレクタを作成しているので、CSS ルールを再利用するのは難しいでしょう。
diff --git a/files/ja/learn/css/building_blocks/selectors/index.md b/files/ja/learn/css/building_blocks/selectors/index.md
index d94529c8451d4b..592b589566e9a6 100644
--- a/files/ja/learn/css/building_blocks/selectors/index.md
+++ b/files/ja/learn/css/building_blocks/selectors/index.md
@@ -10,8 +10,8 @@ l10n:
 {{Glossary("CSS")}}では、セレクター (selector) を使って装飾したい {{glossary("HTML")}} 要素を選択します。CSS セレクターは種類豊富なので、装飾したい要素を細かく選択できます。この記事では、さまざまな種類のセレクターについて、その機能を詳しく確認します。
 
 | 前提条件: | 基本的なコンピューターリテラシー、[基本的なソフトウェアがインストールされている](/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software)こと、[ファイルの扱い](/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files)、HTML の基本 ([HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)) および CSS に関するアイデア ([CSS の第一歩](/ja/docs/Learn/CSS/First_steps)) に関する基本的な知識を得ている。 |
-| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 目的:     | CSS セレクターがどのように機能するかを学ぶ。                                                                                                                                                                                                                                                                                                                                                                           |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 目的:     | CSS セレクターがどのように機能するかを学ぶ。                                                                                                                                                                                                                                                                                                                                                                                     |
 
 ## セレクターとは
 
@@ -39,7 +39,7 @@ h1 {
 
 カンマ区切りでセレクターリストにもできます。
 
-```css
+```css-nolint
 h1, .special {
   color: blue;
 }
@@ -75,7 +75,8 @@ h1 {
 ただし結合した場合は、ルール全体が無効とみなされ、`h1` も装飾されません。
 
 ```css
-h1, ..special {
+h1,
+..special {
   color: blue;
 }
 ```
@@ -86,22 +87,25 @@ h1, ..special {
 
 ### 要素・クラス・ID によるセレクター
 
- `<h1>` のような HTML 要素を選択するセレクターがこのグループに属します。
+`<h1>` のような HTML 要素を選択するセレクターがこのグループに属します。
 
 ```css
-h1 { }
+h1 {
+}
 ```
 
 クラスを選択するセレクターも同様です。
 
 ```css
-.box { }
+.box {
+}
 ```
 
 あとは ID です。
 
 ```css
-#unique { }
+#unique {
+}
 ```
 
 ### 属性によるセレクター
@@ -109,13 +113,16 @@ h1 { }
 特定の属性を持つ要素を選択するセレクターがこのグループに属します。
 
 ```css
-a[title] { }
+a[title] {
+}
 ```
 
 特定の属性を持ち、かつ、特定の属性値を持つ要素を選択するセレクターもあります。
 
 ```css
-a[href="https://example.com"] { }
+a[href="https://example.com"]
+{
+}
 ```
 
 ### 擬似クラスおよび疑似要素によるセレクター
@@ -123,13 +130,15 @@ a[href="https://example.com"] { }
 疑似クラス (pseudo-class) 、つまり特定の状態にある要素を選択するセレクターがこのグループに属します。たとえば、`:hover` 擬似クラスはマウスポインターがホバーしているときにのみ要素を選択します。
 
 ```css
-a:hover { }
+a:hover {
+}
 ```
 
 擬似要素 (pseudo-element) 、つまり要素自体ではなく要素の特定の部分を選択するセレクターもあります。たとえば、`::first-line` は要素（以下の例では `<p>`）内の最初の行をまるで `<span>` でラップしてスタイルしたかのように動作します。
 
 ```css
-p::first-line { }
+p::first-line {
+}
 ```
 
 ### 結合子
@@ -137,7 +146,8 @@ p::first-line { }
 最後のグループのセレクターは、セレクター同士を組み合わせて文書内のターゲット要素を選択します。たとえば、以下の例では子結合子（子コンビネーター、child combinator）(`>`) によって `<article>` 要素の直接の子である段落を選択します。
 
 ```css
-article > p { }
+article > p {
+}
 ```
 
 ## 次のステップ
@@ -150,8 +160,8 @@ article > p { }
 
 以下の表で使用可能な各セレクターの概要と、それぞれの使い方を示すガイド内ページへのリンクを紹介します。そこには各セレクターのブラウザーサポートを確認できる MDN ページへのリンクもあります。セレクターを検索したり一般的に CSS を体験するときに、ここに戻ってきて参照できます。
 
-| セレクター                                                     | 例                  | CSS チュートリアル                                                                                                            |
-| -------------------------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| セレクター                                                     | 例                  | CSS チュートリアル                                                                                                   |
+| -------------------------------------------------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------- |
 | [要素セレクター](/ja/docs/Web/CSS/Type_selectors)              | `h1 { }`            | [要素セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors)            |
 | [全称セレクター](/ja/docs/Web/CSS/Universal_selectors)         | `* { }`             | [全称セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector)    |
 | [クラスセレクター](/ja/docs/Web/CSS/Class_selectors)           | `.box { }`          | [クラスセレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors)         |
diff --git a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
index 1d5925dd26296f..d0d3c889ab31ae 100644
--- a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
+++ b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
@@ -71,7 +71,7 @@ slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
 最初の段落の最初の行を太字にしたい場合は `:first-child` 、 `::first-line` セレクターとセレクターをチェーンすることができます。前のライブ例を編集して、次の CSS を使用するようにしてください。\<article>要素内にある最初の `<p>` 要素の最初の行を選択したいと言っています。
 
 ```css
- article p:first-child::first-line {
+article p:first-child::first-line {
   font-size: 120%;
   font-weight: bold;
 }
@@ -105,70 +105,70 @@ CSS からテキストの文字列を挿入することは、実際には Web 
 
 ### 疑似クラス
 
-| セレクタ                                             | 説明                                                                                                                                                                                                                                                                                         |
-| ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{cssxref(":active")}}                         | ユーザーが要素をアクティブ化（たとえばクリック）すると一致します。                                                                                                                                                                                                                           |
-| {{cssxref(":any-link")}}                     | リンクの `:link` と `:visited` 状態の両方に一致します。                                                                                                                                                                                                                                      |
-| {{cssxref(":blank")}}                         | 入力値が空の[`<input>` 要素に](/ja/docs/Web/HTML/Element/input)一致します。                                                                                                                                                                                                                  |
-| {{cssxref(":checked")}}                     | 選択状態のラジオボタンまたはチェックボックスに一致します。                                                                                                                                                                                                                                   |
-| {{cssxref(":current")}}                     | 現在表示されている要素または要素の祖先と一致します。                                                                                                                                                                                                                                         |
-| {{cssxref(":default")}}                     | 類似要素のセットの中でデフォルトである 1 つ以上の UI 要素に一致します。                                                                                                                                                                                                                      |
-| {{cssxref(":dir")}}                             | 方向性（HTML [`dir`](/ja/docs/Web/HTML/Global_attributes/dir) 属性または CSS [`direction`](/ja/docs/Web/CSS/direction) プロパティの値）に基づいて要素を選択します。                                                                                                                          |
-| {{cssxref(":disabled")}}                     | 無効な状態のユーザーインターフェイス要素に一致します。                                                                                                                                                                                                                                       |
-| {{cssxref(":empty")}}                         | オプションの空白以外の子を持たない要素に一致します。                                                                                                                                                                                                                                         |
-| {{cssxref(":enabled")}}                     | 有効な状態のユーザーインターフェイス要素に一致します。                                                                                                                                                                                                                                       |
-| {{cssxref(":first")}}                         | [ページ媒体](/ja/docs/Web/CSS/Paged_Media)では、最初のページと一致します。                                                                                                                                                                                                                   |
-| {{cssxref(":first-child")}}                 | 兄弟の中で最初にある要素に一致します。                                                                                                                                                                                                                                                       |
-| {{cssxref(":first-of-type")}}             | 兄弟の中で最初にある特定のタイプの要素に一致します。                                                                                                                                                                                                                                         |
-| {{cssxref(":focus")}}                         | 要素にフォーカスがあるときに一致します。                                                                                                                                                                                                                                                     |
-| {{cssxref(":focus-visible")}}             | 要素にフォーカスがあり、そのフォーカスがユーザーに表示される場合に一致します。                                                                                                                                                                                                               |
-| {{cssxref(":focus-within")}}                 | フォーカスを持つ要素と、フォーカスを持つ子孫を持つ要素に一致します。                                                                                                                                                                                                                         |
-| {{cssxref(":future")}}                         | 現在の要素の後の要素に一致します。                                                                                                                                                                                                                                                           |
-| {{cssxref(":hover")}}                         | ユーザーが要素にカーソルを合わせると一致します。                                                                                                                                                                                                                                             |
-| {{cssxref(":indeterminate")}}             | 値が不確定な状態の UI 要素、通常は[チェックボックスに](/ja/docs/Web/HTML/Element/input/checkbox)一致し[ます](/ja/docs/Web/HTML/Element/input/checkbox)。                                                                                                                                     |
-| {{cssxref(":in-range")}}                     | 範囲制限を持つ要素で、要素の値が範囲内にある場合にマッチします。                                                                                                                                                                                                                             |
-| {{cssxref(":invalid")}}                     | 無効な状態の `<input>` のような要素に一致します。                                                                                                                                                                                                                                            |
-| {{cssxref(":lang")}}                         | 言語（HTML [lang](/ja/docs/Web/HTML/Global_attributes/lang)属性の値）に基づいて要素を[照合し](/ja/docs/Web/HTML/Global_attributes/lang)ます。                                                                                                                                                |
-| {{cssxref(":last-child")}}                 | 兄弟の中で最後にある要素に一致します。                                                                                                                                                                                                                                                       |
-| {{cssxref(":last-of-type")}}                 | 兄弟の中で最後にある特定のタイプの要素に一致します。                                                                                                                                                                                                                                         |
-| {{cssxref(":left")}}                         | [ページ媒体](/ja/docs/Web/CSS/CSS_Pages)では、左側のページと一致します。                                                                                                                                                                                                                     |
-| {{cssxref(":link")}}                         | 未訪問のリンクに一致します。                                                                                                                                                                                                                                                                 |
-| {{cssxref(":local-link")}}                 | 現在のドキュメントと同じサイトにあるページを指すリンクに一致します。                                                                                                                                                                                                                         |
-| {{cssxref(":is", ":is()")}}                 | 渡されたセレクターリスト内の任意のセレクターに一致します。                                                                                                                                                                                                                                   |
-| {{cssxref(":not")}}                             | このセレクターに値として渡されるセレクターで一致しないものと一致します。                                                                                                                                                                                                                     |
-| {{cssxref(":nth-child")}}             | 兄弟のリストの要素に一致します — 兄弟は*an+b*の形式の式で一致します（たとえば、2n + 1 は 1、3、5、7 番目などの要素に一致します。すべてが奇数です）。                                                                                                                                         |
-| {{cssxref(":nth-of-type")}}         | 特定のタイプの兄弟（ `<p>` 要素など）のリストの要素に一致します — 兄弟は*、an+b*という形式の式で一致します（たとえば、2n + 1 は、その要素のタイプの 1、3、5 、7 番目などに一致します。すべて奇数です。）                                                                                     |
-| {{cssxref(":nth-last-child")}}     | 兄弟のリストの要素を末尾から逆に数えて一致させます。兄弟は*an+b*の形式の式で一致します（たとえば、2n + 1 はシーケンスの最後の要素、次にその 2 つ前の要素、次にその 2 つ前の要素などと一致します。最後から数えてすべての奇数の要素。）                                                        |
-| {{cssxref(":nth-last-of-type")}} | 特定のタイプの兄弟のリスト（ `<p>` 要素など）の要素を最後から逆に数えて一致させます。兄弟は*、an+b*という形式の式で一致します（たとえば、2n + 1 は、シーケンス内のそのタイプの最後の要素、次にその 2 つ前の要素、次にその 2 つ前の要素などと一致します。最後から数えてすべての奇数の要素。） |
-| {{cssxref(":only-child")}}                 | 兄弟がない要素に一致します。                                                                                                                                                                                                                                                                 |
-| {{cssxref(":only-of-type")}}                 | 兄弟間でそのタイプの唯一の要素である要素に一致します。                                                                                                                                                                                                                                       |
-| {{cssxref(":optional")}}                     | 不要なフォーム要素に一致します。                                                                                                                                                                                                                                                             |
-| {{cssxref(":out-of-range")}}                 | 範囲制限を持つ要素で、要素の値が範囲外にある場合にマッチします。                                                                                                                                                                                                                             |
-| {{cssxref(":past")}}                         | 現在の要素より前の要素に一致します。                                                                                                                                                                                                                                                         |
-| {{cssxref(":placeholder-shown")}}         | プレースホルダーテキストを表示している input 要素に一致します。                                                                                                                                                                                                                              |
-| {{cssxref(":playing")}}                     | 「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「再生中」のときに一致します。                                                                                                                                                                           |
-| {{cssxref(":paused")}}                         | 「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「一時停止」されている場合に一致します。                                                                                                                                                                 |
-| {{cssxref(":read-only")}}                     | ユーザーが変更できない要素と一致します。                                                                                                                                                                                                                                                     |
-| {{cssxref(":read-write")}}                 | ユーザーが変更可能な要素と一致します。                                                                                                                                                                                                                                                       |
-| {{cssxref(":required")}}                     | 必要なフォーム要素に一致します。                                                                                                                                                                                                                                                             |
-| {{cssxref(":right")}}                         | [ページ媒体](/ja/docs/Web/CSS/CSS_Pages)では、右側のページに一致します。                                                                                                                                                                                                                     |
-| {{cssxref(":root")}}                         | ドキュメントのルートである要素に一致します。                                                                                                                                                                                                                                                 |
-| {{cssxref(":scope")}}                         | スコープ要素であるすべての要素に一致します。                                                                                                                                                                                                                                                 |
-| {{cssxref(":valid")}}                         | `<input>` 要素などで要素が有効な状態のときに一致します。                                                                                                                                                                                                                                     |
-| {{cssxref(":target")}}                         | 現在の URL のターゲットである場合（つまり、現在の[URL フラグメントに](https://en.wikipedia.org/wiki/Fragment_identifier)一致する ID を持つ場合）、要素に一致し[ます](https://en.wikipedia.org/wiki/Fragment_identifier)。                                                                    |
-| {{cssxref(":visited")}}                     | 訪問したリンクに一致します。                                                                                                                                                                                                                                                                 |
+| セレクタ                          | 説明                                                                                                                                                                                                                                                                                         |
+| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{cssxref(":active")}}            | ユーザーが要素をアクティブ化（たとえばクリック）すると一致します。                                                                                                                                                                                                                           |
+| {{cssxref(":any-link")}}          | リンクの `:link` と `:visited` 状態の両方に一致します。                                                                                                                                                                                                                                      |
+| {{cssxref(":blank")}}             | 入力値が空の[`<input>` 要素に](/ja/docs/Web/HTML/Element/input)一致します。                                                                                                                                                                                                                  |
+| {{cssxref(":checked")}}           | 選択状態のラジオボタンまたはチェックボックスに一致します。                                                                                                                                                                                                                                   |
+| {{cssxref(":current")}}           | 現在表示されている要素または要素の祖先と一致します。                                                                                                                                                                                                                                         |
+| {{cssxref(":default")}}           | 類似要素のセットの中でデフォルトである 1 つ以上の UI 要素に一致します。                                                                                                                                                                                                                      |
+| {{cssxref(":dir")}}               | 方向性（HTML [`dir`](/ja/docs/Web/HTML/Global_attributes/dir) 属性または CSS [`direction`](/ja/docs/Web/CSS/direction) プロパティの値）に基づいて要素を選択します。                                                                                                                          |
+| {{cssxref(":disabled")}}          | 無効な状態のユーザーインターフェイス要素に一致します。                                                                                                                                                                                                                                       |
+| {{cssxref(":empty")}}             | オプションの空白以外の子を持たない要素に一致します。                                                                                                                                                                                                                                         |
+| {{cssxref(":enabled")}}           | 有効な状態のユーザーインターフェイス要素に一致します。                                                                                                                                                                                                                                       |
+| {{cssxref(":first")}}             | [ページ媒体](/ja/docs/Web/CSS/Paged_Media)では、最初のページと一致します。                                                                                                                                                                                                                   |
+| {{cssxref(":first-child")}}       | 兄弟の中で最初にある要素に一致します。                                                                                                                                                                                                                                                       |
+| {{cssxref(":first-of-type")}}     | 兄弟の中で最初にある特定のタイプの要素に一致します。                                                                                                                                                                                                                                         |
+| {{cssxref(":focus")}}             | 要素にフォーカスがあるときに一致します。                                                                                                                                                                                                                                                     |
+| {{cssxref(":focus-visible")}}     | 要素にフォーカスがあり、そのフォーカスがユーザーに表示される場合に一致します。                                                                                                                                                                                                               |
+| {{cssxref(":focus-within")}}      | フォーカスを持つ要素と、フォーカスを持つ子孫を持つ要素に一致します。                                                                                                                                                                                                                         |
+| {{cssxref(":future")}}            | 現在の要素の後の要素に一致します。                                                                                                                                                                                                                                                           |
+| {{cssxref(":hover")}}             | ユーザーが要素にカーソルを合わせると一致します。                                                                                                                                                                                                                                             |
+| {{cssxref(":indeterminate")}}     | 値が不確定な状態の UI 要素、通常は[チェックボックスに](/ja/docs/Web/HTML/Element/input/checkbox)一致し[ます](/ja/docs/Web/HTML/Element/input/checkbox)。                                                                                                                                     |
+| {{cssxref(":in-range")}}          | 範囲制限を持つ要素で、要素の値が範囲内にある場合にマッチします。                                                                                                                                                                                                                             |
+| {{cssxref(":invalid")}}           | 無効な状態の `<input>` のような要素に一致します。                                                                                                                                                                                                                                            |
+| {{cssxref(":lang")}}              | 言語（HTML [lang](/ja/docs/Web/HTML/Global_attributes/lang)属性の値）に基づいて要素を[照合し](/ja/docs/Web/HTML/Global_attributes/lang)ます。                                                                                                                                                |
+| {{cssxref(":last-child")}}        | 兄弟の中で最後にある要素に一致します。                                                                                                                                                                                                                                                       |
+| {{cssxref(":last-of-type")}}      | 兄弟の中で最後にある特定のタイプの要素に一致します。                                                                                                                                                                                                                                         |
+| {{cssxref(":left")}}              | [ページ媒体](/ja/docs/Web/CSS/CSS_Pages)では、左側のページと一致します。                                                                                                                                                                                                                     |
+| {{cssxref(":link")}}              | 未訪問のリンクに一致します。                                                                                                                                                                                                                                                                 |
+| {{cssxref(":local-link")}}        | 現在のドキュメントと同じサイトにあるページを指すリンクに一致します。                                                                                                                                                                                                                         |
+| {{cssxref(":is", ":is()")}}       | 渡されたセレクターリスト内の任意のセレクターに一致します。                                                                                                                                                                                                                                   |
+| {{cssxref(":not")}}               | このセレクターに値として渡されるセレクターで一致しないものと一致します。                                                                                                                                                                                                                     |
+| {{cssxref(":nth-child")}}         | 兄弟のリストの要素に一致します — 兄弟は*an+b*の形式の式で一致します（たとえば、2n + 1 は 1、3、5、7 番目などの要素に一致します。すべてが奇数です）。                                                                                                                                         |
+| {{cssxref(":nth-of-type")}}       | 特定のタイプの兄弟（ `<p>` 要素など）のリストの要素に一致します — 兄弟は*、an+b*という形式の式で一致します（たとえば、2n + 1 は、その要素のタイプの 1、3、5 、7 番目などに一致します。すべて奇数です。）                                                                                     |
+| {{cssxref(":nth-last-child")}}    | 兄弟のリストの要素を末尾から逆に数えて一致させます。兄弟は*an+b*の形式の式で一致します（たとえば、2n + 1 はシーケンスの最後の要素、次にその 2 つ前の要素、次にその 2 つ前の要素などと一致します。最後から数えてすべての奇数の要素。）                                                        |
+| {{cssxref(":nth-last-of-type")}}  | 特定のタイプの兄弟のリスト（ `<p>` 要素など）の要素を最後から逆に数えて一致させます。兄弟は*、an+b*という形式の式で一致します（たとえば、2n + 1 は、シーケンス内のそのタイプの最後の要素、次にその 2 つ前の要素、次にその 2 つ前の要素などと一致します。最後から数えてすべての奇数の要素。） |
+| {{cssxref(":only-child")}}        | 兄弟がない要素に一致します。                                                                                                                                                                                                                                                                 |
+| {{cssxref(":only-of-type")}}      | 兄弟間でそのタイプの唯一の要素である要素に一致します。                                                                                                                                                                                                                                       |
+| {{cssxref(":optional")}}          | 不要なフォーム要素に一致します。                                                                                                                                                                                                                                                             |
+| {{cssxref(":out-of-range")}}      | 範囲制限を持つ要素で、要素の値が範囲外にある場合にマッチします。                                                                                                                                                                                                                             |
+| {{cssxref(":past")}}              | 現在の要素より前の要素に一致します。                                                                                                                                                                                                                                                         |
+| {{cssxref(":placeholder-shown")}} | プレースホルダーテキストを表示している input 要素に一致します。                                                                                                                                                                                                                              |
+| {{cssxref(":playing")}}           | 「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「再生中」のときに一致します。                                                                                                                                                                           |
+| {{cssxref(":paused")}}            | 「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「一時停止」されている場合に一致します。                                                                                                                                                                 |
+| {{cssxref(":read-only")}}         | ユーザーが変更できない要素と一致します。                                                                                                                                                                                                                                                     |
+| {{cssxref(":read-write")}}        | ユーザーが変更可能な要素と一致します。                                                                                                                                                                                                                                                       |
+| {{cssxref(":required")}}          | 必要なフォーム要素に一致します。                                                                                                                                                                                                                                                             |
+| {{cssxref(":right")}}             | [ページ媒体](/ja/docs/Web/CSS/CSS_Pages)では、右側のページに一致します。                                                                                                                                                                                                                     |
+| {{cssxref(":root")}}              | ドキュメントのルートである要素に一致します。                                                                                                                                                                                                                                                 |
+| {{cssxref(":scope")}}             | スコープ要素であるすべての要素に一致します。                                                                                                                                                                                                                                                 |
+| {{cssxref(":valid")}}             | `<input>` 要素などで要素が有効な状態のときに一致します。                                                                                                                                                                                                                                     |
+| {{cssxref(":target")}}            | 現在の URL のターゲットである場合（つまり、現在の[URL フラグメントに](https://en.wikipedia.org/wiki/Fragment_identifier)一致する ID を持つ場合）、要素に一致し[ます](https://en.wikipedia.org/wiki/Fragment_identifier)。                                                                    |
+| {{cssxref(":visited")}}           | 訪問したリンクに一致します。                                                                                                                                                                                                                                                                 |
 
 ### 疑似要素
 
-| セレクタ                                 | 説明                                                                                 |
-| ---------------------------------------- | ------------------------------------------------------------------------------------ |
-| {{cssxref("::after")}}             | 元の要素の実際のコンテンツの後に現れるスタイル可能な要素と一致します。               |
-| {{cssxref("::before")}}         | 元の要素の実際のコンテンツの前に現れるスタイル可能な要素と一致します。               |
-| {{cssxref("::first-letter")}} | 要素の最初の文字と一致します。                                                       |
-| {{cssxref("::first-line")}}     | 含まれている要素の最初の行と一致します。                                             |
-| {{cssxref("::grammar-error")}} | ブラウザーによってフラグが立てられた文法エラーを含むドキュメントの一部に一致します。   |
-| {{cssxref("::marker")}}         | 通常は箇条書きまたは番号が含まれているリストアイテムのマーカーボックスに一致します。 |
-| {{cssxref("::selection")}}     | 選択されたドキュメントの部分に一致します。                                           |
+| セレクタ                        | 説明                                                                                   |
+| ------------------------------- | -------------------------------------------------------------------------------------- |
+| {{cssxref("::after")}}          | 元の要素の実際のコンテンツの後に現れるスタイル可能な要素と一致します。                 |
+| {{cssxref("::before")}}         | 元の要素の実際のコンテンツの前に現れるスタイル可能な要素と一致します。                 |
+| {{cssxref("::first-letter")}}   | 要素の最初の文字と一致します。                                                         |
+| {{cssxref("::first-line")}}     | 含まれている要素の最初の行と一致します。                                               |
+| {{cssxref("::grammar-error")}}  | ブラウザーによってフラグが立てられた文法エラーを含むドキュメントの一部に一致します。   |
+| {{cssxref("::marker")}}         | 通常は箇条書きまたは番号が含まれているリストアイテムのマーカーボックスに一致します。   |
+| {{cssxref("::selection")}}      | 選択されたドキュメントの部分に一致します。                                             |
 | {{cssxref("::spelling-error")}} | ブラウザーによってフラグが付けられた、スペルミスを含むドキュメントの一部に一致します。 |
 
 {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}
diff --git a/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
index 62515af3a8d349..27e4dea66e0bd7 100644
--- a/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
+++ b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
@@ -33,7 +33,6 @@ slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
 
 ```css
 article :first-child {
-
 }
 ```
 
@@ -43,7 +42,6 @@ article :first-child {
 
 ```css
 article *:first-child {
-
 }
 ```
 
diff --git a/files/ja/learn/css/building_blocks/styling_tables/index.md b/files/ja/learn/css/building_blocks/styling_tables/index.md
index 875fc79ad774fb..79105d65389444 100644
--- a/files/ja/learn/css/building_blocks/styling_tables/index.md
+++ b/files/ja/learn/css/building_blocks/styling_tables/index.md
@@ -17,7 +17,9 @@ HTML の表を装飾することは、世界で最も魅力的な仕事ではあ
 
 ```html
 <table>
-  <caption>A summary of the UK's most famous punk bands</caption>
+  <caption>
+    A summary of the UK's most famous punk bands
+  </caption>
   <thead>
     <tr>
       <th scope="col">Band</th>
@@ -40,7 +42,7 @@ HTML の表を装飾することは、世界で最も魅力的な仕事ではあ
       <td>London Calling</td>
     </tr>
 
-      ... 簡潔にするためにいくつかの行を削除
+    ... 簡潔にするためにいくつかの行を削除
 
     <tr>
       <th scope="row">The Stranglers</th>
@@ -72,9 +74,9 @@ HTML の表を装飾することは、世界で最も魅力的な仕事ではあ
 2. 次に、`style.css` という名前の新しいファイルを作成し、他のファイルと同じディレクトリーに保存します。
 3. {{htmlelement("head")}} の内側に次の HTML 行を配置して、CSS を HTML にリンクします。
 
-    ```html
-    <link href="style.css" rel="stylesheet" type="text/css">
-    ```
+   ```html
+   <link href="style.css" rel="stylesheet" type="text/css" />
+   ```
 
 ### スペーシングとレイアウト
 
@@ -106,7 +108,8 @@ thead th:nth-child(4) {
   width: 35%;
 }
 
-th, td {
+th,
+td {
   padding: 20px;
 }
 ```
@@ -134,7 +137,10 @@ th, td {
 まず、HTML `head` の既存の {{htmlelement("link")}} 要素のすぐ上に、次の `<link>` 要素を追加します。
 
 ```html
-<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
+<link
+  href="https://fonts.googleapis.com/css?family=Rock+Salt"
+  rel="stylesheet"
+  type="text/css" />
 ```
 
 そして、`style.css` ファイルの以前の追加の下に、次の CSS を追加します。
@@ -143,11 +149,12 @@ th, td {
 /* typography */
 
 html {
-  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+  font-family: "helvetica neue", helvetica, arial, sans-serif;
 }
 
-thead th, tfoot th {
-  font-family: 'Rock Salt', cursive;
+thead th,
+tfoot th {
+  font-family: "Rock Salt", cursive;
 }
 
 th {
@@ -187,14 +194,21 @@ tfoot th {
 ```css
 /* グラフィックと色 */
 
-thead, tfoot {
+thead,
+tfoot {
   background: url(leopardskin.jpg);
   color: white;
   text-shadow: 1px 1px 1px black;
 }
 
-thead th, tfoot th, tfoot td {
-  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+thead th,
+tfoot th,
+tfoot td {
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.1),
+    rgba(0, 0, 0, 0.5)
+  );
   border: 3px solid purple;
 }
 ```
@@ -247,7 +261,7 @@ table {
 /* caption */
 
 caption {
-  font-family: 'Rock Salt', cursive;
+  font-family: "Rock Salt", cursive;
   padding: 20px;
   font-style: italic;
   caption-side: bottom;
diff --git a/files/ja/learn/css/building_blocks/the_box_model/index.md b/files/ja/learn/css/building_blocks/the_box_model/index.md
index fed2fc650bd85b..33e19b6f06e7cc 100644
--- a/files/ja/learn/css/building_blocks/the_box_model/index.md
+++ b/files/ja/learn/css/building_blocks/the_box_model/index.md
@@ -127,7 +127,9 @@ CSS でブロックボックスを構成するには、次のものがありま
 html {
   box-sizing: border-box;
 }
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 ```
diff --git a/files/ja/learn/css/building_blocks/values_and_units/index.md b/files/ja/learn/css/building_blocks/values_and_units/index.md
index 9e395edb15848a..f0108f02942938 100644
--- a/files/ja/learn/css/building_blocks/values_and_units/index.md
+++ b/files/ja/learn/css/building_blocks/values_and_units/index.md
@@ -24,7 +24,7 @@ CSS の仕様や MDN のプロパティページでは、`<color>` や `<length>
 ```css
 h1 {
   color: black;
-  background-color: rgb(197,93,161);
+  background-color: rgb(197, 93, 161);
 }
 ```
 
diff --git a/files/ja/learn/css/css_layout/floats/index.md b/files/ja/learn/css/css_layout/floats/index.md
index faac812cf71a69..94b536cfba67ff 100644
--- a/files/ja/learn/css/css_layout/floats/index.md
+++ b/files/ja/learn/css/css_layout/floats/index.md
@@ -32,11 +32,31 @@ slug: Learn/CSS/CSS_layout/Floats
 
 <div class="box">Float</div>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>
-
-<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet.
+</p>
+
+<p>
+  Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
+  orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
+  ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
+  ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
+  a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 次の CSS を HTML に適用します（{{htmlelement("style")}} 要素を使用するか、{{htmlelement("link")}} を使用して別の `.css` ファイルを作成するか、選択します）。
@@ -46,14 +66,17 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .box {
   width: 150px;
   height: 100px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
@@ -67,7 +90,7 @@ body {
   width: 150px;
   height: 100px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
@@ -79,11 +102,31 @@ body {
 
 <div class="box">Float</div>
 
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
-
-<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate.
+</p>
+
+<p>
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -91,7 +134,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .box {
@@ -100,7 +146,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
@@ -117,7 +163,7 @@ body {
 
 ```css
 .special {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
 }
@@ -130,11 +176,31 @@ body {
 
 <div class="box">Float</div>
 
-<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
-
-<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p class="special">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate.
+</p>
+
+<p>
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -142,7 +208,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .box {
@@ -151,12 +220,12 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 
 .special {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
 }
@@ -183,12 +252,31 @@ body {
 
 <div class="box">Float</div>
 
-<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
-
-<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-
+<p class="special">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate.
+</p>
+
+<p class="cleared">
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -196,7 +284,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .box {
@@ -205,12 +296,12 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 
 .special {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
 }
@@ -236,7 +327,10 @@ body {
 <div class="wrapper">
   <div class="box">Float</div>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate.
+  </p>
 </div>
 ```
 
@@ -244,7 +338,7 @@ CSS で、`.wrapper` クラスに次の規則を追加してからページを
 
 ```css
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
 }
@@ -254,7 +348,7 @@ CSS で、`.wrapper` クラスに次の規則を追加してからページを
 
 ```css
 .cleared {
-    clear: left;
+  clear: left;
 }
 ```
 
@@ -265,12 +359,32 @@ CSS で、`.wrapper` クラスに次の規則を追加してからページを
 <div class="wrapper">
   <div class="box">Float</div>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate.
+  </p>
 </div>
 
-<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p class="cleared">
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -278,11 +392,14 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
 }
@@ -293,7 +410,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
@@ -323,11 +440,31 @@ body {
 <div class="wrapper">
   <div class="box">Float</div>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate.
+  </p>
 </div>
-<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p class="cleared">
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -335,11 +472,14 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
 }
@@ -350,7 +490,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 
@@ -371,7 +511,7 @@ body {
 
 ```css
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
   overflow: auto;
@@ -383,11 +523,31 @@ body {
 <div class="wrapper">
   <div class="box">Float</div>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate.
+  </p>
 </div>
-<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p class="cleared">
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -395,11 +555,14 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
   overflow: auto;
@@ -411,7 +574,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
@@ -426,7 +589,7 @@ body {
 
 ```css
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
   display: flow-root;
@@ -438,11 +601,31 @@ body {
 <div class="wrapper">
   <div class="box">Float</div>
 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate.
+  </p>
 </div>
-<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+<p class="cleared">
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+  imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa
+  at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
+  ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae
+  convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis.
+  Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut
+  luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare
+  felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
 ```
 
 ```css hidden
@@ -450,11 +633,14 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   color: #fff;
   display: flow-root;
@@ -466,7 +652,7 @@ body {
   width: 150px;
   height: 150px;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
diff --git a/files/ja/learn/css/css_layout/grids/index.md b/files/ja/learn/css/css_layout/grids/index.md
index 8e610bd262b78b..60e9e41d8071f7 100644
--- a/files/ja/learn/css/css_layout/grids/index.md
+++ b/files/ja/learn/css/css_layout/grids/index.md
@@ -35,7 +35,7 @@ The following video provides a nice visual explanation of using CSS Grid:
 
 ```css
 .container {
-    display: grid;
+  display: grid;
 }
 ```
 
@@ -45,8 +45,8 @@ The following video provides a nice visual explanation of using CSS Grid:
 
 ```css
 .container {
-    display: grid;
-    grid-template-columns: 200px 200px 200px;
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
 }
 ```
 
@@ -57,26 +57,29 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
 ```
 
 ```html hidden
 <div class="container">
- <div>One</div>
- <div>Two</div>
- <div>Three</div>
- <div>Four</div>
- <div>Five</div>
- <div>Six</div>
- <div>Seven</div>
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+  <div>Six</div>
+  <div>Seven</div>
 </div>
 ```
 
@@ -97,8 +100,8 @@ body {
 
 ```css
 .container {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 ```
 
@@ -106,8 +109,8 @@ body {
 
 ```css
 .container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
 }
 ```
 
@@ -118,7 +121,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .container {
@@ -129,10 +135,9 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
-
 ```
 
 ```html hidden
@@ -157,9 +162,9 @@ body {
 
 ```css
 .container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-    grid-gap: 20px;
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
 }
 ```
 
@@ -170,7 +175,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .container {
@@ -182,10 +190,9 @@ body {
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
-
 ```
 
 ```html hidden
@@ -219,9 +226,9 @@ body {
 
 ```css
 .container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 20px;
 }
 ```
 
@@ -238,14 +245,17 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
 ```
 
@@ -259,7 +269,6 @@ body {
   <div>Six</div>
   <div>Seven</div>
 </div>
-
 ```
 
 ```css
@@ -281,10 +290,10 @@ body {
 
 ```css
 .container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-auto-rows: minmax(100px, auto);
-    grid-gap: 20px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
 }
 ```
 
@@ -301,16 +310,18 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .container > div {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
-
 ```
 
 ```html hidden
@@ -383,44 +394,47 @@ footer {
 ```
 
 ```css hidden
-                body {
-                    width: 90%;
-                    max-width: 900px;
-                    margin: 2em auto;
-                    font: .9em/1.2 Arial, Helvetica, sans-serif;
-                }
-
-                .container {
-                    display: grid;
-                    grid-template-columns: 1fr 3fr;
-                    grid-gap: 20px;
-                }
+body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
 header {
-    grid-column: 1 / 3;
-    grid-row: 1;
+  grid-column: 1 / 3;
+  grid-row: 1;
 }
 
 article {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 aside {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 footer {
-    grid-column: 1 / 3;
-    grid-row: 3;
+  grid-column: 1 / 3;
+  grid-row: 3;
 }
 
 header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
 
 aside {
@@ -433,13 +447,34 @@ aside {
   <header>This is my lovely blog</header>
   <article>
     <h1>My article</h1>
-    <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    <p>
+      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
+      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
+      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
+      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
+      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
+      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
+      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+    </p>
+
+    <p>
+      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
+      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
+      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+    </p>
   </article>
   <aside>
     <h2>Other things</h2>
-    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p>
+    <p>
+      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+      est.
+    </p>
   </aside>
   <footer>Contact me@mysite.com</footer>
 </div>
@@ -459,9 +494,9 @@ aside {
 .container {
   display: grid;
   grid-template-areas:
-      "header header"
-      "sidebar content"
-      "footer footer";
+    "header header"
+    "sidebar content"
+    "footer footer";
   grid-template-columns: 1fr 3fr;
   grid-gap: 20px;
 }
@@ -490,15 +525,18 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
 
 aside {
@@ -508,9 +546,9 @@ aside {
 .container {
   display: grid;
   grid-template-areas:
-  "header header"
-  "sidebar content"
-  "footer footer";
+    "header header"
+    "sidebar content"
+    "footer footer";
   grid-template-columns: 1fr 3fr;
   grid-gap: 20px;
 }
@@ -530,7 +568,6 @@ aside {
 footer {
   grid-area: footer;
 }
-
 ```
 
 ```html hidden
@@ -538,12 +575,34 @@ footer {
   <header>This is my lovely blog</header>
   <article>
     <h1>My article</h1>
-    <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    <p>
+      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
+      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
+      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
+      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
+      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
+      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
+      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+    </p>
+
+    <p>
+      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
+      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
+      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+    </p>
   </article>
-  <aside><h2>Other things</h2>
-    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p>
+  <aside>
+    <h2>Other things</h2>
+    <p>
+      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+      est.
+    </p>
   </aside>
   <footer>Contact me@mysite.com</footer>
 </div>
@@ -594,12 +653,15 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .container {
   display: grid;
-  grid-template-columns: repeat(12, minmax(0,1fr));
+  grid-template-columns: repeat(12, minmax(0, 1fr));
   grid-gap: 20px;
 }
 
@@ -627,14 +689,13 @@ header,
 footer {
   border-radius: 5px;
   padding: 10px;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
 }
 
 aside {
   border-right: 1px solid #999;
 }
-
 ```
 
 ```html hidden
@@ -642,16 +703,37 @@ aside {
   <header>This is my lovely blog</header>
   <article>
     <h1>My article</h1>
-    <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    <p>
+      Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor
+      imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus
+      massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra
+      egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada
+      et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac
+      imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
+      ornare egestas augue ut luctus. Proin blandit quam nec lacus varius
+      commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+    </p>
+
+    <p>
+      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
+      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
+      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+    </p>
   </article>
-  <aside><h2>Other things</h2>
-    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p>
+  <aside>
+    <h2>Other things</h2>
+    <p>
+      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+      est.
+    </p>
   </aside>
   <footer>Contact me@mysite.com</footer>
 </div>
-
 ```
 
 {{ EmbedLiveSample('Grid_8', '100%', 400) }}
diff --git a/files/ja/learn/css/css_layout/introduction/index.md b/files/ja/learn/css/css_layout/introduction/index.md
index b95c615ec123a9..b2f962c5769591 100644
--- a/files/ja/learn/css/css_layout/introduction/index.md
+++ b/files/ja/learn/css/css_layout/introduction/index.md
@@ -77,14 +77,15 @@ CSS でページレイアウトを実現するための主な方法は、`displa
 ただし、`display: flex` を親に追加すると、3 つの項目は列に配置されます。 これは、それらが*フレックス項目*になり、フレックスボックスがそれらに与えるいくつかの初期値を使用するためです。 {{cssxref("flex-direction")}} の初期値は `row` なので、行として表示されます。 {{cssxref("align-items")}} プロパティの初期値は `stretch` であるため、それらはすべて最も高い項目の高さまで伸びているように見えます。 これは、項目がフレックスコンテナの高さまで伸びることを意味します。 この場合、項目は最も高い項目によって定義されます。 項目はすべてコンテナの先頭に配置され、行の末尾に余分なスペースが残ります。
 
 ```css hidden
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper > div {
-    border-radius: 5px;
-    background-color: rgb(207,232,220);
-    padding: 1em;
+  border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  padding: 1em;
 }
-
 ```
 
 ```css
@@ -108,31 +109,32 @@ CSS でページレイアウトを実現するための主な方法は、`displa
 この単純な例として、すべての子項目に `1` の値の {{cssxref("flex")}} プロパティを追加できます。 これにより、末尾にスペースを残すのではなく、すべての項目が拡大してコンテナがいっぱいになります。 より多くのスペースがあるならば、項目はより広くなり、スペースが少ないと狭くなります。 さらに、マークアップに別の要素を追加すると、項目はすべてスペースを空けるために小さくなります — サイズに関係なく、同じ大きさのスペースを占めるようにサイズが調整されます。
 
 ```css hidden
-    * {box-sizing: border-box;}
-
-    .wrapper > div {
-        border-radius: 5px;
-        background-color: rgb(207,232,220);
-        padding: 1em;
-    }
+* {
+  box-sizing: border-box;
+}
 
+.wrapper > div {
+  border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  padding: 1em;
+}
 ```
 
 ```css
 .wrapper {
-    display: flex;
+  display: flex;
 }
 
 .wrapper > div {
-    flex: 1;
+  flex: 1;
 }
 ```
 
 ```html
 <div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
 </div>
 ```
 
@@ -147,33 +149,34 @@ CSS でページレイアウトを実現するための主な方法は、`displa
 繰り返しになりますが、`display: grid` という特定の `display` の値でグリッドレイアウト（Grid Layout）をオンにすることができます。 以下の例では、コンテナといくつかの子要素とともに、`flex` の例と同様のマークアップを使用しています。 `display: grid` の使用に加えて、{{cssxref("grid-template-rows")}} プロパティと {{cssxref("grid-template-columns")}} プロパティをそれぞれ使用して、親の行と列のトラックをいくつか定義します。 それぞれ `1fr` の 3 列と `100px` の 2 行を定義しました。 子要素に規則を置く必要はなく、自動的にグリッドが作成したセルに配置されます。
 
 ```css hidden
-    * {box-sizing: border-box;}
-
-    .wrapper > div {
-        border-radius: 5px;
-        background-color: rgb(207,232,220);
-        padding: 1em;
-    }
+* {
+  box-sizing: border-box;
+}
 
+.wrapper > div {
+  border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  padding: 1em;
+}
 ```
 
 ```css
 .wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px;
+  grid-gap: 10px;
 }
 ```
 
 ```html
 <div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
-    <div class="box4">Four</div>
-    <div class="box5">Five</div>
-    <div class="box6">Six</div>
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+  <div class="box6">Six</div>
 </div>
 ```
 
@@ -182,45 +185,46 @@ CSS でページレイアウトを実現するための主な方法は、`displa
 グリッドを作成したら、上記の自動配置のふるまいに頼らずに、明示的に項目を配置できます。 以下の 2 番目の例では、同じグリッドを定義しましたが、今回は 3 つの子項目を使用しています。 {{cssxref("grid-column")}} プロパティと {{cssxref("grid-row")}} プロパティを使用して各項目の開始ラインと終了ラインを設定しました。 これにより、項目が複数のトラックにまたがるようになります。
 
 ```css hidden
-    * {box-sizing: border-box;}
-
-    .wrapper > div {
-        border-radius: 5px;
-        background-color: rgb(207,232,220);
-        padding: 1em;
-    }
+* {
+  box-sizing: border-box;
+}
 
+.wrapper > div {
+  border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  padding: 1em;
+}
 ```
 
 ```css
 .wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px;
+  grid-gap: 10px;
 }
 
 .box1 {
-    grid-column: 2 / 4;
-    grid-row: 1;
+  grid-column: 2 / 4;
+  grid-row: 1;
 }
 
 .box2 {
-    grid-column: 1;
-    grid-row: 1 / 3;
+  grid-column: 1;
+  grid-row: 1 / 3;
 }
 
 .box3 {
-    grid-row: 2;
-    grid-column: 3;
+  grid-row: 2;
+  grid-column: 3;
 }
 ```
 
 ```html
 <div class="wrapper">
-    <div class="box1">One</div>
-    <div class="box2">Two</div>
-    <div class="box3">Three</div>
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
 </div>
 ```
 
@@ -245,21 +249,21 @@ CSS でページレイアウトを実現するための主な方法は、`displa
 
 ```css hidden
 body {
-    width: 90%;
-    max-width: 900px;
-    margin: 0 auto;
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
 }
 
 p {
-    line-height: 2;
-    word-spacing: 0.1rem;
+  line-height: 2;
+  word-spacing: 0.1rem;
 }
 
 .box {
-    background-color: rgb(207,232,220);
-    border: 2px solid rgb(79,185,227);
-    padding: 10px;
-    border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  border-radius: 5px;
 }
 ```
 
@@ -268,15 +272,25 @@ p {
 
 <div class="box">Float</div>
 
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
 ```
 
 ```css
 .box {
-    float: left;
-    width: 150px;
-    height: 150px;
-    margin-right: 30px;
+  float: left;
+  width: 150px;
+  height: 150px;
+  margin-right: 30px;
 }
 ```
 
@@ -319,11 +333,11 @@ body {
 }
 
 p {
-    background-color: rgb(207,232,220);
-    border: 2px solid rgb(79,185,227);
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
 }
 ```
 
@@ -362,19 +376,19 @@ body {
 }
 
 p {
-    background-color: rgb(207,232,220);
-    border: 2px solid rgb(79,185,227);
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
 }
 ```
 
 ```css
 .positioned {
   position: relative;
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
+  background: rgba(255, 84, 104, 0.3);
+  border: 2px solid rgb(255, 84, 104);
   top: 30px;
   left: 30px;
 }
@@ -413,21 +427,21 @@ body {
 }
 
 p {
-    background-color: rgb(207,232,220);
-    border: 2px solid rgb(79,185,227);
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
 }
 ```
 
 ```css
 .positioned {
-    position: absolute;
-    background: rgba(255,84,104,.3);
-    border: 2px solid rgb(255,84,104);
-    top: 30px;
-    left: 30px;
+  position: absolute;
+  background: rgba(255, 84, 104, 0.3);
+  border: 2px solid rgb(255, 84, 104);
+  top: 30px;
+  left: 30px;
 }
 ```
 
@@ -456,33 +470,61 @@ p {
 
 <div class="positioned">Fixed</div>
 
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
+
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
+
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
 ```
 
 ```css hidden
 body {
-    width: 500px;
-    margin: 0 auto;
+  width: 500px;
+  margin: 0 auto;
 }
 
 .positioned {
-    background: rgba(255,84,104,.3);
-    border: 2px solid rgb(255,84,104);
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
+  background: rgba(255, 84, 104, 0.3);
+  border: 2px solid rgb(255, 84, 104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
 }
 ```
 
 ```css
 .positioned {
-    position: fixed;
-    top: 30px;
-    left: 30px;
+  position: fixed;
+  top: 30px;
+  left: 30px;
 }
 ```
 
@@ -495,13 +537,41 @@ body {
 ```html hidden
 <h1>Sticky positioning</h1>
 
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
 
 <div class="positioned">Sticky</div>
 
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
+
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
 ```
 
 ```css hidden
@@ -511,8 +581,8 @@ body {
 }
 
 .positioned {
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
+  background: rgba(255, 84, 104, 0.3);
+  border: 2px solid rgb(255, 84, 104);
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
@@ -546,15 +616,15 @@ HTML 表は表形式のデータを表示するのに適していますが、何
   <p>First of all, tell us your name and age.</p>
   <div>
     <label for="fname">First name:</label>
-    <input type="text" id="fname">
+    <input type="text" id="fname" />
   </div>
   <div>
     <label for="lname">Last name:</label>
-    <input type="text" id="lname">
+    <input type="text" id="lname" />
   </div>
   <div>
     <label for="age">Age:</label>
-    <input type="text" id="age">
+    <input type="text" id="age" />
   </div>
 </form>
 ```
@@ -577,7 +647,8 @@ form div {
   display: table-row;
 }
 
-form label, form input {
+form label,
+form input {
   display: table-cell;
   margin-bottom: 10px;
 }
@@ -617,37 +688,55 @@ form p {
 
 ```html
 <div class="container">
-    <h1>Multi-column layout</h1>
-
-    <p>Paragraph 1.</p>
-    <p>Paragraph 2.</p>
+  <h1>Multi-column layout</h1>
 
+  <p>Paragraph 1.</p>
+  <p>Paragraph 2.</p>
 </div>
 ```
 
 このコンテナでは 200 ピクセルの `column-width` を使用しているため、ブラウザーはコンテナに収まるだけの数の 200 ピクセルの列を作成し、作成された列間で残りのスペースを共有します。
 
 ```html hidden
-    <div class="container">
-        <h1>Multi-column Layout</h1>
-
-        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-
-        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-
-    </div>
-
+<div class="container">
+  <h1>Multi-column Layout</h1>
+
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+    eget fermentum sapien.
+  </p>
+
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
+</div>
 ```
 
 ```css hidden
-body { max-width: 800px; margin: 0 auto; }
+body {
+  max-width: 800px;
+  margin: 0 auto;
+}
 ```
 
 ```css
-    .container {
-        column-width: 200px;
-    }
+.container {
+  column-width: 200px;
+}
 ```
 
 {{ EmbedLiveSample('Multicol_1', '100%', 200) }}
diff --git a/files/ja/learn/css/css_layout/legacy_layout_methods/index.md b/files/ja/learn/css/css_layout/legacy_layout_methods/index.md
index b521b27499a5ea..2ce90fe5faff4a 100644
--- a/files/ja/learn/css/css_layout/legacy_layout_methods/index.md
+++ b/files/ja/learn/css/css_layout/legacy_layout_methods/index.md
@@ -33,12 +33,31 @@ CSS がごく最近まで内蔵されたグリッドシステムを持ってい
 <h1>2 column layout example</h1>
 <div>
   <h2>First column</h2>
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+    eget fermentum sapien.
+  </p>
 </div>
 
 <div>
   <h2>Second column</h2>
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
 </div>
 ```
 
@@ -87,12 +106,31 @@ div:nth-of-type(2) {
 
 <div>
   <h2>First column</h2>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+    eget fermentum sapien.
+  </p>
 </div>
 
 <div>
   <h2>Second column</h2>
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
 </div>
 ```
 
@@ -215,19 +253,41 @@ CSS の最後に次を追加してください。
 
 ```css
 /* Two column widths (120px) plus one gutter width (20px) */
-.col.span2 { width: 140px; }
+.col.span2 {
+  width: 140px;
+}
 /* Three column widths (180px) plus two gutter widths (40px) */
-.col.span3 { width: 220px; }
+.col.span3 {
+  width: 220px;
+}
 /* And so on... */
-.col.span4 { width: 300px; }
-.col.span5 { width: 380px; }
-.col.span6 { width: 460px; }
-.col.span7 { width: 540px; }
-.col.span8 { width: 620px; }
-.col.span9 { width: 700px; }
-.col.span10 { width: 780px; }
-.col.span11 { width: 860px; }
-.col.span12 { width: 940px; }
+.col.span4 {
+  width: 300px;
+}
+.col.span5 {
+  width: 380px;
+}
+.col.span6 {
+  width: 460px;
+}
+.col.span7 {
+  width: 540px;
+}
+.col.span8 {
+  width: 620px;
+}
+.col.span9 {
+  width: 700px;
+}
+.col.span10 {
+  width: 780px;
+}
+.col.span11 {
+  width: 860px;
+}
+.col.span12 {
+  width: 940px;
+}
 ```
 
 これらのクラスを作成したら、グリッド上にさまざまな幅の列を配置できます。 効果を確認するには、ページを保存してブラウザーでロードします。
@@ -308,19 +368,41 @@ body {
 
 ```css
 /* Two column widths (12.5%) plus one gutter width (2.08333333%) */
-.col.span2 { width: 14.58333333%; }
+.col.span2 {
+  width: 14.58333333%;
+}
 /* Three column widths (18.75%) plus two gutter widths (4.1666666) */
-.col.span3 { width: 22.91666666%; }
+.col.span3 {
+  width: 22.91666666%;
+}
 /* And so on... */
-.col.span4 { width: 31.24999999%; }
-.col.span5 { width: 39.58333332%; }
-.col.span6 { width: 47.91666665%; }
-.col.span7 { width: 56.24999998%; }
-.col.span8 { width: 64.58333331%; }
-.col.span9 { width: 72.91666664%; }
-.col.span10 { width: 81.24999997%; }
-.col.span11 { width: 89.5833333%; }
-.col.span12 { width: 97.91666663%; }
+.col.span4 {
+  width: 31.24999999%;
+}
+.col.span5 {
+  width: 39.58333332%;
+}
+.col.span6 {
+  width: 47.91666665%;
+}
+.col.span7 {
+  width: 56.24999998%;
+}
+.col.span8 {
+  width: 64.58333331%;
+}
+.col.span9 {
+  width: 72.91666664%;
+}
+.col.span10 {
+  width: 81.24999997%;
+}
+.col.span11 {
+  width: 89.5833333%;
+}
+.col.span12 {
+  width: 97.91666663%;
+}
 ```
 
 コードを保存してブラウザーにロードし、ビューポートの幅を変更してみます — 列の幅は適切に調整されるはずです。
@@ -335,24 +417,46 @@ CSS のすぐ内側で {{cssxref("calc","calc()")}} 関数を使って数学を
 
 ```css
 .col.span4 {
-  width: calc((6.25%*4) + (2.08333333%*3));
+  width: calc((6.25% * 4) + (2.08333333% * 3));
 }
 ```
 
 規則の一番下のブロックを次のように置き換えてから、ブラウザーにリロードして、同じ結果になるかどうかを確認します。
 
 ```css
-.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
-.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
-.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
-.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
-.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
-.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
-.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
-.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
-.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
-.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
-.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
+.col.span2 {
+  width: calc((6.25% * 2) + 2.08333333%);
+}
+.col.span3 {
+  width: calc((6.25% * 3) + (2.08333333% * 2));
+}
+.col.span4 {
+  width: calc((6.25% * 4) + (2.08333333% * 3));
+}
+.col.span5 {
+  width: calc((6.25% * 5) + (2.08333333% * 4));
+}
+.col.span6 {
+  width: calc((6.25% * 6) + (2.08333333% * 5));
+}
+.col.span7 {
+  width: calc((6.25% * 7) + (2.08333333% * 6));
+}
+.col.span8 {
+  width: calc((6.25% * 8) + (2.08333333% * 7));
+}
+.col.span9 {
+  width: calc((6.25% * 9) + (2.08333333% * 8));
+}
+.col.span10 {
+  width: calc((6.25% * 10) + (2.08333333% * 9));
+}
+.col.span11 {
+  width: calc((6.25% * 11) + (2.08333333% * 10));
+}
+.col.span12 {
+  width: calc((6.25% * 12) + (2.08333333% * 11));
+}
 ```
 
 > **メモ:** [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) で完成版を見ることができます（[ライブでも見られます](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)）。
@@ -367,7 +471,7 @@ CSS のすぐ内側で {{cssxref("calc","calc()")}} 関数を使って数学を
 
 ```css
 .content {
-  width: calc((6.25%*8) + (2.08333333%*7));
+  width: calc((6.25% * 8) + (2.08333333% * 7));
 }
 ```
 
@@ -385,7 +489,7 @@ CSS でコンテナ要素を 1 列幅だけオフセットするクラスを作
 
 ```css
 .offset-by-one {
-  margin-left: calc(6.25% + (2.08333333%*2));
+  margin-left: calc(6.25% + (2.08333333% * 2));
 }
 ```
 
@@ -442,7 +546,6 @@ body {
   padding-right: 2.08333333%;
 }
 
-
 .row {
   display: flex;
 }
@@ -452,7 +555,7 @@ body {
   margin-bottom: 1em;
   width: 6.25%;
   flex: 1 1 auto;
-  background: rgb(255,150,150);
+  background: rgb(255, 150, 150);
 }
 ```
 
@@ -487,8 +590,8 @@ body {
 その `head` に次を追加することによって、`skeleton.css` と `normalize.css` を HTML ページに含めます。
 
 ```html
-<link href="normalize.css" rel="stylesheet">
-<link href="skeleton.css" rel="stylesheet">
+<link href="normalize.css" rel="stylesheet" />
+<link href="skeleton.css" rel="stylesheet" />
 ```
 
 Skeleton にはグリッドシステム以上のものが含まれています — タイポグラフィや、出発点として使用できるその他のページ要素の CSS も含んでいます。 ただし、これらはデフォルトのままにします — ここで本当に関心があるのはグリッドです。
@@ -572,7 +675,9 @@ HTML ファイルを保存してブラウザーにロードして、効果を確
 `skeleton.css` ファイルを見ると、これがどのように機能するかがわかります。 例えば、Skeleton には、「`three columns`」クラスを追加して要素をスタイルするための次の定義があります。
 
 ```css
-.three.columns { width: 22%; }
+.three.columns {
+  width: 22%;
+}
 ```
 
 Skeleton（または他のグリッドフレームワーク）が行っていることはすべて、マークアップに追加することで使用できる定義済みクラスを設定することだけです。 これらのパーセントを自分で計算する作業を行ったのとまったく同じです。
diff --git a/files/ja/learn/css/css_layout/media_queries/index.md b/files/ja/learn/css/css_layout/media_queries/index.md
index 1ab3566a60ebb0..6c7319c0017c87 100644
--- a/files/ja/learn/css/css_layout/media_queries/index.md
+++ b/files/ja/learn/css/css_layout/media_queries/index.md
@@ -40,9 +40,9 @@ slug: Learn/CSS/CSS_layout/Media_queries
 
 ```css
 @media print {
-    body {
-        font-size: 12pt;
-    }
+  body {
+    font-size: 12pt;
+  }
 }
 ```
 
@@ -64,9 +64,9 @@ slug: Learn/CSS/CSS_layout/Media_queries
 
 ```css
 @media screen and (width: 600px) {
-    body {
-        color: red;
-    }
+  body {
+    color: red;
+  }
 }
 ```
 
@@ -76,9 +76,9 @@ slug: Learn/CSS/CSS_layout/Media_queries
 
 ```css
 @media screen and (max-width: 600px) {
-    body {
-        color: blue;
-    }
+  body {
+    color: blue;
+  }
 }
 ```
 
@@ -94,9 +94,9 @@ slug: Learn/CSS/CSS_layout/Media_queries
 
 ```css
 @media (orientation: landscape) {
-    body {
-        color: rebeccapurple;
-    }
+  body {
+    color: rebeccapurple;
+  }
 }
 ```
 
@@ -110,9 +110,9 @@ slug: Learn/CSS/CSS_layout/Media_queries
 
 ```css
 @media (hover: hover) {
-    body {
-        color: rebeccapurple;
-    }
+  body {
+    color: rebeccapurple;
+  }
 }
 ```
 
@@ -134,9 +134,9 @@ slug: Learn/CSS/CSS_layout/Media_queries
 
 ```css
 @media screen and (min-width: 600px) and (orientation: landscape) {
-    body {
-        color: blue;
-    }
+  body {
+    color: blue;
+  }
 }
 ```
 
@@ -148,9 +148,9 @@ slug: Learn/CSS/CSS_layout/Media_queries
 
 ```css
 @media screen and (min-width: 600px), screen and (orientation: landscape) {
-    body {
-        color: blue;
-    }
+  body {
+    color: blue;
+  }
 }
 ```
 
@@ -162,9 +162,9 @@ slug: Learn/CSS/CSS_layout/Media_queries
 
 ```css
 @media not all and (orientation: landscape) {
-    body {
-        color: blue;
-    }
+  body {
+    color: blue;
+  }
 }
 ```
 
@@ -194,54 +194,57 @@ Firefox 開発ツールの[レスポンシブデザインモード](/ja/docs/Too
 
 ```css
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 body {
-    width: 90%;
-    margin: 2em auto;
-    font: 1em/1.3 Arial, Helvetica, sans-serif;
+  width: 90%;
+  margin: 2em auto;
+  font:
+    1em/1.3 Arial,
+    Helvetica,
+    sans-serif;
 }
 
 a:link,
 a:visited {
-    color: #333;
+  color: #333;
 }
 
 nav ul,
 aside ul {
-    list-style: none;
-    padding: 0;
+  list-style: none;
+  padding: 0;
 }
 
 nav a:link,
 nav a:visited {
-    background-color: rgba(207, 232, 220, 0.2);
-    border: 2px solid rgb(79, 185, 227);
-    text-decoration: none;
-    display: block;
-    padding: 10px;
-    color: #333;
-    font-weight: bold;
+  background-color: rgba(207, 232, 220, 0.2);
+  border: 2px solid rgb(79, 185, 227);
+  text-decoration: none;
+  display: block;
+  padding: 10px;
+  color: #333;
+  font-weight: bold;
 }
 
 nav a:hover {
-    background-color: rgba(207, 232, 220, 0.7);
+  background-color: rgba(207, 232, 220, 0.7);
 }
 
 .related {
-    background-color: rgba(79, 185, 227, 0.3);
-    border: 1px solid rgb(79, 185, 227);
-    padding: 10px;
+  background-color: rgba(79, 185, 227, 0.3);
+  border: 1px solid rgb(79, 185, 227);
+  padding: 10px;
 }
 
 .sidebar {
-    background-color: rgba(207, 232, 220, 0.5);
-    padding: 10px;
+  background-color: rgba(207, 232, 220, 0.5);
+  padding: 10px;
 }
 
 article {
-    margin-bottom: 1em;
+  margin-bottom: 1em;
 }
 ```
 
@@ -249,45 +252,39 @@ article {
 
 ```html
 <body>
-    <div class="wrapper">
-      <header>
-        <nav>
-          <ul>
-            <li><a href="">About</a></li>
-            <li><a href="">Contact</a></li>
-            <li><a href="">Meet the team</a></li>
-            <li><a href="">Blog</a></li>
-          </ul>
-        </nav>
-      </header>
-      <main>
-        <article>
-          <div class="content">
-            <h1>Veggies!</h1>
-            <p>
-              ...
-            </p>
-          </div>
-          <aside class="related">
-            <p>
-              ...
-            </p>
-          </aside>
-        </article>
-
-        <aside class="sidebar">
-          <h2>External vegetable-based links</h2>
-          <ul>
-            <li>
-              ...
-            </li>
-          </ul>
+  <div class="wrapper">
+    <header>
+      <nav>
+        <ul>
+          <li><a href="">About</a></li>
+          <li><a href="">Contact</a></li>
+          <li><a href="">Meet the team</a></li>
+          <li><a href="">Blog</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <article>
+        <div class="content">
+          <h1>Veggies!</h1>
+          <p>...</p>
+        </div>
+        <aside class="related">
+          <p>...</p>
         </aside>
-      </main>
-
-      <footer><p>&copy;2019</p></footer>
-    </div>
-  </body>
+      </article>
+
+      <aside class="sidebar">
+        <h2>External vegetable-based links</h2>
+        <ul>
+          <li>...</li>
+        </ul>
+      </aside>
+    </main>
+
+    <footer><p>&copy;2019</p></footer>
+  </div>
+</body>
 ```
 
 この単純なレイアウトはモバイルでもうまく機能します。 開発ツールのレスポンシブデザインモードでレイアウトを眺めると、サイトのモバイルビューそのものと同じように機能することがわかります。
@@ -302,19 +299,19 @@ article {
 
 ```css
 @media screen and (min-width: 40em) {
-    article {
-        display: grid;
-        grid-template-columns: 3fr 1fr;
-        column-gap: 20px;
-    }
-
-    nav ul {
-        display: flex;
-    }
-
-    nav li {
-        flex: 1;
-    }
+  article {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    column-gap: 20px;
+  }
+
+  nav ul {
+    display: flex;
+  }
+
+  nav li {
+    flex: 1;
+  }
 }
 ```
 
@@ -328,20 +325,20 @@ article {
 
 ```css
 @media screen and (min-width: 70em) {
-    main {
-        display: grid;
-        grid-template-columns: 3fr 1fr;
-        column-gap: 20px;
-    }
-
-    article {
-        margin-bottom: 0;
-    }
-
-    footer {
-        border-top: 1px solid #ccc;
-        margin-top: 2em;
-    }
+  main {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    column-gap: 20px;
+  }
+
+  article {
+    margin-bottom: 0;
+  }
+
+  footer {
+    border-top: 1px solid #ccc;
+    margin-top: 2em;
+  }
 }
 ```
 
@@ -354,7 +351,7 @@ article {
 If you look at the HTML source in the above example, you'll see the following element included in the head of the document:
 
 ```html
-<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="viewport" content="width=device-width,initial-scale=1" />
 ```
 
 This is the [viewport meta tag](/ja/docs/Mozilla/Mobile/Viewport_meta_tag) — it exists as a way control how mobile browsers render content. This is needed because by default, most mobile browsers lie about their viewport width. Non-responsive sites commonly look really bad when rendered in a narrow viewport, so mobile browsers usually render the site with a viewport width wider than the real device width by default (usually 960 pixels), and then shrink the rendered result so that it fits in the display.
@@ -373,42 +370,42 @@ There are a number of other options you can put inside the `content` attribute o
 
 ```html
 <ul class="grid">
-    <li>
-        <h2>Card 1</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>Card 2</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>Card 3</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>Card 4</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>Card 5</h2>
-        <p>...</p>
-    </li>
+  <li>
+    <h2>Card 1</h2>
+    <p>...</p>
+  </li>
+  <li>
+    <h2>Card 2</h2>
+    <p>...</p>
+  </li>
+  <li>
+    <h2>Card 3</h2>
+    <p>...</p>
+  </li>
+  <li>
+    <h2>Card 4</h2>
+    <p>...</p>
+  </li>
+  <li>
+    <h2>Card 5</h2>
+    <p>...</p>
+  </li>
 </ul>
 ```
 
 ```css
 .grid {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    gap: 20px;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 
 .grid li {
-    border: 1px solid #666;
-    padding: 10px;
+  border: 1px solid #666;
+  padding: 10px;
 }
 ```
 
diff --git a/files/ja/learn/css/css_layout/multiple-column_layout/index.md b/files/ja/learn/css/css_layout/multiple-column_layout/index.md
index 45362c3661658b..fbbbce67142419 100644
--- a/files/ja/learn/css/css_layout/multiple-column_layout/index.md
+++ b/files/ja/learn/css/css_layout/multiple-column_layout/index.md
@@ -32,25 +32,39 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
-
 ```
 
 ```html
 <div class="container">
   <h1>Simple multicol example</h1>
 
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
-  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
-  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
-  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
-  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
-  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+    eget fermentum sapien.
+  </p>
+
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
 </div>
 ```
 
@@ -77,7 +91,10 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 ```
 
@@ -85,16 +102,28 @@ body {
 <div class="container">
   <h1>Simple multicol example</h1>
 
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
-  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
-  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
-  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
-  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
-  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+    eget fermentum sapien.
+  </p>
+
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
 </div>
 ```
 
@@ -139,12 +168,15 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 .container {
- column-count: 3;
- column-gap: 20px;
- column-rule: 4px dotted rgb(79, 185, 227);
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
 }
 ```
 
@@ -152,16 +184,28 @@ body {
 <div class="container">
   <h1>Simple multicol example</h1>
 
-  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
-  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
-  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
-  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
-
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
-  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
-  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.</p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
+    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
+    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
+    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
+    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
+    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
+    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
+    eget fermentum sapien.
+  </p>
+
+  <p>
+    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
+    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
 </div>
 ```
 
@@ -180,67 +224,90 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 ```
 
 ```html
 <div class="container">
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
 </div>
 ```
 
@@ -268,8 +335,8 @@ body {
 .card {
   break-inside: avoid;
   page-break-inside: avoid;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
   padding: 10px;
   margin: 0 0 1em 0;
 }
@@ -282,67 +349,90 @@ body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif;
+  font:
+    0.9em/1.2 Arial,
+    Helvetica,
+    sans-serif;
 }
 ```
 
 ```html hidden
 <div class="container">
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
-    <div class="card">
-      <h2>I am the heading</h2>
-      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
-                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
-                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.</p>
-    </div>
-
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
+
+  <div class="card">
+    <h2>I am the heading</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
+      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
+      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
+      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
+      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+    </p>
+  </div>
 </div>
 ```
 
diff --git a/files/ja/learn/css/css_layout/normal_flow/index.md b/files/ja/learn/css/css_layout/normal_flow/index.md
index 87faa28fbd0332..2808e8c9782e4e 100644
--- a/files/ja/learn/css/css_layout/normal_flow/index.md
+++ b/files/ja/learn/css/css_layout/normal_flow/index.md
@@ -34,13 +34,29 @@ slug: Learn/CSS/CSS_layout/Normal_Flow
 ```html
 <h1>基本的なドキュメントフロー</h1>
 
-<p>これは基本的なブロックレベル要素です。隣接するブロックレベル要素は下の新しい行に配置されています。</p>
-
-<p>デフォルトでは、親要素の幅の 100% にまたがり、子コンテンツと同じ高さになります。幅と高さの合計は、コンテンツ + パディング + ボーダーの幅/高さです。</p>
-
-<p>マージンによって分けられています。マージンの相殺のため、両方ではなく、1 つのマージンの幅で区切られます。</p>
-
-<p><span>これ</span>および<span>これのような</span>インライン要素は、同じ行に配置され、同じ行にスペースがある場合は隣接するテキストノードに配置されます。オーバーフローするインライン要素は<span>可能であれば新しいラインに折り返され (これのようにテキストを含む)</span>、そうでなければ次の画像のように単に新しい行に進むでしょう。<img src="long.jpg" alt="snippet of cloth"></p>
+<p>
+  これは基本的なブロックレベル要素です。隣接するブロックレベル要素は下の新しい行に配置されています。
+</p>
+
+<p>
+  デフォルトでは、親要素の幅の 100%
+  にまたがり、子コンテンツと同じ高さになります。幅と高さの合計は、コンテンツ +
+  パディング + ボーダーの幅/高さです。
+</p>
+
+<p>
+  マージンによって分けられています。マージンの相殺のため、両方ではなく、1
+  つのマージンの幅で区切られます。
+</p>
+
+<p>
+  <span>これ</span
+  >および<span>これのような</span>インライン要素は、同じ行に配置され、同じ行にスペースがある場合は隣接するテキストノードに配置されます。オーバーフローするインライン要素は<span
+    >可能であれば新しいラインに折り返され (これのようにテキストを含む)</span
+  >、そうでなければ次の画像のように単に新しい行に進むでしょう。<img
+    src="long.jpg"
+    alt="snippet of cloth" />
+</p>
 ```
 
 ```css
@@ -50,8 +66,8 @@ body {
 }
 
 p {
-  background: rgba(255,84,104,0.3);
-  border: 2px solid rgb(255,84,104);
+  background: rgba(255, 84, 104, 0.3);
+  border: 2px solid rgb(255, 84, 104);
   padding: 10px;
   margin: 10px;
 }
diff --git a/files/ja/learn/css/css_layout/positioning/index.md b/files/ja/learn/css/css_layout/positioning/index.md
index 66fe20e31b24a1..1f91a29e0b5400 100644
--- a/files/ja/learn/css/css_layout/positioning/index.md
+++ b/files/ja/learn/css/css_layout/positioning/index.md
@@ -26,7 +26,7 @@ HTML 要素に適用できるさまざまな種類の位置指定があります
 これを実演し、例をこれからのセクションのために準備するために、最初に HTML の 2 番目の {{htmlelement("p")}} に `positioned` の `class` を次のように追加します。
 
 ```html
-<p class="positioned"> ... </p>
+<p class="positioned">...</p>
 ```
 
 それでは、CSS の最後に次の規則を追加してください。
@@ -68,13 +68,30 @@ left: 30px;
 ```html hidden
 <h1>Relative positioning</h1>
 
-<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
-
-<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
-
-<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
-
-<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="long.jpg"></p>
+<p>
+  I am a basic block level element. My adjacent block level elements sit on new
+  lines below me.
+</p>
+
+<p class="positioned">
+  By default we span 100% of the width of our parent element, and we are as tall
+  as our child content. Our total width and height is our content + padding +
+  border width/height.
+</p>
+
+<p>
+  We are separated by our margins. Because of margin collapsing, we are
+  separated by the width of one of our margins, not both.
+</p>
+
+<p>
+  inline elements <span>like this one</span> and <span>this one</span> sit on
+  the same line as one another, and adjacent text nodes, if there is space on
+  the same line. Overflowing inline elements
+  <span>wrap onto a new line if possible — like this one containing text</span>,
+  or just go on to a new line if not, much like this image will do:
+  <img src="long.jpg" />
+</p>
 ```
 
 ```css hidden
@@ -122,13 +139,30 @@ position: absolute;
 ```html hidden
 <h1>Absolute positioning</h1>
 
-<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
-
-<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
-
-<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
-
-<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="long.jpg"></p>
+<p>
+  I am a basic block level element. My adjacent block level elements sit on new
+  lines below me.
+</p>
+
+<p class="positioned">
+  By default we span 100% of the width of our parent element, and we are as tall
+  as our child content. Our total width and height is our content + padding +
+  border width/height.
+</p>
+
+<p>
+  We are separated by our margins. Because of margin collapsing, we are
+  separated by the width of one of our margins, not both.
+</p>
+
+<p>
+  inline elements <span>like this one</span> and <span>this one</span> sit on
+  the same line as one another, and adjacent text nodes, if there is space on
+  the same line. Overflowing inline elements
+  <span>wrap onto a new line if possible — like this one containing text</span>,
+  or just go on to a new line if not, much like this image will do:
+  <img src="long.jpg" />
+</p>
 ```
 
 ```css hidden
@@ -186,13 +220,29 @@ position: relative;
 ```html hidden
 <h1>Positioning context</h1>
 
-<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
-
-<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p>
-
-<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
-
-<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="long.jpg"></p>
+<p>
+  I am a basic block level element. My adjacent block level elements sit on new
+  lines below me.
+</p>
+
+<p class="positioned">
+  Now I'm absolutely positioned relative to the
+  <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!
+</p>
+
+<p>
+  We are separated by our margins. Because of margin collapsing, we are
+  separated by the width of one of our margins, not both.
+</p>
+
+<p>
+  inline elements <span>like this one</span> and <span>this one</span> sit on
+  the same line as one another, and adjacent text nodes, if there is space on
+  the same line. Overflowing inline elements
+  <span>wrap onto a new line if possible — like this one containing text</span>,
+  or just go on to a new line if not, much like this image will do:
+  <img src="long.jpg" />
+</p>
 ```
 
 ```css hidden
@@ -260,13 +310,29 @@ z-index: 1;
 ```html hidden
 <h1>z-index</h1>
 
-<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
-
-<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p>
-
-<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
-
-<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="long.jpg"></p>
+<p>
+  I am a basic block level element. My adjacent block level elements sit on new
+  lines below me.
+</p>
+
+<p class="positioned">
+  Now I'm absolutely positioned relative to the
+  <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!
+</p>
+
+<p>
+  We are separated by our margins. Because of margin collapsing, we are
+  separated by the width of one of our margins, not both.
+</p>
+
+<p>
+  inline elements <span>like this one</span> and <span>this one</span> sit on
+  the same line as one another, and adjacent text nodes, if there is space on
+  the same line. Overflowing inline elements
+  <span>wrap onto a new line if possible — like this one containing text</span>,
+  or just go on to a new line if not, much like this image will do:
+  <img src="long.jpg" />
+</p>
 ```
 
 ```css hidden
@@ -354,13 +420,26 @@ p:nth-of-type(1) {
 ```html hidden
 <h1>Fixed positioning</h1>
 
-<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
+<p>
+  I am a basic block level element. My adjacent block level elements sit on new
+  lines below me.
+</p>
 
 <p class="positioned">I'm not positioned any more...</p>
 
-<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
-
-<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="long.jpg"></p>
+<p>
+  We are separated by our margins. Because of margin collapsing, we are
+  separated by the width of one of our margins, not both.
+</p>
+
+<p>
+  inline elements <span>like this one</span> and <span>this one</span> sit on
+  the same line as one another, and adjacent text nodes, if there is space on
+  the same line. Overflowing inline elements
+  <span>wrap onto a new line if possible — like this one containing text</span>,
+  or just go on to a new line if not, much like this image will do:
+  <img src="long.jpg" />
+</p>
 ```
 
 ```css hidden
@@ -406,13 +485,41 @@ p:nth-of-type(1) {
 ```html hidden
 <h1>Sticky positioning</h1>
 
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
 
 <div class="positioned">Sticky</div>
 
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+<p>
+  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
+  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
+  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
+  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
+  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
+  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
+  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+</p>
+
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
+  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
+  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
+  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
+  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
+  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
+  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
+  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
+  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
+</p>
 ```
 
 ```css hidden
@@ -422,8 +529,8 @@ body {
 }
 
 .positioned {
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
+  background: rgba(255, 84, 104, 0.3);
+  border: 2px solid rgb(255, 84, 104);
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
@@ -446,31 +553,31 @@ body {
 <h1>Sticky positioning</h1>
 
 <dl>
-    <dt>A</dt>
-    <dd>Apple</dd>
-    <dd>Ant</dd>
-    <dd>Altimeter</dd>
-    <dd>Airplane</dd>
-    <dt>B</dt>
-    <dd>Bird</dd>
-    <dd>Buzzard</dd>
-    <dd>Bee</dd>
-    <dd>Banana</dd>
-    <dd>Beanstalk</dd>
-    <dt>C</dt>
-    <dd>Calculator</dd>
-    <dd>Cane</dd>
-    <dd>Camera</dd>
-    <dd>Camel</dd>
-    <dt>D</dt>
-    <dd>Duck</dd>
-    <dd>Dime</dd>
-    <dd>Dipstick</dd>
-    <dd>Drone</dd>
-    <dt>E</dt>
-    <dd>Egg</dd>
-    <dd>Elephant</dd>
-    <dd>Egret</dd>
+  <dt>A</dt>
+  <dd>Apple</dd>
+  <dd>Ant</dd>
+  <dd>Altimeter</dd>
+  <dd>Airplane</dd>
+  <dt>B</dt>
+  <dd>Bird</dd>
+  <dd>Buzzard</dd>
+  <dd>Bee</dd>
+  <dd>Banana</dd>
+  <dd>Beanstalk</dd>
+  <dt>C</dt>
+  <dd>Calculator</dd>
+  <dd>Cane</dd>
+  <dd>Camera</dd>
+  <dd>Camel</dd>
+  <dt>D</dt>
+  <dd>Duck</dd>
+  <dd>Dime</dd>
+  <dd>Dipstick</dd>
+  <dd>Drone</dd>
+  <dt>E</dt>
+  <dd>Egg</dd>
+  <dd>Elephant</dd>
+  <dd>Egret</dd>
 </dl>
 ```
 
@@ -510,31 +617,31 @@ dt {
 <h1>Sticky positioning</h1>
 
 <dl>
-    <dt>A</dt>
-    <dd>Apple</dd>
-    <dd>Ant</dd>
-    <dd>Altimeter</dd>
-    <dd>Airplane</dd>
-    <dt>B</dt>
-    <dd>Bird</dd>
-    <dd>Buzzard</dd>
-    <dd>Bee</dd>
-    <dd>Banana</dd>
-    <dd>Beanstalk</dd>
-    <dt>C</dt>
-    <dd>Calculator</dd>
-    <dd>Cane</dd>
-    <dd>Camera</dd>
-    <dd>Camel</dd>
-    <dt>D</dt>
-    <dd>Duck</dd>
-    <dd>Dime</dd>
-    <dd>Dipstick</dd>
-    <dd>Drone</dd>
-    <dt>E</dt>
-    <dd>Egg</dd>
-    <dd>Elephant</dd>
-    <dd>Egret</dd>
+  <dt>A</dt>
+  <dd>Apple</dd>
+  <dd>Ant</dd>
+  <dd>Altimeter</dd>
+  <dd>Airplane</dd>
+  <dt>B</dt>
+  <dd>Bird</dd>
+  <dd>Buzzard</dd>
+  <dd>Bee</dd>
+  <dd>Banana</dd>
+  <dd>Beanstalk</dd>
+  <dt>C</dt>
+  <dd>Calculator</dd>
+  <dd>Cane</dd>
+  <dd>Camera</dd>
+  <dd>Camel</dd>
+  <dt>D</dt>
+  <dd>Duck</dd>
+  <dd>Dime</dd>
+  <dd>Dipstick</dd>
+  <dd>Drone</dd>
+  <dt>E</dt>
+  <dd>Egg</dd>
+  <dd>Elephant</dd>
+  <dd>Egret</dd>
 </dl>
 ```
 
diff --git a/files/ja/learn/css/css_layout/practical_positioning_examples/index.md b/files/ja/learn/css/css_layout/practical_positioning_examples/index.md
index 8b4874a078a6d3..8992bf0a47c56b 100644
--- a/files/ja/learn/css/css_layout/practical_positioning_examples/index.md
+++ b/files/ja/learn/css/css_layout/practical_positioning_examples/index.md
@@ -36,17 +36,32 @@ slug: Learn/CSS/CSS_layout/Practical_positioning_examples
     <article class="active-panel">
       <h2>The first tab</h2>
 
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
+        turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum
+        et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius
+        libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt
+        metus. Donec ultrices, urna maximus consequat aliquet, dui neque
+        eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor
+        urna. Nulla facilisi.
+      </p>
     </article>
     <article>
       <h2>The second tab</h2>
 
-      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
+      <p>
+        This tab hasn't got any Lorem Ipsum in it. But the content isn't very
+        exciting all the same.
+      </p>
     </article>
     <article>
       <h2>The third tab</h2>
 
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
+        turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an
+        ordered list: how exciting!
+      </p>
 
       <ol>
         <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
@@ -132,7 +147,8 @@ body {
 最後に、このセクションでは、リンク状態にいくつかのスタイルを設定します。 最初に、フォーカス時やホバー時にタブの状態が異なるように {{cssxref(":focus")}} と {{cssxref(":hover")}} の状態を設定し、ユーザーに視覚的なフィードバックを提供します。 次に、タブの 1 つに `active` のクラスが存在する場合、それに同じスタイルを設定する規則を設定します。 これをタブがクリックされたときに JavaScript を使用して設定します。 次の CSS を他のスタイルの下に配置します。
 
 ```css
-.info-box li a:focus, .info-box li a:hover {
+.info-box li a:focus,
+.info-box li a:hover {
   background-color: #a60000;
   color: white;
 }
@@ -237,14 +253,30 @@ function setTabHandler(tab, tabPos) {
 ```html
 <section class="fake-content">
   <h1>Fake content</h1>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>
+    This is fake content. Your main web page contents would probably go here.
+  </p>
+  <p>
+    This is fake content. Your main web page contents would probably go here.
+  </p>
+  <p>
+    This is fake content. Your main web page contents would probably go here.
+  </p>
+  <p>
+    This is fake content. Your main web page contents would probably go here.
+  </p>
+  <p>
+    This is fake content. Your main web page contents would probably go here.
+  </p>
+  <p>
+    This is fake content. Your main web page contents would probably go here.
+  </p>
+  <p>
+    This is fake content. Your main web page contents would probably go here.
+  </p>
+  <p>
+    This is fake content. Your main web page contents would probably go here.
+  </p>
 </section>
 ```
 
@@ -376,7 +408,7 @@ aside {
 追加する CSS の最後の部分がもう 1 つあります。 CSS の下部に次のコードを追加してください。
 
 ```css
-input[type=checkbox]:checked + aside {
+input[type="checkbox"]:checked + aside {
   right: 0px;
 }
 ```
diff --git a/files/ja/learn/css/css_layout/supporting_older_browsers/index.md b/files/ja/learn/css/css_layout/supporting_older_browsers/index.md
index 3953e86f717540..ae4e92a6485f82 100644
--- a/files/ja/learn/css/css_layout/supporting_older_browsers/index.md
+++ b/files/ja/learn/css/css_layout/supporting_older_browsers/index.md
@@ -44,10 +44,12 @@ CSS の仕様には、2 つのレイアウト方法が同じ項目に適用さ
 以下の例では、3 つの `<div>` をフロートさせて、それらが一行に表示されるようにしました。 [CSS グリッドレイアウト](/ja/docs/Learn/CSS/CSS_layout/Grids)をサポートしていないブラウザーでは、ボックスの行はフロートレイアウトとして表示されます。 グリッド項目になったフロート項目はフロートのふるまいを失います。 つまり、`wrapper` をグリッドコンテナに変えることによって、フロート項目はグリッド項目になります。 ブラウザーがグリッドレイアウトをサポートしていればグリッドビューを表示し、そうでなければ `display: grid` と関連のプロパティを無視してフロートレイアウトが使用されます。
 
 ```css
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   max-width: 400px;
   display: grid;
@@ -57,7 +59,7 @@ CSS の仕様には、2 つのレイアウト方法が同じ項目に適用さ
 .item {
   float: left;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
 }
 ```
@@ -94,10 +96,12 @@ CSS の仕様には、2 つのレイアウト方法が同じ項目に適用さ
 フロートレイアウトでは、パーセントはコンテナから計算されます — 33.333% はコンテナ幅の 3 分の 1 です。 ただしグリッドでは、 33.333% は項目が配置されているグリッド領域から計算されるため、グリッドレイアウトが導入されると、実際に必要なサイズのさらに 3 分の 1 になってしまいます。
 
 ```css
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   max-width: 400px;
   display: grid;
@@ -107,7 +111,7 @@ CSS の仕様には、2 つのレイアウト方法が同じ項目に適用さ
 .item {
   float: left;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
   width: 33.333%;
 }
@@ -132,10 +136,12 @@ CSS の仕様には、2 つのレイアウト方法が同じ項目に適用さ
 上記の例に機能クエリを追加すると、グリッドをサポートしている場合、項目の幅を `auto` に戻すことができます。
 
 ```css
-* {box-sizing: border-box;}
+* {
+  box-sizing: border-box;
+}
 
 .wrapper {
-  background-color: rgb(79,185,227);
+  background-color: rgb(79, 185, 227);
   padding: 10px;
   max-width: 400px;
   display: grid;
@@ -145,14 +151,14 @@ CSS の仕様には、2 つのレイアウト方法が同じ項目に適用さ
 .item {
   float: left;
   border-radius: 5px;
-  background-color: rgb(207,232,220);
+  background-color: rgb(207, 232, 220);
   padding: 1em;
   width: 33.333%;
 }
 
 @supports (display: grid) {
   .item {
-      width: auto;
+    width: auto;
   }
 }
 ```
diff --git a/files/ja/learn/css/first_steps/getting_started/index.md b/files/ja/learn/css/first_steps/getting_started/index.md
index 59b0ee9dcc3dcc..cbadb1a276b2a8 100644
--- a/files/ja/learn/css/first_steps/getting_started/index.md
+++ b/files/ja/learn/css/first_steps/getting_started/index.md
@@ -18,28 +18,29 @@ HTML 文書から始めましょう。あなたのコンピューターのフォ
 ```html
 <!doctype html>
 <html lang="ja">
-<head>
-    <meta charset="utf-8">
+  <head>
+    <meta charset="utf-8" />
     <title>CSS 入門</title>
-</head>
-
-<body>
+  </head>
 
+  <body>
     <h1>見出し１です</h1>
 
-    <p>これは第一段落の文です。この文には <span>span 要素</span>
-と<a href="http://example.com">リンク</a>が含まれます。</p>
+    <p>
+      これは第一段落の文です。この文には <span>span 要素</span> と<a
+        href="http://example.com"
+        >リンク</a
+      >が含まれます。
+    </p>
 
     <p>これは第二段落の文です。この文には <em>em 要素</em>が含まれます。</p>
 
     <ul>
-        <li>一つ目の項目</li>
-        <li>二つ目の項目</li>
-        <li><em>三つ目</em>の項目</li>
+      <li>一つ目の項目</li>
+      <li>二つ目の項目</li>
+      <li><em>三つ目</em>の項目</li>
     </ul>
-
-</body>
-
+  </body>
 </html>
 ```
 
@@ -54,7 +55,7 @@ HTML ドキュメントとおなじフォルダーにファイルをつくり、
 `styles.css` を `index.html` にリンクさせるには、HTML 文書にある {{htmlelement("head")}} 要素の中につぎのコードを追記してください:
 
 ```html
-<link rel="stylesheet" href="styles.css">
+<link rel="stylesheet" href="styles.css" />
 ```
 
 {{htmlelement("link")}} 要素はブラウザーに、スタイルシートがあること、`rel` 属性を使うこと、`href` 属性の値でスタイルシートのある場所を伝えます。`styles.css` に以下のルールを記述すれば、CSS が働くかテストできます。使っているコードエディターでつぎのコードを CSS ファイルに追記してください:
@@ -82,8 +83,9 @@ p {
 セレクタをカンマで区切ることによって、同時に複数のセレクタへ焦点をあてることができます。もしすべての段落とリストすべてを緑にしたければ、CSS のルールセットは次のようになります:
 
 ```css
-p, li {
-    color: green;
+p,
+li {
+  color: green;
 }
 ```
 
diff --git a/files/ja/learn/css/first_steps/how_css_is_structured/index.md b/files/ja/learn/css/first_steps/how_css_is_structured/index.md
index 721e6b96766ee3..c49e8ab91de425 100644
--- a/files/ja/learn/css/first_steps/how_css_is_structured/index.md
+++ b/files/ja/learn/css/first_steps/how_css_is_structured/index.md
@@ -46,7 +46,7 @@ CSS の概要と基本的な使い方について理解できたので、今度
 HTML の `<link>` 要素から外部 CSS スタイルシートを参照しています。
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -94,7 +94,7 @@ p {
 例えば、 HTML はこのようになります。
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -127,7 +127,7 @@ p {
 インラインスタイルは、単一の HTML 要素のみに影響を与える CSS 宣言で、 `style` 属性の中に記述します。 HTML 文書におけるインラインスタイルの実装は次のようになります。
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -153,7 +153,7 @@ p {
 **index.html:**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -423,7 +423,10 @@ CSS のコメントは `/*` で始まり `*/` で終わります。以下の例
 /* 基本的な要素のスタイル付けを扱う */
 /* -------------------------------------------------------------------------------------------- */
 body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
+  font:
+    1em/150% Helvetica,
+    Arial,
+    sans-serif;
   padding: 1em;
   margin: 0 auto;
   max-width: 33em;
@@ -480,7 +483,10 @@ p {
 
 ```css
 body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
+  font:
+    1em/150% Helvetica,
+    Arial,
+    sans-serif;
   padding: 1em;
   margin: 0 auto;
   max-width: 33em;
diff --git a/files/ja/learn/css/first_steps/how_css_works/index.md b/files/ja/learn/css/first_steps/how_css_works/index.md
index 6736cc89b0995a..70f31550b845df 100644
--- a/files/ja/learn/css/first_steps/how_css_works/index.md
+++ b/files/ja/learn/css/first_steps/how_css_works/index.md
@@ -85,7 +85,9 @@ P
 {{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}
 
 ```css hidden
-p {margin:0;}
+p {
+  margin: 0;
+}
 ```
 
 ## DOM への CSS 適用
@@ -132,7 +134,7 @@ span {
 次の例では、色にイギリス英語のスペルを使用しているため、プロパティが正しくありません（訳注: color を誤って colour としてしまっている）。よって段落は青くなっていません。ただし、他の CSS はすべて適用されています。無効な行のみが無視されます。
 
 ```html
-<p> I want this text to be large, bold and blue.</p>
+<p>I want this text to be large, bold and blue.</p>
 ```
 
 ```css
diff --git a/files/ja/learn/css/first_steps/styling_a_biography_page/index.md b/files/ja/learn/css/first_steps/styling_a_biography_page/index.md
index 6a039648415272..cd44cf0d372b79 100644
--- a/files/ja/learn/css/first_steps/styling_a_biography_page/index.md
+++ b/files/ja/learn/css/first_steps/styling_a_biography_page/index.md
@@ -75,9 +75,9 @@ original_slug: Learn/CSS/First_steps/Using_your_new_knowledge
 1. あなたが作ったものを [CodePen](https://codepen.io/) や [jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) などのコード共有サービスに公開してください。
 2. 添削の依頼あるいは訊きたいことを [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn) に投稿してください。ここに投稿するときには次のことを忘れないようにしてください。
 
-    - タイトルは何についての質問か分かるように、「Assessment wanted for CSS First Steps」のようにしてください。
-    - 添削や質問を依頼したいコードへのリンクを貼ってください。ソースコードを示してもらわないとこちらもどうサポートしたらよいかがわからないからです。
-    - どの課題に取り組んでいるのか分かるように課題へのリンクを貼ってください。そうしていただけるとあなたがどこで躓いているのか知ることができます。
+   - タイトルは何についての質問か分かるように、「Assessment wanted for CSS First Steps」のようにしてください。
+   - 添削や質問を依頼したいコードへのリンクを貼ってください。ソースコードを示してもらわないとこちらもどうサポートしたらよいかがわからないからです。
+   - どの課題に取り組んでいるのか分かるように課題へのリンクを貼ってください。そうしていただけるとあなたがどこで躓いているのか知ることができます。
 
 ## 次のステップ
 
diff --git a/files/ja/learn/css/howto/create_fancy_boxes/index.md b/files/ja/learn/css/howto/create_fancy_boxes/index.md
index 98af1651f5b452..2ecaa5e407a054 100644
--- a/files/ja/learn/css/howto/create_fancy_boxes/index.md
+++ b/files/ja/learn/css/howto/create_fancy_boxes/index.md
@@ -99,18 +99,28 @@ CSS ボックスは、CSS で装飾されたウェブページの構成要素で
      お気づきのとおり、
      色のグラデーションは画像と見なされ、
      そのように操作することができます。 */
-  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
+  background-image: linear-gradient(175deg, rgba(0, 0, 0, 0) 95%, #8da389 95%),
+    linear-gradient(85deg, rgba(0, 0, 0, 0) 95%, #8da389 95%), linear-gradient(
+      175deg,
+      rgba(0, 0, 0, 0) 90%,
+      #b4b07f 90%
+    ), linear-gradient(85deg, rgba(0, 0, 0, 0) 92%, #b4b07f 92%),
+    linear-gradient(175deg, rgba(0, 0, 0, 0) 85%, #c5a68e 85%), linear-gradient(
+      85deg,
+      rgba(0, 0, 0, 0) 89%,
+      #c5a68e 89%
+    ), linear-gradient(175deg, rgba(0, 0, 0, 0) 80%, #ba9499 80%),
+    linear-gradient(85deg, rgba(0, 0, 0, 0) 86%, #ba9499 86%), linear-gradient(
+      175deg,
+      rgba(0, 0, 0, 0) 75%,
+      #9f8fa4 75%
+    ), linear-gradient(85deg, rgba(0, 0, 0, 0) 83%, #9f8fa4 83%),
+    linear-gradient(175deg, rgba(0, 0, 0, 0) 70%, #74a6ae 70%), linear-gradient(85deg, rgba(
+          0,
+          0,
+          0,
+          0
+        ) 80%, #74a6ae 80%);
 }
 ```
 
@@ -234,7 +244,11 @@ blockquote::before,
 blockquote::after {
   position: absolute;
   height: 3rem;
-  font: 6rem/100% Georgia, "Times New Roman", Times, serif;
+  font:
+    6rem/100% Georgia,
+    "Times New Roman",
+    Times,
+    serif;
 }
 
 blockquote::before {
diff --git a/files/ja/learn/css/howto/css_faq/index.md b/files/ja/learn/css/howto/css_faq/index.md
index a94524c2560c87..058fec269ae023 100644
--- a/files/ja/learn/css/howto/css_faq/index.md
+++ b/files/ja/learn/css/howto/css_faq/index.md
@@ -24,7 +24,7 @@ Gecko ベースのブラウザーには、いくつかの小さな調整のみ
 標準の `DOCTYPE` 宣言では、標準モードが起動します。
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 ```
 
 すべて使用可能な場合は、上記の doctype を使用してください。他にも、標準モードやほぼ標準モードを起動する有効な古い doctype があります。
diff --git a/files/ja/learn/css/styling_text/fundamentals/index.md b/files/ja/learn/css/styling_text/fundamentals/index.md
index c47076d93ccc98..094be3f9d48ebe 100644
--- a/files/ja/learn/css/styling_text/fundamentals/index.md
+++ b/files/ja/learn/css/styling_text/fundamentals/index.md
@@ -33,12 +33,13 @@ HTML と CSS を使った作業ですでに経験したように、要素内の
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 [完成した例](http://mdn.github.io/learning-area/css/styling-text/fundamentals/)は Github にあります（[ソースコード](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html)も参照してください）。
@@ -62,12 +63,13 @@ p {
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 {{ EmbedLiveSample('Color', '100%', 220) }}
@@ -153,12 +155,13 @@ p {
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 {{ EmbedLiveSample('A_font-family_example', '100%', 220) }}
@@ -177,8 +180,10 @@ occasion such as this that he did.</p>
 
 ```html
 <!-- ドキュメントのベースフォントサイズは 16px です -->
-<article> <!-- ここのフォントサイズが 1.5em の場合 -->
-  <p>My paragraph</p> <!-- 20px のフォントサイズにするにはどう計算しますか？ -->
+<article>
+  <!-- ここのフォントサイズが 1.5em の場合 -->
+  <p>My paragraph</p>
+  <!-- 20px のフォントサイズにするにはどう計算しますか？ -->
 </article>
 ```
 
@@ -195,12 +200,13 @@ occasion such as this that he did.</p>
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 ```css
@@ -246,6 +252,7 @@ CSS は、テキストの視覚的な太さや強調を変更するために次
   - `full-width`: 例えば、ラテン文字を（中国語、日本語、韓国語など）アジア言語のグリフと一緒に揃えて、等幅フォントのように、固定幅の四角形の中にすべてのグリフを書く（written inside a fixed-width square）ように変換します。
 
 - {{cssxref("text-decoration")}}: フォントのテキスト飾りを設定/設定解除します（主にリンクのデフォルトの下線を解除するために使用します）。 使用可能な値は次のとおりです。
+
   - `none`: 既に存在するテキスト飾りをすべて解除します。
   - `underline`: **テキストに下線を引きます**。
   - `overline`: テキストに上線を付けます。
@@ -262,12 +269,13 @@ CSS は、テキストの視覚的な太さや強調を変更するために次
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 ```css
@@ -315,10 +323,11 @@ text-shadow: 4px 4px 5px red;
 複数の影の値をコンマで区切って含めることで、次のように同じテキストに複数の影を付けることができます。
 
 ```css
-text-shadow: -1px -1px 1px #aaa,
-             0px 4px 1px rgba(0,0,0,0.5),
-             4px 4px 5px rgba(0,0,0,0.7),
-             0px 0px 7px rgba(0,0,0,0.4);
+text-shadow:
+  -1px -1px 1px #aaa,
+  0px 4px 1px rgba(0, 0, 0, 0.5),
+  4px 4px 5px rgba(0, 0, 0, 0.7),
+  0px 0px 7px rgba(0, 0, 0, 0.4);
 ```
 
 これを Tommy the cat の例の {{htmlelement("h1")}} 要素に適用すると、結果は次のようになります。
@@ -328,12 +337,13 @@ text-shadow: -1px -1px 1px #aaa,
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 ```css hidden
@@ -344,10 +354,11 @@ html {
 h1 {
   font-size: 26px;
   text-transform: capitalize;
-  text-shadow: -1px -1px 1px #aaa,
-               0px 2px 1px rgba(0,0,0,0.5),
-               2px 2px 2px rgba(0,0,0,0.7),
-               0px 0px 3px rgba(0,0,0,0.4);
+  text-shadow:
+    -1px -1px 1px #aaa,
+    0px 2px 1px rgba(0, 0, 0, 0.5),
+    2px 2px 2px rgba(0, 0, 0, 0.7),
+    0px 0px 3px rgba(0, 0, 0, 0.4);
 }
 
 h1 + p {
@@ -385,12 +396,13 @@ p {
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 ```css hidden
@@ -401,10 +413,11 @@ html {
 h1 {
   font-size: 2.6rem;
   text-transform: capitalize;
-  text-shadow: -1px -1px 1px #aaa,
-               0px 2px 1px rgba(0,0,0,0.5),
-               2px 2px 2px rgba(0,0,0,0.7),
-               0px 0px 3px rgba(0,0,0,0.4);
+  text-shadow:
+    -1px -1px 1px #aaa,
+    0px 2px 1px rgba(0, 0, 0, 0.5),
+    2px 2px 2px rgba(0, 0, 0, 0.7),
+    0px 0px 3px rgba(0, 0, 0, 0.4);
   text-align: center;
 }
 
@@ -436,12 +449,13 @@ line-height: 1.5;
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 ```css hidden
@@ -452,10 +466,11 @@ html {
 h1 {
   font-size: 2.6rem;
   text-transform: capitalize;
-  text-shadow: -1px -1px 1px #aaa,
-               0px 2px 1px rgba(0,0,0,0.5),
-               2px 2px 2px rgba(0,0,0,0.7),
-               0px 0px 3px rgba(0,0,0,0.4);
+  text-shadow:
+    -1px -1px 1px #aaa,
+    0px 2px 1px rgba(0, 0, 0, 0.5),
+    2px 2px 2px rgba(0, 0, 0, 0.7),
+    0px 0px 3px rgba(0, 0, 0, 0.4);
   text-align: center;
 }
 
@@ -493,12 +508,13 @@ p::first-line {
 
 <p>I remember as if it were a meal ago...</p>
 
-<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
- may have nestled its way into his mighty throat. Many a fat alley rat
-had met its demise while staring point blank down the cavernous barrel of
- this awesome prowling machine. Truly a wonder of nature this urban
-predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.</p>
+<p>
+  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
+  nestled its way into his mighty throat. Many a fat alley rat had met its
+  demise while staring point blank down the cavernous barrel of this awesome
+  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
+  had many a story to tell. But it was a rare occasion such as this that he did.
+</p>
 ```
 
 ```css hidden
@@ -509,10 +525,11 @@ html {
 h1 {
   font-size: 2.6rem;
   text-transform: capitalize;
-  text-shadow: -1px -1px 1px #aaa,
-               0px 2px 1px rgba(0,0,0,0.5),
-               2px 2px 2px rgba(0,0,0,0.7),
-               0px 0px 3px rgba(0,0,0,0.4);
+  text-shadow:
+    -1px -1px 1px #aaa,
+    0px 2px 1px rgba(0, 0, 0, 0.5),
+    2px 2px 2px rgba(0, 0, 0, 0.7),
+    0px 0px 3px rgba(0, 0, 0, 0.4);
   text-align: center;
 }
 
@@ -580,7 +597,10 @@ p {
 完全な例は次のようになります。
 
 ```css
-font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+font:
+  italic normal bold normal 3em/1.5 Helvetica,
+  Arial,
+  sans-serif;
 ```
 
 ## 能動的学習: テキストの装飾で遊ぶ
@@ -590,20 +610,37 @@ font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
 間違えた場合は、_Reset_ ボタンを使用していつでもリセットできます。
 
 ```html hidden
-<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
+<div
+  class="body-wrapper"
+  style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
   <h2>HTML Input</h2>
-  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
-  <p>Some sample text for your delight</p></textarea>
+  <textarea
+    id="code"
+    class="html-input"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
+  <p>Some sample text for your delight</p></textarea
+  >
 
   <h2>CSS Input</h2>
-  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p {
+  <textarea
+    id="code"
+    class="css-input"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
+p {
 
-  }</textarea>
+  }</textarea
+  >
 
   <h2>Output</h2>
-  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
+  <div
+    class="output"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
   <div class="controls">
-    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
+    <input
+      id="reset"
+      type="button"
+      value="Reset"
+      style="margin: 10px 10px 0 0;" />
   </div>
 </div>
 ```
@@ -616,8 +653,8 @@ var htmlCode = htmlInput.value;
 var cssCode = cssInput.value;
 var output = document.querySelector(".output");
 
-var styleElem = document.createElement('style');
-var headElem = document.querySelector('head');
+var styleElem = document.createElement("style");
+var headElem = document.querySelector("head");
 headElem.appendChild(styleElem);
 
 function drawOutput() {
@@ -625,7 +662,7 @@ function drawOutput() {
   styleElem.textContent = cssInput.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   htmlInput.value = htmlCode;
   cssInput.value = cssCode;
   drawOutput();
diff --git a/files/ja/learn/css/styling_text/styling_links/index.md b/files/ja/learn/css/styling_text/styling_links/index.md
index fc9a022844a074..8e9314b7332a1d 100644
--- a/files/ja/learn/css/styling_text/styling_links/index.md
+++ b/files/ja/learn/css/styling_text/styling_links/index.md
@@ -92,28 +92,21 @@ p {
 
 ```css
 a {
-
 }
 
-
 a:link {
-
 }
 
 a:visited {
-
 }
 
 a:focus {
-
 }
 
 a:hover {
-
 }
 
 a:active {
-
 }
 ```
 
@@ -144,31 +137,32 @@ a:link {
 }
 
 a:visited {
-  color: #437A16;
+  color: #437a16;
 }
 
 a:focus {
   border-bottom: 1px solid;
-  background: #BAE498;
+  background: #bae498;
 }
 
 a:hover {
   border-bottom: 1px solid;
-  background: #CDFEAA;
+  background: #cdfeaa;
 }
 
 a:active {
   background: #265301;
-  color: #CDFEAA;
+  color: #cdfeaa;
 }
 ```
 
 CSS を適用するためのサンプル HTML も提供します。
 
 ```html
-<p>There are several browsers available, such as <a href="#">Mozilla
-Firefox</a>, <a href="#">Google Chrome</a>, and
-<a href="#">Microsoft Edge</a>.</p>
+<p>
+  There are several browsers available, such as <a href="#">Mozilla Firefox</a>,
+  <a href="#">Google Chrome</a>, and <a href="#">Microsoft Edge</a>.
+</p>
 ```
 
 2 つをまとめると、この結果が得られます。
@@ -194,14 +188,25 @@ Firefox</a>, <a href="#">Google Chrome</a>, and
 間違えた場合は、_Reset_ ボタンを使用していつでもリセットできます。 本当に立ち往生してしまったら、上に示した例を挿入するために _Show solution_ ボタンを押してください。
 
 ```html hidden
-<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
+<div
+  class="body-wrapper"
+  style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
   <h2>HTML Input</h2>
-  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>There are several browsers available, such as <a href="#">Mozilla
+  <textarea
+    id="code"
+    class="html-input"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
+<p>There are several browsers available, such as <a href="#">Mozilla
  Firefox</a>, <a href="#">Google Chrome</a>, and
-<a href="#">Microsoft Edge</a>.</p></textarea>
+<a href="#">Microsoft Edge</a>.</p></textarea
+  >
 
   <h2>CSS Input</h2>
-  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a {
+  <textarea
+    id="code"
+    class="css-input"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
+a {
 
 }
 
@@ -223,13 +228,24 @@ a:hover {
 
 a:active {
 
-}</textarea>
+}</textarea
+  >
 
   <h2>Output</h2>
-  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
+  <div
+    class="output"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
   <div class="controls">
-    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
-    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
+    <input
+      id="reset"
+      type="button"
+      value="Reset"
+      style="margin: 10px 10px 0 0;" />
+    <input
+      id="solution"
+      type="button"
+      value="Show solution"
+      style="margin: 10px 0 0 10px;" />
   </div>
 </div>
 ```
@@ -243,8 +259,8 @@ var cssCode = cssInput.value;
 var output = document.querySelector(".output");
 var solution = document.getElementById("solution");
 
-var styleElem = document.createElement('style');
-var headElem = document.querySelector('head');
+var styleElem = document.createElement("style");
+var headElem = document.querySelector("head");
 headElem.appendChild(styleElem);
 
 function drawOutput() {
@@ -252,15 +268,16 @@ function drawOutput() {
   styleElem.textContent = cssInput.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   htmlInput.value = htmlCode;
   cssInput.value = cssCode;
   drawOutput();
 });
 
-solution.addEventListener("click", function() {
+solution.addEventListener("click", function () {
   htmlInput.value = htmlCode;
-  cssInput.value = 'p {\n  font-size: 1.2rem;\n  font-family: sans-serif;\n  line-height: 1.4;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;\n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}';
+  cssInput.value =
+    "p {\n  font-size: 1.2rem;\n  font-family: sans-serif;\n  line-height: 1.4;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;\n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}";
   drawOutput();
 });
 
@@ -278,9 +295,11 @@ window.addEventListener("load", drawOutput);
 欲しい効果が得られる HTML と CSS を見てみましょう。 まず、装飾する簡単な HTML です。
 
 ```html
-<p>For more information on the weather, visit our <a href="#">weather page</a>,
-look at <a href="http://#">weather on Wikipedia</a>, or check
-out <a href="http://#">weather on Extreme Science</a>.</p>
+<p>
+  For more information on the weather, visit our <a href="#">weather page</a>,
+  look at <a href="http://#">weather on Wikipedia</a>, or check out
+  <a href="http://#">weather on Extreme Science</a>.
+</p>
 ```
 
 次に、CSS です。
@@ -310,7 +329,8 @@ a:visited {
   color: purple;
 }
 
-a:focus, a:hover {
+a:focus,
+a:hover {
   border-bottom: 1px solid;
 }
 
@@ -319,7 +339,7 @@ a:active {
 }
 
 a[href*="http"] {
-  background: url('external-link-52.png') no-repeat 100% 0;
+  background: url("external-link-52.png") no-repeat 100% 0;
   background-size: 16px 16px;
   padding-right: 19px;
 }
@@ -349,14 +369,19 @@ a[href*="http"] {
 
 ```html
 <ul>
-  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
+  <li><a href="#">Home</a></li>
+  <li><a href="#">Pizza</a></li>
+  <li><a href="#">Music</a></li>
+  <li><a href="#">Wombats</a></li>
+  <li><a href="#">Finland</a></li>
 </ul>
 ```
 
 そして CSS です。
 
 ```css
-body,html {
+body,
+html {
   margin: 0;
   font-family: sans-serif;
 }
@@ -385,7 +410,9 @@ li:last-child a {
   margin-right: 0;
 }
 
-a:link, a:visited, a:focus {
+a:link,
+a:visited,
+a:focus {
   background: yellow;
 }
 
diff --git a/files/ja/learn/css/styling_text/styling_lists/index.md b/files/ja/learn/css/styling_text/styling_lists/index.md
index 11b4b1a73ebb7e..e3ab1d38fb1c8e 100644
--- a/files/ja/learn/css/styling_text/styling_lists/index.md
+++ b/files/ja/learn/css/styling_text/styling_lists/index.md
@@ -20,8 +20,10 @@ slug: Learn/CSS/Styling_text/Styling_lists
 ```html
 <h2>Shopping (unordered) list</h2>
 
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
+<p>
+  Paragraph for reference, paragraph for reference, paragraph for reference,
+  paragraph for reference, paragraph for reference, paragraph for reference.
+</p>
 
 <ul>
   <li>Hummus</li>
@@ -32,28 +34,40 @@ paragraph for reference, paragraph for reference, paragraph for reference.</p>
 
 <h2>Recipe (ordered) list</h2>
 
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
+<p>
+  Paragraph for reference, paragraph for reference, paragraph for reference,
+  paragraph for reference, paragraph for reference, paragraph for reference.
+</p>
 
 <ol>
   <li>Toast pita, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>
+    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+  </li>
   <li>Wash and chop the salad.</li>
   <li>Fill pita with salad, hummus, and fried halloumi.</li>
 </ol>
 
 <h2>Ingredient description list</h2>
 
-<p>Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.</p>
+<p>
+  Paragraph for reference, paragraph for reference, paragraph for reference,
+  paragraph for reference, paragraph for reference, paragraph for reference.
+</p>
 
 <dl>
   <dt>Hummus</dt>
-  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dd>
+    A thick dip/sauce generally made from chick peas blended with tahini, lemon
+    juice, salt, garlic, and other ingredients.
+  </dd>
   <dt>Pita</dt>
   <dd>A soft, slightly leavened flatbread.</dd>
   <dt>Halloumi</dt>
-  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dd>
+    A semi-hard, unripened, brined cheese with a higher-than-usual melting
+    point, usually made from goat/sheep milk.
+  </dd>
   <dt>Green salad</dt>
   <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
 </dl>
@@ -85,17 +99,22 @@ h2 {
   font-size: 2rem;
 }
 
-ul,ol,dl,p {
+ul,
+ol,
+dl,
+p {
   font-size: 1.5rem;
 }
 
-li, p {
+li,
+p {
   line-height: 1.5;
 }
 
 /* Description list styles */
 
-dd, dt {
+dd,
+dt {
   line-height: 1.5;
 }
 
@@ -225,7 +244,9 @@ ul {
 ```html
 <ol start="4">
   <li>Toast pita, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>
+    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+  </li>
   <li>Wash and chop the salad.</li>
   <li>Fill pita with salad, hummus, and fried halloumi.</li>
 </ol>
@@ -242,7 +263,9 @@ ul {
 ```html
 <ol start="4" reversed>
   <li>Toast pita, leave to cool, then slice down the edge.</li>
-  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>
+    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+  </li>
   <li>Wash and chop the salad.</li>
   <li>Fill pita with salad, hummus, and fried halloumi.</li>
 </ol>
@@ -261,7 +284,9 @@ ul {
 ```html
 <ol>
   <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
-  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="4">
+    Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
+  </li>
   <li value="6">Wash and chop the salad.</li>
   <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
 </ol>
@@ -285,9 +310,15 @@ ul {
 間違えた場合は、_Reset_ ボタンを使用していつでもリセットできます。 本当に立ち往生したら、答えを見るために _Show solution_ ボタンを押してください。
 
 ```html hidden
-<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
+<div
+  class="body-wrapper"
+  style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
   <h2>HTML Input</h2>
-  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul>
+  <textarea
+    id="code"
+    class="html-input"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
+<ul>
   <li>First, light the candle.</li>
   <li>Next, open the box.</li>
   <li>Finally, place the three magic items in the box, in this exact order, to complete the spell:
@@ -297,16 +328,30 @@ ul {
       <li>The goblin statue</li>
     </ol>
   </li>
-</ul></textarea>
+</ul></textarea
+  >
 
   <h2>CSS Input</h2>
-  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea>
+  <textarea
+    id="code"
+    class="css-input"
+    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea>
 
   <h2>Output</h2>
-  <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div>
+  <div
+    class="output"
+    style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div>
   <div class="controls">
-    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
-    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
+    <input
+      id="reset"
+      type="button"
+      value="Reset"
+      style="margin: 10px 10px 0 0;" />
+    <input
+      id="solution"
+      type="button"
+      value="Show solution"
+      style="margin: 10px 0 0 10px;" />
   </div>
 </div>
 ```
@@ -320,8 +365,8 @@ var cssCode = cssInput.value;
 var output = document.querySelector(".output");
 var solution = document.getElementById("solution");
 
-var styleElem = document.createElement('style');
-var headElem = document.querySelector('head');
+var styleElem = document.createElement("style");
+var headElem = document.querySelector("head");
 headElem.appendChild(styleElem);
 
 function drawOutput() {
@@ -329,15 +374,16 @@ function drawOutput() {
   styleElem.textContent = cssInput.value;
 }
 
-reset.addEventListener("click", function() {
+reset.addEventListener("click", function () {
   htmlInput.value = htmlCode;
   cssInput.value = cssCode;
   drawOutput();
 });
 
-solution.addEventListener("click", function() {
+solution.addEventListener("click", function () {
   htmlInput.value = htmlCode;
-  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}';
+  cssInput.value =
+    "ul {\n  list-style-type: square;\n}\n\nul li, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}";
   drawOutput();
 });
 
diff --git a/files/ja/learn/css/styling_text/web_fonts/index.md b/files/ja/learn/css/styling_text/web_fonts/index.md
index 91f6c68b94f202..1b1b4d50da152d 100644
--- a/files/ja/learn/css/styling_text/web_fonts/index.md
+++ b/files/ja/learn/css/styling_text/web_fonts/index.md
@@ -140,8 +140,9 @@ html {
    ```css
    @font-face {
      font-family: "zantrokeregular";
-     src: url("fonts/zantroke-webfont.woff2") format("woff2"), url("fonts/zantroke-webfont.woff")
-         format("woff");
+     src:
+       url("fonts/zantroke-webfont.woff2") format("woff2"),
+       url("fonts/zantroke-webfont.woff") format("woff");
      font-weight: normal;
      font-style: normal;
    }
@@ -179,8 +180,9 @@ Fontsquirrel によって生成された `@font-face` 構文を調べてみま
 ```css
 @font-face {
   font-family: "zantrokeregular";
-  src: url("zantroke-webfont.woff2") format("woff2"), url("zantroke-webfont.woff")
-      format("woff");
+  src:
+    url("zantroke-webfont.woff2") format("woff2"),
+    url("zantroke-webfont.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }
diff --git a/files/ja/learn/server-side/django/development_environment/index.md b/files/ja/learn/server-side/django/development_environment/index.md
index 91fada11916935..d1e0e6ad8c427d 100644
--- a/files/ja/learn/server-side/django/development_environment/index.md
+++ b/files/ja/learn/server-side/django/development_environment/index.md
@@ -116,8 +116,8 @@ python3 -V
 
 1. 必要なインストーラをダウンロードします:
 
-    1. <https://www.python.org/downloads/> を開きます
-    2. **Download Python 3.6.4** ボタンを選択します（正確なマイナーバージョン番号は異なる場合があります）。
+   1. <https://www.python.org/downloads/> を開きます
+   2. **Download Python 3.6.4** ボタンを選択します（正確なマイナーバージョン番号は異なる場合があります）。
 
 2. Finder を使用してファイルを探し、パッケージファイルをダブルクリックします。インストールの後、プロンプトが表示されます。
 
@@ -140,8 +140,8 @@ Windows にはデフォルトで Python は含まれていませんが、[python
 
 1. 必要なインストーラをダウンロードします:
 
-    1. <https://www.python.org/downloads/> を開きます
-    2. **Download Python 3.6.4** ボタンを選択します（正確なマイナーバージョン番号は異なる場合があります）。
+   1. <https://www.python.org/downloads/> を開きます
+   2. **Download Python 3.6.4** ボタンを選択します（正確なマイナーバージョン番号は異なる場合があります）。
 
 2. ダウンロードしたファイルをダブルクリックし、インストールのプロンプトに従って Python をインストールします。
 
diff --git a/files/ja/learn/server-side/django/models/index.md b/files/ja/learn/server-side/django/models/index.md
index 0b174380937e5a..2bf8862673c112 100644
--- a/files/ja/learn/server-side/django/models/index.md
+++ b/files/ja/learn/server-side/django/models/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django チュートリアル Part 3: モデルの使用'
+title: "Django チュートリアル Part 3: モデルの使用"
 slug: Learn/Server-side/Django/Models
 ---
 
@@ -77,7 +77,7 @@ In the below sections we'll explore each of the features inside the model in det
 
 A model can have an arbitrary number of fields, of any type — each one represents a column of data that we want to store in one of our database tables. Each database record (row) will consist of one of each field value. Let's look at the example seen below:
 
-```js
+```python
 my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
 ```
 
diff --git a/files/ja/learn/server-side/django/skeleton_website/index.md b/files/ja/learn/server-side/django/skeleton_website/index.md
index 10c5f5e696f992..3a8d4c58289cce 100644
--- a/files/ja/learn/server-side/django/skeleton_website/index.md
+++ b/files/ja/learn/server-side/django/skeleton_website/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django チュートリアル Part 2: スケルトンウェブサイトの作成'
+title: "Django チュートリアル Part 2: スケルトンウェブサイトの作成"
 slug: Learn/Server-side/Django/skeleton_website
 ---
 
@@ -20,7 +20,7 @@ slug: Learn/Server-side/Django/skeleton_website
 1. `django-admin` ツールを使ってプロジェクトフォルダ、基本的なテンプレートファイル、プロジェクト管理スクリプト(**manage.py**)を作ります .
 2. **manage.py** は１つ以上のアプリケーションを作ります。
 
-    > **メモ:** ウェブサイトは 1 つ以上のセクションから成ります。例えば、メインサイト、ブログ、ウィキ、ダウンロードエリアなど。Django は、これらのコンポーネントを別々のアプリケーションとして作成することを助けてくれます。それらは、必要なら異なるプロジェクトで再利用できます。
+   > **メモ:** ウェブサイトは 1 つ以上のセクションから成ります。例えば、メインサイト、ブログ、ウィキ、ダウンロードエリアなど。Django は、これらのコンポーネントを別々のアプリケーションとして作成することを助けてくれます。それらは、必要なら異なるプロジェクトで再利用できます。
 
 3. プロジェクトにアプリケーションを含めるために登録します。
 4. url/path マッパーはそれらのアプリケーションを結びつけます。
diff --git a/files/ja/learn/server-side/django/tutorial_local_library_website/index.md b/files/ja/learn/server-side/django/tutorial_local_library_website/index.md
index e6f6727bb4a0ab..ec76d86939fe5d 100644
--- a/files/ja/learn/server-side/django/tutorial_local_library_website/index.md
+++ b/files/ja/learn/server-side/django/tutorial_local_library_website/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Django チュートリアル: 地域図書館ウェブサイト'
+title: "Django チュートリアル: 地域図書館ウェブサイト"
 slug: Learn/Server-side/Django/Tutorial_local_library_website
 ---
 
diff --git a/files/ja/learn/server-side/django/web_application_security/index.md b/files/ja/learn/server-side/django/web_application_security/index.md
index 84a7412cb496a9..3fbefdce09e2e1 100644
--- a/files/ja/learn/server-side/django/web_application_security/index.md
+++ b/files/ja/learn/server-side/django/web_application_security/index.md
@@ -31,10 +31,10 @@ Django's template system protects you against the majority of XSS attacks by [es
 2. Open the site in your local browser and login to your superuser account.
 3. Navigate to the author-creation page (which should be at URL: [`http://127.0.0.1:8000/catalog/author/create/`](http://127.0.0.1:8000/catalog/author/create/)).
 4. Enter names and date details for a new user, and then append the following text to the Last Name field:
-    `<script>alert('Test alert');</script>`.
-    ![Author Form XSS test](author_create_form_alert_xss.png)
+   `<script>alert('Test alert');</script>`.
+   ![Author Form XSS test](author_create_form_alert_xss.png)
 
-    > **メモ:** This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.
+   > **メモ:** This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.
 
 5. Press **Submit** to save the record.
 6. When you save the author it will be displayed as shown below. Because of the XSS protections the `alert()` should not be run. Instead the script is displayed as plain text.![Author detail view XSS test](author_detail_alert_xss.png)
@@ -42,7 +42,10 @@ Django's template system protects you against the majority of XSS attacks by [es
 If you view the page HTML source code, you can see that the dangerous characters for the script tags have been turned into their harmless escape code equivalents (e.g. `>` is now `&gt;`)
 
 ```html
-<h1>Author: Boon&lt;script&gt;alert(&#39;Test alert&#39;);&lt;/script&gt;, David (Boonie) </h1>
+<h1>
+  Author: Boon&lt;script&gt;alert(&#39;Test alert&#39;);&lt;/script&gt;, David
+  (Boonie)
+</h1>
 ```
 
 Using Django templates protects you against the majority of XSS attacks. However it is possible to turn off this protection, and the protection isn't automatically applied to all tags that wouldn't normally be populated by user input (for example, the `help_text` in a form field is usually not user-supplied, so Django doesn't escape those values).
@@ -59,19 +62,56 @@ In order to do this, they might create an HTML file like the one below, which co
 
 ```html
 <html>
-<body onload='document.EvilForm.submit()'>
-
-<form action="http://127.0.0.1:8000/catalog/author/create/" method="post" name='EvilForm'>
-  <table>
-    <tr><th><label for="id_first_name">First name:</label></th><td><input id="id_first_name" maxlength="100" name="first_name" type="text" value="Mad" required /></td></tr>
-    <tr><th><label for="id_last_name">Last name:</label></th><td><input id="id_last_name" maxlength="100" name="last_name" type="text" value="Man" required /></td></tr>
-    <tr><th><label for="id_date_of_birth">Date of birth:</label></th><td><input id="id_date_of_birth" name="date_of_birth" type="text" /></td></tr>
-    <tr><th><label for="id_date_of_death">Died:</label></th><td><input id="id_date_of_death" name="date_of_death" type="text" value="12/10/2016" /></td></tr>
-  </table>
-  <input type="submit" value="Submit" />
-</form>
-
-</body>
+  <body onload="document.EvilForm.submit()">
+    <form
+      action="http://127.0.0.1:8000/catalog/author/create/"
+      method="post"
+      name="EvilForm">
+      <table>
+        <tr>
+          <th><label for="id_first_name">First name:</label></th>
+          <td>
+            <input
+              id="id_first_name"
+              maxlength="100"
+              name="first_name"
+              type="text"
+              value="Mad"
+              required />
+          </td>
+        </tr>
+        <tr>
+          <th><label for="id_last_name">Last name:</label></th>
+          <td>
+            <input
+              id="id_last_name"
+              maxlength="100"
+              name="last_name"
+              type="text"
+              value="Man"
+              required />
+          </td>
+        </tr>
+        <tr>
+          <th><label for="id_date_of_birth">Date of birth:</label></th>
+          <td>
+            <input id="id_date_of_birth" name="date_of_birth" type="text" />
+          </td>
+        </tr>
+        <tr>
+          <th><label for="id_date_of_death">Died:</label></th>
+          <td>
+            <input
+              id="id_date_of_death"
+              name="date_of_death"
+              type="text"
+              value="12/10/2016" />
+          </td>
+        </tr>
+      </table>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
 </html>
 ```
 
@@ -80,7 +120,10 @@ Run the development web server, and log in with your superuser account. Copy the
 The way the protection is enabled is that you include the `{% csrf_token %}` template tag in your form definition. This token is then rendered in your HTML as shown below, with a value that is specific to the user on the current browser.
 
 ```html
-<input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW' />
+<input
+  type="hidden"
+  name="csrfmiddlewaretoken"
+  value="0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW" />
 ```
 
 Django generates a user/browser specific key and will reject forms that do not contain the field, or that contain an incorrect field value for the user/browser.
diff --git a/files/ja/learn/server-side/express_nodejs/deployment/index.md b/files/ja/learn/server-side/express_nodejs/deployment/index.md
index c281ce844c5eb4..66244e3f572258 100644
--- a/files/ja/learn/server-side/express_nodejs/deployment/index.md
+++ b/files/ja/learn/server-side/express_nodejs/deployment/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Express チュートリアル Part 7: プロダクションへのデプロイ'
+title: "Express チュートリアル Part 7: プロダクションへのデプロイ"
 slug: Learn/Server-side/Express_Nodejs/deployment
 ---
 
@@ -94,21 +94,19 @@ Logging calls can have an impact on a high-traffic website. In a production envi
 One way to minimize "debug" logging in production is to use a module like [debug](https://www.npmjs.com/package/debug) that allows you to control what logging is performed by setting an environment variable. For example, the code fragment below shows how you might set up "author" logging. The debug variable is declared with the name 'author', and the prefix "author" will be automatically displayed for all logs from this object.
 
 ```js
-var debug = require('debug')('author');
+var debug = require("debug")("author");
 
 // Display Author update form on GET
-exports.author_update_get = function(req, res, next) {
-
-    req.sanitize('id').escape().trim();
-    Author.findById(req.params.id, function(err, author) {
-        if (err) {
-            debug('update error:' + err);
-            return next(err);
-        }
-        //On success
-        res.render('author_form', { title: 'Update Author', author: author });
-    });
-
+exports.author_update_get = function (req, res, next) {
+  req.sanitize("id").escape().trim();
+  Author.findById(req.params.id, function (err, author) {
+    if (err) {
+      debug("update error:" + err);
+      return next(err);
+    }
+    //On success
+    res.render("author_form", { title: "Update Author", author: author });
+  });
 };
 ```
 
@@ -234,10 +232,10 @@ There are a lot of ways of to work with git, but one of the easiest is to first
 2. Once you are logged in, click the **+** link in the top toolbar and select **New repository**.
 3. Fill in all the fields on this form. While these are not compulsory, they are strongly recommended.
 
-    - Enter a new repository name (e.g. _express-locallibrary-tutorial_), and description (e.g. "Local Library website written in Express (Node)".
-    - Choose **Node** in the _Add .gitignore_ selection list.
-    - Choose your preferred license in the _Add license_ selection list.
-    - Check **Initialize this repository with a README**.
+   - Enter a new repository name (e.g. _express-locallibrary-tutorial_), and description (e.g. "Local Library website written in Express (Node)".
+   - Choose **Node** in the _Add .gitignore_ selection list.
+   - Choose your preferred license in the _Add license_ selection list.
+   - Check **Initialize this repository with a README**.
 
 4. Press **Create repository**.
 5. Click the green "**Clone or download**" button on your new repo page.
@@ -248,17 +246,17 @@ Now the repository ("repo") is created we are going to want to clone it on our l
 1. Install _git_ for your local computer (you can find versions for different platforms [here](https://git-scm.com/downloads)).
 2. Open a command prompt/terminal and clone your repository using the URL you copied above:
 
-    ```bash
-    git clone https://github.com/<your_git_user_id>/express-locallibrary-tutorial.git
-    ```
+   ```bash
+   git clone https://github.com/<your_git_user_id>/express-locallibrary-tutorial.git
+   ```
 
-    This will create the repository below the current point.
+   This will create the repository below the current point.
 
 3. Navigate into the new repo.
 
-    ```bash
-    cd express-locallibrary-tutorial
-    ```
+   ```bash
+   cd express-locallibrary-tutorial
+   ```
 
 The final step is to copy in your application and then add the files to your repo using git:
 
@@ -267,31 +265,31 @@ The final step is to copy in your application and then add the files to your rep
 
    ```bash
     git add -A
-    ```
+   ```
 
 3. Use the status command to check all files that you are about to add are correct (you want to include source files, not binaries, temporary files etc.). It should look a bit like the listing below.
 
-    ```
-    > git status
-    On branch master
-    Your branch is up-to-date with 'origin/master'.
-    Changes to be committed:
-      (use "git reset HEAD <file>..." to unstage)
+   ```
+   > git status
+   On branch master
+   Your branch is up-to-date with 'origin/master'.
+   Changes to be committed:
+     (use "git reset HEAD <file>..." to unstage)
 
-            new file:   ...
-    ```
+           new file:   ...
+   ```
 
 4. When you're satisfied commit the files to your local repository:
 
-    ```bash
-    git commit -m "First version of application moved into github"
-    ```
+   ```bash
+   git commit -m "First version of application moved into github"
+   ```
 
 5. Then synchronize your local repository to the Github website, using the following:
 
-    ```bash
-    git push origin master
-    ```
+   ```bash
+   git push origin master
+   ```
 
 When this operation completes, you should be able to go back to the page on Github where you created your repo, refresh the page, and see that your whole application has now been uploaded. You can continue to update your repository as files change using this add/commit/push cycle.
 
@@ -336,13 +334,16 @@ So far in this tutorial, we've used a single database that is hard-coded into **
 Open **app.js** and find the line that sets the MongoDB connection variable. It will look something like this:
 
 ```js
-var mongoDB = 'mongodb://your_user_id:your_password@ds119748.mlab.com:19748/local_library';
+var mongoDB =
+  "mongodb://your_user_id:your_password@ds119748.mlab.com:19748/local_library";
 ```
 
 Replace the line with the following code that uses `process.env.MONGODB_URI` to get the connection string from an environment variable named `MONGODB_URI` if has been set (use your own database URL instead of the placeholder below.)
 
 ```js
-var mongoDB = process.env.MONGODB_URI || 'mongodb://your_user_id:your_password@ds119748.mlab.com:19748/local_library';
+var mongoDB =
+  process.env.MONGODB_URI ||
+  "mongodb://your_user_id:your_password@ds119748.mlab.com:19748/local_library";
 ```
 
 #### Get dependencies and re-test
diff --git a/files/ja/learn/server-side/express_nodejs/development_environment/index.md b/files/ja/learn/server-side/express_nodejs/development_environment/index.md
index 2bf96f15be4bb8..b63c54034296fe 100644
--- a/files/ja/learn/server-side/express_nodejs/development_environment/index.md
+++ b/files/ja/learn/server-side/express_nodejs/development_environment/index.md
@@ -57,8 +57,8 @@ Windows と macOS への _Node_ と _NPM_ のインストールは、提供さ
 
 1. 必要なインストーラーをダウンロードします
 
-    1. <https://nodejs.org/ja/> に進みます
-    2. "ほとんどのユーザーに推奨" である LTS ビルドをダウンロードするためのボタンを選択してください。
+   1. <https://nodejs.org/ja/> に進みます
+   2. "ほとんどのユーザーに推奨" である LTS ビルドをダウンロードするためのボタンを選択してください。
 
 2. ダウンロードしたファイルをダブルクリックし、インストールの指示に従って Node をインストールします。
 
@@ -93,37 +93,36 @@ _Nodejs_ パッケージマネージャー _NPM_ もインストールされて
 
 1. 次のテキストを **hellonode.js** というファイルにコピーします。これは純粋な Node 関数 (Express からは何もしていません) といくつかの ES6 構文を使用します。
 
-    ```js
-    //HTTP モジュールを読み込む
-    const http = require("http");
-    const hostname = '127.0.0.1';
-    const port = 3000;
+   ```js
+   //HTTP モジュールを読み込む
+   const http = require("http");
+   const hostname = "127.0.0.1";
+   const port = 3000;
 
-    //HTTP サーバーを作成し、3000 番ポートでリクエストを待機します。
-    const server = http.createServer((req, res) => {
+   //HTTP サーバーを作成し、3000 番ポートでリクエストを待機します。
+   const server = http.createServer((req, res) => {
+     //HTTP ステータスとコンテンツタイプを持つ応答 HTTP ヘッダーを設定します。
+     res.statusCode = 200;
+     res.setHeader("Content-Type", "text/plain");
+     res.end("Hello World\n");
+   });
 
-      //HTTP ステータスとコンテンツタイプを持つ応答 HTTP ヘッダーを設定します。
-      res.statusCode = 200;
-      res.setHeader('Content-Type', 'text/plain');
-      res.end('Hello World\n');
-    });
+   //3000 番ポートでリクエストを待機し、受信したときにログ出力するコールバック関数
+   server.listen(port, hostname, () => {
+     console.log(`Server running at http://${hostname}:${port}/`);
+   });
+   ```
 
-    //3000 番ポートでリクエストを待機し、受信したときにログ出力するコールバック関数
-    server.listen(port, hostname, () => {
-      console.log(`Server running at http://${hostname}:${port}/`);
-    });
-    ```
+   このコードは "http" モジュールをインポートし、それを使用して 3000 番ポートで HTTP リクエストを待機するサーバーを作成 (`createServer()`) します。次に、スクリプトはサーバーをテストするために使用できるブラウザー URL についてのメッセージをコンソールに出力します。 `createServer()` 関数は、HTTP リクエストを受信したときに呼び出されるコールバック関数を引数として取ります。これは HTTP ステータスコード 200 ("OK") とプレーンテキスト "Hello World" のレスポンスを返します。
 
-    このコードは "http" モジュールをインポートし、それを使用して 3000 番ポートで HTTP リクエストを待機するサーバーを作成 (`createServer()`) します。次に、スクリプトはサーバーをテストするために使用できるブラウザー URL についてのメッセージをコンソールに出力します。 `createServer()` 関数は、HTTP リクエストを受信したときに呼び出されるコールバック関数を引数として取ります。これは HTTP ステータスコード 200 ("OK") とプレーンテキスト "Hello World" のレスポンスを返します。
-
-    > **メモ:** このコードが何をしているのか正確に理解できなくても心配しないでください。Express を使い始めたら、コードについて詳しく説明します。
+   > **メモ:** このコードが何をしているのか正確に理解できなくても心配しないでください。Express を使い始めたら、コードについて詳しく説明します。
 
 2. コマンドプロンプトで `hellonode.js` ファイルと同じディレクトリーに移動し、次のようにスクリプト名とともに `node` を呼び出してサーバーを起動します。
 
-    ```bash
-    >node hellonode.js
-    Server running at http://127.0.0.1:3000/
-    ```
+   ```bash
+   >node hellonode.js
+   Server running at http://127.0.0.1:3000/
+   ```
 
 3. `http://127.0.0.1:3000` の URL に移動します。すべてがうまくいったら、ブラウザーは単に文字列 "Hello World" を表示するはずです。
 
@@ -143,81 +142,81 @@ Node 自体の次に、[NPM](https://docs.npmjs.com/) は Node アプリケー
 
 1. まず、新しいアプリケーション用のディレクトリーを作成し、そこに移動します。
 
-    ```bash
-    mkdir myapp
-    cd myapp
-    ```
+   ```bash
+   mkdir myapp
+   cd myapp
+   ```
 
 2. アプリケーション用の **package.json** ファイルを作成するには、npm `init` コマンドを使用します。このコマンドはアプリケーションの名前とバージョン、初期エントリポイントファイルの名前 (デフォルトでは **index.js**) など、さまざまなことを要求します。今のところ、デフォルトをそのまま使用します。
 
-    ```bash
-    npm init
-    ```
-
-    **package.json** ファイル (`cat package.json`) を表示すると、受け入れたデフォルトが表示され、最後にライセンスが表示されます。
-
-    ```json
-    {
-      "name": "myapp",
-      "version": "1.0.0",
-      "description": "",
-      "main": "index.js",
-      "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-      },
-      "author": "",
-      "license": "ISC"
-    }
-    ```
+   ```bash
+   npm init
+   ```
+
+   **package.json** ファイル (`cat package.json`) を表示すると、受け入れたデフォルトが表示され、最後にライセンスが表示されます。
+
+   ```json
+   {
+     "name": "myapp",
+     "version": "1.0.0",
+     "description": "",
+     "main": "index.js",
+     "scripts": {
+       "test": "echo \"Error: no test specified\" && exit 1"
+     },
+     "author": "",
+     "license": "ISC"
+   }
+   ```
 
 3. `myapp` ディレクトリーに Express をインストールし、それをあなたの package.json ファイルの依存関係リストに保存してください。
 
-    ```bash
-      npm install express --save
-    ```
+   ```bash
+     npm install express --save
+   ```
 
 4. **package.json** の依存関係セクションが **package.json** ファイルの最後に表示され、Express が含まれます。
 
-    ```json
-    {
-      "name": "myapp",
-      "version": "1.0.0",
-      "description": "",
-      "main": "index.js",
-      "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-      },
-      "author": "",
-      "license": "ISC",
-      "dependencies": {
-        "express": "^4.16.3"
-      }
-    }
-    ```
+   ```json
+   {
+     "name": "myapp",
+     "version": "1.0.0",
+     "description": "",
+     "main": "index.js",
+     "scripts": {
+       "test": "echo \"Error: no test specified\" && exit 1"
+     },
+     "author": "",
+     "license": "ISC",
+     "dependencies": {
+       "express": "^4.16.3"
+     }
+   }
+   ```
 
 5. このライブラリを使用するには、index.js ファイルで以下に示すように `require()` 関数を呼び出します。"myapp" アプリケーションディレクトリーのルートにファイルを作り、以下の内容を記述します。
 
-    ```
-    const express = require('express')
-    const app = express();
+   ```
+   const express = require('express')
+   const app = express();
 
-    app.get('/', (req, res) => {
-      res.send('Hello World!')
-    });
+   app.get('/', (req, res) => {
+     res.send('Hello World!')
+   });
 
-    app.listen(8000, () => {
-      console.log('Example app listening on port 8000!')
-    });
-    ```
+   app.listen(8000, () => {
+     console.log('Example app listening on port 8000!')
+   });
+   ```
 
-    このコードは、最小限の「HelloWorld」Express ウェブアプリケーションを示しています。これは「express」モジュールをインポートし、それを使用して 8000 番ポートで HTTP リクエストを待機するサーバ ー(`app`) を作成し、サーバーをテストするために使用できるブラウザー URL を説明するメッセージをコンソールに出力します。 `app.get()` 関数は、指定された URL パス ('/') で HTTP `GET` リクエストにのみ応答します。この場合、関数を呼び出して _Hello World!_ メッセージを送信します。
+   このコードは、最小限の「HelloWorld」Express ウェブアプリケーションを示しています。これは「express」モジュールをインポートし、それを使用して 8000 番ポートで HTTP リクエストを待機するサーバ ー(`app`) を作成し、サーバーをテストするために使用できるブラウザー URL を説明するメッセージをコンソールに出力します。 `app.get()` 関数は、指定された URL パス ('/') で HTTP `GET` リクエストにのみ応答します。この場合、関数を呼び出して _Hello World!_ メッセージを送信します。
 
 6. コマンドプロンプトでスクリプトを使用して node を呼び出すことでサーバーを起動できます。
 
-    ```bash
-    >node index.js
-    Example app listening on port 8000
-    ```
+   ```bash
+   >node index.js
+   Example app listening on port 8000
+   ```
 
 7. URL (<http://127.0.0.1:8000/>) に移動します。すべてがうまくいったら、ブラウザーは単に文字列 "Hello World!" を表示するはずです。
 
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
index 7deddc4fe288e3..1523e8b060b040 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md
@@ -12,36 +12,42 @@ Open **/controllers/authorController.js**.
 Add the following lines to the top of the file to import the _async_ and _Book_ modules (these are needed for our author detail page).
 
 ```js
-var async = require('async');
-var Book = require('../models/book');
+var async = require("async");
+var Book = require("../models/book");
 ```
 
 Find the exported `author_detail()` controller method and replace it with the following code.
 
 ```js
 // Display detail page for a specific Author.
-exports.author_detail = function(req, res, next) {
-
-    async.parallel({
-        author: function(callback) {
-            Author.findById(req.params.id)
-              .exec(callback)
-        },
-        authors_books: function(callback) {
-          Book.find({ 'author': req.params.id },'title summary')
-          .exec(callback)
-        },
-    }, function(err, results) {
-        if (err) { return next(err); } // Error in API usage.
-        if (results.author==null) { // No results.
-            var err = new Error('Author not found');
-            err.status = 404;
-            return next(err);
-        }
-        // Successful, so render.
-        res.render('author_detail', { title: 'Author Detail', author: results.author, author_books: results.authors_books } );
-    });
-
+exports.author_detail = function (req, res, next) {
+  async.parallel(
+    {
+      author: function (callback) {
+        Author.findById(req.params.id).exec(callback);
+      },
+      authors_books: function (callback) {
+        Book.find({ author: req.params.id }, "title summary").exec(callback);
+      },
+    },
+    function (err, results) {
+      if (err) {
+        return next(err);
+      } // Error in API usage.
+      if (results.author == null) {
+        // No results.
+        var err = new Error("Author not found");
+        err.status = 404;
+        return next(err);
+      }
+      // Successful, so render.
+      res.render("author_detail", {
+        title: "Author Detail",
+        author: results.author,
+        author_books: results.authors_books,
+      });
+    },
+  );
 };
 ```
 
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
index 6ee368747b7039..2d6e14651abef9 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
@@ -13,16 +13,19 @@ Open **/controllers/authorController.js**. Find the exported `author_list()` con
 
 ```js
 // Display list of all Authors.
-exports.author_list = function(req, res, next) {
-
+exports.author_list = function (req, res, next) {
   Author.find()
-    .sort([['family_name', 'ascending']])
+    .sort([["family_name", "ascending"]])
     .exec(function (err, list_authors) {
-      if (err) { return next(err); }
+      if (err) {
+        return next(err);
+      }
       //Successful, so render
-      res.render('author_list', { title: 'Author List', author_list: list_authors });
+      res.render("author_list", {
+        title: "Author List",
+        author_list: list_authors,
+      });
     });
-
 };
 ```
 
@@ -69,7 +72,7 @@ The genre list controller function needs to get a list of all `Genre` instances,
 1. You will need to edit `genre_list()` in **/controllers/genreController.js**.
 2. The implementation is almost exactly the same as the `author_list()` controller.
 
-    - Sort the results by name, in ascending order.
+   - Sort the results by name, in ascending order.
 
 3. The template to be rendered should be named **genre_list.pug**.
 4. The template to be rendered should be passed the variables `title` ('Genre List') and `genre_list` (the list of genres returned from your `Genre.find()` callback).
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md
index ac03277c4c114d..6022f06a4f3549 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.md
@@ -11,32 +11,37 @@ Open **/controllers/bookController.js**. Find the exported `book_detail()` contr
 
 ```js
 // Display detail page for a specific book.
-exports.book_detail = function(req, res, next) {
-
-    async.parallel({
-        book: function(callback) {
-
-            Book.findById(req.params.id)
-              .populate('author')
-              .populate('genre')
-              .exec(callback);
-        },
-        book_instance: function(callback) {
-
-          BookInstance.find({ 'book': req.params.id })
+exports.book_detail = function (req, res, next) {
+  async.parallel(
+    {
+      book: function (callback) {
+        Book.findById(req.params.id)
+          .populate("author")
+          .populate("genre")
           .exec(callback);
-        },
-    }, function(err, results) {
-        if (err) { return next(err); }
-        if (results.book==null) { // No results.
-            var err = new Error('Book not found');
-            err.status = 404;
-            return next(err);
-        }
-        // Successful, so render.
-        res.render('book_detail', { title: 'Title', book: results.book, book_instances: results.book_instance } );
-    });
-
+      },
+      book_instance: function (callback) {
+        BookInstance.find({ book: req.params.id }).exec(callback);
+      },
+    },
+    function (err, results) {
+      if (err) {
+        return next(err);
+      }
+      if (results.book == null) {
+        // No results.
+        var err = new Error("Book not found");
+        err.status = 404;
+        return next(err);
+      }
+      // Successful, so render.
+      res.render("book_detail", {
+        title: "Title",
+        book: results.book,
+        book_instances: results.book_instance,
+      });
+    },
+  );
 };
 ```
 
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
index ce5439d2bbb67f..f5c0fe07be6b4f 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
@@ -13,16 +13,16 @@ Open **/controllers/bookController.js**. Find the exported `book_list()` control
 
 ```js
 // Display list of all Books.
-exports.book_list = function(req, res, next) {
-
-  Book.find({}, 'title author')
-    .populate('author')
+exports.book_list = function (req, res, next) {
+  Book.find({}, "title author")
+    .populate("author")
     .exec(function (err, list_books) {
-      if (err) { return next(err); }
+      if (err) {
+        return next(err);
+      }
       //Successful, so render
-      res.render('book_list', { title: 'Book List', book_list: list_books });
+      res.render("book_list", { title: "Book List", book_list: list_books });
     });
-
 };
 ```
 
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md
index a4b6795e257bdc..0845b35f4df322 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.md
@@ -13,21 +13,25 @@ Open **/controllers/bookinstanceController.js**. Find the exported `bookinstance
 
 ```js
 // Display detail page for a specific BookInstance.
-exports.bookinstance_detail = function(req, res, next) {
-
-    BookInstance.findById(req.params.id)
-    .populate('book')
+exports.bookinstance_detail = function (req, res, next) {
+  BookInstance.findById(req.params.id)
+    .populate("book")
     .exec(function (err, bookinstance) {
-      if (err) { return next(err); }
-      if (bookinstance==null) { // No results.
-          var err = new Error('Book copy not found');
-          err.status = 404;
-          return next(err);
-        }
+      if (err) {
+        return next(err);
+      }
+      if (bookinstance == null) {
+        // No results.
+        var err = new Error("Book copy not found");
+        err.status = 404;
+        return next(err);
+      }
       // Successful, so render.
-      res.render('bookinstance_detail', { title: 'Book:', bookinstance:  bookinstance});
-    })
-
+      res.render("bookinstance_detail", {
+        title: "Book:",
+        bookinstance: bookinstance,
+      });
+    });
 };
 ```
 
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.md
index 7736bac1e4e163..3cf07100a2ae8a 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.md
@@ -13,16 +13,19 @@ Open **/controllers/bookinstanceController.js**. Find the exported `bookinstance
 
 ```js
 // Display list of all BookInstances.
-exports.bookinstance_list = function(req, res, next) {
-
+exports.bookinstance_list = function (req, res, next) {
   BookInstance.find()
-    .populate('book')
+    .populate("book")
     .exec(function (err, list_bookinstances) {
-      if (err) { return next(err); }
+      if (err) {
+        return next(err);
+      }
       // Successful, so render
-      res.render('bookinstance_list', { title: 'Book Instance List', bookinstance_list: list_bookinstances });
+      res.render("bookinstance_list", {
+        title: "Book Instance List",
+        bookinstance_list: list_bookinstances,
+      });
     });
-
 };
 ```
 
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
index 69be6927e7f020..4b8719c321cc89 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
@@ -22,17 +22,15 @@ npm install moment
 1. Open **./models/bookinstance.js**.
 2. At the top of the page, import _moment_.
 
-    ```js
-    var moment = require('moment');
-    ```
+   ```js
+   var moment = require("moment");
+   ```
 
 Add the virtual property `due_back_formatted` just after the url property.
 
 ```js
-BookInstanceSchema
-.virtual('due_back_formatted')
-.get(function () {
-  return moment(this.due_back).format('MMMM Do, YYYY');
+BookInstanceSchema.virtual("due_back_formatted").get(function () {
+  return moment(this.due_back).format("MMMM Do, YYYY");
 });
 ```
 
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
index 0623b055af7da4..84eca236f7e716 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
@@ -10,38 +10,43 @@ The genre _detail_ page needs to display the information for the particular genr
 Open **/controllers/genreController.js** and import the _async_ and _Book_ modules at the top of the file.
 
 ```js
-var Book = require('../models/book');
-var async = require('async');
+var Book = require("../models/book");
+var async = require("async");
 ```
 
 Find the exported `genre_detail()` controller method and replace it with the following code.
 
 ```js
 // Display detail page for a specific Genre.
-exports.genre_detail = function(req, res, next) {
-
-    async.parallel({
-        genre: function(callback) {
-            Genre.findById(req.params.id)
-              .exec(callback);
-        },
-
-        genre_books: function(callback) {
-          Book.find({ 'genre': req.params.id })
-          .exec(callback);
-        },
-
-    }, function(err, results) {
-        if (err) { return next(err); }
-        if (results.genre==null) { // No results.
-            var err = new Error('Genre not found');
-            err.status = 404;
-            return next(err);
-        }
-        // Successful, so render
-        res.render('genre_detail', { title: 'Genre Detail', genre: results.genre, genre_books: results.genre_books } );
-    });
-
+exports.genre_detail = function (req, res, next) {
+  async.parallel(
+    {
+      genre: function (callback) {
+        Genre.findById(req.params.id).exec(callback);
+      },
+
+      genre_books: function (callback) {
+        Book.find({ genre: req.params.id }).exec(callback);
+      },
+    },
+    function (err, results) {
+      if (err) {
+        return next(err);
+      }
+      if (results.genre == null) {
+        // No results.
+        var err = new Error("Genre not found");
+        err.status = 404;
+        return next(err);
+      }
+      // Successful, so render
+      res.render("genre_detail", {
+        title: "Genre Detail",
+        genre: results.genre,
+        genre_books: results.genre_books,
+      });
+    },
+  );
 };
 ```
 
@@ -52,10 +57,11 @@ The ID of the required genre record is encoded at the end of the URL and extract
 > **メモ:** If the genre does not exist in the database (i.e. it may have been deleted) then `findById()` will return successfully with no results. In this case we want to display a "not found" page, so we create an `Error` object and pass it to the `next` middleware function in the chain.
 >
 > ```js
-> if (results.genre==null) { // No results.
->     var err = new Error('Genre not found');
->     err.status = 404;
->     return next(err);
+> if (results.genre == null) {
+>   // No results.
+>   var err = new Error("Genre not found");
+>   err.status = 404;
+>   return next(err);
 > }
 > ```
 >
@@ -105,7 +111,7 @@ Run the application and open your browser to <http://localhost:3000/>. Select th
 > This is a mongoose error coming from the **req.params.id**. To solve this problem, first you need to require mongoose on the **genreController.js** page like this:
 >
 > ```js
->  var mongoose = require('mongoose');
+> var mongoose = require("mongoose");
 > ```
 >
 > Then use **mongoose.Types.ObjectId()** to convert the id to a that can be used. For example:
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.md
index 9b41fb29f84a8a..e0441069574f64 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.md
@@ -13,15 +13,15 @@ We created our index page routes in a [previous tutorial.](/ja/docs/Learn/Server
 
 ```js
 // GET catalog home page.
-router.get('/', book_controller.index);  //This actually maps to /catalog/ because we import the route with a /catalog prefix
+router.get("/", book_controller.index); //This actually maps to /catalog/ because we import the route with a /catalog prefix
 ```
 
 Where the callback function parameter (`book_controller.index`) is defined in **/controllers/bookController.js**:
 
 ```js
-exports.index = function(req, res, next) {
-    res.send('NOT IMPLEMENTED: Site Home Page');
-}
+exports.index = function (req, res, next) {
+  res.send("NOT IMPLEMENTED: Site Home Page");
+};
 ```
 
 It is this controller function that we extend to get information from our models and then render it using a template (view).
@@ -33,10 +33,13 @@ The index controller function needs to fetch information about how many `Book`,
 > **メモ:** We use the [`countDocuments()`](http://mongoosejs.com/docs/api.html#model_Model.countDocuments) method to get the number of instances of each model. This is called on a model with an optional set of conditions to match against in the first argument and a callback in the second argument (as discussed in [Using a Database (with Mongoose)](/ja/docs/Learn/Server-side/Express_Nodejs/mongoose), and you can also return a `Query` and then execute it with a callback later. The callback will be returned when the database returns the count, with an error value (or `null`) as the first parameter and the count of records (or null if there was an error) as the second parameter.
 >
 > ```js
-> SomeModel.countDocuments({ a_model_field: 'match_value' }, function (err, count) {
->  // ... do something if there is an err
->  // ... do something with the count if there was no error
->  });
+> SomeModel.countDocuments(
+>   { a_model_field: "match_value" },
+>   function (err, count) {
+>     // ... do something if there is an err
+>     // ... do something with the count if there was no error
+>   },
+> );
 > ```
 
 Open **/controllers/bookController.js**. Near the top of the file you should see the exported `index()` function.
@@ -52,34 +55,40 @@ exports.index = function(req, res, next) {
 Replace all the code above with the following code fragment. The first thing this does is import (`require()`) all the models (highlighted in bold). We need to do this because we'll be using them to get our counts of records. It then imports the _async_ module.
 
 ```js
-var Book = require('../models/book');
-var Author = require('../models/author');
-var Genre = require('../models/genre');
-var BookInstance = require('../models/bookinstance');
-
-var async = require('async');
-
-exports.index = function(req, res) {
-
-    async.parallel({
-        book_count: function(callback) {
-            Book.countDocuments({}, callback); // Pass an empty object as match condition to find all documents of this collection
-        },
-        book_instance_count: function(callback) {
-            BookInstance.countDocuments({}, callback);
-        },
-        book_instance_available_count: function(callback) {
-            BookInstance.countDocuments({status:'Available'}, callback);
-        },
-        author_count: function(callback) {
-            Author.countDocuments({}, callback);
-        },
-        genre_count: function(callback) {
-            Genre.countDocuments({}, callback);
-        }
-    }, function(err, results) {
-        res.render('index', { title: 'Local Library Home', error: err, data: results });
-    });
+var Book = require("../models/book");
+var Author = require("../models/author");
+var Genre = require("../models/genre");
+var BookInstance = require("../models/bookinstance");
+
+var async = require("async");
+
+exports.index = function (req, res) {
+  async.parallel(
+    {
+      book_count: function (callback) {
+        Book.countDocuments({}, callback); // Pass an empty object as match condition to find all documents of this collection
+      },
+      book_instance_count: function (callback) {
+        BookInstance.countDocuments({}, callback);
+      },
+      book_instance_available_count: function (callback) {
+        BookInstance.countDocuments({ status: "Available" }, callback);
+      },
+      author_count: function (callback) {
+        Author.countDocuments({}, callback);
+      },
+      genre_count: function (callback) {
+        Genre.countDocuments({}, callback);
+      },
+    },
+    function (err, results) {
+      res.render("index", {
+        title: "Local Library Home",
+        error: err,
+        data: results,
+      });
+    },
+  );
 };
 ```
 
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/index.md
index 4d36d44e00df81..e93b38e12068bf 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Express チュートリアル Part 5: ライブラリデータの表示'
+title: "Express チュートリアル Part 5: ライブラリデータの表示"
 slug: Learn/Server-side/Express_Nodejs/Displaying_data
 ---
 
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md
index bb05179a7a3ffa..81e2d678ddce93 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md
@@ -7,7 +7,7 @@ Now that we understand how to extend templates using Pug, let's start by creatin
 
 Open **/views/layout.pug** and replace the content with the code below.
 
-```html
+```pug
 doctype html
 html(lang='en')
   head
@@ -57,9 +57,9 @@ The base template also references a local css file (**style.css**) that provides
 
 ```css
 .sidebar-nav {
-    margin-top: 20px;
-    padding: 0;
-    list-style: none;
+  margin-top: 20px;
+  padding: 0;
+  list-style: none;
 }
 ```
 
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.md b/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
index 6a6c9aca1a90e5..3a787de0a6ce63 100644
--- a/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
@@ -19,8 +19,8 @@ The _LocalLibrary_ was configured to use [Pug](https://pugjs.org/api/getting-sta
 
 ```js
 // View engine setup.
-app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'pug');
+app.set("views", path.join(__dirname, "views"));
+app.set("view engine", "pug");
 ```
 
 If you look in the views directory you will see the .pug files for the project's default views. These include the view for the home page (**index.pug**) and base template (**layout.pug**) that we will need to replace with our own content.
@@ -39,7 +39,7 @@ The example template file below shows off many of Pug's most useful features.
 
 The first thing to notice is that the file maps the structure of a typical HTML file, with the first word in (almost) every line being an HTML element, and indentation being used to indicate nested elements. So for example, the `body` element is inside an `html` element, and paragraph elements (`p`) are within the `body` element, etc. Non-nested elements (e.g. individual paragraphs) are on separate lines.
 
-```html
+```pug
 doctype html
 html(lang="en")
   head
@@ -86,14 +86,14 @@ The values of all attributes are _escaped_ (e.g. characters like "`>`" are conve
 
 If a tag is followed by the equals sign, the following text is treated as a JavaScript _expression_. So for example, in the first line below, the content of the `h1` tag will be _variable_ `title` (either defined in the file or passed into the template from Express). In the second line the paragraph content is a text string concatented with the `title` variable. In both cases the default behaviour is to _escape_ the line.
 
-```html
+```pug
 h1= title
 p= 'Evaluated and <em>escaped expression</em>:' + title
 ```
 
 If there is no equals symbol after the tag then the content is treated as plain text. Within the plain text you can insert escaped and unescaped data using the `#{}` and `!{}` syntax, as shown below. You can also add raw HTML within the plain text.
 
-```html
+```pug
 p This is a line with #[em some emphasis] and #[strong strong text] markup.
 p This line has an un-escaped string: !{'<em> is emphasised</em>'}, an escaped string: #{'<em> is not emphasised</em>'}, and escaped variables: #{title}.
 ```
@@ -102,14 +102,14 @@ p This line has an un-escaped string: !{'<em> is emphasised</em>'}, an escaped s
 
 You can use the pipe ('**|**') character at the beginning of a line to indicate "[plain text](https://pugjs.org/language/plain-text.html)". For example, the additional text shown below will be displayed on the same line as the preceding anchor, but will not be linked.
 
-```html
+```pug
 a(href='http://someurl/') Link text
 | Plain text
 ```
 
 Pug allows you to perform conditional operations using `if`, `else` , `else if` and `unless`—for example:
 
-```html
+```pug
 if title
   p A variable named "title" exists
 else
@@ -118,7 +118,7 @@ else
 
 You can also perform loop/iteration operations using `each-in` or `while` syntax. In the code fragment below we've looped through an array to display a list of variables (note the use of the 'li=' to evaluate the "val" as a variable below. The value you iterate across can also be passed into the template as a variable!
 
-```html
+```pug
 ul
   each val in [1, 2, 3, 4, 5]
     li= val
@@ -132,7 +132,7 @@ Across a site, it is usual for all pages to have a common structure, including s
 
 For example, the base template **layout.pug** created in our [skeleton project](/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website) looks like this:
 
-```html
+```pug
 doctype html
 html
   head
@@ -146,7 +146,7 @@ The `block` tag is used to mark up sections of content that may be replaced in a
 
 The default **index.pug** (created for our skeleton project) shows how we override the base template. The `extends` tag identifies the base template to use, and then we use `block section_name` to indicate the new content of the section that we will override.
 
-```html
+```pug
 extends layout
 
 block content
diff --git a/files/ja/learn/server-side/express_nodejs/forms/index.md b/files/ja/learn/server-side/express_nodejs/forms/index.md
index ab3d7078da3cd4..7bb2294caa2b93 100644
--- a/files/ja/learn/server-side/express_nodejs/forms/index.md
+++ b/files/ja/learn/server-side/express_nodejs/forms/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Express チュートリアル Part 6: フォームの操作'
+title: "Express チュートリアル Part 6: フォームの操作"
 slug: Learn/Server-side/Express_Nodejs/forms
 ---
 
@@ -31,9 +31,13 @@ slug: Learn/Server-side/Express_Nodejs/forms
 
 ```html
 <form action="/team_name_url/" method="post">
-    <label for="team_name">名前を入力してください: </label>
-    <input id="team_name" type="text" name="name_field" value="デフォルトのチーム名.">
-    <input type="submit" value="OK">
+  <label for="team_name">名前を入力してください: </label>
+  <input
+    id="team_name"
+    type="text"
+    name="name_field"
+    value="デフォルトのチーム名." />
+  <input type="submit" value="OK" />
 </form>
 ```
 
@@ -57,7 +61,7 @@ slug: Learn/Server-side/Express_Nodejs/forms
 
 1. ユーザーが最初に要求したときにデフォルトのフォームを表示します。
 
-    - フォームには空白のフィールドが含まれていたり (新しいレコードを作成している場合など)、初期値があらかじめ入力されていたり (レコードを変更している場合や、デフォルトの初期値がある場合など) します。
+   - フォームには空白のフィールドが含まれていたり (新しいレコードを作成している場合など)、初期値があらかじめ入力されていたり (レコードを変更している場合や、デフォルトの初期値がある場合など) します。
 
 2. ユーザーから送信されたデータを、通常は HTTP `POST`リクエストで受信します。
 3. データを検証し、ハッキング防止のために特殊文字を置換(サニタイズ)します。
@@ -93,8 +97,8 @@ npm install express-validator
 コントローラでバリデータを使うには、以下のように **'express-validator/check'** と **'express-validator/filter'**モジュールから使いたい関数を要求(require)しなければなりません。
 
 ```js
-const { body,validationResult } = require('express-validator/check');
-const { sanitizeBody } = require('express-validator/filter');
+const { body, validationResult } = require("express-validator/check");
+const { sanitizeBody } = require("express-validator/filter");
 ```
 
 多くの関数が用意されており、リクエストパラメータ、body、ヘッダー、Cookie などのデータをチェックしてサニタイズすることができますし、一度にすべてのデータをチェックしてサニタイズすることもできます。このチュートリアルでは、主に`body`、`sanitizeBody`、`validationResult`を使用します。
@@ -128,17 +132,16 @@ const { sanitizeBody } = require('express-validator/filter');
 
   ```js
   (req, res, next) => {
-      // Extract the validation errors from a request.
-      const errors = validationResult(req);
-
-      if (!errors.isEmpty()) {
-          // There are errors. Render form again with sanitized values/errors messages.
-          // Error messages can be returned in an array using `errors.array()`.
-          }
-      else {
-          // Data from form is valid.
-      }
-  }
+    // Extract the validation errors from a request.
+    const errors = validationResult(req);
+
+    if (!errors.isEmpty()) {
+      // There are errors. Render form again with sanitized values/errors messages.
+      // Error messages can be returned in an array using `errors.array()`.
+    } else {
+      // Data from form is valid.
+    }
+  };
   ```
 
   We use the validation result's `isEmpty()` method to check if there were errors, and its `array()` method to get the set of error messages. See the [Validation Result API](https://github.com/ctavan/express-validator#validation-result-api) for more information.
@@ -169,10 +172,10 @@ We have already created the routes for all our model's create pages in **/routes
 
 ```js
 // GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id).
-router.get('/genre/create', genre_controller.genre_create_get);
+router.get("/genre/create", genre_controller.genre_create_get);
 
 // POST request for creating Genre.
-router.post('/genre/create', genre_controller.genre_create_post);
+router.post("/genre/create", genre_controller.genre_create_post);
 ```
 
 ## Express forms subarticles
diff --git a/files/ja/learn/server-side/express_nodejs/introduction/index.md b/files/ja/learn/server-side/express_nodejs/introduction/index.md
index 8c0fecf4afd3f5..b90ebd6a41085b 100644
--- a/files/ja/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/ja/learn/server-side/express_nodejs/introduction/index.md
@@ -192,7 +192,7 @@ exports.perimeter = function (width) {
 `require()` を使ってこのモジュールをインポートし、次に示すようにエクスポートされたメソッドを呼び出すことができます。
 
 ```js
-const square = require('./square'); //  require() にはファイル拡張子を除いたファイル名を引数に指定します。
+const square = require("./square"); //  require() にはファイル拡張子を除いたファイル名を引数に指定します。
 console.log(`The area of a square with a width of 4 is ${square.area(4)}`);
 ```
 
diff --git a/files/ja/learn/server-side/express_nodejs/mongoose/index.md b/files/ja/learn/server-side/express_nodejs/mongoose/index.md
index ef1054d17d8a1c..c9650b5cf98a52 100644
--- a/files/ja/learn/server-side/express_nodejs/mongoose/index.md
+++ b/files/ja/learn/server-side/express_nodejs/mongoose/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)'
+title: "Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)"
 slug: Learn/Server-side/Express_Nodejs/mongoose
 ---
 
@@ -110,10 +110,10 @@ Mongoose は MongoDB データベースへの接続を必要とします。以
 
 ```js
 //Import the mongoose module
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
 
 //Set up default mongoose connection
-var mongoDB = 'mongodb://127.0.0.1/my_database';
+var mongoDB = "mongodb://127.0.0.1/my_database";
 mongoose.connect(mongoDB);
 // Get Mongoose to use the global promise library
 mongoose.Promise = global.Promise;
@@ -121,7 +121,7 @@ mongoose.Promise = global.Promise;
 var db = mongoose.connection;
 
 //Bind connection to error event (to get notification of connection errors)
-db.on('error', console.error.bind(console, 'MongoDB connection error:'));
+db.on("error", console.error.bind(console, "MongoDB connection error:"));
 ```
 
 デフォルトの `Connection` オブジェクトは `mongoose.connection` で取得できます。接続されると、open イベントが `Connection` インスタンスで発生します。
@@ -142,14 +142,14 @@ db.on('error', console.error.bind(console, 'MongoDB connection error:'));
 
 ```js
 //Require Mongoose
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
 
 //Define a schema
 var Schema = mongoose.Schema;
 
 var SomeModelSchema = new Schema({
   a_string: String,
-  a_date: Date
+  a_date: Date,
 });
 ```
 
@@ -165,11 +165,11 @@ var Schema = mongoose.Schema;
 
 var SomeModelSchema = new Schema({
   a_string: String,
-  a_date: Date
+  a_date: Date,
 });
 
 // Compile model from schema
-var SomeModel = mongoose.model('SomeModel', SomeModelSchema );
+var SomeModel = mongoose.model("SomeModel", SomeModelSchema);
 ```
 
 最初の引数はあなたのモデル用に作成されるコレクションの単数形の名前です (Mongoose は上記の SomeModel モデル用のデータベースコレクションを作成します)、そして 2 番目の引数はモデルの作成に使用したいスキーマです。
@@ -181,8 +181,7 @@ var SomeModel = mongoose.model('SomeModel', SomeModelSchema );
 スキーマには任意の数のフィールドを含めることができます。各フィールドは MongoDB に格納されているドキュメント内のフィールドを表します。一般的なフィールド型の多くとその宣言方法を示すスキーマの例を以下に示します。
 
 ```js
-var schema = new Schema(
-{
+var schema = new Schema({
   name: String,
   binary: Buffer,
   living: Boolean,
@@ -192,8 +191,8 @@ var schema = new Schema(
   _someId: Schema.Types.ObjectId,
   array: [],
   ofString: [String], // 他の型でも配列にすることができます。
-  nested: { stuff: { type: String, lowercase: true, trim: true } }
-})
+  nested: { stuff: { type: String, lowercase: true, trim: true } },
+});
 ```
 
 ほとんどのスキーム型("type:"やフィールド名で記述されるもの)はその名のとおりです。例外は以下のようなものがあります:
@@ -231,19 +230,18 @@ Mongoose はビルドインもしくはカスマイズしたバリデータや
 以下の例（Mongoose ドキュメントから少し変更しています）では、いくつかのバリデータタイプとエラーメッセージを指定する方法を示しています:
 
 ```js
-
-    var breakfastSchema = new Schema({
-      eggs: {
-        type: Number,
-        min: [6, 'Too few eggs'],
-        max: 12,
-        required: [true, 'Why no eggs?']
-      },
-      drink: {
-        type: String,
-        enum: ['Coffee', 'Tea', 'Water',]
-      }
-    });
+var breakfastSchema = new Schema({
+  eggs: {
+    type: Number,
+    min: [6, "Too few eggs"],
+    max: 12,
+    required: [true, "Why no eggs?"],
+  },
+  drink: {
+    type: String,
+    enum: ["Coffee", "Tea", "Water"],
+  },
+});
 ```
 
 詳しくは [Validation](http://mongoosejs.com/docs/validation.html) (Mongoose docs) を見てみてください。
@@ -272,7 +270,7 @@ To create a record you can define an instance of the model and then call `save()
 
 ```js
 // Create an instance of model SomeModel
-var awesome_instance = new SomeModel({ name: 'awesome' });
+var awesome_instance = new SomeModel({ name: "awesome" });
 
 // Save the new model instance, passing a callback
 awesome_instance.save(function (err) {
@@ -286,7 +284,7 @@ Creation of records (along with updates, deletes, and queries) are asynchronous
 You can also use `create()` to define the model instance at the same time as you save it. The callback will return an error for the first argument and the newly-created model instance for the second argument.
 
 ```js
-SomeModel.create({ name: 'also_awesome' }, function (err, awesome_instance) {
+SomeModel.create({ name: "also_awesome" }, function (err, awesome_instance) {
   if (err) return handleError(err);
   // saved!
 });
@@ -301,10 +299,10 @@ You can access the fields in this new record using the dot syntax, and change th
 console.log(awesome_instance.name); //should log 'also_awesome'
 
 // Change record by modifying the fields, then calling save().
-awesome_instance.name="New cool name";
+awesome_instance.name = "New cool name";
 awesome_instance.save(function (err) {
-   if (err) return handleError(err); // saved!
-   });
+  if (err) return handleError(err); // saved!
+});
 ```
 
 #### Searching for records
@@ -312,13 +310,13 @@ awesome_instance.save(function (err) {
 You can search for records using query methods, specifying the query conditions as a JSON document. The code fragment below shows how you might find all athletes in a database that play tennis, returning just the fields for athlete _name_ and _age_. Here we just specify one matching field (sport) but you can add more criteria, specify regular expression criteria, or remove the conditions altogether to return all athletes.
 
 ```js
-var Athlete = mongoose.model('Athlete', yourSchema);
+var Athlete = mongoose.model("Athlete", yourSchema);
 
 // find all athletes who play tennis, selecting the 'name' and 'age' fields
-Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) {
+Athlete.find({ sport: "Tennis" }, "name age", function (err, athletes) {
   if (err) return handleError(err);
   // 'athletes' contains the list of athletes that match the criteria.
-})
+});
 ```
 
 If you specify a callback, as shown above, the query will execute immediately. The callback will be invoked when the search completes.
@@ -329,10 +327,10 @@ If you don't specify a callback then the API will return a variable of type [Que
 
 ```js
 // find all athletes that play tennis
-var query = Athlete.find({ 'sport': 'Tennis' });
+var query = Athlete.find({ sport: "Tennis" });
 
 // selecting the 'name' and 'age' fields
-query.select('name age');
+query.select("name age");
 
 // limit our results to 5 items
 query.limit(5);
@@ -344,7 +342,7 @@ query.sort({ age: -1 });
 query.exec(function (err, athletes) {
   if (err) return handleError(err);
   // athletes contains an ordered list of 5 athletes who play Tennis
-})
+});
 ```
 
 Above we've defined the query conditions in the `find()` method. We can also do this using a `where()` function, and we can chain all the parts of our query together using the dot operator (.) rather than adding them separately. The code fragment below is the same as our query above, with an additional condition for the age.
@@ -377,27 +375,27 @@ You can create references from one document/model instance to another using the
 For example, the following schema defines authors and stories. Each author can have multiple stories, which we represent as an array of `ObjectId`. Each story can have a single author. The "ref" (highlighted in bold below) tells the schema which model can be assigned to this field.
 
 ```js
-var mongoose = require('mongoose')
-  , Schema = mongoose.Schema
+var mongoose = require("mongoose"),
+  Schema = mongoose.Schema;
 
 var authorSchema = Schema({
-  name    : String,
-  stories : [{ type: Schema.Types.ObjectId, ref: 'Story' }]
+  name: String,
+  stories: [{ type: Schema.Types.ObjectId, ref: "Story" }],
 });
 
 var storySchema = Schema({
-  author : { type: Schema.Types.ObjectId, ref: 'Author' },
-  title    : String
+  author: { type: Schema.Types.ObjectId, ref: "Author" },
+  title: String,
 });
 
-var Story  = mongoose.model('Story', storySchema);
-var Author = mongoose.model('Author', authorSchema);
+var Story = mongoose.model("Story", storySchema);
+var Author = mongoose.model("Author", authorSchema);
 ```
 
 We can save our references to the related document by assigning the `_id` value. Below we create an author, then a story, and assign the author id to our stories author field.
 
 ```js
-var bob = new Author({ name: 'Bob Smith' });
+var bob = new Author({ name: "Bob Smith" });
 
 bob.save(function (err) {
   if (err) return handleError(err);
@@ -405,7 +403,7 @@ bob.save(function (err) {
   //Bob now exists, so lets create a story
   var story = new Story({
     title: "Bob goes sledding",
-    author: bob._id    // assign the _id from the our author Bob. This ID is created by default!
+    author: bob._id, // assign the _id from the our author Bob. This ID is created by default!
   });
 
   story.save(function (err) {
@@ -418,14 +416,13 @@ bob.save(function (err) {
 Our story document now has an author referenced by the author document's ID. In order to get the author information in the story results we use `populate()`, as shown below.
 
 ```js
-Story
-.findOne({ title: 'Bob goes sledding' })
-.populate('author') //This populates the author id with actual author information!
-.exec(function (err, story) {
-  if (err) return handleError(err);
-  console.log('The author is %s', story.author.name);
-  // prints "The author is Bob Smith"
-});
+Story.findOne({ title: "Bob goes sledding" })
+  .populate("author") //This populates the author id with actual author information!
+  .exec(function (err, story) {
+    if (err) return handleError(err);
+    console.log("The author is %s", story.author.name);
+    // prints "The author is Bob Smith"
+  });
 ```
 
 > **メモ:** Astute readers will have noted that we added an author to our story, but we didn't do anything to add our story to our author's `stories` array. How then can we get all stories by a particular author? One way would be to add our author to the stories array, but this would result in us having two places where the information relating authors and stories needs to be maintained.
@@ -433,9 +430,7 @@ Story
 > A better way is to get the `_id` of our _author_, then use `find()` to search for this in the author field across all stories.
 >
 > ```js
-> Story
-> .find({ author : bob._id })
-> .exec(function (err, stories) {
+> Story.find({ author: bob._id }).exec(function (err, stories) {
 >   if (err) return handleError(err);
 >   // returns all stories that have Bob's id as their author.
 > });
@@ -451,25 +446,25 @@ While you can create schemas and models using any file structure you like, we hi
 // File: ./models/somemodel.js
 
 //Require Mongoose
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
 
 //Define a schema
 var Schema = mongoose.Schema;
 
 var SomeModelSchema = new Schema({
-  a_string          : String,
-  a_date            : Date,
+  a_string: String,
+  a_date: Date,
 });
 
 //Export function to create "SomeModel" model class
-module.exports = mongoose.model('SomeModel', SomeModelSchema );
+module.exports = mongoose.model("SomeModel", SomeModelSchema);
 ```
 
 You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.
 
 ```js
 //Create a SomeModel model just by requiring the module
-var SomeModel = require('../models/somemodel')
+var SomeModel = require("../models/somemodel");
 
 // Use the SomeModel object (model) to find all SomeModel records
 SomeModel.find(callback_function);
@@ -489,36 +484,36 @@ After logging in, you'll be taken to the [home](https://mlab.com/home) screen:
 
 1. Click **Create New** in the _MongoDB Deployments_ section.![](mLabCreateNewDeployment.png)
 2. This will open the _Cloud Provider Selection_ screen.
-    ![MLab - screen for new deployment](mLab_new_deployment_form_v2.png)
+   ![MLab - screen for new deployment](mLab_new_deployment_form_v2.png)
 
-    - Select the SANDBOX (Free) plan from the Plan Type section.
-    - Select any provider from the _Cloud Provider_ section. Different providers offer different regions (displayed below the selected plan type).
-    - Click the **Continue** button.
+   - Select the SANDBOX (Free) plan from the Plan Type section.
+   - Select any provider from the _Cloud Provider_ section. Different providers offer different regions (displayed below the selected plan type).
+   - Click the **Continue** button.
 
 3. This will open the _Select Region_ screen.
 
-    ![Select new region screen](mLab_new_deployment_select_region_v2.png)
+   ![Select new region screen](mLab_new_deployment_select_region_v2.png)
 
-    - Select the region closest to you and then **Continue**.
+   - Select the region closest to you and then **Continue**.
 
 4. This will open the _Final Details_ screen.
-    ![New deployment database name](mLab_new_deployment_final_details.png)
+   ![New deployment database name](mLab_new_deployment_final_details.png)
 
-    - Enter the name for the new database as `local_library` and then select **Continue**.
+   - Enter the name for the new database as `local_library` and then select **Continue**.
 
 5. This will open the _Order Confirmation_ screen.
-    ![Order confirmation screen](mLab_new_deployment_order_confirmation.png)
+   ![Order confirmation screen](mLab_new_deployment_order_confirmation.png)
 
-    - Click **Submit Order** to create the database.
+   - Click **Submit Order** to create the database.
 
 6. You will be returned to the home screen. Click on the new database you just created to open its details screen. As you can see the database has no collections (data).
-    ![mLab - Database details screen](mLab_new_deployment_database_details.png)
+   ![mLab - Database details screen](mLab_new_deployment_database_details.png)
 
-    The URL that you need to use to access your database is displayed on the form above (shown for this database circled above). In order to use this you need to create a database user that you can specify in the URL.
+   The URL that you need to use to access your database is displayed on the form above (shown for this database circled above). In order to use this you need to create a database user that you can specify in the URL.
 
 7. Click the **Users** tab and select the **Add database user** button.
 8. Enter a username and password (twice), and then press **Create**. Do not select _Make read only_.
-    ![](mLab_database_users.png)
+   ![](mLab_database_users.png)
 
 You have now created the database, and have an URL (with username and password) that can be used to access it. This will look something like: `mongodb://your_user_namer:your_password@ds119748.mlab.com:19748/local_library`.
 
@@ -536,12 +531,12 @@ Open **/app.js** (in the root of your project) and copy the following text below
 
 ```js
 //Set up mongoose connection
-var mongoose = require('mongoose');
-var mongoDB = 'insert_your_database_url_here';
+var mongoose = require("mongoose");
+var mongoDB = "insert_your_database_url_here";
 mongoose.connect(mongoDB);
 mongoose.Promise = global.Promise;
 var db = mongoose.connection;
-db.on('error', console.error.bind(console, 'MongoDB connection error:'));
+db.on("error", console.error.bind(console, "MongoDB connection error:"));
 ```
 
 As discussed [in the Mongoose primer above](#Connecting_to_MongoDB), this code creates the default connection to the database and binds to the error event (so that errors will be printed to the console).
@@ -564,42 +559,36 @@ We will define a separate module for each model, as [discussed above](#One_schem
 Copy the `Author` schema code shown below and paste it into your **./models/author.js** file. The scheme defines an author has having `String` SchemaTypes for the first and family names, that are required and have a maximum of 100 characters, and `Date` fields for the date of birth and death.
 
 ```js
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
 
 var Schema = mongoose.Schema;
 
-var AuthorSchema = new Schema(
-  {
-    first_name: {type: String, required: true, max: 100},
-    family_name: {type: String, required: true, max: 100},
-    date_of_birth: {type: Date},
-    date_of_death: {type: Date},
-  }
-);
+var AuthorSchema = new Schema({
+  first_name: { type: String, required: true, max: 100 },
+  family_name: { type: String, required: true, max: 100 },
+  date_of_birth: { type: Date },
+  date_of_death: { type: Date },
+});
 
 // Virtual for author's full name
-AuthorSchema
-.virtual('name')
-.get(function () {
-  return this.family_name + ', ' + this.first_name;
+AuthorSchema.virtual("name").get(function () {
+  return this.family_name + ", " + this.first_name;
 });
 
 // Virtual for author's lifespan
-AuthorSchema
-.virtual('lifespan')
-.get(function () {
-  return (this.date_of_death.getYear() - this.date_of_birth.getYear()).toString();
+AuthorSchema.virtual("lifespan").get(function () {
+  return (
+    this.date_of_death.getYear() - this.date_of_birth.getYear()
+  ).toString();
 });
 
 // Virtual for author's URL
-AuthorSchema
-.virtual('url')
-.get(function () {
-  return '/catalog/author/' + this._id;
+AuthorSchema.virtual("url").get(function () {
+  return "/catalog/author/" + this._id;
 });
 
 //Export model
-module.exports = mongoose.model('Author', AuthorSchema);
+module.exports = mongoose.model("Author", AuthorSchema);
 ```
 
 We've also declared a [virtual](#Virtual_properties) for the AuthorSchema named "url" that returns the absolute URL required to get a particular instance of the model — we'll use the property in our templates whenever we need to get a link to a particular author.
@@ -614,29 +603,25 @@ At the end of the module, we export the model.
 Copy the `Book` schema code shown below and paste it into your **./models/book.js** file. Most of this is similar to the author model — we've declared a schema with a number of string fields and a virtual for getting the URL of specific book records, and we've exported the model.
 
 ```js
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
 
 var Schema = mongoose.Schema;
 
-var BookSchema = new Schema(
-  {
-    title: {type: String, required: true},
-    author: {type: Schema.Types.ObjectId, ref: 'Author', required: true},
-    summary: {type: String, required: true},
-    isbn: {type: String, required: true},
-    genre: [{type: Schema.Types.ObjectId, ref: 'Genre'}]
-  }
-);
+var BookSchema = new Schema({
+  title: { type: String, required: true },
+  author: { type: Schema.Types.ObjectId, ref: "Author", required: true },
+  summary: { type: String, required: true },
+  isbn: { type: String, required: true },
+  genre: [{ type: Schema.Types.ObjectId, ref: "Genre" }],
+});
 
 // Virtual for book's URL
-BookSchema
-.virtual('url')
-.get(function () {
-  return '/catalog/book/' + this._id;
+BookSchema.virtual("url").get(function () {
+  return "/catalog/book/" + this._id;
 });
 
 //Export model
-module.exports = mongoose.model('Book', BookSchema);
+module.exports = mongoose.model("Book", BookSchema);
 ```
 
 The main difference here is that we've created two references to other models:
@@ -649,28 +634,29 @@ The main difference here is that we've created two references to other models:
 Finally, copy the `BookInstance` schema code shown below and paste it into your **./models/bookinstance.js** file. The `BookInstance` represents a specific copy of a book that someone might borrow and includes information about whether the copy is available or on what date it is expected back, "imprint" or version details.
 
 ```js
-var mongoose = require('mongoose');
+var mongoose = require("mongoose");
 
 var Schema = mongoose.Schema;
 
-var BookInstanceSchema = new Schema(
-  {
-    book: { type: Schema.Types.ObjectId, ref: 'Book', required: true }, //reference to the associated book
-    imprint: {type: String, required: true},
-    status: {type: String, required: true, enum: ['Available', 'Maintenance', 'Loaned', 'Reserved'], default: 'Maintenance'},
-    due_back: {type: Date, default: Date.now}
-  }
-);
+var BookInstanceSchema = new Schema({
+  book: { type: Schema.Types.ObjectId, ref: "Book", required: true }, //reference to the associated book
+  imprint: { type: String, required: true },
+  status: {
+    type: String,
+    required: true,
+    enum: ["Available", "Maintenance", "Loaned", "Reserved"],
+    default: "Maintenance",
+  },
+  due_back: { type: Date, default: Date.now },
+});
 
 // Virtual for bookinstance's URL
-BookInstanceSchema
-.virtual('url')
-.get(function () {
-  return '/catalog/bookinstance/' + this._id;
+BookInstanceSchema.virtual("url").get(function () {
+  return "/catalog/bookinstance/" + this._id;
 });
 
 //Export model
-module.exports = mongoose.model('BookInstance', BookInstanceSchema);
+module.exports = mongoose.model("BookInstance", BookInstanceSchema);
 ```
 
 The new things we show here are the field options:
@@ -699,19 +685,19 @@ In order to test the models (and to create some example books and other items th
 
 1. Download (or otherwise create) the file [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) inside your _express-locallibrary-tutorial_ directory (in the same level as `package.json`).
 
-    > **メモ:** You don't need to know how [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) works; it just adds sample data into the database.
+   > **メモ:** You don't need to know how [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) works; it just adds sample data into the database.
 
 2. Enter the following commands in the project root to install the _async_ module that is required by the script (we'll discuss this in later tutorials, )
 
-    ```bash
-    npm install async
-    ```
+   ```bash
+   npm install async
+   ```
 
 3. Run the script using node in your command prompt, passing in the URL of your _MongoDB_ database (the same one you replaced the _insert_your_database_url_here_ placeholder with, inside `app.js` earlier):
 
-    ```bash
-    node populatedb <your mongodb url>
-    ```
+   ```bash
+   node populatedb <your mongodb url>
+   ```
 
 4. The script should run through to completion, displaying items as it creates them in the terminal.
 
diff --git a/files/ja/learn/server-side/express_nodejs/routes/index.md b/files/ja/learn/server-side/express_nodejs/routes/index.md
index e28af47534da2d..9ae9b7edd44dae 100644
--- a/files/ja/learn/server-side/express_nodejs/routes/index.md
+++ b/files/ja/learn/server-side/express_nodejs/routes/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Express チュートリアル Part 4: ルートとコントローラ'
+title: "Express チュートリアル Part 4: ルートとコントローラ"
 slug: Learn/Server-side/Express_Nodejs/routes
 ---
 
@@ -48,18 +48,18 @@ First we create routes for a wiki in a module named **wiki.js**. The code first
 ```js
 // wiki.js - Wiki route module.
 
-var express = require('express');
+var express = require("express");
 var router = express.Router();
 
 // Home page route.
-router.get('/', function (req, res) {
-  res.send('Wiki home page');
-})
+router.get("/", function (req, res) {
+  res.send("Wiki home page");
+});
 
 // About page route.
-router.get('/about', function (req, res) {
-  res.send('About this wiki');
-})
+router.get("/about", function (req, res) {
+  res.send("About this wiki");
+});
 
 module.exports = router;
 ```
@@ -69,9 +69,9 @@ module.exports = router;
 To use the router module in our main app file we first `require()` the route module (**wiki.js**). We then call `use()` on the _Express_ application to add the Router to the middleware handling path, specifying an URL path of 'wiki'.
 
 ```js
-var wiki = require('./wiki.js');
+var wiki = require("./wiki.js");
 // ...
-app.use('/wiki', wiki);
+app.use("/wiki", wiki);
 ```
 
 The two routes defined in our wiki route module are then accessible from `/wiki/` and `/wiki/about/`.
@@ -81,9 +81,9 @@ The two routes defined in our wiki route module are then accessible from `/wiki/
 Our module above defines a couple of typical route functions. The "about" route (reproduced below) is defined using the `Router.get()` method, which responds only to HTTP GET requests. The first argument to this method is the URL path while the second is a callback function that will be invoked if an HTTP GET request with the path is received.
 
 ```js
-router.get('/about', function (req, res) {
-  res.send('About this wiki');
-})
+router.get("/about", function (req, res) {
+  res.send("About this wiki");
+});
 ```
 
 The callback takes three arguments (usually named as shown: `req`, `res`, `next`), that will contain the HTTP Request object, HTTP response, and the _next_ function in the middleware chain.
@@ -103,9 +103,9 @@ The `Router` also provides route methods for all the other HTTP verbs, that are
 For example, the code below behaves just like the previous `/about` route, but only responds to HTTP POST requests.
 
 ```js
-router.post('/about', function (req, res) {
-  res.send('About this wiki');
-})
+router.post("/about", function (req, res) {
+  res.send("About this wiki");
+});
 ```
 
 ### Route paths
@@ -188,46 +188,46 @@ Start by creating a folder for our controllers in the project root (**/controlle
 Open the **/controllers/authorController.js** file and type in the following code:
 
 ```js
-var Author = require('../models/author');
+var Author = require("../models/author");
 
 // Display list of all Authors.
-exports.author_list = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author list');
+exports.author_list = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author list");
 };
 
 // Display detail page for a specific Author.
-exports.author_detail = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author detail: ' + req.params.id);
+exports.author_detail = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author detail: " + req.params.id);
 };
 
 // Display Author create form on GET.
-exports.author_create_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author create GET');
+exports.author_create_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author create GET");
 };
 
 // Handle Author create on POST.
-exports.author_create_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author create POST');
+exports.author_create_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author create POST");
 };
 
 // Display Author delete form on GET.
-exports.author_delete_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author delete GET');
+exports.author_delete_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author delete GET");
 };
 
 // Handle Author delete on POST.
-exports.author_delete_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author delete POST');
+exports.author_delete_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author delete POST");
 };
 
 // Display Author update form on GET.
-exports.author_update_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author update GET');
+exports.author_update_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author update GET");
 };
 
 // Handle Author update on POST.
-exports.author_update_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Author update POST');
+exports.author_update_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Author update POST");
 };
 ```
 
@@ -240,46 +240,46 @@ All the functions have the standard form of an _Express middleware function_, wi
 Open the **/controllers/bookinstanceController.js** file and copy in the following code (this follows an identical pattern to the `Author` controller module):
 
 ```js
-var BookInstance = require('../models/bookinstance');
+var BookInstance = require("../models/bookinstance");
 
 // Display list of all BookInstances.
-exports.bookinstance_list = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance list');
+exports.bookinstance_list = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance list");
 };
 
 // Display detail page for a specific BookInstance.
-exports.bookinstance_detail = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance detail: ' + req.params.id);
+exports.bookinstance_detail = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance detail: " + req.params.id);
 };
 
 // Display BookInstance create form on GET.
-exports.bookinstance_create_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance create GET');
+exports.bookinstance_create_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance create GET");
 };
 
 // Handle BookInstance create on POST.
-exports.bookinstance_create_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance create POST');
+exports.bookinstance_create_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance create POST");
 };
 
 // Display BookInstance delete form on GET.
-exports.bookinstance_delete_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance delete GET');
+exports.bookinstance_delete_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance delete GET");
 };
 
 // Handle BookInstance delete on POST.
-exports.bookinstance_delete_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance delete POST');
+exports.bookinstance_delete_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance delete POST");
 };
 
 // Display BookInstance update form on GET.
-exports.bookinstance_update_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance update GET');
+exports.bookinstance_update_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance update GET");
 };
 
 // Handle bookinstance update on POST.
-exports.bookinstance_update_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: BookInstance update POST');
+exports.bookinstance_update_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: BookInstance update POST");
 };
 ```
 
@@ -288,46 +288,46 @@ exports.bookinstance_update_post = function(req, res) {
 Open the **/controllers/genreController.js** file and copy in the following text (this follows an identical pattern to the `Author` and `BookInstance` files):
 
 ```js
-var Genre = require('../models/genre');
+var Genre = require("../models/genre");
 
 // Display list of all Genre.
-exports.genre_list = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre list');
+exports.genre_list = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre list");
 };
 
 // Display detail page for a specific Genre.
-exports.genre_detail = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre detail: ' + req.params.id);
+exports.genre_detail = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre detail: " + req.params.id);
 };
 
 // Display Genre create form on GET.
-exports.genre_create_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre create GET');
+exports.genre_create_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre create GET");
 };
 
 // Handle Genre create on POST.
-exports.genre_create_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre create POST');
+exports.genre_create_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre create POST");
 };
 
 // Display Genre delete form on GET.
-exports.genre_delete_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre delete GET');
+exports.genre_delete_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre delete GET");
 };
 
 // Handle Genre delete on POST.
-exports.genre_delete_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre delete POST');
+exports.genre_delete_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre delete POST");
 };
 
 // Display Genre update form on GET.
-exports.genre_update_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre update GET');
+exports.genre_update_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre update GET");
 };
 
 // Handle Genre update on POST.
-exports.genre_update_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Genre update POST');
+exports.genre_update_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Genre update POST");
 };
 ```
 
@@ -336,50 +336,50 @@ exports.genre_update_post = function(req, res) {
 Open the **/controllers/bookController.js** file and copy in the following code. This follows the same pattern as the other controller modules, but additionally has an `index()` function for displaying the site welcome page:
 
 ```js
-var Book = require('../models/book');
+var Book = require("../models/book");
 
-exports.index = function(req, res) {
-    res.send('NOT IMPLEMENTED: Site Home Page');
+exports.index = function (req, res) {
+  res.send("NOT IMPLEMENTED: Site Home Page");
 };
 
 // Display list of all books.
-exports.book_list = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book list');
+exports.book_list = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book list");
 };
 
 // Display detail page for a specific book.
-exports.book_detail = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book detail: ' + req.params.id);
+exports.book_detail = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book detail: " + req.params.id);
 };
 
 // Display book create form on GET.
-exports.book_create_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book create GET');
+exports.book_create_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book create GET");
 };
 
 // Handle book create on POST.
-exports.book_create_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book create POST');
+exports.book_create_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book create POST");
 };
 
 // Display book delete form on GET.
-exports.book_delete_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book delete GET');
+exports.book_delete_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book delete GET");
 };
 
 // Handle book delete on POST.
-exports.book_delete_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book delete POST');
+exports.book_delete_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book delete POST");
 };
 
 // Display book update form on GET.
-exports.book_update_get = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book update GET');
+exports.book_update_get = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book update GET");
 };
 
 // Handle book update on POST.
-exports.book_update_post = function(req, res) {
-    res.send('NOT IMPLEMENTED: Book update POST');
+exports.book_update_post = function (req, res) {
+  res.send("NOT IMPLEMENTED: Book update POST");
 };
 ```
 
@@ -400,121 +400,139 @@ The skeleton already has a **./routes** folder containing routes for the _index_
 Open `/routes/catalog.js` and copy in the code below:
 
 ```js
-var express = require('express');
+var express = require("express");
 var router = express.Router();
 
 // Require controller modules.
-var book_controller = require('../controllers/bookController');
-var author_controller = require('../controllers/authorController');
-var genre_controller = require('../controllers/genreController');
-var book_instance_controller = require('../controllers/bookinstanceController');
+var book_controller = require("../controllers/bookController");
+var author_controller = require("../controllers/authorController");
+var genre_controller = require("../controllers/genreController");
+var book_instance_controller = require("../controllers/bookinstanceController");
 
 /// BOOK ROUTES ///
 
 // GET catalog home page.
-router.get('/', book_controller.index);
+router.get("/", book_controller.index);
 
 // GET request for creating a Book. NOTE This must come before routes that display Book (uses id).
-router.get('/book/create', book_controller.book_create_get);
+router.get("/book/create", book_controller.book_create_get);
 
 // POST request for creating Book.
-router.post('/book/create', book_controller.book_create_post);
+router.post("/book/create", book_controller.book_create_post);
 
 // GET request to delete Book.
-router.get('/book/:id/delete', book_controller.book_delete_get);
+router.get("/book/:id/delete", book_controller.book_delete_get);
 
 // POST request to delete Book.
-router.post('/book/:id/delete', book_controller.book_delete_post);
+router.post("/book/:id/delete", book_controller.book_delete_post);
 
 // GET request to update Book.
-router.get('/book/:id/update', book_controller.book_update_get);
+router.get("/book/:id/update", book_controller.book_update_get);
 
 // POST request to update Book.
-router.post('/book/:id/update', book_controller.book_update_post);
+router.post("/book/:id/update", book_controller.book_update_post);
 
 // GET request for one Book.
-router.get('/book/:id', book_controller.book_detail);
+router.get("/book/:id", book_controller.book_detail);
 
 // GET request for list of all Book items.
-router.get('/books', book_controller.book_list);
+router.get("/books", book_controller.book_list);
 
 /// AUTHOR ROUTES ///
 
 // GET request for creating Author. NOTE This must come before route for id (i.e. display author).
-router.get('/author/create', author_controller.author_create_get);
+router.get("/author/create", author_controller.author_create_get);
 
 // POST request for creating Author.
-router.post('/author/create', author_controller.author_create_post);
+router.post("/author/create", author_controller.author_create_post);
 
 // GET request to delete Author.
-router.get('/author/:id/delete', author_controller.author_delete_get);
+router.get("/author/:id/delete", author_controller.author_delete_get);
 
 // POST request to delete Author.
-router.post('/author/:id/delete', author_controller.author_delete_post);
+router.post("/author/:id/delete", author_controller.author_delete_post);
 
 // GET request to update Author.
-router.get('/author/:id/update', author_controller.author_update_get);
+router.get("/author/:id/update", author_controller.author_update_get);
 
 // POST request to update Author.
-router.post('/author/:id/update', author_controller.author_update_post);
+router.post("/author/:id/update", author_controller.author_update_post);
 
 // GET request for one Author.
-router.get('/author/:id', author_controller.author_detail);
+router.get("/author/:id", author_controller.author_detail);
 
 // GET request for list of all Authors.
-router.get('/authors', author_controller.author_list);
+router.get("/authors", author_controller.author_list);
 
 /// GENRE ROUTES ///
 
 // GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id).
-router.get('/genre/create', genre_controller.genre_create_get);
+router.get("/genre/create", genre_controller.genre_create_get);
 
 //POST request for creating Genre.
-router.post('/genre/create', genre_controller.genre_create_post);
+router.post("/genre/create", genre_controller.genre_create_post);
 
 // GET request to delete Genre.
-router.get('/genre/:id/delete', genre_controller.genre_delete_get);
+router.get("/genre/:id/delete", genre_controller.genre_delete_get);
 
 // POST request to delete Genre.
-router.post('/genre/:id/delete', genre_controller.genre_delete_post);
+router.post("/genre/:id/delete", genre_controller.genre_delete_post);
 
 // GET request to update Genre.
-router.get('/genre/:id/update', genre_controller.genre_update_get);
+router.get("/genre/:id/update", genre_controller.genre_update_get);
 
 // POST request to update Genre.
-router.post('/genre/:id/update', genre_controller.genre_update_post);
+router.post("/genre/:id/update", genre_controller.genre_update_post);
 
 // GET request for one Genre.
-router.get('/genre/:id', genre_controller.genre_detail);
+router.get("/genre/:id", genre_controller.genre_detail);
 
 // GET request for list of all Genre.
-router.get('/genres', genre_controller.genre_list);
+router.get("/genres", genre_controller.genre_list);
 
 /// BOOKINSTANCE ROUTES ///
 
 // GET request for creating a BookInstance. NOTE This must come before route that displays BookInstance (uses id).
-router.get('/bookinstance/create', book_instance_controller.bookinstance_create_get);
+router.get(
+  "/bookinstance/create",
+  book_instance_controller.bookinstance_create_get,
+);
 
 // POST request for creating BookInstance.
-router.post('/bookinstance/create', book_instance_controller.bookinstance_create_post);
+router.post(
+  "/bookinstance/create",
+  book_instance_controller.bookinstance_create_post,
+);
 
 // GET request to delete BookInstance.
-router.get('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_get);
+router.get(
+  "/bookinstance/:id/delete",
+  book_instance_controller.bookinstance_delete_get,
+);
 
 // POST request to delete BookInstance.
-router.post('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_post);
+router.post(
+  "/bookinstance/:id/delete",
+  book_instance_controller.bookinstance_delete_post,
+);
 
 // GET request to update BookInstance.
-router.get('/bookinstance/:id/update', book_instance_controller.bookinstance_update_get);
+router.get(
+  "/bookinstance/:id/update",
+  book_instance_controller.bookinstance_update_get,
+);
 
 // POST request to update BookInstance.
-router.post('/bookinstance/:id/update', book_instance_controller.bookinstance_update_post);
+router.post(
+  "/bookinstance/:id/update",
+  book_instance_controller.bookinstance_update_post,
+);
 
 // GET request for one BookInstance.
-router.get('/bookinstance/:id', book_instance_controller.bookinstance_detail);
+router.get("/bookinstance/:id", book_instance_controller.bookinstance_detail);
 
 // GET request for list of all BookInstance.
-router.get('/bookinstances', book_instance_controller.bookinstance_list);
+router.get("/bookinstances", book_instance_controller.bookinstance_list);
 
 module.exports = router;
 ```
@@ -533,8 +551,8 @@ Open **/routes/index.js** and replace the existing route with the function below
 
 ```js
 // GET home page.
-router.get('/', function(req, res) {
-  res.redirect('/catalog');
+router.get("/", function (req, res) {
+  res.redirect("/catalog");
 });
 ```
 
@@ -547,17 +565,17 @@ The last step is to add the routes to the middleware chain. We do this in `app.j
 Open **app.js** and require the catalog route below the other routes (add the third line shown below, underneath the other two):
 
 ```js
-var indexRouter = require('./routes/index');
-var usersRouter = require('./routes/users');
-var catalogRouter = require('./routes/catalog');  //Import routes for "catalog" area of site
+var indexRouter = require("./routes/index");
+var usersRouter = require("./routes/users");
+var catalogRouter = require("./routes/catalog"); //Import routes for "catalog" area of site
 ```
 
 Next, add the catalog route to the middleware stack below the other routes (add the third line shown below, underneath the other two):
 
 ```js
-app.use('/', indexRouter);
-app.use('/users', usersRouter);
-app.use('/catalog', catalogRouter);  // Add catalog routes to middleware chain.
+app.use("/", indexRouter);
+app.use("/users", usersRouter);
+app.use("/catalog", catalogRouter); // Add catalog routes to middleware chain.
 ```
 
 > **メモ:** We have added our catalog module at a path `'/catalog'`. This is prepended to all of the paths defined in the catalog module. So for example, to access a list of books, the URL will be: `/catalog/books/`.
diff --git a/files/ja/learn/server-side/express_nodejs/skeleton_website/index.md b/files/ja/learn/server-side/express_nodejs/skeleton_website/index.md
index 8384c4a7301cba..a717082c9675ae 100644
--- a/files/ja/learn/server-side/express_nodejs/skeleton_website/index.md
+++ b/files/ja/learn/server-side/express_nodejs/skeleton_website/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Express チュートリアル Part 2: スケルトン Web サイトの作成'
+title: "Express チュートリアル Part 2: スケルトン Web サイトの作成"
 slug: Learn/Server-side/Express_Nodejs/skeleton_website
 ---
 
@@ -146,24 +146,24 @@ express express-locallibrary-tutorial --view=pug
 
 1. まず、依存関係をインストールします (`install` コマンドはプロジェクトの **package.json** ファイルにリストされているすべての依存関係パッケージを取得します)
 
-    ```bash
-    cd express-locallibrary-tutorial
-    npm install
-    ```
+   ```bash
+   cd express-locallibrary-tutorial
+   npm install
+   ```
 
 2. その後、アプリケーションを実行します
 
-    - Windows では、次のコマンドを使用します
+   - Windows では、次のコマンドを使用します
 
-      ```bash
-      SET DEBUG=express-locallibrary-tutorial:* & npm start
-      ```
+     ```bash
+     SET DEBUG=express-locallibrary-tutorial:* & npm start
+     ```
 
-    - macOS または Linux では、次のコマンドを使用します
+   - macOS または Linux では、次のコマンドを使用します
 
-      ```bash
-      DEBUG=express-locallibrary-tutorial:* npm start
-      ```
+     ```bash
+     DEBUG=express-locallibrary-tutorial:* npm start
+     ```
 
 3. その後、ブラウザーに <http://localhost:3000/> をロードしてアプリにアクセスします
 
@@ -324,7 +324,7 @@ scripts セクションは "start" スクリプトを定義します。これは
  * Module dependencies.
  */
 
-var app = require('../app');
+var app = require("../app");
 ```
 
 > **メモ:** `require()` は、現在のファイルにモジュールをインポートするために使われるグローバル Node 関数です。 ここでは相対パスを使用し、オプションの (.**js**) ファイル拡張子を省略して **app.js** モジュールを指定します。
@@ -347,18 +347,18 @@ module.exports = app;
 **app.js** ファイルを詳しく見ていきましょう。まず、NPM を使用してアプリケーション用に以前にダウンロードした express、serve-favicon、morgan、cookie-parser など、`require()` を使用していくつかの便利な Node ライブラリをファイルにインポートします。path は、ファイルとディレクトリーのパスを解析するためのコア Node ライブラリです。
 
 ```js
-var express = require('express');
-var path = require('path');
-var favicon = require('serve-favicon');
-var logger = require('morgan');
-var cookieParser = require('cookie-parser');
+var express = require("express");
+var path = require("path");
+var favicon = require("serve-favicon");
+var logger = require("morgan");
+var cookieParser = require("cookie-parser");
 ```
 
 それから routes ディレクトリーから `require()` モジュールを呼び出します。これらのモジュール/ファイルには、関連する "ルート" (URL パス) の特定のセットを処理するためのコードが含まれています。たとえばライブラリ内のすべての本をリストするためにスケルトンアプリケーションを拡張するときは、本関連のルートを処理するための新しいファイルを追加します。
 
 ```js
-var indexRouter = require('./routes/index');
-var usersRouter = require('./routes/users');
+var indexRouter = require("./routes/index");
+var usersRouter = require("./routes/users");
 ```
 
 > **メモ:** この時点で、モジュールをインポートしたばかりです。 実際にはまだそのルートを使用していません (これはファイルの少し下まで行われます)。
@@ -369,8 +369,8 @@ var usersRouter = require('./routes/users');
 var app = express();
 
 // view engine setup
-app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'pug');
+app.set("views", path.join(__dirname, "views"));
+app.set("view engine", "pug");
 ```
 
 次の一連の関数は `app.use()` を呼び出してミドルウェアライブラリをリクエスト処理チェーンに追加します。以前インポートしたサードパーティのライブラリに加えて、Express がプロジェクトルートの **/public** ディレクトリーにあるすべての静的ファイルを処理するようにするために、`express.static` ミドルウェアを使用します。
@@ -378,18 +378,18 @@ app.set('view engine', 'pug');
 ```js
 // uncomment after placing your favicon in /public
 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
-app.use(logger('dev'));
+app.use(logger("dev"));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
-app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static(path.join(__dirname, "public")));
 ```
 
 他のすべてのミドルウェアがセットアップされたので、(以前にインポートした) ルート処理コードをリクエスト処理チェーンに追加します。 インポートされたコードは、サイトのさまざまな部分に特定のルートを定義します。
 
 ```js
-app.use('/', indexRouter);
-app.use('/users', usersRouter);
+app.use("/", indexRouter);
+app.use("/users", usersRouter);
 ```
 
 > **メモ:** 上記で指定されたパス ('/' と '`/users'`) は、インポートされたファイルで定義されているルートの接頭辞として扱われます。たとえば、インポートされたユーザーモジュールが `/profile` のルートを定義している場合は、`/users/profile` でそのルートにアクセスします。 ルートの詳細については後の記事で説明します。
@@ -398,21 +398,21 @@ app.use('/users', usersRouter);
 
 ```js
 // catch 404 and forward to error handler
-app.use(function(req, res, next) {
-  var err = new Error('Not Found');
+app.use(function (req, res, next) {
+  var err = new Error("Not Found");
   err.status = 404;
   next(err);
 });
 
 // error handler
-app.use(function(err, req, res, next) {
+app.use(function (err, req, res, next) {
   // set locals, only providing error in development
   res.locals.message = err.message;
-  res.locals.error = req.app.get('env') === 'development' ? err : {};
+  res.locals.error = req.app.get("env") === "development" ? err : {};
 
   // render the error page
   res.status(err.status || 500);
-  res.render('error');
+  res.render("error");
 });
 ```
 
@@ -427,12 +427,12 @@ module.exports = app;
 ルートファイル **/routes/users.js** を以下に示します (ルートファイルは同様の構造を共有しているので、**index.js** も表示する必要はありません)。まず、express モジュールをロードし、それを使って `express.Router` オブジェクトを取得します。それからそのオブジェクトのルートを指定し、最後にモジュールからルーターをエクスポートします (これがファイルが **app.js** にインポートされることを可能にするものです)。
 
 ```js
-var express = require('express');
+var express = require("express");
 var router = express.Router();
 
 /* GET users listing. */
-router.get('/', function(req, res, next) {
-  res.send('respond with a resource');
+router.get("/", function (req, res, next) {
+  res.send("respond with a resource");
 });
 
 module.exports = router;
@@ -450,8 +450,8 @@ module.exports = router;
 
 ```js
 /* GET home page. */
-router.get('/', function(req, res) {
-  res.render('index', { title: 'Express' });
+router.get("/", function (req, res) {
+  res.render("index", { title: "Express" });
 });
 ```
 
diff --git a/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.md b/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
index a7e62164382e8a..ff2fa2ee03e8e7 100644
--- a/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
+++ b/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Express チュートリアル: 地域図書館の Web サイト'
+title: "Express チュートリアル: 地域図書館の Web サイト"
 slug: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
 ---
 
diff --git a/files/ja/learn/server-side/first_steps/client-server_overview/index.md b/files/ja/learn/server-side/first_steps/client-server_overview/index.md
index 2c15b700996e24..2bc84312cba002 100644
--- a/files/ja/learn/server-side/first_steps/client-server_overview/index.md
+++ b/files/ja/learn/server-side/first_steps/client-server_overview/index.md
@@ -97,7 +97,7 @@ HTTP リクエストもボディを持つことができますが、この場合
 
 メッセージの最後に **body** があります。これにはリクエストによって返された実際の HTML が含まれています。
 
-```html
+```http
 HTTP/1.1 200 OK
 Server: Apache
 X-Backend-Server: developer1.webapp.scl3.mozilla.com
@@ -111,8 +111,6 @@ Allow: GET
 X-Cache-Info: caching
 Content-Length: 41823
 
-
-
 <!DOCTYPE html>
 <html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
 <head prefix="og: http://ogp.me/ns#">
@@ -132,7 +130,7 @@ HTTP `POST` は、サーバに保存する情報を含むフォームを送信
 
 以下のテキストは、ユーザがこのサイトに新しいプロファイルの詳細を送信したときに行われる HTTP リクエストを示しています。最初の行はこのリクエストを `POST` として識別しますが、リクエストのフォーマットは前述の `GET` リクエストの例とほぼ同じです。
 
-```html
+```http
 POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
 Host: developer.mozilla.org
 Connection: keep-alive
@@ -158,7 +156,7 @@ csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&
 
 リクエストからのレスポンスは以下のとおりです。ステータスコード "`302 Found`" は、投稿が成功したこと、および `Location` フィールドで指定されたページを読み込むために 2 番目の HTTP リクエストを発行する必要があることをブラウザーに通知します。その他の点では、この情報は GET リクエストへのレスポンスに関する情報と似ています。
 
-```html
+```http
 HTTP/1.1 302 FOUND
 Server: Apache
 X-Backend-Server: developer3.webapp.scl3.mozilla.com
diff --git a/files/ja/learn/server-side/first_steps/introduction/index.md b/files/ja/learn/server-side/first_steps/introduction/index.md
index 8e2186d39bce15..ababe3345b91f7 100644
--- a/files/ja/learn/server-side/first_steps/introduction/index.md
+++ b/files/ja/learn/server-side/first_steps/introduction/index.md
@@ -115,7 +115,7 @@ Web サーバーはクライアントからの要求を待ちうけ、受信し
 >
 > Google 検索の結果は、以前の検索履歴によって優先づけられています。
 >
-> 1. [Google 検索](https:\\google.co.jp)のページを開いてください。
+> 1. [Google 検索](https://www.google.co.jp)のページを開いてください。
 > 2. まず「サッカー」を検索します。
 > 3. 今度は、検索語欄に「好きな」と入力して、そのあとに続く語句の候補を見てください。
 >
diff --git a/files/ja/learn/server-side/first_steps/web_frameworks/index.md b/files/ja/learn/server-side/first_steps/web_frameworks/index.md
index fb2c9584551f3d..3f3837cd758617 100644
--- a/files/ja/learn/server-side/first_steps/web_frameworks/index.md
+++ b/files/ja/learn/server-side/first_steps/web_frameworks/index.md
@@ -129,24 +129,22 @@ def youngest(request):
 
 以下のコードスニペットはこれがどのように機能するかを示しています。前のセクションの「最年少チーム」の例を続けると、HTML テンプレートにはビューによって `youngest_teams` というリスト変数が渡されます。HTML スケルトンの内部には、最初に `youngest_teams` 変数が存在するかどうかを確認し、次に for ループ内でそれを繰り返す式があります。各イテレーションで、テンプレートはチームの `team_name` 値をリストアイテムに表示します。
 
-```html
-#best/templates/best/index.html
-
-<!DOCTYPE html>
-<html lang="en">
-<body>
-
- {% if youngest_teams %}
-    <ul>
-    {% for team in youngest_teams %}
-        <li>\{\{ team.team_name \}\}</li>
-    {% endfor %}
-    </ul>
-{% else %}
-    <p>利用できるチームがありません。</p>
-{% endif %}
-
-</body>
+```django
+<!-- best/templates/best/index.html -->
+
+<!doctype html>
+<html lang="ja">
+  <body>
+    {% if youngest_teams %}
+      <ul>
+        {% for team in youngest_teams %}
+          <li>\{\{ team.team_name \}\}</li>
+        {% endfor %}
+      </ul>
+    {% else %}
+      <p>利用できるチームがありません。</p>
+    {% endif %}
+  </body>
 </html>
 ```
 
@@ -178,15 +176,15 @@ def youngest(request):
 >
 > 1. メインサイトに移動する (上記のリンク先)
 >
->     - Documentation メニューのリンク (Documentation、Guide、API Reference、Getting Started など) をクリックします。
->     - URL ルーティング、テンプレート、データベース/モデルの設定方法を説明したトピックはありますか？
->     - ドキュメントは明確ですか？
+>    - Documentation メニューのリンク (Documentation、Guide、API Reference、Getting Started など) をクリックします。
+>    - URL ルーティング、テンプレート、データベース/モデルの設定方法を説明したトピックはありますか？
+>    - ドキュメントは明確ですか？
 >
 > 2. 各サイトのメーリングリストに移動します (コミュニティリンクからアクセス可能)。
 >
->     - 過去数日間に投稿された質問の数
->     - 回答はいくつありますか？
->     - 彼らは活発なコミュニティを持っていますか？
+>    - 過去数日間に投稿された質問の数
+>    - 回答はいくつありますか？
+>    - 彼らは活発なコミュニティを持っていますか？
 
 ## いくつかの良いウェブフレームワークとは？
 
diff --git a/files/ja/learn/server-side/node_server_without_framework/index.md b/files/ja/learn/server-side/node_server_without_framework/index.md
index 7ba8fd607e459a..bc0a9487b25cb1 100644
--- a/files/ja/learn/server-side/node_server_without_framework/index.md
+++ b/files/ja/learn/server-side/node_server_without_framework/index.md
@@ -22,60 +22,63 @@ slug: Learn/Server-side/Node_server_without_framework
 Node.js で構築された、簡単な静的ファイルサーバの例を以下に示します。
 
 ```js
-var http = require('http');
-var fs = require('fs');
-var path = require('path');
+var http = require("http");
+var fs = require("fs");
+var path = require("path");
 
-http.createServer(function (request, response) {
-    console.log('request ', request.url);
+http
+  .createServer(function (request, response) {
+    console.log("request ", request.url);
 
-    var filePath = '.' + request.url;
-    if (filePath == './') {
-        filePath = './index.html';
+    var filePath = "." + request.url;
+    if (filePath == "./") {
+      filePath = "./index.html";
     }
 
     var extname = String(path.extname(filePath)).toLowerCase();
     var mimeTypes = {
-        '.html': 'text/html',
-        '.js': 'text/javascript',
-        '.css': 'text/css',
-        '.json': 'application/json',
-        '.png': 'image/png',
-        '.jpg': 'image/jpg',
-        '.gif': 'image/gif',
-        '.svg': 'image/svg+xml',
-        '.wav': 'audio/wav',
-        '.mp4': 'video/mp4',
-        '.woff': 'application/font-woff',
-        '.ttf': 'application/font-ttf',
-        '.eot': 'application/vnd.ms-fontobject',
-        '.otf': 'application/font-otf',
-        '.wasm': 'application/wasm'
+      ".html": "text/html",
+      ".js": "text/javascript",
+      ".css": "text/css",
+      ".json": "application/json",
+      ".png": "image/png",
+      ".jpg": "image/jpg",
+      ".gif": "image/gif",
+      ".svg": "image/svg+xml",
+      ".wav": "audio/wav",
+      ".mp4": "video/mp4",
+      ".woff": "application/font-woff",
+      ".ttf": "application/font-ttf",
+      ".eot": "application/vnd.ms-fontobject",
+      ".otf": "application/font-otf",
+      ".wasm": "application/wasm",
     };
 
-    var contentType = mimeTypes[extname] || 'application/octet-stream';
-
-    fs.readFile(filePath, function(error, content) {
-        if (error) {
-            if(error.code == 'ENOENT') {
-                fs.readFile('./404.html', function(error, content) {
-                    response.writeHead(404, { 'Content-Type': 'text/html' });
-                    response.end(content, 'utf-8');
-                });
-            }
-            else {
-                response.writeHead(500);
-                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
-            }
-        }
-        else {
-            response.writeHead(200, { 'Content-Type': contentType });
-            response.end(content, 'utf-8');
+    var contentType = mimeTypes[extname] || "application/octet-stream";
+
+    fs.readFile(filePath, function (error, content) {
+      if (error) {
+        if (error.code == "ENOENT") {
+          fs.readFile("./404.html", function (error, content) {
+            response.writeHead(404, { "Content-Type": "text/html" });
+            response.end(content, "utf-8");
+          });
+        } else {
+          response.writeHead(500);
+          response.end(
+            "Sorry, check with the site admin for error: " +
+              error.code +
+              " ..\n",
+          );
         }
+      } else {
+        response.writeHead(200, { "Content-Type": contentType });
+        response.end(content, "utf-8");
+      }
     });
-
-}).listen(8125);
-console.log('Server running at http://127.0.0.1:8125/');
+  })
+  .listen(8125);
+console.log("Server running at http://127.0.0.1:8125/");
 ```
 
 ### 各部の説明
@@ -83,9 +86,9 @@ console.log('Server running at http://127.0.0.1:8125/');
 第 1 行から第 3 行までは、Node.js が提供するモジュールを組み込みます。おおむね「インポート」に似たような手続きです。
 
 ```js
-var http = require('http');
-var fs = require('fs');
-var path = require('path');
+var http = require("http");
+var fs = require("fs");
+var path = require("path");
 ```
 
 次にある関数で、サーバーを生成します。 `https.createServer`は、サーバーオブジェクトを返しますが、下の例ではポート 8125 で要求の受付を開始します。
@@ -100,10 +103,10 @@ console.log('Server running at http://127.0.0.1:8125/');
 次の 4 行では、要求があった URL から、ファイルへのパスを決定します。ファイル名が明示されていないときは、デフォルト名を使うようにします。
 
 ```js
-console.log('request ', request.url);
-var filePath = '.' + request.url;
-if (filePath == './') {
-    filePath = './index.html';
+console.log("request ", request.url);
+var filePath = "." + request.url;
+if (filePath == "./") {
+  filePath = "./index.html";
 }
 ```
 
@@ -114,24 +117,24 @@ if (filePath == './') {
 ```js
 var extname = String(path.extname(filePath)).toLowerCase();
 var mimeTypes = {
-    '.html': 'text/html',
-    '.js': 'text/javascript',
-    '.css': 'text/css',
-    '.json': 'application/json',
-    '.png': 'image/png',
-    '.jpg': 'image/jpg',
-    '.gif': 'image/gif',
-    '.svg': 'image/svg+xml',
-    '.wav': 'audio/wav',
-    '.mp4': 'video/mp4',
-    '.woff': 'application/font-woff',
-    '.ttf': 'application/font-ttf',
-    '.eot': 'application/vnd.ms-fontobject',
-    '.otf': 'application/font-otf',
-    '.wasm': 'application/wasm'
+  ".html": "text/html",
+  ".js": "text/javascript",
+  ".css": "text/css",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".jpg": "image/jpg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".wav": "audio/wav",
+  ".mp4": "video/mp4",
+  ".woff": "application/font-woff",
+  ".ttf": "application/font-ttf",
+  ".eot": "application/vnd.ms-fontobject",
+  ".otf": "application/font-otf",
+  ".wasm": "application/wasm",
 };
 
-var contentType = mimeTypes[extname] || 'application/octet-stream';
+var contentType = mimeTypes[extname] || "application/octet-stream";
 ```
 
 最後に、ファイルの情報をクライアントに返送します。この関数では、あらかじめ用意してあった`filePath`変数を使ってファイルを読み込みます。
@@ -155,23 +158,24 @@ if (error) {
 一番多いのは、存在しないファイルを要求された場合（`ENOENT`）で、エラーコード 404 に対応するページを返してやります。
 
 ```js
-if(error.code == 'ENOENT') {
-    fs.readFile('./404.html', function(error, content) {
-        response.writeHead(404, { 'Content-Type': 'text/html' });
-        response.end(content, 'utf-8');
-    });
-}
-else {
-    response.writeHead(500);
-    response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
+if (error.code == "ENOENT") {
+  fs.readFile("./404.html", function (error, content) {
+    response.writeHead(404, { "Content-Type": "text/html" });
+    response.end(content, "utf-8");
+  });
+} else {
+  response.writeHead(500);
+  response.end(
+    "Sorry, check with the site admin for error: " + error.code + " ..\n",
+  );
 }
 ```
 
 何もエラーが検出されなかったら、MIME 型をヘッダーに付けて、要求されたファイルを返してやります。
 
 ```js
-response.writeHead(200, { 'Content-Type': contentType });
-response.end(content, 'utf-8');
+response.writeHead(200, { "Content-Type": contentType });
+response.end(content, "utf-8");
 ```
 
 ## 拡張の検討
diff --git a/files/ja/web/api/bluetooth/availabilitychanged_event/index.md b/files/ja/web/api/bluetooth/availabilitychanged_event/index.md
new file mode 100644
index 00000000000000..745c78a744652b
--- /dev/null
+++ b/files/ja/web/api/bluetooth/availabilitychanged_event/index.md
@@ -0,0 +1,54 @@
+---
+title: "Bluetooth: availabilitychanged イベント"
+slug: Web/API/Bluetooth/availabilitychanged_event
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{APIRef("Bluetooth API")}}{{securecontext_header}}{{SeeCompatTable}}
+
+`availabilitychanged` イベントは、{{Glossary("User Agent", "ユーザーエージェント")}}で Bluetooth システム全体が利用可能になるか利用不可能になったとき発火します。
+
+## 構文
+
+{{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。
+
+```js-nolint
+addEventListener("availabilitychanged", (event) => { })
+
+onavailabilitychanged = (event) => { }
+```
+
+## イベント型
+
+汎用の {{domxref("Event")}} です。
+
+## 例
+
+Bluetooth の利用可能性の変化の通知を受け取るには、このように {{domxref("EventTarget.addEventListener", "addEventListener()")}} を用いて {{domxref("Bluetooth")}} インスタンスにハンドラーを追加するとよいです。
+
+```js
+Bluetooth.addEventListener("availabilitychanged", (event) => {
+  const availability = event.value;
+});
+```
+
+別の方法として、`Bluetooth.onavailabilitychanged` イベントハンドラープロパティを用いて `availabilitychanged` イベントのハンドラーを構築できます。
+
+```js
+Bluetooth.onavailabilitychanged = (event) => {
+  const availability = event.value;
+};
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{DOMxRef("Bluetooth.getAvailability")}}
diff --git a/files/ja/web/api/bluetooth/getavailability/index.md b/files/ja/web/api/bluetooth/getavailability/index.md
new file mode 100644
index 00000000000000..b8d3768065d3d8
--- /dev/null
+++ b/files/ja/web/api/bluetooth/getavailability/index.md
@@ -0,0 +1,54 @@
+---
+title: "Bluetooth: getAvailability() メソッド"
+slug: Web/API/Bluetooth/getAvailability
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Bluetooth API")}}
+
+{{DOMxRef("Bluetooth")}} インターフェイスの **`getAvailability()`** メソッドは、デバイスに Bluetooth アダプターがある場合は `true` を返し、そうでない場合は `false` を返します。(ユーザーがブラウザーを本当の値を公開しないよう設定した場合は除きます)
+
+> **メモ:** `getAvailability()` が `true` を返す場合でも、ユーザーが Web Bluetooth API の使用を許可しないかもしれません。
+> ({{DOMxRef("Bluetooth.requestDevice","navigator.bluetooth.requestDevice()")}} が {{DOMxRef("BluetoothDevice")}} で解決しないかもしれません)
+> また、ユーザーはブラウザーを本当の値ではなく固定の値を返すよう設定する可能性があります。
+
+## 構文
+
+```js-nolint
+getAvailability()
+```
+
+### 引数
+
+なし
+
+### 返値
+
+{{JSxRef("Boolean")}} で解決する {{JSxRef("Promise")}} を返します。
+
+## 例外
+
+このメソッドは例外を投げません。
+
+## 例
+
+この断片は、Bluetooth に対応しているかを表すメッセージをコンソールに出力します。
+
+```js
+navigator.bluetooth.getAvailability().then((available) => {
+  if (available) {
+    console.log("このデバイスは Bluetooth に対応しています！");
+  } else {
+    console.log("残念！Bluetooth に対応していません");
+  }
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/bluetooth/getdevices/index.md b/files/ja/web/api/bluetooth/getdevices/index.md
new file mode 100644
index 00000000000000..579449a073e491
--- /dev/null
+++ b/files/ja/web/api/bluetooth/getdevices/index.md
@@ -0,0 +1,38 @@
+---
+title: "Bluetooth: getDevices() メソッド"
+slug: Web/API/Bluetooth/getDevices
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Bluetooth API")}}
+
+[Web Bluetooth API](/ja/docs/Web/API/Web_Bluetooth_API) の {{DOMxRef("Bluetooth")}} インターフェイスの **`getDevices()`** メソッドは、オリジンがアクセスを許可されている Bluetooth デバイスを公開します。このメソッドは許可を要求するプロンプトを表示しません。
+
+> **メモ:** このメソッドは、圏外だったり電源が切られていたりするものを含め、オリジンが現在アクセスを許可されている各デバイスに対応する {{DOMxRef("BluetoothDevice")}} を返します。
+
+## 構文
+
+```js-nolint
+getDevices()
+```
+
+### 引数
+
+なし
+
+### 返値
+
+{{DOMxRef("BluetoothDevice")}} の配列で解決する {{JSxRef("Promise")}} を返します。
+
+## 例外
+
+このメソッドは例外を投げません。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/bluetooth/index.md b/files/ja/web/api/bluetooth/index.md
index 84b1ce3f279f84..b95be3081a0853 100644
--- a/files/ja/web/api/bluetooth/index.md
+++ b/files/ja/web/api/bluetooth/index.md
@@ -1,37 +1,38 @@
 ---
 title: Bluetooth
 slug: Web/API/Bluetooth
+l10n:
+  sourceCommit: 15d7838061736509d08d642611bd26c1251c0500
 ---
 
-{{ apiref("W3C Bluetooth API") }} {{Non-standard_header()}}
+{{APIRef("Bluetooth API")}}{{securecontext_header}}{{SeeCompatTable}}
 
-[Web Bluetooth API](/ja/Web/API/Web_Bluetooth_API) の **`Bluetooth`** インターフェースは、オプション指定した {{domxref("BluetoothDevice")}} の {{jsxref("Promise")}} を返します。
+[Web Bluetooth API](/ja/docs/Web/API/Web_Bluetooth_API) の **`Bluetooth`** インターフェイスは、指定のオプションに合致する {{domxref("BluetoothDevice")}} オブジェクトで解決する {{jsxref("Promise")}} を返します。
 
-## インターフェース
+{{InheritanceDiagram}}
 
-```
-interface Bluetooth {
-  Promise<BluetoothDevice> requestDevice(RequestDeviceOptions options);
-};
-Bluetooth implements EventTarget;
-Bluetooth implements BluetoothDeviceEventHandlers;
-Bluetooth implements CharacteristicEventHandlers;
-Bluetooth implements ServiceEventHandlers;
-```
+## インスタンスプロパティ
 
-## プロパティ
+_親の {{domxref("EventTarget")}} からプロパティを継承します。_
 
-なし
+## インスタンスメソッド
 
-## メソッド
+- {{domxref("Bluetooth.getAvailability","Bluetooth.getAvailability()")}} {{Experimental_Inline}}
+  - : ユーザーエージェントに Bluetooth を扱う機能があるかを表す {{jsxref("boolean")}} 値で解決する {{jsxref("Promise")}} を返します。これが何を返すかに影響するオプションをユーザーが設定できるユーザーエージェントもあります。このオプションが設定されている場合、このメソッドはその値を返します。
+- {{domxref("Bluetooth.getDevices","Bluetooth.getDevices()")}} {{Experimental_Inline}}
+  - : オリジンが既に {{domxref("Bluetooth.requestDevice","Bluetooth.requestDevice()")}} の呼び出しにより使用する許可を得ている {{domxref("BluetoothDevice")}} の配列で解決する {{jsxref("Promise")}} を返します。
+- {{domxref("Bluetooth.requestDevice","Bluetooth.requestDevice()")}} {{Experimental_Inline}}
+  - : 指定のオプションに合致する {{domxref("BluetoothDevice")}} オブジェクトで解決する {{jsxref("Promise")}} を返します。
 
-- {{domxref("Bluetooth.requestDevice()")}}
-  - : オプション指定した {{domxref("BluetoothDevice")}} の {{jsxref("Promise")}} を返す。
+## イベント
 
-## 仕様
+- {{domxref("Bluetooth.availabilitychanged_event", "availabilitychanged")}} {{Experimental_Inline}}
+  - : Bluetooth の能力のうち利用可能性が変化したとき発火するイベントです。
+
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザー実装状況
+## ブラウザーの互換性
 
-{{Compat("api.Bluetooth")}}
+{{Compat}}
diff --git a/files/ja/web/api/bluetooth/requestdevice/index.md b/files/ja/web/api/bluetooth/requestdevice/index.md
new file mode 100644
index 00000000000000..da119ce22ae282
--- /dev/null
+++ b/files/ja/web/api/bluetooth/requestdevice/index.md
@@ -0,0 +1,85 @@
+---
+title: "Bluetooth: requestDevice() メソッド"
+slug: Web/API/Bluetooth/requestDevice
+l10n:
+  sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
+---
+
+{{APIRef("Bluetooth API")}} {{securecontext_header}}{{SeeCompatTable}}
+
+{{domxref("Bluetooth")}} インターフェイスの **`Bluetooth.requestDevice()`** メソッドは、指定のオプションに合致する {{domxref("BluetoothDevice")}} オブジェクトで解決する {{jsxref("Promise")}} を返します。選択用の UI が無い場合は、このメソッドは基準に合致する最初のデバイスを返します。
+
+## 構文
+
+```js-nolint
+requestDevice()
+requestDevice(options)
+```
+
+### 引数
+
+- `options` {{optional_inline}}
+  - : デバイスの要求に関するオプションを設定するオブジェクトです。以下のオプションが利用可能です。
+    - `filters[]`
+      - `BluetoothScanFilters` の配列です。このフィルタは、`BluetoothServiceUUID` の配列、`name` パラメーター、`namePrefix` パラメーターからなります。
+    - `optionalServices[]`
+      - : `BluetoothServiceUUID` の配列です。
+    - `acceptAllDevices`
+      - : 要求を出しているスクリプトがすべての Bluetooth デバイスを受け入れるかを表す {{jsxref("boolean")}} 値です。デフォルトは `false` です。
+
+### 返値
+
+{{domxref("BluetoothDevice")}} オブジェクトで解決する {{jsxref("Promise")}} を返します。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+  - : 指定された `options` が意味をなさないとき投げられます。
+    たとえば、`options.filters` が存在して、かつ `options.acceptAllDevices` が `true` に設定されている場合や、`options.filters` が存在せず、かつ `options.acceptAllDevices` が `false` に設定されている場合に投げられます。
+    `options.filters` が `[]` に設定されている場合も投げられます。
+- `NotFoundError` {{domxref("DOMException")}}
+  - : 指定のオプションに合致する Bluetooth デバイスが存在しないとき投げられます。
+- `SecurityError` {{domxref("DOMException")}}
+  - : 安全でないオリジンで呼び出されたときなど、現在のコンテキストでセキュリティの懸念によりこの操作が許可されないとき投げられます。
+
+## 例
+
+```js
+// 以下のアドバタイズをしているデバイスにマッチする検索オプションを使用します。
+// ・標準の心拍数サービス
+// ・16 ビットのサービス ID が 0x1802 と 0x1803
+// ・プロプライエタリーの 128 ビット UUID c48e6067-5295-48d3-8d5c-0395f61792b1 を持つサービス
+// ・名前 "ExampleName" を持つデバイス
+// ・名前が "Prefix" で始まるデバイス
+//
+// そして、デバイスが該当のサービスをアドバタイズしていない場合でも、
+// デバイスに存在すれば、バッテリーサービスへのアクセスを有効化します。
+let options = {
+  filters: [
+    { services: ["heart_rate"] },
+    { services: [0x1802, 0x1803] },
+    { services: ["c48e6067-5295-48d3-8d5c-0395f61792b1"] },
+    { name: "ExampleName" },
+    { namePrefix: "Prefix" },
+  ],
+  optionalServices: ["battery_service"],
+};
+
+navigator.bluetooth
+  .requestDevice(options)
+  .then((device) => {
+    console.log(`名前: ${device.name}`);
+    // デバイスに何かをする
+  })
+  .catch((error) => console.error(`何かがうまくいきませんでした。 ${error}`));
+```
+
+[詳細な例](https://webbluetoothcg.github.io/web-bluetooth/#example-filter-by-services)が仕様書にあります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cookiestore/change_event/index.md b/files/ja/web/api/cookiestore/change_event/index.md
index a0fa5dd642ae27..67f29290ad089e 100644
--- a/files/ja/web/api/cookiestore/change_event/index.md
+++ b/files/ja/web/api/cookiestore/change_event/index.md
@@ -1,37 +1,39 @@
 ---
-title: 'CookieStore: change event'
+title: "CookieStore: change イベント"
 slug: Web/API/CookieStore/change_event
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
 ---
 
-{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
 
-任意の Cookie に変更が加えられると、{{domxref("CookieStore")}} オブジェクトで `change` イベントが発火します。
+`change` イベントは、任意の Cookie に変更が加えられると、{{domxref("CookieStore")}} オブジェクトで発生します。
 
 ## 構文
 
-イベント名は {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用したり、イベントハンドラープロパティで設定されます。
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
 
-```js
-cookieStore.addEventListener('change', event => { })
+```js-nolint
+cookieStore.addEventListener("change", (event) => { })
 
-cookieStore.onchange = event => { }
+cookieStore.onchange = (event) => { }
 ```
 
 ## 例
 
-Cookie が変更されたときに通知を受けるには、以下のように {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使って `cookieStore` インスタンスにハンドラを追加可能です。
+次のように `cookieStore` インスタンスに対して {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使ってハンドラーを追加すると、Cookie が変更されたときに通知を受けることができます。
 
 ```js
-cookieStore.addEventListener('change', function(event) {
-  console.log('1 change event');
+cookieStore.addEventListener("change", (event) => {
+  console.log("1 change event");
 });
 ```
 
-あるいは、`CookieStore.onchange` イベントハンドラープロパティを使用して、`change` イベントのハンドラを定義できます。
+あるいは、`CookieStore.onchange` イベントハンドラープロパティを使用して、`change` イベントのハンドラーを確立することができます。
 
 ```js
-cookieStore.onchange = function(event) {
-    console.log('1 change event');
+cookieStore.onchange = (event) => {
+  console.log("1 change event");
 };
 ```
 
diff --git a/files/ja/web/api/cookiestore/delete/index.md b/files/ja/web/api/cookiestore/delete/index.md
index 56c9e0f9e8d9be..964419e01cba4f 100644
--- a/files/ja/web/api/cookiestore/delete/index.md
+++ b/files/ja/web/api/cookiestore/delete/index.md
@@ -1,17 +1,19 @@
 ---
-title: CookieStore.delete()
+title: "CookieStore: delete() メソッド"
 slug: Web/API/CookieStore/delete
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
 ---
 
-{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
 
-{{domxref("CookieStore")}} インターフェイスの **`delete()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ Cookie を削除します（下記参照）。`delete()` メソッドは日付を過去のものに変更することで Cookie を失効させます。
+**`delete()`** は {{domxref("CookieStore")}} インターフェイスのメソッドで、与えられた名前またはオプションオブジェクトを持つ Cookie を削除します（下記参照）。`delete()` メソッドは日付を過去のものに変更することで Cookie を失効させます。
 
 ## 構文
 
-```js
-var promise = cookieStore.delete(name);
-var promise = cookieStore.delete(options);
+```js-nolint
+delete(name)
+delete(options)
 ```
 
 ### 引数
@@ -19,35 +21,40 @@ var promise = cookieStore.delete(options);
 このメソッドは、以下のいずれかが必要です。
 
 - `name`
-  - : Cookie の名前が入っている {{domxref("USVString")}} です。
-- オプション
+  - : Cookie の名前が入っている文字列です。
+
+または
+
+- `options`
 
-  - : オブジェクトは次のものを含みます。
+  - : オブジェクトは以下のプロパティを含みます。
 
     - `name`
-      - : Cookie の名前が入っている {{domxref("USVString")}} です。
-    - `url`{{Optional_Inline}}
-      - : Cookie の URL が入っている {{domxref("USVString")}} です。
+      - : Cookie の名前が入っている文字列です。
+    - `partitioned` {{Optional_Inline}}
+      - : 論理値で、既定値は `false` です。`true` に設定すると、削除するクッキーがパーティション化 Cookie であることを表します。詳しくは [Cookies Having Independent Partitioned State (CHIPS)](/ja/docs/Web/Privacy/Partitioned_cookies) を参照してください。
     - `path`{{Optional_Inline}}
-      - : パスを含む {{domxref("USVString")}} です。
+      - : パスを含む文字列です。
+    - `url`{{Optional_Inline}}
+      - : Cookie の URL が入っている文字列です。
 
 > **メモ:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。ドキュメントからは現在の URL の Cookie しか取得できないので、ドキュメントコンテキストで有効な URL はドキュメントの URL のみとなります。
 
 ### 返値
 
-削除が完了すると {{jsxref("Undefined")}} に解決される {{jsxref("Promise")}} です。
+削除が完了すると {{jsxref("undefined")}} に解決される {{jsxref("Promise")}} です。
 
 ### 例外
 
 - {{jsxref("TypeError")}}
-  - : 与えられた `name` や `options` で表される Cookie の削除に失敗した場合にスローされます。
+  - : 与えられた `name` や `options` で表される Cookie の削除に失敗した場合に発生します。
 
 ## 例
 
 この例では、`delete()` メソッドに名前を渡すことで、Cookie を削除しています。
 
 ```js
-let result = cookieStore.delete('cookie1');
+let result = cookieStore.delete("cookie1");
 console.log(result);
 ```
 
diff --git a/files/ja/web/api/cookiestore/get/index.md b/files/ja/web/api/cookiestore/get/index.md
index cfad4af3327430..97c15f7bd2b319 100644
--- a/files/ja/web/api/cookiestore/get/index.md
+++ b/files/ja/web/api/cookiestore/get/index.md
@@ -1,17 +1,19 @@
 ---
-title: CookieStore.get()
+title: "CookieStore: get() メソッド"
 slug: Web/API/CookieStore/get
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
 ---
 
-{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
 
-{{Domxref("CookieStore")}} インターフェイスの **`get()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ 1 つの Cookie を返します（下記参照）。このメソッドは渡されたパラメータに最初にマッチする Cookie を返します。
+**`get()`** は {{domxref("CookieStore")}} インターフェイスのメソッドは、与えられた名前またはオプションオブジェクトを持つ 1 つの Cookie を返します（下記参照）。このメソッドは渡された引数に最初に一致する Cookie を返します。
 
 ## 構文
 
-```js
-var cookie = CookieStore.get(name);
-var cookie = CookieStore.get(options);
+```js-nolint
+get(name)
+get(options)
 ```
 
 ### 引数
@@ -19,62 +21,77 @@ var cookie = CookieStore.get(options);
 このメソッドは、以下のいずれかが必要です。
 
 - `name`
-  - : Cookie の名前が入っている {{domxref("USVString")}} です。
-- オプション
+  - : Cookie の名前が入っている文字列です。
+
+または
+
+- `options`
 
-  - : オブジェクトは次のものを含みます。
+  - : オブジェクトは以下のプロパティを含みます。
 
     - `name`
-      - : Cookie の名前が入っている {{domxref("USVString")}} です。
+      - : Cookie の名前が入っている文字列です。
     - `url`
-      - : Cookie の URL が入っている {{domxref("USVString")}} です。
+      - : Cookie の URL が入っている文字列です。
 
-> **メモ:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。ドキュメントからは現在の URL の Cookie しか取得できないので、ドキュメントコンテキストで有効な URL はドキュメントの URL のみとなります。
+> **メモ:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。文書からは現在の URL の Cookie しか取得できないので、文書コンテキストで有効な URL は文書の URL のみとなります。
 
 ### 返値
 
 与えられた名前またはオプションに一致する最初の Cookie を含むオブジェクトに解決される {{jsxref("Promise")}} です。このオブジェクトは以下のプロパティを含んでいます。
 
-- `name`
-  - : Cookie の名前を含む {{domxref("USVString")}} です。
-- `value`
-  - : Cookie の値を含む {{domxref("USVString")}} です。
 - `domain`
-  - : Cookie のドメインを含む {{domxref("USVString")}} です。
-- `path`
-  - : Cookie のパスを含む {{domxref("USVString")}} です。
+
+  - : Cookie のドメインを含む文字列です。
+
 - `expires`
-  - : Cookie の有効期限を含む {{domxref("DOMTimeStamp")}} です。
-- `secure`
-  - : Cookie を安全なコンテキストでのみ使用するかどうかを示す {{jsxref("boolean")}} です。
+
+  - : Cookie の期限が入ったタイムスタンプで、ミリ秒単位の [Unix 時刻](/ja/docs/Glossary/Unix_time)です。
+
+- `name`
+
+  - : Cookie の名前を含む文字列です。
+
+- `partitioned`
+
+  - : 論理値で、Cookie がパーティション化 Cookie であるか (`true`) そうでないか (`false`) を表します。詳しくは [Cookies Having Independent Partitioned State (CHIPS)](/ja/docs/Web/Privacy/Partitioned_cookies) を参照してください。
+- `path`
+
+  - : Cookie のパスを含む文字列です。
+
 - `sameSite`
 
-  - : 以下の [SameSite](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite) のいずれかの値です。
+  - : 以下の [`SameSite`](/ja/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) 値のうちの何れかです。
 
     - `"strict"`
-      - : Cookie は、ファーストパーティのコンテキストでのみ送信され、サードパーティのウェブサイトによるリクエストと一緒に送信されることはありません
+      - : Cookie はファーストパーティのコンテキストにのみ送られ、サードパーティのウェブサイトに対するリクエストには送られません。
     - `"lax"`
-      - : Cookie は、通常のクロスサイト・サブクエスト（例えば、画像やフレームをサードパーティのサイトにロードするため）には送信されませんが、ユーザーが元のサイト内を移動しているとき（すなわち、リンクをたどっているとき）には送信されます。
+      - : Cookie は、通常のサイト間サブリクエスト（例えば、サードパーティーのサイトに画像やフレームを読み込むためのもの）には送信されませんが、ユーザーがオリジン間サイト内を移動しているとき（リンクを追跡するとき）には送信されます。
     - `"none"`
-      - : Cookie は、すべてのコンテキストで送信されます。
+      - : Cookie はすべてのコンテキストで、送信されます。
+
+- `secure`
 
-    > **メモ:** SameSite cookies の詳細については、 [SameSite cookies explained](https://web.dev/samesite-cookies-explained/) をご覧ください。
+  - : 論理値で、この Cookie が安全なコンテキストでのみ使用されるか (`true`) またはそうではないか (`false`) を示します。
+
+- `value`
+  - : この Cookie の値が入った文字列です。
 
 ### 例外
 
 - {{jsxref("TypeError")}}
-  - : 与えられた `name` や `options` で表される Cookie の取得に失敗した場合にスローされます。
+  - : 与えられた `name` や `options` で表される Cookie の取得に失敗した場合に発生します。
 
 ## 例
 
 この例では、"cookie1" という名前の Cookie を返します。もし Cookie が見つかれば、プロミスの結果は 1 つの Cookie の詳細を含むオブジェクトになります。
 
 ```js
-let cookie = cookieStore.get('cookie1');
+let cookie = cookieStore.get("cookie1");
 if (cookie) {
-    console.log(cookie);
+  console.log(cookie);
 } else {
-    console.log('Cookie not found');
+  console.log("Cookie not found");
 }
 ```
 
diff --git a/files/ja/web/api/cookiestore/getall/index.md b/files/ja/web/api/cookiestore/getall/index.md
index ff1aea0c9c4809..a3babbc83eb99c 100644
--- a/files/ja/web/api/cookiestore/getall/index.md
+++ b/files/ja/web/api/cookiestore/getall/index.md
@@ -1,37 +1,82 @@
 ---
-title: CookieStore.getAll()
+title: "CookieStore: getAll() メソッド"
 slug: Web/API/CookieStore/getAll
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
 ---
 
-{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
 
-{{domxref("CookieStore")}} インターフェイスの **`getAll()`** メソッドは、渡された名前またはオプションに一致する Cookie のリストを返します。パラメータを何も渡さなければ、現在のコンテキストのすべての Cookie を返します。
+**`getAll()`** は {{domxref("CookieStore")}} インターフェイスのメソッドで、渡された名前またはオプションに一致する Cookie のリストを返します。何も引数を渡さなければ、現在のコンテキストのすべての Cookie を返します。
 
 ## 構文
 
-```js
-var list = cookieStore.getAll(name);
-var list = cookieStore.getAll(options);
+```js-nolint
+getAll(name)
+getAll(options)
 ```
 
 ### 引数
 
-- `name`{{Optional_Inline}}
-  - : Cookie の名前が入っている {{domxref("USVString")}} です。
-- `options`{{Optional_Inline}}
+- `name` {{optional_inline}}
+  - : Cookie の名前が入っている文字列です。
+
+または
+
+- `options` {{optional_inline}}
 
-  - : An object containing:
+  - : 以下のプロパティを持つ文字列です。
 
     - `name`
-      - : Cookie の名前が入っている {{domxref("USVString")}} です。
+      - : Cookie の名前が入っている文字列です。
     - `url`
-      - : Cookie の URL が入っている {{domxref("USVString")}} です。
+      - : Cookie の URL が入っている文字列です。
 
-> **メモ:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。ドキュメントからは現在の URL の Cookie しか取得できないので、ドキュメントコンテキストで有効な URL はドキュメントの URL のみとなります。
+> **メモ:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。文書からは現在の URL の Cookie しか取得できないので、文書コンテキストで有効な URL は文書の URL のみとなります。
 
 ### 返値
 
-与えられた名前またはオプションの Cookie のリストに解決される {{jsxref("Promise")}} です。
+指定された名前またはオプションに一致するクッキーを表すオブジェクトの配列で解決する {{jsxref("Promise")}} です。
+
+各オブジェクトは、以下のプロパティを持ちます。
+
+- `domain`
+
+  - : クッキーのドメインを持つ文字列です。
+
+- `expires`
+
+  - : クッキーの期限が入ったタイムスタンプで、ミリ秒単位の [Unix 時刻](/ja/docs/Glossary/Unix_time)です。
+
+- `name`
+
+  - : クッキーの名前が入った文字列です。
+
+- `partitioned`
+
+  - : 論理値で、クッキーがパーティション化クッキーであるか (`true`) そうでないか (`false`) を表します。詳しくは [Cookies Having Independent Partitioned State (CHIPS)](/ja/docs/Web/Privacy/Partitioned_cookies) を参照してください。
+
+- `path`
+
+  - : クッキーのパスが入った文字列です。
+
+- `sameSite`
+
+  - : 以下の [`SameSite`](/ja/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) 値のうちの何れかです。
+
+    - `"strict"`
+      - : クッキーはファーストパーティのコンテキストにのみ送られ、サードパーティのウェブサイトに対するリクエストには送られません。
+    - `"lax"`
+      - : クッキーは、通常のサイト間サブリクエスト（例えば、サードパーティーのサイトに画像やフレームを読み込むためのもの）には送信されませんが、ユーザーがオリジン間サイト内を移動しているとき（リンクを追跡するとき）には送信されます。
+    - `"none"`
+      - : クッキーはすべてのコンテキストで、送信されます。
+
+- `secure`
+
+  - : 論理値で、このクッキーが安全なコンテキストでのみ使用されるか (`true`) またはそうではないか (`false`) を示します。
+
+- `value`
+  - : このクッキーの値が入った文字列です。
 
 ### 例外
 
@@ -40,14 +85,14 @@ var list = cookieStore.getAll(options);
 
 ## 例
 
-この例では、引数無しで `getAll()` を使用しています。このコンテキストのすべての Cookie をオブジェクトの配列として返します。
+この例では、引数なしで `getAll()` を使用しています。このコンテキストのすべての Cookie をオブジェクトの配列として返します。
 
 ```js
-let cookies = cookieStore.getAll();
+let cookies = await cookieStore.getAll();
 if (cookies) {
   console.log(cookies);
 } else {
-  console.log('Cookie not found');
+  console.log("Cookie not found");
 }
 ```
 
diff --git a/files/ja/web/api/cookiestore/index.md b/files/ja/web/api/cookiestore/index.md
index afd5515f813d92..f160fcb80b5235 100644
--- a/files/ja/web/api/cookiestore/index.md
+++ b/files/ja/web/api/cookiestore/index.md
@@ -1,30 +1,32 @@
 ---
 title: CookieStore
 slug: Web/API/CookieStore
+l10n:
+  sourceCommit: e811fc31b67e145c5882e8e3f128d1938c627a51
 ---
 
-{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
 
-{{domxref('Cookie Store API')}} のインターフェイスである **`CookieStore`** は、ページまたはサービスワーカーから非同期に Cookie を取得、設定するためのメソッドを提供します。
+**`CookieStore`** は[クッキーストア API](/ja/docs/Web/API/Cookie_Store_API) のインターフェイスで、ページまたはサービスワーカーから非同期に Cookie を取得、設定するためのメソッドを提供します。
 
-`CookieStore` は {{domxref("Window")}} or {{domxref("ServiceWorkerGlobalScope")}} コンテキスト内のグローバスコープの属性を介してアクセスされます。そのため、コンストラクタはありません。
+`CookieStore` は {{domxref("Window")}} または {{domxref("ServiceWorkerGlobalScope")}} コンテキスト内のグローバスコープの属性を介してアクセスされます。そのため、コンストラクターはありません。
 
 {{InheritanceDiagram}}
 
 ## メソッド
 
-- {{domxref("CookieStore.delete()")}}
+- {{domxref("CookieStore.delete()")}} {{Experimental_Inline}}
   - : `delete()` メソッドは与えられた名前またはオプションオブジェクトを持つ Cookie を削除します。削除が完了すると解決される {{jsxref("Promise")}} が返されます。
-- {{domxref("CookieStore.get()")}}
+- {{domxref("CookieStore.get()")}} {{Experimental_Inline}}
   - : `get()` メソッドは与えられた名前またはオプションオブジェクトで 1 つの Cookie を取得します。1 つの Cookie の詳細に解決される {{jsxref("Promise")}} を返します。
-- {{domxref("CookieStore.getAll()")}}
+- {{domxref("CookieStore.getAll()")}} {{Experimental_Inline}}
   - : `getAll()` メソッドはマッチするすべての Cookie を取得します。Cookie のリストに解決される {{jsxref("Promise")}} を返します。
-- {{domxref("CookieStore.set()")}}
+- {{domxref("CookieStore.set()")}} {{Experimental_Inline}}
   - : `set()` メソッドは与えられた名前と値またはオプションオブジェクトを Cookie に設定し、Cookie が設定されると解決される {{jsxref("Promise")}} を返します。
 
 ## イベント
 
-- {{domxref("CookieStore.change_event")}}
+- {{domxref("CookieStore.change_event", "change")}} {{Experimental_Inline}}
   - : `change` イベントは、任意の Cookie に変更が加えられたときに発生します。
 
 ## 例
@@ -33,20 +35,21 @@ slug: Web/API/CookieStore
 
 ```js
 const day = 24 * 60 * 60 * 1000;
-cookieStore.set({
-  name: "cookie1",
-  value: "cookie1-value",
-  expires: Date.now() + day,
-  domain: "example.com"
-})
-.then(
-  function() {
-    console.log("It worked!");
-  },
-  function(reason) {
-    console.error("It failed: ", reason);
-  }
-);
+cookieStore
+  .set({
+    name: "cookie1",
+    value: "cookie1-value",
+    expires: Date.now() + day,
+    domain: "example.com",
+  })
+  .then(
+    () => {
+      console.log("It worked!");
+    },
+    (reason) => {
+      console.error("It failed: ", reason);
+    }
+  );
 ```
 
 ## 仕様書
diff --git a/files/ja/web/api/cookiestore/set/index.md b/files/ja/web/api/cookiestore/set/index.md
index b08b41a9535880..1190d4f690f349 100644
--- a/files/ja/web/api/cookiestore/set/index.md
+++ b/files/ja/web/api/cookiestore/set/index.md
@@ -1,17 +1,19 @@
 ---
-title: CookieStore.set()
+title: "CookieStore: set() メソッド"
 slug: Web/API/CookieStore/set
+l10n:
+  sourceCommit: d76defab4ca13261e9de81ae1df125345f847b0a
 ---
 
-{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
 
-{{domxref("CookieStore")}} インターフェイスの **`getAll()`** メソッドは、渡された名前またはオプションに一致する Cookie のリストを返します。引数を何も渡さなければ、現在のコンテキストのすべての Cookie を返します。
+**`set()`** は {{domxref("CookieStore")}} インターフェイスのメソッドで、渡された名前またはオプションオブジェクトに一致する Cookie のリストを返します。
 
 ## 構文
 
-```js
-var promise = cookieStore.set(name,value);
-var promise = cookieStore.set(options);
+```js-nolint
+set(name, value)
+set(options)
 ```
 
 ### 引数
@@ -19,35 +21,39 @@ var promise = cookieStore.set(options);
 このメソッドは、以下のいずれかが必要です。
 
 - `name`
-  - : Cookie の名前が入っている {{domxref("USVString")}} です。
+  - : Cookie の名前の文字列です。
 - `value`
-  - : Cookie の値が入っている {{domxref("USVString")}} です。
-- オプション
+  - : Cookie の値の文字列です。
+
+または
+
+- `options`
 
   - : オブジェクトは次のものを含みます。
 
+    - `domain` {{Optional_Inline}}
+      - : Cookie のドメインが入った文字列です。
+    - `expires` {{Optional_Inline}}
+      - : ミリ秒単位の [Unix 時間](/ja/docs/Glossary/Unix_time)によるタイムスタンプで、Cookie の有効期限が入ります。
     - `name`
-      - : Cookie の名前が入っている {{domxref("USVString")}} です。
-    - `value`
-      - : Cookie の値が入っている {{domxref("USVString")}} です。
-    - `expires`{{Optional_Inline}}
-      - : Cookie の有効期限を含む {{domxref("DOMTimeStamp")}} です。
-    - `domain`{{Optional_Inline}}
-      - : Cookie のドメインを含む {{domxref("USVString")}} です。
-    - `path`{{Optional_Inline}}
-      - : Cookie のパスを含む {{domxref("USVString")}} です。
-    - `sameSite`{{Optional_Inline}}
+      - : Cookie の名前が入った文字列です。
+    - `partitioned` {{Optional_Inline}}
+      - : 論理値で、既定値は `false` です。`true` に設定すると、設定された Cookie はパーティション化された Cookie になります。詳しくは [Cookies Having Independent Partitioned State (CHIPS)](/ja/docs/Web/Privacy/Partitioned_cookies) を参照してください。
+    - `path` {{Optional_Inline}}
+      - : Cookie のパスの入った文字列です。
+    - `sameSite` {{Optional_Inline}}
 
-      - : 以下の [SameSite](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite) のいずれかの値です。
+      - : 以下の [`SameSite`](/ja/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) のいずれかの値です。
 
         - `"strict"`
           - : Cookie は、ファーストパーティのコンテキストでのみ送信され、サードパーティのウェブサイトによるリクエストと一緒に送信されることはありません
         - `"lax"`
-          - : Cookie は、通常のクロスサイト・サブクエスト（例えば、画像やフレームをサードパーティのサイトにロードするため）には送信されません。しかし、ユーザーが元のサイト内を移動しているとき（すなわち、リンクをたどっているとき）には送信されます。
+          - : Cookie は、通常のクロスサイトサブクエスト（例えば、画像やフレームをサードパーティのサイトにロードするため）には送信されません。しかし、ユーザーが元のサイト内を移動しているとき（すなわち、リンクをたどっているとき）には送信されます。
         - `"none"`
           - : Cookie は、すべてのコンテキストで送信されます。
 
-        > **メモ:** SameSite cookies の詳細については、 [SameSite cookies explained](https://web.dev/samesite-cookies-explained/) をご覧ください。
+    - `value`
+      - : Cookie の値が入った文字列です。
 
 ### 返値
 
@@ -56,9 +62,9 @@ Cookie の設定が完了すると {{jsxref("Undefined")}} に解決される {{
 ### 例外
 
 - {{jsxref("TypeError")}}
-  - : 与えられた値での Cookie の設定に失敗した場合にスローされます。
-- {{domxref("DOMException")}} `SecurityError`
-  - : オリジンが URL に {{glossary("serialize")}} されない場合にスローされます。
+  - : 与えられた値での Cookie の設定に失敗した場合に発生します。
+- `SecurityError` の {{domxref("DOMException")}}
+  - : オリジンが URL に {{glossary("serialize")}} されない場合に発生します。
 
 ## 例
 
@@ -70,7 +76,7 @@ cookieStore.set({
   name: "cookie1",
   value: "cookie1-value",
   expires: Date.now() + day,
-  domain: "example.com"
+  domain: "example.com",
 });
 ```
 
diff --git a/files/ja/web/api/element/beforematch_event/index.md b/files/ja/web/api/element/beforematch_event/index.md
new file mode 100644
index 00000000000000..ddbee9e1513e14
--- /dev/null
+++ b/files/ja/web/api/element/beforematch_event/index.md
@@ -0,0 +1,115 @@
+---
+title: "Element: beforematch イベント"
+short-title: beforematch
+slug: Web/API/Element/beforematch_event
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef}}{{SeeCompatTable}}
+
+要素が **`beforematch`** イベントを受け取るのは、それが _hidden until found_ の状態にあり、ユーザーが「ページ内検索」機能やフラグメントナビゲーションによってコンテンツを見つけたため、ブラウザーがそのコンテンツを表示しようとしているときです。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("beforematch", (event) => {});
+
+onbeforematch = (event) => {};
+```
+
+## イベント型
+
+一般的な {{domxref("Event")}} です。
+
+## 使用上のメモ
+
+HTML の [`hidden`](/ja/docs/Web/HTML/Global_attributes/hidden) 属性は、`until-found` の値を受け入れます。この値が指定されると、要素は非表示になりますが、ブラウザーの「ページ内検索」機能やフラグメントナビゲーションではそのコンテンツにアクセスできるようになります。これらの機能により、"hidden until found" のサブツリーの要素にスクロールが発生した場合、ブラウザーは次のようになります。
+
+- 非表示の要素で `beforematch` イベントが発生する
+- その要素から `hidden` 属性が除去される
+- その要素へスクロールする
+
+## 例
+
+### beforematch の使用
+
+この例では、次のものがあります。
+
+- 2 つの {{HTMLElement("div")}} 要素。最初の要素は非表示で、2 つ目には `hidden="until-found"` と `id="until-found-box"` 属性があります。
+- `"until-found-box"` フラグメントをターゲットとしたリンク。
+
+また、hidden until found 要素で発行される `beforematch` イベントを待ち受けする JavaScript もあります。イベントハンドラーはボックスのテキストコンテンツを変更します。
+
+#### HTML
+
+```html
+<a href="#until-found-box">非表示のコンテンツへ移動</a>
+
+<div>非表示ではない</div>
+<div id="until-found-box" hidden="until-found">Hidden until found</div>
+```
+
+```html hidden
+<button id="reset">リセット</button>
+```
+
+#### CSS
+
+```css
+div {
+  height: 40px;
+  width: 300px;
+  border: 5px dashed black;
+  margin: 1rem 0;
+  padding: 1rem;
+  font-size: 2rem;
+}
+```
+
+```css hidden
+#until-found-box {
+  scroll-margin-top: 200px;
+}
+```
+
+#### JavaScript
+
+```js
+const untilFound = document.querySelector("#until-found-box");
+untilFound.addEventListener(
+  "beforematch",
+  () => (untilFound.textContent = "I've been revealed!"),
+);
+```
+
+```js hidden
+document.querySelector("#reset").addEventListener("click", () => {
+  document.location.hash = "";
+  document.location.reload();
+});
+```
+
+#### 結果
+
+「非表示のコンテンツへ移動」ボタンをクリックすると、hidden-until-found 要素に移動します。`beforematch` イベントが発行され、テキストコンテンツが更新され、要素のコンテンツが表示されます。
+
+例を再度実行する場合は、「リセット」を押してください。
+
+{{EmbedLiveSample("Using beforematch", "", 300)}}
+
+ブラウザーが `hidden` 属性の列挙値 `"until-found"` に対応していない場合、2つ目の `<div>` は非表示になります（`until-found` 値が追加される前の `hidden` は論理属性でした）。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- HTML の [`hidden`](/ja/docs/Web/HTML/Global_attributes/hidden) 属性
diff --git a/files/ja/web/api/element/beforexrselect_event/index.md b/files/ja/web/api/element/beforexrselect_event/index.md
new file mode 100644
index 00000000000000..314ab1644a10f5
--- /dev/null
+++ b/files/ja/web/api/element/beforexrselect_event/index.md
@@ -0,0 +1,68 @@
+---
+title: "Element: beforexrselect イベント"
+short-title: beforexrselect
+slug: Web/API/Element/beforexrselect_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
+---
+
+{{APIRef}}{{SeeCompatTable}}
+
+**`beforexrselect`** イベントは、WebXR の選択イベント ({{domxref("XRSession/select_event", "select")}}, {{domxref("XRSession/selectstart_event", "selectstart")}}, {{domxref("XRSession/selectend_event", "selectend")}}) が配信される前に発行されます。ユーザーが DOM オーバーレイ UI を走査する間、XR ワールド入力イベントを抑制するために使用することができます。
+
+このイベントは[バブリング](/ja/docs/Learn/JavaScript/Building_blocks/Events#イベントのバブリングとキャプチャリング)し、[キャンセル可能](/ja/docs/Web/API/Event/cancelable)で、[合成されます](/ja/docs/Web/API/Event/composed)。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("beforexrselect", (event) => {});
+
+onbeforexrselect = (event) => {};
+```
+
+## イベント型
+
+{{domxref("XRSessionEvent")}} です。{{domxref("Event")}} から継承されています。
+
+{{InheritanceDiagram("XRSessionEvent")}}
+
+## イベントプロパティ
+
+- {{domxref("XRSessionEvent.session", "session")}} {{ReadOnlyInline}}
+  - : イベントが参照する {{domxref("XRSession")}} です。
+
+## イベントの可用性
+
+**`beforexrselect`** イベントはグローバルイベントであり、以下のインターフェイスで利用できます。
+
+- {{domxref("Window")}}
+- {{domxref("Document")}}
+- {{domxref("HTMLElement")}}
+- {{domxref("SVGElement")}}
+- {{domxref("MathMLElement")}}
+
+## 例
+
+WebXR の選択イベント ({{domxref("XRSession/select_event", "select")}}, {{domxref("XRSession/selectstart_event", "selectstart")}}, {{domxref("XRSession/selectend_event", "selectend")}}) を抑制するために、アプリケーションは `beforexrselect` イベントを待ち受けすることができます。このイベントはバブリングするので、{{domxref("Event/preventDefault", "preventDefault()")}} を DOM オーバーレイ要素で呼び出すと、このコンテナー内の WebXR select イベントが DOM 要素と対話するのを防ぎ、XR の世界への重複したイベント入力を避けることができます。
+
+```js
+document
+  .getElementById("xr-overlay")
+  .addEventListener("beforexrselect", (ev) => ev.preventDefault());
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("XRSession/select_event", "select")}} イベント
+- {{domxref("XRSession/selectstart_event", "selectstart")}} イベント
+- {{domxref("XRSession/selectend_event", "selectend")}} イベント
diff --git a/files/ja/web/api/element/contentvisibilityautostatechange_event/index.md b/files/ja/web/api/element/contentvisibilityautostatechange_event/index.md
new file mode 100644
index 00000000000000..868f6361f09075
--- /dev/null
+++ b/files/ja/web/api/element/contentvisibilityautostatechange_event/index.md
@@ -0,0 +1,69 @@
+---
+title: "Element: contentvisibilityautostatechange イベント"
+short-title: contentvisibilityautostatechange
+slug: Web/API/Element/contentvisibilityautostatechange_event
+l10n:
+  sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
+---
+
+{{APIRef("CSS Containment")}}{{SeeCompatTable}}
+
+**`contentvisibilityautostatechange`** イベントは、{{cssxref("content-visibility", "content-visibility: auto")}} が設定されている要素に対して、[ユーザーとの関連](/ja/docs/Web/CSS/CSS_containment#ユーザーとの関連)、[コンテンツをスキップ](/ja/docs/Web/CSS/CSS_containment#コンテンツのスキップ)を開始または停止するときに発行されます。
+
+要素が関係ない間（開始イベントと終了イベントの間）、ユーザーエージェントはレイアウトや描画を含む要素の描画をスキップし、ページの描画速度を大幅に向上させることができます。
+{{domxref("element/contentvisibilityautostatechange_event", "contentvisibilityautostatechange")}} イベントは、アプリのコードがレンダリング処理（例えば {{htmlelement("canvas")}} への描画）を不要なときに開始または停止する方法を提供します。
+
+非表示になっても要素のコンテンツは意味づけされたままなので（例えば支援技術ユーザーにとって）、この指示は重要な意味づけされた DOM の更新をスキップするために使用すべきではありません。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("contentvisibilityautostatechange", (event) => {});
+oncontentvisibilityautostatechange = (event) => {};
+```
+
+> **メモ:** イベントオブジェクトの型は {{domxref("ContentVisibilityAutoStateChangeEvent")}} です。
+
+## 例
+
+```js
+const canvasElem = document.querySelector("canvas");
+
+canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
+canvasElem.style.contentVisibility = "auto";
+
+function stateChanged(event) {
+  if (event.skipped) {
+    stopCanvasUpdates(canvasElem);
+  } else {
+    startCanvasUpdates(canvasElem);
+  }
+}
+
+// Call this when the canvas updates need to start.
+function startCanvasUpdates(canvas) {
+  // …
+}
+
+// Call this when the canvas updates need to stop.
+function stopCanvasUpdates(canvas) {
+  // …
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ContentVisibilityAutoStateChangeEvent")}}
+- [CSS Containment](/ja/docs/Web/CSS/CSS_containment)
+- The {{cssxref("content-visibility")}} property
+- The {{cssxref("contain")}} property
diff --git a/files/ja/web/api/element/copy_event/index.md b/files/ja/web/api/element/copy_event/index.md
index 0efc152f9120ae..696e399a0ddf13 100644
--- a/files/ja/web/api/element/copy_event/index.md
+++ b/files/ja/web/api/element/copy_event/index.md
@@ -1,6 +1,9 @@
 ---
-title: 'Element: copy イベント'
+title: "Element: copy イベント"
+short-title: copy
 slug: Web/API/Element/copy_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
 ---
 
 {{APIRef}}
@@ -13,16 +16,16 @@ slug: Web/API/Element/copy_event
 
 ただし、ハンドラーがクリップボードのデータを*読み取る*ことはできません。
 
-[合成で](/ja/docs/Web/Events/Creating_and_triggering_events) `copy` イベントを構築して配信することもできますが、システムのクリップボードには影響を与えません。
+[合成した](/ja/docs/Web/Events/Creating_and_triggering_events) `copy` イベントを構築して配信することもできますが、システムのクリップボードには影響を与えません。
 
 ## 構文
 
 このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
 
 ```js
-addEventListener('copy', (event) => { });
+addEventListener("copy", (event) => {});
 
-oncopy = (event) => { };
+oncopy = (event) => {};
 ```
 
 ## イベント型
@@ -43,24 +46,25 @@ oncopy = (event) => { };
 ```
 
 ```css hidden
-div.source, div.target {
-    border: 1px solid gray;
-    margin: .5rem;
-    padding: .5rem;
-    height: 1rem;
-    background-color: #e9eef1;
+div.source,
+div.target {
+  border: 1px solid gray;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  height: 1rem;
+  background-color: #e9eef1;
 }
 ```
 
-#### JS
+#### JavaScript
 
 ```js
-const source = document.querySelector('div.source');
+const source = document.querySelector("div.source");
 
-source.addEventListener('copy', (event) => {
-    const selection = document.getSelection();
-    event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
-    event.preventDefault();
+source.addEventListener("copy", (event) => {
+  const selection = document.getSelection();
+  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
+  event.preventDefault();
 });
 ```
 
diff --git a/files/ja/web/api/element/cut_event/index.md b/files/ja/web/api/element/cut_event/index.md
index 6049c6955f1bf1..9ed976ecea51c9 100644
--- a/files/ja/web/api/element/cut_event/index.md
+++ b/files/ja/web/api/element/cut_event/index.md
@@ -1,32 +1,35 @@
 ---
-title: 'Element: cut イベント'
+title: "Element: cut イベント"
+short-title: cut
 slug: Web/API/Element/cut_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
 ---
 
 {{APIRef}}
 
 **`cut`** イベントは、ユーザーがブラウザーのユーザーインターフェイスから「切り取り」操作を実行したときに発生します。
 
-ユーザーが編集不可能なコンテンツに対して切り取りをしようとすると、 `cut` イベントは発生しますが、イベントオブジェクトにはデータが入りません。
+ユーザーが編集不可能なコンテンツに対して切り取りをしようとすると、`cut` イベントは発生しますが、イベントオブジェクトにはデータが入りません。
 
 イベントの既定のアクションは、（もしあれば）選択範囲をクリップボードへコピーして文書からその部分を取り除くことです。
 
-このイベントのハンドラーは、 {{domxref("DataTransfer.setData", "setData(format, data)")}} をイベントの {{domxref("ClipboardEvent.clipboardData")}} プロパティに対して呼び出すことで、クリップボードの内容を*変更*したり、 {{domxref("Event/preventDefault", "event.preventDefault()")}} を使用して既定の動作を取り消したりすることができます。
+このイベントのハンドラーは、{{domxref("DataTransfer.setData", "setData(format, data)")}} をイベントの {{domxref("ClipboardEvent.clipboardData")}} プロパティに対して呼び出すことで、クリップボードの内容を変更したり、{{domxref("Event/preventDefault", "event.preventDefault()")}} を使用して既定の動作を取り消したりすることができます。
 
 なお、既定の動作を取り消すと、文書の更新が阻止されます。そのため、「切り取り」の既定の動作をエミュレートしたい場合は、イベントハンドラーでクリップボードを操作するとともに、文書から選択範囲を手動で取り除かなければなりません。
 
 このハンドラーがクリップボードのデータを*読み取る*ことはできません。
 
-[合成で](/ja/docs/Web/Events/Creating_and_triggering_events) `cut` イベントを構築して配信することもできますが、システムのクリップボードには影響を与えません。
+[合成した](/ja/docs/Web/Events/Creating_and_triggering_events) `cut` イベントを構築して配信することもできますが、システムのクリップボードには影響を与えません。
 
 ## 構文
 
 このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
 
 ```js
-addEventListener('cut', (event) => { });
+addEventListener("cut", (event) => {});
 
-oncut = (event) => { };
+oncut = (event) => {};
 ```
 
 ## イベント型
@@ -47,25 +50,26 @@ oncut = (event) => { };
 ```
 
 ```css hidden
-div.source, div.target {
-    border: 1px solid gray;
-    margin: .5rem;
-    padding: .5rem;
-    height: 1rem;
-    background-color: #e9eef1;
+div.source,
+div.target {
+  border: 1px solid gray;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  height: 1rem;
+  background-color: #e9eef1;
 }
 ```
 
 #### JS
 
 ```js
-const source = document.querySelector('div.source');
+const source = document.querySelector("div.source");
 
-source.addEventListener('cut', (event) => {
-    const selection = document.getSelection();
-    event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
-    selection.deleteFromDocument();
-    event.preventDefault();
+source.addEventListener("cut", (event) => {
+  const selection = document.getSelection();
+  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
+  selection.deleteFromDocument();
+  event.preventDefault();
 });
 ```
 
diff --git a/files/ja/web/api/element/dommousescroll_event/index.md b/files/ja/web/api/element/dommousescroll_event/index.md
new file mode 100644
index 00000000000000..325fa0f6c36952
--- /dev/null
+++ b/files/ja/web/api/element/dommousescroll_event/index.md
@@ -0,0 +1,60 @@
+---
+title: "Element: DOMMouseScroll イベント"
+short-title: DOMMouseScroll
+slug: Web/API/Element/DOMMouseScroll_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
+---
+
+{{APIRef}}{{Deprecated_Header}}{{Non-standard_header}}
+
+DOM の `DOMMouseScroll` イベントは、マウスホイールなどが操作され、前回のイベントから 1 行または 1 ページ以上スクロールした場合に非同期に発生します。このイベントは {{ domxref("MouseScrollEvent") }} インターフェイスで表されます。このイベントは Firefox でのみ実装されています。代わりに、標準の {{domxref("Element.wheel_event", "wheel")}} イベントを使用してください。
+
+もしマウスホイールイベントの既定の動作を防ぎたいのであれば、Gecko 上でこのイベントだけを処理すればよいというわけではありません。なぜなら、ネイティブのマウスホイールイベントによるスクロール量が 1 行未満（システム設定がページスクロールの場合は 1 ページ未満）である場合、このイベントが発生しなくても他のマウスホイールイベントが発生する可能性があるからです。
+
+Gecko 17 (Firefox 17) 以降では、ネイティブイベントごとに発生する `wheel` イベントの `preventDefault()` を呼び出す必要があります。
+
+可能であれば、標準化された {{domxref("Element/wheel_event","wheel")}} イベントを使用してください。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("DOMMouseScroll", (event) => {});
+
+onDOMMouseScroll = (event) => {};
+```
+
+## イベント型
+
+{{domxref("MouseWheelEvent")}} です。{{domxref("Event")}} から継承しています。
+
+{{InheritanceDiagram("MouseWheelEvent")}}
+
+## イベントプロパティ
+
+このイベントには、標準的なイベントに加えて、1 つだけ追加のプロパティがあります。
+
+### detail
+
+`detail` プロパティはスクロールをより正確に記述し、正の値は下方向へのスクロールを、負の値は上方向へのスクロールを示します。
+
+イベントがページ単位での上スクロールを表している場合、`detail` の値は -32768 になります。イベントがページ単位での下スクロールを表す場合、値は +32768 になります。その他の値はスクロールする行数を表し、その方向は値の符号で示されます。
+
+> **メモ:** 信頼できるイベントは、`detail` に 0 を指定して送信されることはありません。
+
+信頼できるイベントは 0 では発生しません。
+
+> **メモ:** プラットフォームのネイティブマウスホイールイベントがピクセル単位のスクロール距離しか提供していない場合、またはユーザーが速度をカスタマイズできる場合、値はイベントのターゲットの最も近いスクロール可能な祖先要素の行の高さを使用して計算されます。その要素のフォントサイズが `mousewheel.min_line_scroll_amount` よりも小さい場合、その環境設定の値が行の高さとして使用されます。
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{ domxref("MouseScrollEvent") }}
+- Gecko の古いピクセルスクロールイベント: `MozMousePixelScroll`
+- Gecko 以外のブラウザーの古いマウスホイールイベント: `mousewheel`
+- 標準化されたホイールイベント: `wheel`
diff --git a/files/ja/web/api/element/fullscreenchange_event/index.md b/files/ja/web/api/element/fullscreenchange_event/index.md
index 0456b200b16264..20685893063936 100644
--- a/files/ja/web/api/element/fullscreenchange_event/index.md
+++ b/files/ja/web/api/element/fullscreenchange_event/index.md
@@ -1,8 +1,9 @@
 ---
-title: 'Element: fullscreenchange イベント'
+title: "Element: fullscreenchange イベント"
+short-title: fullscreenchange
 slug: Web/API/Element/fullscreenchange_event
 l10n:
-  sourceCommit: a122e87245c624ba56197641b4d7b21b643a6021
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
 {{APIRef}}
@@ -56,27 +57,31 @@ function fullscreenchanged (event) {
   // それを指します。要素がなければ、このプロパティの値は null に
   // あります。
   if (document.fullscreenElement) {
-    console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
+    console.log(
+      `Element: ${document.fullscreenElement.id} entered fullscreen mode.`,
+    );
   } else {
-    console.log('Leaving fullscreen mode.');
+    console.log("Leaving fullscreen mode.");
   }
-};
+}
 
-const el = document.getElementById('fullscreen-div');
+const el = document.getElementById("fullscreen-div");
 
-el.addEventListener('fullscreenchange', fullscreenchanged);
+el.addEventListener("fullscreenchange", fullscreenchanged);
 // or
 el.onfullscreenchange = fullscreenchanged;
 
 // トグルボタンがクリックされたら、全画面モードを切り替える
-document.getElementById('toggle-fullscreen').addEventListener('click', (event) => {
-  if (document.fullscreenElement) {
-    // exitFullscreen は Document オブジェクトでのみ使用可
-    document.exitFullscreen();
-  } else {
-    el.requestFullscreen();
-  }
-});
+document
+  .getElementById("toggle-fullscreen")
+  .addEventListener("click", (event) => {
+    if (document.fullscreenElement) {
+      // exitFullscreen は Document オブジェクトでのみ使用可
+      document.exitFullscreen();
+    } else {
+      el.requestFullscreen();
+    }
+  });
 ```
 
 ## 仕様書
diff --git a/files/ja/web/api/element/fullscreenerror_event/index.md b/files/ja/web/api/element/fullscreenerror_event/index.md
index 4ea6eeacc68ca8..8212128a2d673f 100644
--- a/files/ja/web/api/element/fullscreenerror_event/index.md
+++ b/files/ja/web/api/element/fullscreenerror_event/index.md
@@ -1,8 +1,9 @@
 ---
-title: 'Element: fullscreenerror イベント'
+title: "Element: fullscreenerror イベント"
+short-title: fullscreenerror
 slug: Web/API/Element/fullscreenerror_event
 l10n:
-  sourceCommit: a122e87245c624ba56197641b4d7b21b643a6021
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
 ---
 
 {{APIRef}}
@@ -20,9 +21,9 @@ l10n:
 このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
 
 ```js
-addEventListener('fullscreenchange', (event) => { });
+addEventListener("fullscreenchange", (event) => {});
 
-onfullscreenchange = (event) => { };
+onfullscreenchange = (event) => {};
 ```
 
 ## イベント型
@@ -32,14 +33,14 @@ onfullscreenchange = (event) => { };
 ## 例
 
 ```js
-const requestor = document.querySelector('div');
+const requestor = document.querySelector("div");
 
 function handleError(event) {
-  console.error('an error occurred changing into fullscreen');
+  console.error("an error occurred changing into fullscreen");
   console.log(event);
-};
+}
 
-requestor.addEventListener('fullscreenerror', handleError);
+requestor.addEventListener("fullscreenerror", handleError);
 // or
 requestor.onfullscreenerror = handleError;
 
diff --git a/files/ja/web/api/element/gesturechange_event/index.md b/files/ja/web/api/element/gesturechange_event/index.md
new file mode 100644
index 00000000000000..3c30fcac1674c3
--- /dev/null
+++ b/files/ja/web/api/element/gesturechange_event/index.md
@@ -0,0 +1,50 @@
+---
+title: "Element: gesturechange イベント"
+short-title: gesturechange
+slug: Web/API/Element/gesturechange_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
+---
+
+{{APIRef}}{{Non-standard_header}}
+
+**`gesturechange`** イベントは、タッチジェスチャー中に数字が動いたときに発生します。
+
+これは WebKit 固有のイベントです。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("gesturechange", (event) => {});
+
+ongesturechange = (event) => {};
+```
+
+## イベント型
+
+{{domxref("GestureEvent")}} です。{{domxref("Event")}} から継承しています。
+
+{{InheritanceDiagram("GestureEvent")}}
+
+## イベントプロパティ
+
+_このインターフェイスには、親である {{domxref("UIEvent")}} および {{domxref("Event")}} から継承したプロパティがあります。_
+
+- {{domxref("GestureEvent.rotation")}} {{ReadOnlyInline}}
+  - : イベント開始時からの回転の変化（度単位）。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。初期値は `0.0` です。
+- {{domxref("GestureEvent.scale")}} {{ReadOnlyInline}}
+  - : イベント開始時からの 2 桁間の距離。ジェスチャー開始時の桁間距離の浮動小数点倍数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 より大きい値は外向きのピンチ解除（ズームイン）を示します。初期値は `1.0` です。
+
+## 仕様書
+
+どの仕様書にも含まれていません。
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [GestureEventClassReference at the Safari Developer Library](https://developer.apple.com/documentation/webkitjs/gestureevent)
diff --git a/files/ja/web/api/element/gestureend_event/index.md b/files/ja/web/api/element/gestureend_event/index.md
new file mode 100644
index 00000000000000..36538ba199351b
--- /dev/null
+++ b/files/ja/web/api/element/gestureend_event/index.md
@@ -0,0 +1,50 @@
+---
+title: "Element: gestureend イベント"
+short-title: gestureend
+slug: Web/API/Element/gestureend_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
+---
+
+{{APIRef}}{{Non-standard_header}}
+
+**`gestureend`** イベントは、タッチ面に複数の指が接触しなくなったとき、すなわちジェスチャーが終了したときに発生します。
+
+これは WebKit 固有のイベントです。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("gestureend", (event) => {});
+
+ongestureend = (event) => {};
+```
+
+## イベント型
+
+{{domxref("GestureEvent")}} です。{{domxref("Event")}} から継承しています。
+
+{{InheritanceDiagram("GestureEvent")}}
+
+## イベントプロパティ
+
+_このインターフェイスには、親である {{domxref("UIEvent")}} および {{domxref("Event")}} から継承したプロパティがあります。_
+
+- {{domxref("GestureEvent.rotation")}} {{ReadOnlyInline}}
+  - : イベント開始時からの回転の変化（度単位）。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。初期値は `0.0` です。
+- {{domxref("GestureEvent.scale")}} {{ReadOnlyInline}}
+  - : イベント開始時からの 2 桁間の距離。ジェスチャー開始時の桁間距離の浮動小数点倍数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 より大きい値は外向きのピンチ解除（ズームイン）を示します。初期値は `1.0` です。
+
+## 仕様書
+
+どの仕様書にも含まれていません。
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [GestureEventClassReference at the Safari Developer Library](https://developer.apple.com/documentation/webkitjs/gestureevent)
diff --git a/files/ja/web/api/element/gesturestart_event/index.md b/files/ja/web/api/element/gesturestart_event/index.md
new file mode 100644
index 00000000000000..93f70c72bdcf6c
--- /dev/null
+++ b/files/ja/web/api/element/gesturestart_event/index.md
@@ -0,0 +1,50 @@
+---
+title: "Element: gesturestart イベント"
+short-title: gesturestart
+slug: Web/API/Element/gesturestart_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
+---
+
+{{APIRef}}{{Non-standard_header}}
+
+**`gesturestart`** イベントは、複数の指がタッチ面に接触したとき、新しいジェスチャーを開始したとき に発生します。ジェスチャー中は {{domxref("Element/gesturechange_event", "gesturechange")}} イベントが発生します。ジェスチャーが終了すると、{{domxref("Element/gestureend_event", "gestureend")}} イベントが発生します。
+
+これは WebKit 固有のイベントです。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("gesturestart", (event) => {});
+
+ongesturestart = (event) => {};
+```
+
+## イベント型
+
+{{domxref("GestureEvent")}} です。{{domxref("Event")}} から継承しています。
+
+{{InheritanceDiagram("GestureEvent")}}
+
+## イベントプロパティ
+
+_このインターフェイスには、親である {{domxref("UIEvent")}} および {{domxref("Event")}} から継承したプロパティがあります。_
+
+- {{domxref("GestureEvent.rotation")}} {{ReadOnlyInline}}
+  - : イベント開始時からの回転の変化（度単位）。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。初期値は `0.0` です。
+- {{domxref("GestureEvent.scale")}} {{ReadOnlyInline}}
+  - : イベント開始時からの 2 桁間の距離。ジェスチャー開始時の桁間距離の浮動小数点倍数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 より大きい値は外向きのピンチ解除（ズームイン）を示します。初期値は `1.0` です。
+
+## 仕様書
+
+どの仕様書にも含まれていません。
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [GestureEventClassReference at the Safari Developer Library](https://developer.apple.com/documentation/webkitjs/gestureevent)
diff --git a/files/ja/web/api/element/gotpointercapture_event/index.md b/files/ja/web/api/element/gotpointercapture_event/index.md
index 3ef63833679892..9b6262b9240b5a 100644
--- a/files/ja/web/api/element/gotpointercapture_event/index.md
+++ b/files/ja/web/api/element/gotpointercapture_event/index.md
@@ -1,9 +1,10 @@
 ---
-title: 'Element: gotpointercapture イベント'
+title: "Element: gotpointercapture イベント"
+short-title: gotpointercapture
 slug: Web/API/Element/gotpointercapture_event
 original_slug: Web/API/Document/gotpointercapture_event
 l10n:
-  sourceCommit: 1d055933f471b0a8a7a48a8408c1fa4a5e2c1adf
+  sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
 ---
 
 {{APIRef}}
@@ -15,14 +16,14 @@ l10n:
 このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
 
 ```js
-addEventListener('gotpointercapture', (event) => {});
+addEventListener("gotpointercapture", (event) => {});
 
-ongotpointercapture = (event) => { };
+ongotpointercapture = (event) => {};
 ```
 
 ## イベント型
 
-{{domxref("PointerEvent")}} です。 {{domxref("Event")}} を継承しています。
+{{domxref("PointerEvent")}} です。{{domxref("Event")}} を継承しています。
 
 {{InheritanceDiagram("PointerEvent")}}
 
@@ -56,27 +57,27 @@ _このインターフェイスは {{domxref("MouseEvent")}} および {{domxref
 この例は `<p>` 要素を取得し、 `gotpointercapture` イベントを待ち受けします。 `setPointerCapture()` を `pointerdown` イベントの要素上で呼び出し、 `gotpointercapture` を発生させます。
 
 ```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
 
-para.addEventListener('gotpointercapture', () => {
-  console.log('I\'ve been captured!')
+para.addEventListener("gotpointercapture", () => {
+  console.log("I've been captured!");
 });
 
-para.addEventListener('pointerdown', (event) => {
+para.addEventListener("pointerdown", (event) => {
   para.setPointerCapture(event.pointerId);
 });
 ```
 
-同じ例ですが、 `ongotpointercapture` イベントハンドラーを使用して行います。
+同じ例ですが、`ongotpointercapture` イベントハンドラーを使用して行います。
 
 ```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
 
 para.ongotpointercapture = () => {
-  console.log('I\'ve been captured!')
+  console.log("I've been captured!");
 };
 
-para.addEventListener('pointerdown', (event) => {
+para.addEventListener("pointerdown", (event) => {
   para.setPointerCapture(event.pointerId);
 });
 ```
diff --git a/files/ja/web/api/element/keydown_event/index.md b/files/ja/web/api/element/keydown_event/index.md
index b5532a72fb7a2b..952875668b00e8 100644
--- a/files/ja/web/api/element/keydown_event/index.md
+++ b/files/ja/web/api/element/keydown_event/index.md
@@ -1,22 +1,25 @@
 ---
-title: 'Element: keydown イベント'
+title: "Element: keydown イベント"
+short-title: keydown
 slug: Web/API/Element/keydown_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
 ---
 
 {{APIRef}}
 
 **`keydown`** イベントは、キーが押されたときに発生します。
 
-{{domxref("Element/keypress_event", "keypress")}} イベントとは異なり、 `keydown` イベントは生成する文字値に関係なくすべてのキーで発生します。
+非推奨の {{domxref("Element/keypress_event", "keypress")}} イベントとは異なり、 `keydown` イベントは生成する文字値に関係なくすべてのキーで発生します。
 
 `keydown` と [`keyup`](/ja/docs/Web/API/Element/keyup_event) イベントは、どのキーが押されたかを示すコードを提供し、 `keypress` はどの文字が入力されたかを示します。例えば、小文字の "a" は `keydown` と `keyup` では 65 と報告され、 `keypress` では 97 と報告されます。大文字の "A" は、どのイベントでも 65 と報告されます。
 
-キーボードイベントは `<inputs>`, `<textarea>` と `contentEditable` 属性または `tabindex="-1"` を持つものだけが生成します。
+キーボードイベントは `<input>`, `<textarea>`, `<summary>` と `contentEditable` または `tabindex` 属性を持つものだけが生成します。捕捉されなかった場合、それらは {{domxref("Document")}} に到達するまで [DOM ツリー](/ja/docs/Web/API/Document_object_model/Using_the_Document_Object_Model#what_is_a_dom_tree)を[バブリング](/ja/docs/Learn/JavaScript/Building_blocks/Events#イベントのバブリングとキャプチャリング)します。
 
 Firefox 65 以降では、CJKT ユーザーのブラウザー間の互換性を高めるために、 `keydown` および [`keyup`](/ja/docs/Web/API/Element/keyup_event) イベントが IME 変換中に発行されるようになりました（[Firefox バグ 354358](https://bugzil.la/354358)）。変換操作中の `keydown` イベントをすべて無視するには、次のようにしてください （229 は、IME によって処理されたイベントに関連する `keyCode` に設定される特別な値です）。
 
 ```js
-eventTarget.addEventListener("keydown", event => {
+eventTarget.addEventListener("keydown", (event) => {
   if (event.isComposing || event.keyCode === 229) {
     return;
   }
@@ -29,7 +32,7 @@ eventTarget.addEventListener("keydown", event => {
 イベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。
 
 ```js
-addEventListener('keydown', (event) => {});
+addEventListener("keydown", (event) => {});
 
 onkeydown = (event) => { };
 ```
@@ -44,39 +47,39 @@ onkeydown = (event) => { };
 
 _このインターフェイスには親である {{domxref("UIEvent")}} や {{domxref("Event")}} から継承したプロパティもあります。_
 
-- {{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.altKey")}} {{ReadOnlyInline}}
 
   - : 論理値で、このキーイベントが発生した際に <kbd>Alt</kbd> （macOS の場合は <kbd>Option</kbd> または <kbd>⌥</kbd>）キーが押されていれば `true` を返します。
 
-- {{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.code")}} {{ReadOnlyInline}}
 
   - : 文字列で、このイベントが表す物理キーのコード値を返します。
 
     > **警告:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 {{domxref("Keyboard.getLayoutMap()")}} を使用してください。
 
-- {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.ctrlKey")}} {{ReadOnlyInline}}
 
   - : 論理値で、そのキーイベントが発生した際に <kbd>Ctrl</kbd> キーが押されていれば `true` を返します。
 
-- {{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.isComposing")}} {{ReadOnlyInline}}
   - : 論理値で、このイベントが `compositionstart` と `compositionend` の間に発生したものであれば `true` を返します。
-- {{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.key")}} {{ReadOnlyInline}}
   - : 文字列で、このイベントが表すキーのキー値を表します。
-- {{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.locale")}} {{ReadOnlyInline}}
 
   - : 文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。
 
     > **メモ:** このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。
 
-- {{domxref("KeyboardEvent.location")}} {{Readonlyinline}}
-  - : 数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、上記の[キーボード上の位置](#キーボード上の位置)にあります。
-- {{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.location")}} {{ReadOnlyInline}}
+  - : 数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、上記の[キーボード上の位置](/ja/docs/Web/API/KeyboardEvent#キーボード上の位置)にあります。
+- {{domxref("KeyboardEvent.metaKey")}} {{ReadOnlyInline}}
 
   - : 論理値で、このキーイベントが発生した際に <kbd>Meta</kbd> キー（Mac キーボードでは <kbd>⌘ Command</kbd> キー、 Windows キーボードでは Windows キー (<kbd>⊞</kbd>)）が押されていれば `true` を返します。
 
-- {{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.repeat")}} {{ReadOnlyInline}}
   - : 論理値で、このキーが押し続けられて自動リピートしている場合に `true` を返します。
-- {{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.shiftKey")}} {{ReadOnlyInline}}
 
   - : 論理値で、このキーイベントが発生した際に <kbd>Shift</kbd> キーが押されていれば `true` を返します。
 
@@ -92,10 +95,10 @@ _このインターフェイスには親である {{domxref("UIEvent")}} や {{d
 ```
 
 ```js
-const input = document.querySelector('input');
-const log = document.getElementById('log');
+const input = document.querySelector("input");
+const log = document.getElementById("log");
 
-input.addEventListener('keydown', logKey);
+input.addEventListener("keydown", logKey);
 
 function logKey(e) {
   log.textContent += ` ${e.code}`;
@@ -123,4 +126,3 @@ input.onkeydown = logKey;
 - [`input`](/ja/docs/Web/API/HTMLElement/input_event)
 - [`keypress`](/ja/docs/Web/API/Element/keypress_event)
 - [`keyup`](/ja/docs/Web/API/Element/keyup_event)
-- [Document の `keydown` イベント](/ja/docs/Web/API/Document/keydown_event)
diff --git a/files/ja/web/api/element/keypress_event/index.md b/files/ja/web/api/element/keypress_event/index.md
index 6770447092bb00..44ac797d000bfc 100644
--- a/files/ja/web/api/element/keypress_event/index.md
+++ b/files/ja/web/api/element/keypress_event/index.md
@@ -1,6 +1,9 @@
 ---
-title: 'Element: keypress イベント'
+title: "Element: keypress イベント"
+short-title: keypress
 slug: Web/API/Element/keypress_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
 ---
 
 {{APIRef}} {{deprecated_header}}
@@ -16,9 +19,9 @@ slug: Web/API/Element/keypress_event
 イベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。
 
 ```js
-addEventListener('keypress', (event) => {});
+addEventListener("keypress", (event) => {});
 
-onkeypress = (event) => { };
+onkeypress = (event) => {};
 ```
 
 ## イベント型
@@ -31,39 +34,39 @@ onkeypress = (event) => { };
 
 _このインターフェイスには親である {{domxref("UIEvent")}} や {{domxref("Event")}} から継承したプロパティもあります。_
 
-- {{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.altKey")}} {{ReadOnlyInline}}
 
   - : 論理値で、このキーイベントが発生した際に <kbd>Alt</kbd> （macOS の場合は <kbd>Option</kbd> または <kbd>⌥</kbd>）キーが押されていれば `true` を返します。
 
-- {{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.code")}} {{ReadOnlyInline}}
 
   - : 文字列で、このイベントが表す物理キーのコード値を返します。
 
     > **警告:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 {{domxref("Keyboard.getLayoutMap()")}} を使用してください。
 
-- {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.ctrlKey")}} {{ReadOnlyInline}}
 
   - : 論理値で、そのキーイベントが発生した際に <kbd>Ctrl</kbd> キーが押されていれば `true` を返します。
 
-- {{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.isComposing")}} {{ReadOnlyInline}}
   - : 論理値で、このイベントが `compositionstart` と `compositionend` の間に発生したものであれば `true` を返します。
-- {{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.key")}} {{ReadOnlyInline}}
   - : 文字列で、このイベントが表すキーのキー値を表します。
-- {{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.locale")}} {{ReadOnlyInline}}
 
   - : 文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。
 
     > **メモ:** このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。
 
-- {{domxref("KeyboardEvent.location")}} {{Readonlyinline}}
-  - : 数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、上記の[キーボード上の位置](#キーボード上の位置)にあります。
-- {{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.location")}} {{ReadOnlyInline}}
+  - : 数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、[キーボード上の位置](/ja/docs/Web/API/KeyboardEvent#キーボード上の位置)にあります。
+- {{domxref("KeyboardEvent.metaKey")}} {{ReadOnlyInline}}
 
   - : 論理値で、このキーイベントが発生した際に <kbd>Meta</kbd> キー（Mac キーボードでは <kbd>⌘ Command</kbd> キー、 Windows キーボードでは Windows キー (<kbd>⊞</kbd>)）が押されていれば `true` を返します。
 
-- {{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.repeat")}} {{ReadOnlyInline}}
   - : 論理値で、このキーが押し続けられて自動リピートしている場合に `true` を返します。
-- {{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.shiftKey")}} {{ReadOnlyInline}}
 
   - : 論理値で、このキーイベントが発生した際に <kbd>Shift</kbd> キーが押されていれば `true` を返します。
 
@@ -76,16 +79,16 @@ _このインターフェイスには親である {{domxref("UIEvent")}} や {{d
 ```html
 <div>
   <label for="sample">この入力欄にフォーカスを当てて、何か入力してください。</label>
-  <input type="text" name="text" id="sample">
+  <input type="text" name="text" id="sample" />
 </div>
 <p id="log"></p>
 ```
 
 ```js
-const log = document.getElementById('log');
-const input = document.querySelector('input');
+const log = document.getElementById("log");
+const input = document.querySelector("input");
 
-input.addEventListener('keypress', logKey);
+input.addEventListener("keypress", logKey);
 
 function logKey(e) {
   log.textContent += ` ${e.code}`;
diff --git a/files/ja/web/api/element/keyup_event/index.md b/files/ja/web/api/element/keyup_event/index.md
index 785ce672aca2cf..c1a9b061a95595 100644
--- a/files/ja/web/api/element/keyup_event/index.md
+++ b/files/ja/web/api/element/keyup_event/index.md
@@ -1,6 +1,9 @@
 ---
-title: 'Element: keyup イベント'
+title: "Element: keyup イベント"
+short-title: keyup
 slug: Web/API/Element/keyup_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
 ---
 
 {{APIRef}}
@@ -9,10 +12,12 @@ slug: Web/API/Element/keyup_event
 
 [`keydown`](/ja/docs/Web/API/Element/keydown_event) と `keyup` イベントは、どのキーが押されたかを示すコードを提供し、 `keypress` はどの文字が入力されたかを示します。例えば、小文字の "a" は `keydown` と `keyup` では 65 と報告され、 `keypress` では 97 と報告されます。大文字の "A" は、どのイベントでも 65 と報告されます。
 
+キーボードイベントは `<input>`, `<textarea>`, `<summary>` と `contentEditable` または `tabindex` 属性を持つものだけが生成します。
+
 Firefox 65 以降では、CJKT ユーザーのブラウザー間の互換性を高めるために、 `keyup` および [`keydown`](/ja/docs/Web/API/Element/keydown_event) イベントが IME 変換中に発行されるようになりました（[Firefox バグ 354358](https://bugzil.la/354358)）。変換操作中の `keyup` イベントをすべて無視するには、次のようにしてください （229 は、IME によって処理されたイベントに関連する `keyCode` に設定される特別な値です）。
 
 ```js
-eventTarget.addEventListener("keyup", event => {
+eventTarget.addEventListener("keyup", (event) => {
   if (event.isComposing || event.keyCode === 229) {
     return;
   }
@@ -25,9 +30,9 @@ eventTarget.addEventListener("keyup", event => {
 イベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。
 
 ```js
-addEventListener('keyup', (event) => {});
+addEventListener("keyup", (event) => {});
 
-onkeyup = (event) => { };
+onkeyup = (event) => {};
 ```
 
 ## イベント型
@@ -40,39 +45,39 @@ onkeyup = (event) => { };
 
 _このインターフェイスには親である {{domxref("UIEvent")}} や {{domxref("Event")}} から継承したプロパティもあります。_
 
-- {{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.altKey")}} {{ReadOnlyInline}}
 
   - : 論理値で、このキーイベントが発生した際に <kbd>Alt</kbd> （macOS の場合は <kbd>Option</kbd> または <kbd>⌥</kbd>）キーが押されていれば `true` を返します。
 
-- {{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.code")}} {{ReadOnlyInline}}
 
   - : 文字列で、このイベントが表す物理キーのコード値を返します。
 
     > **警告:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 {{domxref("Keyboard.getLayoutMap()")}} を使用してください。
 
-- {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.ctrlKey")}} {{ReadOnlyInline}}
 
   - : 論理値で、そのキーイベントが発生した際に <kbd>Ctrl</kbd> キーが押されていれば `true` を返します。
 
-- {{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.isComposing")}} {{ReadOnlyInline}}
   - : 論理値で、このイベントが `compositionstart` と `compositionend` の間に発生したものであれば `true` を返します。
-- {{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.key")}} {{ReadOnlyInline}}
   - : 文字列で、このイベントが表すキーのキー値を表します。
-- {{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.locale")}} {{ReadOnlyInline}}
 
   - : 文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。
 
     > **メモ:** このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。
 
-- {{domxref("KeyboardEvent.location")}} {{Readonlyinline}}
-  - : 数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、上記の[キーボード上の位置](#キーボード上の位置)にあります。
-- {{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.location")}} {{ReadOnlyInline}}
+  - : 数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、[キーボード上の位置](/ja/docs/Web/API/KeyboardEvent#キーボード上の位置)にあります。
+- {{domxref("KeyboardEvent.metaKey")}} {{ReadOnlyInline}}
 
   - : 論理値で、このキーイベントが発生した際に <kbd>Meta</kbd> キー（Mac キーボードでは <kbd>⌘ Command</kbd> キー、 Windows キーボードでは Windows キー (<kbd>⊞</kbd>)）が押されていれば `true` を返します。
 
-- {{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.repeat")}} {{ReadOnlyInline}}
   - : 論理値で、このキーが押し続けられて自動リピートしている場合に `true` を返します。
-- {{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
+- {{domxref("KeyboardEvent.shiftKey")}} {{ReadOnlyInline}}
 
   - : 論理値で、このキーイベントが発生した際に <kbd>Shift</kbd> キーが押されていれば `true` を返します。
 
@@ -83,15 +88,15 @@ _このインターフェイスには親である {{domxref("UIEvent")}} や {{d
 この例では、 {{HtmlElement("input")}} 要素内でキーを離すたびに、 {{domxref("KeyboardEvent.code")}} 値を記録します。
 
 ```html
-<input placeholder="ここをクリックして、キーを押して離してください。" size="40">
+<input placeholder="ここをクリックして、キーを押して離してください。" size="40" />
 <p id="log"></p>
 ```
 
 ```js
-const input = document.querySelector('input');
-const log = document.getElementById('log');
+const input = document.querySelector("input");
+const log = document.getElementById("log");
 
-input.addEventListener('keyup', logKey);
+input.addEventListener("keyup", logKey);
 
 function logKey(e) {
   log.textContent += ` ${e.code}`;
@@ -119,4 +124,3 @@ input.onkeyup = logKey;
 - [`input`](/ja/docs/Web/API/HTMLElement/input_event)
 - [`keydown`](/ja/docs/Web/API/Element/keydown_event)
 - [`keypress`](/ja/docs/Web/API/Element/keypress_event)
-- [Document の `keyup` イベント](/ja/docs/Web/API/Document/keyup_event)
diff --git a/files/ja/web/api/element/lostpointercapture_event/index.md b/files/ja/web/api/element/lostpointercapture_event/index.md
index 87bc9ab7537f7d..4525a375a2a033 100644
--- a/files/ja/web/api/element/lostpointercapture_event/index.md
+++ b/files/ja/web/api/element/lostpointercapture_event/index.md
@@ -1,9 +1,10 @@
 ---
 title: "Element: lostpointercapture イベント"
+short-title: lostpointercapture
 slug: Web/API/Element/lostpointercapture_event
 original_slug: Web/API/GlobalEventHandlers/onlostpointercapture
 l10n:
-  sourceCommit: 9fb6c9e56c6db295967384730feeb941509ac743
+  sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
 ---
 
 {{APIRef}}
diff --git a/files/ja/web/api/element/mozmousepixelscroll_event/index.md b/files/ja/web/api/element/mozmousepixelscroll_event/index.md
new file mode 100644
index 00000000000000..651814f861c4d9
--- /dev/null
+++ b/files/ja/web/api/element/mozmousepixelscroll_event/index.md
@@ -0,0 +1,50 @@
+---
+title: "Element: MozMousePixelScroll イベント"
+short-title: MozMousePixelScroll
+slug: Web/API/Element/MozMousePixelScroll_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
+---
+
+{{APIRef}}{{deprecated_header}}{{ Non-standard_header() }}
+
+Firefox 専用の、標準外、かつ廃止予定の **MozMousePixelScroll`** イベントは、マウスホイールなどが操作されたときに {{domxref("Element")}} で非同期に発生します。これは {{ domxref("MouseScrollEvent") }} インターフェイスで表されます。
+
+> **メモ:** この標準外の旧式のイベントは使用しないでください。代わりに、常に標準の {{domxref("Element.wheel_event", "wheel")}} イベントを使用してください。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("MozMousePixelScroll", (event) => {});
+
+onMozMousePixelScroll = (event) => {};
+```
+
+## イベント型
+
+{{domxref("MouseWheelEvent")}} です。{{domxref("Event")}} から継承しています。
+
+{{InheritanceDiagram("MouseWheelEvent")}}
+
+## スクロールした距離の取得
+
+このイベントの {{domxref("UIEvent/detail", "detail")}} プロパティは、スクロール距離を行単位で示します。負の値はスクロール移動が下方向か右方向であることを示し、正の値は上方向か左方向であることを示します。
+
+プラットフォームのネイティブマウスホイールイベントが行またはページ単位でスクロール距離を示している場合、`detail` の値はその値と、ターゲット要素を含む最も近い祖先のスクロール可能要素の行の高さまたはページの幅/高さを使用して計算されます。
+
+> **メモ:** macOSでは、スクロール距離（したがって `detail` の値）は加速スクロール距離に基づいて計算されます。
+
+イベントが正当なものであれば、`detail` の値が 0 になることはありません。
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{ domxref("MouseScrollEvent") }}
+- Gecko の古い行またはページのスクロールイベント: `DOMMouseScroll`
+- Gecko 以外のブラウザーの古いマウスホイールイベント: `mousewheel`
+- 標準化されたホイールイベント: `wheel`
diff --git a/files/ja/web/api/element/paste_event/index.md b/files/ja/web/api/element/paste_event/index.md
index 89144688a26700..91da7db306f10e 100644
--- a/files/ja/web/api/element/paste_event/index.md
+++ b/files/ja/web/api/element/paste_event/index.md
@@ -1,6 +1,9 @@
 ---
-title: 'Element: paste イベント'
+title: "Element: paste イベント"
+short-title: paste
 slug: Web/API/Element/paste_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
 ---
 
 {{APIRef}}
@@ -11,18 +14,18 @@ slug: Web/API/Element/paste_event
 
 このイベントのハンドラーは、イベントの `clipboardData` プロパティにある {{domxref("DataTransfer/getData", "getData()")}} を呼び出すことでクリップボードの中身にアクセスすることができます。
 
-既定の動作を上書きする場合 (例えば、別なデータを挿入したりクリップボードの内容を変換したりする場合など)、イベントハンドラーで {{domxref("Event/preventDefault", "event.preventDefault()")}} を使用して既定のアクションをキャンセルした上で、必要なデータを手動で挿入してください。
+既定の動作を上書きする場合（例えば、別なデータを挿入したりクリップボードの内容を変換したりする場合など）、イベントハンドラーで {{domxref("Event/preventDefault", "event.preventDefault()")}} を使用して既定のアクションをキャンセルした上で、必要なデータを手動で挿入してください。
 
-[合成で](/ja/docs/Web/Events/Creating_and_triggering_events) `paste` イベントを構築して配信することができますが、文書の内容には影響しません。
+[合成した](/ja/docs/Web/Events/Creating_and_triggering_events) `paste` イベントを構築して配信することができますが、文書の内容には影響しません。
 
 ## 構文
 
 このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
 
 ```js
-addEventListener('paste', (event) => { });
+addEventListener("paste", (event) => {});
 
-onpaste = (event) => { };
+onpaste = (event) => {};
 ```
 
 ## イベント型
@@ -43,29 +46,31 @@ onpaste = (event) => { };
 ```
 
 ```css hidden
-div.source, div.target {
-    border: 1px solid gray;
-    margin: .5rem;
-    padding: .5rem;
-    height: 1rem;
-    background-color: #e9eef1;
+div.source,
+div.target {
+  border: 1px solid gray;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  height: 1rem;
+  background-color: #e9eef1;
 }
 ```
 
 #### JS
 
 ```js
-const target = document.querySelector('div.target');
-
-target.addEventListener('paste', (event) => {
-    event.preventDefault();
-
-    let paste = (event.clipboardData || window.clipboardData).getData('text');
-    paste = paste.toUpperCase();
-    const selection = window.getSelection();
-    if (!selection.rangeCount) return;
-    selection.deleteFromDocument();
-    selection.getRangeAt(0).insertNode(document.createTextNode(paste));
+const target = document.querySelector("div.target");
+
+target.addEventListener("paste", (event) => {
+  event.preventDefault();
+
+  let paste = (event.clipboardData || window.clipboardData).getData("text");
+  paste = paste.toUpperCase();
+  const selection = window.getSelection();
+  if (!selection.rangeCount) return;
+  selection.deleteFromDocument();
+  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
+  selection.collapseToEnd();
 });
 ```
 
diff --git a/files/ja/web/api/element/pointercancel_event/index.md b/files/ja/web/api/element/pointercancel_event/index.md
index a8ec5fb7c51e8a..2513f4827aa0b7 100644
--- a/files/ja/web/api/element/pointercancel_event/index.md
+++ b/files/ja/web/api/element/pointercancel_event/index.md
@@ -1,5 +1,6 @@
 ---
 title: "Element: pointercancel イベント"
+short-title: pointercancel
 slug: Web/API/Element/pointercancel_event
 original_slug: Web/API/Document/pointercancel_event
 l10n:
diff --git a/files/ja/web/api/element/pointerdown_event/index.md b/files/ja/web/api/element/pointerdown_event/index.md
index fb454c89194161..8da7afc6046335 100644
--- a/files/ja/web/api/element/pointerdown_event/index.md
+++ b/files/ja/web/api/element/pointerdown_event/index.md
@@ -1,9 +1,10 @@
 ---
-title: 'Element: pointerdown イベント'
+title: "Element: pointerdown イベント"
+short-title: pointerdown
 slug: Web/API/Element/pointerdown_event
 original_slug: Web/API/Document/pointerdown_event
 l10n:
-  sourceCommit: 1732201134d732af9bfd49ee9e10f7e2086cc783
+  sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
 ---
 
 {{APIRef}}
@@ -17,9 +18,9 @@ l10n:
 このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
 
 ```js
-addEventListener('pointerdown', (event) => {});
+addEventListener("pointerdown", (event) => {});
 
-onpointerdown = (event) => { };
+onpointerdown = (event) => {};
 ```
 
 ## イベント型
@@ -58,20 +59,20 @@ _このインターフェイスは {{domxref("MouseEvent")}} および {{domxref
 `addEventListener()` を使用した例です。
 
 ```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
 
-para.addEventListener('pointerdown', (event) => {
-  console.log('Pointer down event');
+para.addEventListener("pointerdown", (event) => {
+  console.log("Pointer down event");
 });
 ```
 
 `onpointerdown` イベントハンドラープロパティを使用した例です。
 
 ```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
 
 para.onpointerdown = (event) => {
-  console.log('Pointer down event');
+  console.log("Pointer down event");
 };
 ```
 
diff --git a/files/ja/web/api/element/pointerenter_event/index.md b/files/ja/web/api/element/pointerenter_event/index.md
index 550225d9b82db0..3fe66907d8ec5c 100644
--- a/files/ja/web/api/element/pointerenter_event/index.md
+++ b/files/ja/web/api/element/pointerenter_event/index.md
@@ -1,9 +1,10 @@
 ---
 title: "Element: pointerenter イベント"
+short-title: pointerenter
 slug: Web/API/Element/pointerenter_event
 original_slug: Web/API/Document/pointerenter_event
 l10n:
-  sourceCommit: 9fb6c9e56c6db295967384730feeb941509ac743
+  sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
 ---
 
 {{APIRef}}
diff --git a/files/ja/web/api/element/pointerleave_event/index.md b/files/ja/web/api/element/pointerleave_event/index.md
index b2c545be9f3fea..0e7b65c877ebb9 100644
--- a/files/ja/web/api/element/pointerleave_event/index.md
+++ b/files/ja/web/api/element/pointerleave_event/index.md
@@ -1,9 +1,10 @@
 ---
 title: "Element: pointerleave イベント"
+short-title: pointerleave
 slug: Web/API/Element/pointerleave_event
 original_slug: Web/API/Document/pointerleave_event
 l10n:
-  sourceCommit: 9fb6c9e56c6db295967384730feeb941509ac743
+  sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
 ---
 
 {{APIRef}}
diff --git a/files/ja/web/api/element/pointermove_event/index.md b/files/ja/web/api/element/pointermove_event/index.md
index 98899ff955017c..3692ac4f1e19f7 100644
--- a/files/ja/web/api/element/pointermove_event/index.md
+++ b/files/ja/web/api/element/pointermove_event/index.md
@@ -1,9 +1,10 @@
 ---
 title: "Element: pointermove イベント"
+short-title: pointermove
 slug: Web/API/Element/pointermove_event
 original_slug: Web/API/Document/pointermove_event
 l10n:
-  sourceCommit: abf155210d826c2584d23433eb2eac45a6669d23
+  sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
 ---
 
 {{APIRef}}
diff --git a/files/ja/web/api/element/pointerout_event/index.md b/files/ja/web/api/element/pointerout_event/index.md
index ae292477e37bb8..f94d6b081ccbe7 100644
--- a/files/ja/web/api/element/pointerout_event/index.md
+++ b/files/ja/web/api/element/pointerout_event/index.md
@@ -3,7 +3,7 @@ title: "Element: pointerout イベント"
 slug: Web/API/Element/pointerout_event
 original_slug: Web/API/Document/pointerout_event
 l10n:
-  sourceCommit: 9fb6c9e56c6db295967384730feeb941509ac743
+  sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
 ---
 
 {{APIRef}}
diff --git a/files/ja/web/api/element/pointerover_event/index.md b/files/ja/web/api/element/pointerover_event/index.md
index d7eb55654e3646..5d5b2286db9062 100644
--- a/files/ja/web/api/element/pointerover_event/index.md
+++ b/files/ja/web/api/element/pointerover_event/index.md
@@ -1,9 +1,10 @@
 ---
 title: "Element: pointerover イベント"
+short-title: pointerover
 slug: Web/API/Element/pointerover_event
 original_slug: Web/API/Document/pointerover_event
 l10n:
-  sourceCommit: 9fb6c9e56c6db295967384730feeb941509ac743
+  sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc
 ---
 
 {{APIRef}}
diff --git a/files/ja/web/api/element/pointerrawupdate_event/index.md b/files/ja/web/api/element/pointerrawupdate_event/index.md
new file mode 100644
index 00000000000000..6f6fdbf9288c4e
--- /dev/null
+++ b/files/ja/web/api/element/pointerrawupdate_event/index.md
@@ -0,0 +1,76 @@
+---
+title: "Element: pointerrawupdate イベント"
+short-title: pointerrawupdate
+slug: Web/API/Element/pointerrawupdate_event
+l10n:
+  sourceCommit: ab4fde9db98cad2e7a80653723533ff1663ada2d
+---
+
+{{APIRef}}{{SeeCompatTable}}
+
+**`pointerrawupdate`** は {{DOMxRef('PointerEvent')}} で、ポインターに [`pointerdown`](/ja/docs/Web/API/Element/pointerdown_event) または [`pointerup`](/ja/docs/Web/API/Element/pointerup_event) イベントが発生しない変化が起きたときに発生します。
+これらのプロパティの一覧は [`pointermove`](/ja/docs/Web/API/Element/pointermove_event) を参照してください。
+
+イベントループ内で配信されていない、同じポインター ID を持つ別の `pointerrawupdate` イベントが既に存在する場合、`pointerrawupdate` イベントは併合イベントになる可能性があります。
+併合イベントの詳細については、{{domxref("PointerEvent.getCoalescedEvents")}} のドキュメントを参照してください。
+
+`pointerrawupdate` イベントのリスナーは、JavaScript が高頻度のイベントを必要とし、それらが配信されると同時に素早く処理できる場合にのみ追加すべきです。
+ほとんどの用途では、`pointerrawupdate` イベント用のリスナーを追加することで、パフォーマンスに影響が出る可能性があるため、他のポインターイベント型で十分です。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("pointerrawupdate", (event) => {});
+
+onpointerrawupdate = (event) => {};
+```
+
+## イベント型
+
+{{domxref("PointerEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("PointerEvent")}}
+
+## イベントプロパティ
+
+このイベントは、{{domxref("PointerEvent")}} インターフェイスのプロパティを実装しています。
+
+## 例
+
+```js
+addEventListener("pointerrawupdate", (event) => {
+  if (event.getCoalescedEvents && event.getCoalescedEvents().length > 1) {
+    console.log("Coalesced events:", event.getCoalescedEvents().length);
+    for (let coalescedEvent of event.getCoalescedEvents()) {
+      // 併合されたイベントに対して何かをする
+    }
+  } else {
+    // イベントに対して何かをする
+    console.log("Raw event", event);
+  }
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- Related events
+
+  - [`gotpointercapture`](/ja/docs/Web/API/Element/gotpointercapture_event)
+  - [`lostpointercapture`](/ja/docs/Web/API/Element/lostpointercapture_event)
+  - [`pointerover`](/ja/docs/Web/API/Element/pointerover_event)
+  - [`pointerenter`](/ja/docs/Web/API/Element/pointerenter_event)
+  - [`pointerdown`](/ja/docs/Web/API/Element/pointerdown_event)
+  - [`pointermove`](/ja/docs/Web/API/Element/pointermove_event)
+  - [`pointerup`](/ja/docs/Web/API/Element/pointerup_event)
+  - [`pointerout`](/ja/docs/Web/API/Element/pointerout_event)
+  - [`pointerleave`](/ja/docs/Web/API/Element/pointerleave_event)
diff --git a/files/ja/web/api/element/scroll_event/index.md b/files/ja/web/api/element/scroll_event/index.md
index a4d8d50c32c8e2..cf471b78b2812f 100644
--- a/files/ja/web/api/element/scroll_event/index.md
+++ b/files/ja/web/api/element/scroll_event/index.md
@@ -1,8 +1,9 @@
 ---
-title: 'Element: scroll イベント'
+title: "Element: scroll イベント"
+short-title: scroll
 slug: Web/API/Element/scroll_event
 l10n:
-  sourceCommit: 974a1b988d5e1d84b7e031a651434ae35d3d4128
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
 ---
 
 {{APIRef}}
diff --git a/files/ja/web/api/element/scrollend_event/index.md b/files/ja/web/api/element/scrollend_event/index.md
index 9920edd252a54e..1a45bc29937b86 100644
--- a/files/ja/web/api/element/scrollend_event/index.md
+++ b/files/ja/web/api/element/scrollend_event/index.md
@@ -1,12 +1,12 @@
 ---
 title: "Element: scrollend イベント"
+short-title: scrollend
 slug: Web/API/Element/scrollend_event
 l10n:
-  sourceCommit: 974a1b988d5e1d84b7e031a651434ae35d3d4128
+  sourceCommit: 458eb9af74287fd15ef8ba9f4ba9aa3423c4cac3
 ---
 
 {{APIRef}}
-{{SeeCompatTable}}
 
 **`scrollend`** イベントは、要素のスクロールが完了した時に発行されます。
 スクロールが完了したと見なされるのは、スクロール位置に保留中の更新値がなくなり、かつユーザーがジェスチャーを完了したときです。
@@ -37,13 +37,39 @@ onscrollend = (event) => {};
 
 次の例では、`scrollend` イベントを使用して、ユーザーが要素の内部をスクロールしていることを検出する方法を示します。
 
+```css hidden
+#scroll-box {
+  height: 100px;
+  width: 100px;
+  float: left;
+  overflow: scroll;
+  outline: 4px dotted;
+  margin: 4px;
+}
+
+#scroll-box-title {
+  position: fixed;
+  top: 5px;
+  left: 5px;
+  transform: translateX(0);
+}
+
+#large-element {
+  height: 200px;
+  width: 200px;
+}
+
+#output {
+  text-align: center;
+}
+```
+
 ```html
-<div
-  id="scroll-box"
-  style="overflow: scroll; height: 100px; width: 100px; float: left;">
-  <p style="height: 200px; width: 200px;">Scroll me!</p>
+<div id="scroll-box">
+  <p id="scroll-box-title">Scroll me!</p>
+  <p id="large-element"></p>
 </div>
-<p style="text-align: center;" id="output">Waiting on scroll events...</p>
+<p id="output">Waiting on scroll events...</p>
 ```
 
 ```js
@@ -59,19 +85,45 @@ element.addEventListener("scrollend", (event) => {
 });
 ```
 
-{{EmbedLiveSample("Using_scrollend_with_an_event_listener", "100%", 120)}}
+{{EmbedLiveSample("Using_scrollend_with_an_event_listener", "100%", 130)}}
 
 ### `onscrollend` イベントハンドラープロパティの使用
 
 次の例では、`onscrollend` イベントハンドラープロパティを使用して、ユーザーがスクロールしていることを検出する方法を示しています。
 
+```css hidden
+#scroll-box {
+  height: 100px;
+  width: 100px;
+  float: left;
+  overflow: scroll;
+  outline: 4px dotted;
+  margin: 4px;
+}
+
+#scroll-box-title {
+  position: fixed;
+  top: 5px;
+  left: 5px;
+  transform: translateX(0);
+}
+
+#large-element {
+  height: 200px;
+  width: 200px;
+}
+
+#output {
+  text-align: center;
+}
+```
+
 ```html
-<div
-  id="scroll-box"
-  style="overflow: scroll; height: 100px; width: 100px; float: left;">
-  <p style="height: 200px; width: 200px;">Scroll me!</p>
+<div id="scroll-box">
+  <p id="scroll-box-title">Scroll me!</p>
+  <p id="large-element"></p>
 </div>
-<p id="output" style="text-align: center;">Waiting on scroll events...</p>
+<p id="output">Waiting on scroll events...</p>
 ```
 
 ```js
@@ -87,7 +139,7 @@ element.onscrollend = (event) => {
 };
 ```
 
-{{EmbedLiveSample("Using_onscrollend_event_handler_property", "100%", 120)}}
+{{EmbedLiveSample("Using_onscrollend_event_handler_property", "100%", 130)}}
 
 ## 仕様書
 
diff --git a/files/ja/web/api/element/securitypolicyviolation_event/index.md b/files/ja/web/api/element/securitypolicyviolation_event/index.md
new file mode 100644
index 00000000000000..cfac446d38f8ea
--- /dev/null
+++ b/files/ja/web/api/element/securitypolicyviolation_event/index.md
@@ -0,0 +1,61 @@
+---
+title: "Element: securitypolicyviolation イベント"
+short-title: securitypolicyviolation
+slug: Web/API/Element/securitypolicyviolation_event
+l10n:
+  sourceCommit: bbf7f25f9cf95fb154e2740a9fdc9c02818981bf
+---
+
+{{APIRef}}
+
+**`securitypolicyviolation`** イベントは、[コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP)に違反したときに発生します。
+
+イベントはポリシーに違反した要素で発行され、バブリングします。
+通常は {{domxref("Window")}} または {{domxref("Document")}} オブジェクトのイベントハンドラーによって処理されます。
+
+ハンドラーは `onsecuritypolicyviolation` プロパティを使用するか、{{domxref("EventTarget.addEventListener()")}} を使用して割り当てることができます。
+
+> **メモ:** このイベントのハンドラーは最上位のオブジェクト（{{domxref("Window")}} や {{domxref("Document")}} など）に追加する必要があります。
+> HTML 要素にプロパティが存在する間は、要素が読み込まれるまでプロパティにイベントハンドラーを割り当てることはできません。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("securitypolicyviolation", (event) => {});
+
+onsecuritypolicyviolation = (event) => {};
+```
+
+## イベント型
+
+{{domxref("SecurityPolicyViolationEvent")}} です。{{domxref("Event")}} から継承しています。
+
+{{InheritanceDiagram("SecurityPolicyViolationEvent")}}
+
+## 例
+
+下記コードは `onsecuritypolicyviolation` グローバルイベントハンドラープロパティ、または `addEventListener()` を使用して、イベントハンドラー関数を最上位の `Window` に追加する方法を示しています（`Document` でも全く同じ手法を使用することができます）。
+
+```js
+window.onsecuritypolicyviolation = (e) => {
+  // Handle SecurityPolicyViolationEvent e here
+};
+
+window.addEventListener("securitypolicyviolation", (e) => {
+  // Handle SecurityPolicyViolationEvent e here
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [HTTP > コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP)
diff --git a/files/ja/web/api/element/touchcancel_event/index.md b/files/ja/web/api/element/touchcancel_event/index.md
index 40d7840f210576..1005ac477a054c 100644
--- a/files/ja/web/api/element/touchcancel_event/index.md
+++ b/files/ja/web/api/element/touchcancel_event/index.md
@@ -1,48 +1,66 @@
 ---
-title: 'Element: touchcancel event'
+title: "Element: touchcancel イベント"
+short-title: touchcancel
 slug: Web/API/Element/touchcancel_event
+l10n:
+  sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
 ---
 
 {{APIRef}}
 
-`touchcancel` イベントは、１つ以上のタッチポイントが実装固有の方法で中断されたときに発生します(例えば、タッチポイントが多すぎるとき)。
-
-<table class="properties">
-  <tbody>
-    <tr>
-      <th>Bubbles</th>
-      <td>Yes</td>
-    </tr>
-    <tr>
-      <th>Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th>Interface</th>
-      <td>{{domxref("TouchEvent")}}</td>
-    </tr>
-    <tr>
-      <th>Event handler property</th>
-      <td>
-        {{ DOMxRef("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
+`touchcancel` イベントは、1 つ以上のタッチポイントが実装固有の理由で中断されたとき（例えば、タッチポイントが多すぎるとき）に発生します。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("touchcancel", (event) => {});
+
+ontouchcancel = (event) => {};
+```
+
+## イベント型
+
+{{domxref("TouchEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("TouchEvent")}}
+
+## イベントプロパティ
+
+_このインターフェイスは {{domxref("UIEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
+
+- {{domxref("TouchEvent.altKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときに alt キーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.changedTouches")}} {{ReadOnlyInline}}
+  - : 前回のタッチイベントと今回のタッチイベントの間で状態が変化した、個々の接点を表すすべての {{domxref("Touch")}} オブジェクトの {{domxref("TouchList")}} です。
+- {{domxref("TouchEvent.ctrlKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときにコントロールキーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.metaKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときにメタキーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.shiftKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときにシフトキーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.targetTouches")}} {{ReadOnlyInline}}
+  - : 現在タッチ面に接触してしており、**かつ**イベントのターゲット要素と同じ要素で開始された、すべての {{domxref("Touch")}} オブジェクトの {{domxref("TouchList")}} です。
+- {{domxref("TouchEvent.touches")}} {{ReadOnlyInline}}
+  - : 対象や、変更されたステータスに関係なく、表面との現在の接点をすべて表す {{domxref("Touch")}} オブジェクトの {{domxref("TouchList")}} です。
+- {{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{ReadOnlyInline}}
+  - : イベント開始時からの角度の変化（度）。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。初期値は `0.0` です。
+- {{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{ReadOnlyInline}}
+  - : イベント開始時からの 2 つの指間の距離の変化です。イベント開始時の初期指間距離からの倍率を、浮動小数点数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 以上の値は、外側へのピンチ解除（ズームイン）を示します。初期値は `1.0` です。
 
 ## 例
 
-サンプルコードはこちらです。 [Touch events](/ja/DOM/Touch_events).
+サンプルコードは[タッチイベント](/ja/docs/Web/API/Touch_events)の専用のページにあります。
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-## ブラウザ互換性
+## ブラウザーの互換性
 
 {{Compat}}
 
 ## 参照
 
-- {{ domxref("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}
-- This event on [`Document`](/ja/docs/Web/API/Document) targets: [`touchcancel`](/ja/docs/Web/API/Document/touchcancel_event)
+- [`Document`](/ja/docs/Web/API/Document) をターゲットとしたこのイベント: [`touchcancel`](/ja/docs/Web/API/Element/touchcancel_event)
diff --git a/files/ja/web/api/element/touchend_event/index.md b/files/ja/web/api/element/touchend_event/index.md
index c432a8477f0d1f..aab7eeccdb864f 100644
--- a/files/ja/web/api/element/touchend_event/index.md
+++ b/files/ja/web/api/element/touchend_event/index.md
@@ -1,34 +1,53 @@
 ---
-title: 'Element: touchend イベント'
+title: "Element: touchend イベント"
+short-title: touchend
 slug: Web/API/Element/touchend_event
+l10n:
+  sourceCommit: 1b094710cd2816a6669ce616b6f56d0a5b25e6ad
 ---
 
 {{APIRef}}
 
 `touchend` イベントは、タッチ面から 1 つ以上のタッチ点が取り除かれた場合に発生します。
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">バブリング</th>
-      <td>あり</td>
-    </tr>
-    <tr>
-      <th scope="row">キャンセル</th>
-      <td>可</td>
-    </tr>
-    <tr>
-      <th scope="row">インターフェイス</th>
-      <td>{{domxref("TouchEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">イベントハンドラープロパティ</th>
-      <td>
-        {{ domxref("GlobalEventHandlers.ontouchend","ontouchend")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("touchend", (event) => {});
+
+ontouchend = (event) => {};
+```
+
+## イベント型
+
+{{domxref("TouchEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("TouchEvent")}}
+
+## イベントプロパティ
+
+_このインターフェイスは {{domxref("UIEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
+
+- {{domxref("TouchEvent.altKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときに alt キーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.changedTouches")}} {{ReadOnlyInline}}
+  - : 前回のタッチイベントと今回のタッチイベントの間で状態が変化した、個々の接点を表すすべての {{domxref("Touch")}} オブジェクトの {{domxref("TouchList")}} です。
+- {{domxref("TouchEvent.ctrlKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときにコントロールキーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.metaKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときにメタキーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.shiftKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときにシフトキーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.targetTouches")}} {{ReadOnlyInline}}
+  - : 現在タッチ面に接触してしており、**かつ**イベントのターゲット要素と同じ要素で開始された、すべての {{domxref("Touch")}} オブジェクトの {{domxref("TouchList")}} です。
+- {{domxref("TouchEvent.touches")}} {{ReadOnlyInline}}
+  - : 対象や、変更されたステータスに関係なく、表面との現在の接点をすべて表す {{domxref("Touch")}} オブジェクトの {{domxref("TouchList")}} です。
+- {{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{ReadOnlyInline}}
+  - : イベント開始時からの角度の変化（度）。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。初期値は `0.0` です。
+- {{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{ReadOnlyInline}}
+  - : イベント開始時からの 2 つの指間の距離の変化です。イベント開始時の初期指間距離からの倍率を、浮動小数点数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 以上の値は、外側へのピンチ解除（ズームイン）を示します。初期値は `1.0` です。
 
 ## 例
 
@@ -45,5 +64,3 @@ slug: Web/API/Element/touchend_event
 ## 関連情報
 
 - [タッチイベント](/ja/docs/Web/API/Touch_events)
-- {{ domxref("GlobalEventHandlers.ontouchend","ontouchend")}}
-- {{domxref("Document")}} をターゲットとしたこのイベント: {{domxref("Document/touchend_event", "touchend")}}
diff --git a/files/ja/web/api/element/touchmove_event/index.md b/files/ja/web/api/element/touchmove_event/index.md
index fb74d132d21071..779ac64f7fe98e 100644
--- a/files/ja/web/api/element/touchmove_event/index.md
+++ b/files/ja/web/api/element/touchmove_event/index.md
@@ -1,34 +1,53 @@
 ---
-title: 'Element: touchmove イベント'
+title: "Element: touchmove イベント"
+short-title: touchmove
 slug: Web/API/Element/touchmove_event
+l10n:
+  sourceCommit: 1b094710cd2816a6669ce616b6f56d0a5b25e6ad
 ---
 
 {{APIRef}}
 
 `touchmove` イベントは、タッチ面上で 1 つ以上のタッチ点が移動したときに発生します。
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">バブリング</th>
-      <td>あり</td>
-    </tr>
-    <tr>
-      <th scope="row">キャンセル</th>
-      <td>可</td>
-    </tr>
-    <tr>
-      <th scope="row">インターフェイス</th>
-      <td>{{domxref("TouchEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">イベントハンドラープロパティ</th>
-      <td>
-        {{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("touchmove", (event) => {});
+
+ontouchmove = (event) => {};
+```
+
+## イベント型
+
+{{domxref("TouchEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("TouchEvent")}}
+
+## イベントプロパティ
+
+_このインターフェイスは {{domxref("UIEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
+
+- {{domxref("TouchEvent.altKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときに alt キーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.changedTouches")}} {{ReadOnlyInline}}
+  - : 前回のタッチイベントと今回のタッチイベントの間で状態が変化した、個々の接点を表すすべての {{domxref("Touch")}} オブジェクトの {{domxref("TouchList")}} です。
+- {{domxref("TouchEvent.ctrlKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときにコントロールキーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.metaKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときにメタキーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.shiftKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときにシフトキーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.targetTouches")}} {{ReadOnlyInline}}
+  - : 現在タッチ面に接触してしており、**かつ**イベントのターゲット要素と同じ要素で開始された、すべての {{domxref("Touch")}} オブジェクトの {{domxref("TouchList")}} です。
+- {{domxref("TouchEvent.touches")}} {{ReadOnlyInline}}
+  - : 対象や、変更されたステータスに関係なく、表面との現在の接点をすべて表す {{domxref("Touch")}} オブジェクトの {{domxref("TouchList")}} です。
+- {{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{ReadOnlyInline}}
+  - : イベント開始時からの角度の変化（度）。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。初期値は `0.0` です。
+- {{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{ReadOnlyInline}}
+  - : イベント開始時からの 2 つの指間の距離の変化です。イベント開始時の初期指間距離からの倍率を、浮動小数点数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 以上の値は、外側へのピンチ解除（ズームイン）を示します。初期値は `1.0` です。
 
 ## 例
 
@@ -45,6 +64,4 @@ slug: Web/API/Element/touchmove_event
 ## 関連情報
 
 - [タッチイベント](/ja/docs/Web/API/Touch_events)
-- {{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}
-- {{domxref("Element/mousemove_event", "mousemove")}} と {{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}
-- {{domxref("Document")}} をターゲットとしたこのイベント: {{domxref("Document/touchmove_event", "touchmove")}}
+- {{domxref("Element/mousemove_event", "mousemove")}}
diff --git a/files/ja/web/api/element/touchstart_event/index.md b/files/ja/web/api/element/touchstart_event/index.md
index 04c2b7218f01e7..e9b2cb30ec5757 100644
--- a/files/ja/web/api/element/touchstart_event/index.md
+++ b/files/ja/web/api/element/touchstart_event/index.md
@@ -1,34 +1,53 @@
 ---
-title: 'Element: touchstart イベント'
+title: "Element: touchstart イベント"
+short-title: touchstart
 slug: Web/API/Element/touchstart_event
+l10n:
+  sourceCommit: 1b094710cd2816a6669ce616b6f56d0a5b25e6ad
 ---
 
 {{APIRef}}
 
 `touchstart` イベントは、タッチ平面上に 1 つ以上のタッチ点が配置されたときに発生します。
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">バブリング</th>
-      <td>あり</td>
-    </tr>
-    <tr>
-      <th scope="row">キャンセル</th>
-      <td>可</td>
-    </tr>
-    <tr>
-      <th scope="row">インターフェイス</th>
-      <td>{{domxref("TouchEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">イベントハンドラープロパティ</th>
-      <td>
-        {{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("touchstart", (event) => {});
+
+ontouchstart = (event) => {};
+```
+
+## イベント型
+
+{{domxref("TouchEvent")}} です。 {{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("TouchEvent")}}
+
+## イベントプロパティ
+
+_このインターフェイスは {{domxref("UIEvent")}} および {{domxref("Event")}} からプロパティを継承しています。_
+
+- {{domxref("TouchEvent.altKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときに alt キーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.changedTouches")}} {{ReadOnlyInline}}
+  - : 前回のタッチイベントと今回のタッチイベントの間で状態が変化した、個々の接点を表すすべての {{domxref("Touch")}} オブジェクトの {{domxref("TouchList")}} です。
+- {{domxref("TouchEvent.ctrlKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときにコントロールキーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.metaKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときにメタキーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.shiftKey")}} {{ReadOnlyInline}}
+  - : 論理値で、タッチイベントが発行されたときにシフトキーが押されていたかどうかを示します。
+- {{domxref("TouchEvent.targetTouches")}} {{ReadOnlyInline}}
+  - : 現在タッチ面に接触してしており、**かつ**イベントのターゲット要素と同じ要素で開始された、すべての {{domxref("Touch")}} オブジェクトの {{domxref("TouchList")}} です。
+- {{domxref("TouchEvent.touches")}} {{ReadOnlyInline}}
+  - : 対象や、変更されたステータスに関係なく、表面との現在の接点をすべて表す {{domxref("Touch")}} オブジェクトの {{domxref("TouchList")}} です。
+- {{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{ReadOnlyInline}}
+  - : イベント開始時からの角度の変化（度）。正の値は時計回りの回転を示し、負の値は反時計回りの回転を示します。初期値は `0.0` です。
+- {{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{ReadOnlyInline}}
+  - : イベント開始時からの 2 つの指間の距離の変化です。イベント開始時の初期指間距離からの倍率を、浮動小数点数で表します。1.0 未満の値は、内側へのピンチ（ズームアウト）を示します。1.0 以上の値は、外側へのピンチ解除（ズームイン）を示します。初期値は `1.0` です。
 
 ## 例
 
@@ -45,4 +64,3 @@ slug: Web/API/Element/touchstart_event
 ## 関連情報
 
 - [タッチイベント](/ja/docs/Web/API/Touch_events)
-- {{domxref("Document")}} をターゲットとしたこのイベント: {{domxref("Document/touchstart_event", "touchstart")}}
diff --git a/files/ja/web/api/element/wheel_event/index.md b/files/ja/web/api/element/wheel_event/index.md
index d97d2932e2798c..cb73f3de07b548 100644
--- a/files/ja/web/api/element/wheel_event/index.md
+++ b/files/ja/web/api/element/wheel_event/index.md
@@ -1,44 +1,67 @@
 ---
-title: 'Element: wheel イベント'
+title: "Element: wheel イベント"
+short-title: wheel
 slug: Web/API/Element/wheel_event
+l10n:
+  sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
 ---
 
 {{APIRef}}
 
-**`wheel`** イベントは、ユーザーがポインティングデバイス (通常はマウス) のホイールボタンを回転させたときに発行されます。
+**`wheel`** イベントは、ユーザーがポインティングデバイス（通常はマウス）のホイールボタンを回転させたときに発行されます。
 
 このイベントは標準外、非推奨の {{domxref("Element/mousewheel_event", "mousewheel")}} イベントを置き換えるものです。
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">バブリング</th>
-      <td>あり</td>
-    </tr>
-    <tr>
-      <th scope="row">キャンセル</th>
-      <td>可</td>
-    </tr>
-    <tr>
-      <th scope="row">インターフェイス</th>
-      <td>{{domxref("WheelEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">イベントハンドラープロパティ</th>
-      <td>
-        {{domxref("GlobalEventHandlers.onwheel", "onwheel")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
-
 > **メモ:** `wheel` イベントと {{domxref("Element/scroll_event", "scroll")}} イベントを混同しないでください。 `wheel` イベントの既定のアクションは実装固有のものであり、必ずしも `scroll` イベントを発行するわけではありません。その場合でも、ホイールイベントの `delta*` 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。したがって、スクロールの方向を取得するために、 `wheel` イベントの `delta*` プロパティに頼らないようにしてください。代わりに、 `scroll` イベント内のターゲットの {{domxref("Element.scrollLeft", "scrollLeft")}} や {{domxref("Element.scrollTop", "scrollTop")}} の値の変化を検出するようにしてください。
 
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("wheel", (event) => {});
+
+onwheel = (event) => {};
+```
+
+## イベント型
+
+{{domxref("WheelEvent")}} です。{{domxref("Event")}} を継承しています。
+
+{{InheritanceDiagram("WheelEvent")}}
+
+## イベントプロパティ
+
+_このインターフェイスには、祖先である {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, {{DOMxRef("Event")}} から継承したプロパティがあります。_
+
+- {{DOMxRef("WheelEvent.deltaX")}} {{ReadOnlyInline}}
+  - : 水平スクロール量を表す `double` を返します。
+- {{DOMxRef("WheelEvent.deltaY")}} {{ReadOnlyInline}}
+  - : 垂直方向のスクロール量を表す `double` を返します。
+- {{DOMxRef("WheelEvent.deltaZ")}} {{ReadOnlyInline}}
+  - : z 軸のスクロール量を表す `double` を返します。
+- {{DOMxRef("WheelEvent.deltaMode")}} {{ReadOnlyInline}}
+
+  - : `delta*` 値のスクロール量の単位を表す `unsigned long` を返します。指定可能な値は次の通りです。
+
+    | 定数                     | 値  | 説明                                                                                                                                                  |
+    | ---------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+    | `WheelEvent.DOM_DELTA_PIXEL` | `0x00` | `delta*` の値はピクセル単位で指定します。                                                                                                                 |
+    | `WheelEvent.DOM_DELTA_LINE`  | `0x01` | `delta*` 値は行単位で指定します。行の高さを計算するために使用する方法はブラウザーに依存します。 |
+    | `WheelEvent.DOM_DELTA_PAGE`  | `0x02` | `delta*` 値はページ単位で指定します。各マウスクリックはコンテンツのページをスクロールします。                                                                      |
+
+- {{DOMxRef("WheelEvent.wheelDelta")}} {{ReadOnlyInline}} {{deprecated_inline}}
+  - : ピクセル単位で距離を表す整数（32 ビット）を返します。
+- {{DOMxRef("WheelEvent.wheelDeltaX")}} {{ReadOnlyInline}} {{deprecated_inline}}
+  - : 水平スクロール量を表す整数を返します。
+- {{DOMxRef("WheelEvent.wheelDeltaY")}} {{ReadOnlyInline}} {{deprecated_inline}}
+  - : 垂直スクロール量を表す整数を返します。
+
 ## 例
 
 ### ホイールで要素を拡大縮小
 
-この例は、マウス (またはその他のポインティングデバイスの) ホイールを使用して要素を拡大縮小する方法を示します。
+この例は、マウス（またはその他のポインティングデバイスの）ホイールを使用して要素を拡大縮小する方法を示します。
 
 ```html
 <div>Scale me with your mouse wheel.</div>
@@ -68,14 +91,14 @@ function zoom(event) {
   scale += event.deltaY * -0.01;
 
   // Restrict scale
-  scale = Math.min(Math.max(.125, scale), 4);
+  scale = Math.min(Math.max(0.125, scale), 4);
 
   // Apply scale transform
   el.style.transform = `scale(${scale})`;
 }
 
 let scale = 1;
-const el = document.querySelector('div');
+const el = document.querySelector("div");
 el.onwheel = zoom;
 ```
 
@@ -86,7 +109,7 @@ el.onwheel = zoom;
 イベントハンドラーは {{domxref("EventTarget/addEventListener", "addEventListener()")}} メソッドを使用して設定することもできます。
 
 ```js
-el.addEventListener('wheel', zoom);
+el.addEventListener("wheel", zoom, { passive: false });
 ```
 
 ## 仕様書
@@ -100,4 +123,4 @@ el.addEventListener('wheel', zoom);
 ## 関連情報
 
 - {{domxref("WheelEvent")}}
-- [Document: `wheel` イベント](/ja/docs/Web/API/Document/wheel_event)
+- [Document: `wheel` イベント](/ja/docs/Web/API/Element/wheel_event)
diff --git a/files/ja/web/api/htmlbaseelement/index.md b/files/ja/web/api/htmlbaseelement/index.md
index 5c3917ef37a80a..a86b71e13bfcac 100644
--- a/files/ja/web/api/htmlbaseelement/index.md
+++ b/files/ja/web/api/htmlbaseelement/index.md
@@ -1,6 +1,8 @@
 ---
 title: HTMLBaseElement
 slug: Web/API/HTMLBaseElement
+l10n:
+  sourceCommit: 7e6e5f5d4c1c984af3d4ebf9399042d19eccea1e
 ---
 
 {{APIRef("HTML DOM")}}
@@ -9,16 +11,16 @@ slug: Web/API/HTMLBaseElement
 
 {{InheritanceDiagram}}
 
-## プロパティ
+## インスタンスプロパティ
 
 _親である {{domxref("HTMLElement")}} からプロパティを継承しています。_
 
 - {{domxref("HTMLBaseElement.href")}}
-  - : {{domxref("DOMString")}} で、 HTML の [`href`](/ja/docs/Web/HTML/Element/base#href) 属性を反映し、文書内の相対 URL の基底 URL を保持します。
+  - : 文字列で、 HTML の [`href`](/ja/docs/Web/HTML/Element/base#href) 属性を反映し、文書内の相対 URL の基底 URL を保持します。
 - {{domxref("HTMLBaseElement.target")}}
-  - : {{domxref("DOMString")}} で、 HTML の [`target`](/ja/docs/Web/HTML/Element/base#target) 属性を反映し、要素にターゲットとなる参照先が指定されなかった場合の既定のターゲットとなる閲覧コンテキストまたはフレームを保持します。
+  - : 文字列で、 HTML の [`target`](/ja/docs/Web/HTML/Element/base#target) 属性を反映し、要素にターゲットとなる参照先が指定されなかった場合の既定のターゲットとなる閲覧コンテキストまたはフレームを保持します。
 
-## メソッド
+## インスタンスメソッド
 
 _固有のメソッドはありません。親である {{domxref("HTMLElement")}} からメソッドを継承しています。_