use class="hidden" not style="display:none"

26 files changed, 62 insertions, 63 deletions

diff --git a/files/ja/web/api/canvasrenderingcontext2d/arc/index.html b/files/ja/web/api/canvasrenderingcontext2d/arc/index.html
index 56f9db6d6b..643e43fc8c 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/arc/index.html
+++ b/files/ja/web/api/canvasrenderingcontext2d/arc/index.html
@@ -58,7 +58,7 @@ ctx.stroke();
 
 <p>以下のコードを書き替えると、Canvasの中身がどう変わるか実際に確かめられます。</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code" name="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
@@ -104,7 +104,7 @@ window.addEventListener("load", drawCanvas);
 
 <p>以下の例は異なった形を描くことで、<code>arc()()</code>メソッドは何ができるのかを示します。</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="HTML_2">HTML</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
diff --git a/files/ja/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/ja/web/api/canvasrenderingcontext2d/clearrect/index.html
index 4f09a2bc91..11d53cfe2b 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/clearrect/index.html
+++ b/files/ja/web/api/canvasrenderingcontext2d/clearrect/index.html
@@ -63,7 +63,7 @@ ctx.clearRect(10, 10, 100, 100);
 
 <p>以下のコードを編集して、変更がどのように適用されるか試してみてください。</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/ja/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html b/files/ja/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html
index 4d0135e6fa..db5875c709 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html
+++ b/files/ja/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html
@@ -50,7 +50,7 @@ ctx.drawFocusIfNeeded(button);
 
 <p>下のコードを編集すると、変更がリアルタイムにcanvasに反映されます:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;
diff --git a/files/ja/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/ja/web/api/canvasrenderingcontext2d/fillrect/index.html
index 1424ba870b..9839c130e1 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/fillrect/index.html
+++ b/files/ja/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -49,7 +49,7 @@ ctx.fillRect(10, 10, 100, 100);
 
 <p>以下のコードを編集して、変更がどのように適用されるか試してみてください。</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/ja/web/api/canvasrenderingcontext2d/filltext/index.html b/files/ja/web/api/canvasrenderingcontext2d/filltext/index.html
index 87823bbb20..6098495f82 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/filltext/index.html
+++ b/files/ja/web/api/canvasrenderingcontext2d/filltext/index.html
@@ -55,7 +55,7 @@ ctx.fillText("Hello world", 50, 100);
 
 <p>以下のコードを編集すると、canvas の変更個所をその場で確認できます:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code" name="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/ja/web/api/canvasrenderingcontext2d/lineto/index.html b/files/ja/web/api/canvasrenderingcontext2d/lineto/index.html
index 6929a63253..2bd2f6ea4f 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/lineto/index.html
+++ b/files/ja/web/api/canvasrenderingcontext2d/lineto/index.html
@@ -45,7 +45,7 @@ ctx.stroke();
 
 <p>下のコードを編集して、変更が canvas に直に反映されることを確認してください。</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/ja/web/api/canvasrenderingcontext2d/rect/index.html b/files/ja/web/api/canvasrenderingcontext2d/rect/index.html
index 651320c13c..dff79b53ed 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/rect/index.html
+++ b/files/ja/web/api/canvasrenderingcontext2d/rect/index.html
@@ -66,7 +66,7 @@ ctx.fill();
 
 <p>下のコードを変更してみよう:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/ja/web/api/canvasrenderingcontext2d/stroke/index.html b/files/ja/web/api/canvasrenderingcontext2d/stroke/index.html
index 83ea761abf..3405ee1221 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/stroke/index.html
+++ b/files/ja/web/api/canvasrenderingcontext2d/stroke/index.html
@@ -41,7 +41,7 @@ ctx.stroke();
 
 <p>下のコードを編集して、変更が canvas に直に反映されることを確認してください。</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.html
index 173e65157b..e664a5f6bf 100644
--- a/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.html
+++ b/files/ja/web/api/canvasrenderingcontext2d/stroketext/index.html
@@ -58,7 +58,7 @@ ctx.strokeText("Hello world", 50, 100);
 
 <p>以下のコードを編集すると、canvas の変更個所をその場で確認できます:</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code" name="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/ja/web/api/htmltableelement/index.html b/files/ja/web/api/htmltableelement/index.html
index 2fb98c6ee0..180f2bd96c 100644
--- a/files/ja/web/api/htmltableelement/index.html
+++ b/files/ja/web/api/htmltableelement/index.html
@@ -187,4 +187,4 @@ translation_of: Web/API/HTMLTableElement
 <ul>
  <li>{{HTMLElement("table")}} - <code>HTMLTableElement</code> インタフェースを持つ HTML 要素</li>
 </ul>
-<p><span id="cke_bm_222C" style="display: none;"> </span></p>
+<p><span id="cke_bm_222C" class="hidden"> </span></p>
diff --git a/files/ja/web/api/keyboardevent/keycode/index.html b/files/ja/web/api/keyboardevent/keycode/index.html
index d080637e20..840a2dd38a 100644
--- a/files/ja/web/api/keyboardevent/keycode/index.html
+++ b/files/ja/web/api/keyboardevent/keycode/index.html
@@ -359,7 +359,7 @@ translation_of: Web/API/KeyboardEvent/keyCode
    <th scope="row"><code>"KeyD"</code></th>
    <td colspan="3" rowspan="1"><code>0x44 (68)</code></td>
    <td colspan="3" rowspan="1"><code>0x44 (68)</code></td>
-   <td colspan="3" rowspan="1"><code>0x44 (68)<span style="display: none;"> </span></code></td>
+   <td colspan="3" rowspan="1"><code>0x44 (68)<span class="hidden"> </span></code></td>
    <td colspan="3" rowspan="1"><code>0x44 (68)</code></td>
    <td colspan="3" rowspan="1"><code>0x44 (68)</code></td>
    <td colspan="3" rowspan="1"><code>0x44 (68)</code></td>
diff --git a/files/ja/web/api/trackevent/index.html b/files/ja/web/api/trackevent/index.html
index dbfefe98c3..0ed9a8d0ee 100644
--- a/files/ja/web/api/trackevent/index.html
+++ b/files/ja/web/api/trackevent/index.html
@@ -20,7 +20,7 @@ translation_of: Web/API/TrackEvent
 <p><code>TrackEvent</code> に基づくイベントは、常に次のメディアトラックリストの種類のいずれかに送信されます。</p>
 
 <ul>
- <li><span style="display: none;"> </span>動画トラックに関連するイベントは、常に {{domxref("HTMLMediaElement.videoTracks")}} にある {{domxref("VideoTrackList")}} に送信されます。</li>
+ <li><span class="hidden"> </span>動画トラックに関連するイベントは、常に {{domxref("HTMLMediaElement.videoTracks")}} にある {{domxref("VideoTrackList")}} に送信されます。</li>
  <li>音声トラックに関連するイベントは、常に {{domxref("HTMLMediaElement.audioTracks")}} で指定された {{domxref("AudioTrackList")}} に送信されます。</li>
  <li>テキストトラックに影響を与えるイベントは、{{domxref("HTMLMediaElement.textTracks")}} によって示される {{domxref("TextTrackList")}} オブジェクトに送信されます。</li>
 </ul>
diff --git a/files/ja/web/api/xrreferencespace/index.html b/files/ja/web/api/xrreferencespace/index.html
index 12222a3ab7..0acca51c9f 100644
--- a/files/ja/web/api/xrreferencespace/index.html
+++ b/files/ja/web/api/xrreferencespace/index.html
@@ -37,7 +37,7 @@ translation_of: Web/API/XRReferenceSpace
 <p><em>親インターフェイスである {{domxref("XRSpace")}} から継承されたメソッド（現時点では、ない）に加えて、<code>XRReferenceSpace</code> は {{domxref("EventTarget")}} からメソッドを継承します。 <code>XRReferenceSpace</code> は、次のメソッドも提供します。</em></p>
 
 <dl>
- <dt>{{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}}<span style="display: none;"> </span></dt>
+ <dt>{{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}}<span class="hidden"> </span></dt>
  <dd>メソッドを呼び出したものと同じ型（つまり、<code>XRReferenceSpace</code> または {{domxref("XRBoundedReferenceSpace")}}）の新しい参照空間オブジェクトを作成して返します。 新しい参照空間を使用して、メソッドが呼び出されたオブジェクトの参照空間から別の座標空間に座標を変換できます。 これは、レンダリング中にオブジェクトを配置したり、3D 空間でビューアーの位置や向きを変更するときに必要な変換を実行したりするのに役立ちます。</dd>
 </dl>
 
diff --git a/files/ja/web/css/border-bottom-left-radius/index.html b/files/ja/web/css/border-bottom-left-radius/index.html
index e1821163f7..e6805d19db 100644
--- a/files/ja/web/css/border-bottom-left-radius/index.html
+++ b/files/ja/web/css/border-bottom-left-radius/index.html
@@ -89,7 +89,7 @@ border-bottom-left-radius: inherit;</pre>
   <tr>
    <td style="padding: 1.5em;">
    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 40px; width: 100px; height: 100px;">
-   <div style="display: none;">.</div>
+   <div class="hidden">.</div>
    </div>
    </td>
    <td>境界として使用されている円弧
@@ -103,7 +103,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 20px; width: 100px; height: 100px;">
-   <div style="display: none;">.</div>
+   <div class="hidden">.</div>
    </div>
    </td>
    <td>境界として使用されている楕円の弧
@@ -117,7 +117,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 100px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>ボックスは正方形。境界として使用されている円弧
@@ -131,7 +131,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 200px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>ボックスは正方形ではない。境界として使用されている楕円の弧
@@ -145,7 +145,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="border: black 3px double; border-bottom-left-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>背景色は境界で切り取られる
diff --git a/files/ja/web/css/border-bottom-right-radius/index.html b/files/ja/web/css/border-bottom-right-radius/index.html
index a757c6aa39..090de6ee4a 100644
--- a/files/ja/web/css/border-bottom-right-radius/index.html
+++ b/files/ja/web/css/border-bottom-right-radius/index.html
@@ -83,7 +83,7 @@ border-bottom-right-radius: inherit;</pre>
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 40px; width: 100px; height: 100px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>境界として使用されている円弧
@@ -97,7 +97,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 20px; width: 100px; height: 100px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>境界として使用されている楕円の弧
@@ -111,7 +111,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 100px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>ボックスは正方形。境界として使用されている円弧
@@ -125,7 +125,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 200px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>ボックスは正方形ではない。境界として使用されている楕円の弧
@@ -139,7 +139,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="border: black 3px double; border-bottom-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>背景色は境界で切り取られる
diff --git a/files/ja/web/css/border-top-right-radius/index.html b/files/ja/web/css/border-top-right-radius/index.html
index e207a4c5cf..c522635fbb 100644
--- a/files/ja/web/css/border-top-right-radius/index.html
+++ b/files/ja/web/css/border-top-right-radius/index.html
@@ -111,7 +111,7 @@ div {
   <tr>
    <td style="padding: 1.5em;">
     <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40%; width: 100px; height: 200px;">
-    <div style="display: none;">.</div>
+    <div class="hidden">.</div>
     </div>
    </td>
    <td>ボックスは正方形ではない。境界として使用されている楕円の弧
diff --git a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html b/files/ja/web/css/css_background_and_borders/border-image_generator/index.html
index fa4aa48cdf..8ce5bab6e9 100644
--- a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html
+++ b/files/ja/web/css/css_background_and_borders/border-image_generator/index.html
@@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 ---
 <p>このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
 
 <h3 id="HTML_Content">HTML Content</h3>
diff --git a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html
index 7ec4cab13e..4ce39890a7 100644
--- a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html
+++ b/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html
@@ -10,7 +10,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
 ---
 <p>このツールは CSS3 の {{cssxref("border-radius")}} の効果を生成するために使用することができます。</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
 
 <h3 id="HTML_Content" name="HTML_Content">HTML Content</h3>
diff --git a/files/ja/web/css/css_colors/color_picker_tool/index.html b/files/ja/web/css/css_colors/color_picker_tool/index.html
index 7375e00046..958178331b 100644
--- a/files/ja/web/css/css_colors/color_picker_tool/index.html
+++ b/files/ja/web/css/css_colors/color_picker_tool/index.html
@@ -14,7 +14,7 @@ tags:
   - 色選択
 translation_of: Web/CSS/CSS_Colors/Color_picker_tool
 ---
-<div style="display: none;">
+<div class="hidden">
 <h2 id="ColorPicker_Tool" name="ColorPicker_Tool">色選択ツール</h2>
 
 <h3 id="HTML">HTML</h3>
diff --git a/files/ja/web/css/css_transitions/using_css_transitions/index.html b/files/ja/web/css/css_transitions/using_css_transitions/index.html
index d01fba6005..e1fcbc6e7e 100644
--- a/files/ja/web/css/css_transitions/using_css_transitions/index.html
+++ b/files/ja/web/css/css_transitions/using_css_transitions/index.html
@@ -44,7 +44,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
  <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-duration: 0.5s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -109,7 +109,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-duration: 1s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -174,7 +174,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-duration: 2s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -239,7 +239,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-duration: 4s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -308,7 +308,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: ease</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -371,7 +371,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: linear</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -434,7 +434,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: step-end</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -497,7 +497,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-timing-function: steps(4, end)</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -564,7 +564,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 0.5s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -636,7 +636,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 1s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -708,7 +708,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 2s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -780,7 +780,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
  <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
  <p><code>transition-delay: 4s</code></p>
 
- <div style="display: none;">
+ <div class="hidden">
  <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
diff --git a/files/ja/web/css/filter/index.html b/files/ja/web/css/filter/index.html
index 5bb245abe5..1ec80548b3 100644
--- a/files/ja/web/css/filter/index.html
+++ b/files/ja/web/css/filter/index.html
@@ -116,7 +116,7 @@ img {
 <pre class="brush: css notranslate">filter: blur(5px)
 </pre>
 
-<div id="blur_example" style="display: none;">
+<div id="blur_example" class="hidden">
 <pre class="brush: html notranslate">  &lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -213,7 +213,7 @@ table.standard-table td {
   &lt;/filter&gt;
 &lt;/svg&gt;</pre>
 
-<div id="brightness_example" style="display: none;">
+<div id="brightness_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -308,7 +308,7 @@ table.standard-table td {
 &lt;/svg&gt;
 </pre>
 
-<div id="contrast_example" style="display: none;">
+<div id="contrast_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -415,7 +415,7 @@ table.standard-table td {
 &lt;/svg&gt;
 </pre>
 
-<div id="shadow_example" style="display: none;">
+<div id="shadow_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -539,7 +539,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: grayscale(100%)</pre>
 
-<div id="grayscale_example" style="display: none;">
+<div id="grayscale_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -622,7 +622,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre>
 
-<div id="huerotate_example" style="display: none;">
+<div id="huerotate_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -708,7 +708,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: invert(100%)</pre>
 
-<div id="invert_example" style="display: none;">
+<div id="invert_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -791,7 +791,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: opacity(50%)</pre>
 
-<div id="opacity_example" style="display: none;">
+<div id="opacity_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -872,7 +872,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: saturate(200%)</pre>
 
-<div id="saturate_example" style="display: none;">
+<div id="saturate_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -952,7 +952,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: sepia(100%)</pre>
 
-<div id="sepia_example" style="display: none;">
+<div id="sepia_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
@@ -1035,7 +1035,7 @@ table.standard-table td {
 
 <pre class="brush: css notranslate">filter: contrast(175%) brightness(103%)</pre>
 
-<div id="combination_example" style="display: none;">
+<div id="combination_example" class="hidden">
 <pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
diff --git a/files/ja/web/css/text-decoration-style/index.html b/files/ja/web/css/text-decoration-style/index.html
index 5473f5af42..394ad6a371 100644
--- a/files/ja/web/css/text-decoration-style/index.html
+++ b/files/ja/web/css/text-decoration-style/index.html
@@ -60,7 +60,7 @@ text-decoration-style: unset;
 
 <h2 id="Examples" name="Examples">例</h2>
 
-<pre class="brush: css" style="display: none;">.example {
+<pre class="brush: css" class="hidden">.example {
        -moz-text-decoration-line: underline;
        -moz-text-decoration-style: wavy;
        -moz-text-decoration-color: red;
diff --git a/files/ja/web/css/transition-delay/index.html b/files/ja/web/css/transition-delay/index.html
index 9094d98eb4..3e47ffa76a 100644
--- a/files/ja/web/css/transition-delay/index.html
+++ b/files/ja/web/css/transition-delay/index.html
@@ -56,7 +56,7 @@ transition-delay: unset;
 <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 0.5s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -123,7 +123,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 1s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -190,7 +190,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 2s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -257,7 +257,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 4s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
diff --git a/files/ja/web/css/transition-duration/index.html b/files/ja/web/css/transition-duration/index.html
index c5bb4f0bbf..2aa297c4ee 100644
--- a/files/ja/web/css/transition-duration/index.html
+++ b/files/ja/web/css/transition-duration/index.html
@@ -54,7 +54,7 @@ transition-duration: unset;
 <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 0.5s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -119,7 +119,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 1s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -184,7 +184,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 2s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
@@ -249,7 +249,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 4s</code></p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
   &lt;div class="box"&gt;Lorem&lt;/div&gt;
 &lt;/div&gt;
diff --git a/files/ja/web/css/using_css_custom_properties/index.html b/files/ja/web/css/using_css_custom_properties/index.html
index 0008b66d3e..6571a2ed14 100644
--- a/files/ja/web/css/using_css_custom_properties/index.html
+++ b/files/ja/web/css/using_css_custom_properties/index.html
@@ -145,7 +145,7 @@ translation_of: Web/CSS/Using_CSS_custom_properties
 }
 </pre>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush:html">&lt;div&gt;
     &lt;div class="one"&gt;&lt;/div&gt;
     &lt;div class="two"&gt;Text &lt;span class="five"&gt;- more text&lt;/span&gt;&lt;/div&gt;
diff --git a/files/ja/web/html/element/input/number/index.html b/files/ja/web/html/element/input/number/index.html
index 8177c9f00f..26e7df6a71 100644
--- a/files/ja/web/html/element/input/number/index.html
+++ b/files/ja/web/html/element/input/number/index.html
@@ -315,7 +315,6 @@ input:valid+span:after {
         &lt;input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="例 1.78" required&gt;
         &lt;span class="validity"&gt;&lt;/span&gt;
     &lt;/div&gt;
-    &lt;div class="feetInputGroup" style="display: none;"&gt;
         &lt;span&gt;あなたの身長を入力してください — &lt;/span&gt;
         &lt;label for="feet"&gt;フィート:&lt;/label&gt;
         &lt;input id="feet" type="number" name="feet" min="0" step="1"&gt;
@@ -334,7 +333,7 @@ input:valid+span:after {
 
 <p>これまでの記事ですでに見てきた属性の多くを使用していることがわかります。センチメートル単位のメートル値を受け入れるため、 <code>step</code> の値を <code>0.01</code> に設定して、 <em>1.78</em> のような値が無効とされないようにしました。また、その入力欄のプレイスホルダーも提供しました。</p>
 
-<p>最初はフィートとインチの入力欄を <code>style="display: none;"</code> を使用して非表示にしているため、既定はメートルでの入力です。</p>
+<p>最初はフィートとインチの入力欄を <code>class="hidden"</code> を使用して非表示にしているため、既定はメートルでの入力です。</p>
 
 <p>次に、 CSS に進みます。これは、以前に見た検証のスタイル付けととても良く似ています。ここで注目するところはありません。</p>