CSS Positioned Layout のプロパティの文書を更新

- 2021/11/06 時点の英語版に同期

1 files changed, 103 insertions, 121 deletions

diff --git a/files/ja/web/css/clear/index.md b/files/ja/web/css/clear/index.md
index 8b3e1dab51..f6d0022729 100644
--- a/files/ja/web/css/clear/index.md
+++ b/files/ja/web/css/clear/index.md
@@ -3,39 +3,39 @@ title: clear
 slug: Web/CSS/clear
 tags:
   - CSS
-  - CSS プロパティ
   - CSS 位置指定レイアウト
-  - Reference
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.clear
 translation_of: Web/CSS/clear
 ---
-<div>{{CSSRef}}</div>
-
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>clear</code></strong> プロパティは、要素が先行する<a href="/ja/docs/Web/CSS/float">浮動</a>要素の下に移動 (clear) する必要があるかどうかを設定します。 <code>clear</code> プロパティは、浮動要素と非浮動要素のどちらにも適用されます。</p>
+{{CSSRef}}
 
-<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>
+ **`clear`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素をその前にある[浮動](/ja/docs/Web/CSS/float)要素の下に移動 (clear) する必要があるかどうかを設定します。`clear` プロパティは、浮動要素と非浮動要素のどちらにも適用されます。
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+{{EmbedInteractiveExample("pages/css/clear.html")}}
 
-<p>非浮動ブロックに適用された場合は、その要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">境界の辺</a>が、関係するすべての浮動要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#margin-area">マージンの辺</a>より下まで下に移動します。非浮動ブロックの上マージンは折り畳まれます。</p>
+浮動でないブロックに適用された場合は、その要素の[境界の辺](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area)が、関係するすべての浮動要素の[マージンの辺](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#margin-area)より下まで移動します。浮動でないブロックの上マージンは折り畳まれます。
 
-<p>一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。</p>
+一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。
 
-<p>解除されることに関連する浮動要素は、その前の浮動要素と<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">同一のブロック整形コンテキスト</a>内の先行する浮動要素です。</p>
+解除されることに関連する浮動要素は、その前の浮動要素と[同一のブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)内の先行する浮動要素です。
 
-<div class="note">
-<p><strong>メモ:</strong> 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に clear を設定しなければなりません。これは <strong>clearfix</strong> と呼ばれます。また、実現方法のひとつとして、置換 {{cssxref("::after")}} <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a> に <code>clear</code> を使います。</p>
-
-<pre class="brush: css">#container::after {
-  content: "";
-  display: block;
-  clear: both;
-}
-</pre>
-</div>
+> **Note:** 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に clear を設定しなければなりません。これは **clearfix** と呼ばれます。また、実現方法のひとつとして、置換 {{cssxref("::after")}} [擬似要素](/ja/docs/Web/CSS/Pseudo-elements) に `clear` を使う方法があります。
+>
+> ```css
+> #container::after {
+>   content: "";
+>   display: block;
+>   clear: both;
+> }
+> ```
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 clear: none;
 clear: left;
 clear: right;
@@ -46,46 +46,51 @@ clear: inline-end;
 /* グローバル値 */
 clear: inherit;
 clear: initial;
+clear: revert;
 clear: unset;
-</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>要素は先行するフロートと切り離されず、下に移動しません。</dd>
- <dt><code>left</code></dt>
- <dd>要素は先行する <em>左の </em>フロートと切り離され、下に移動します。</dd>
- <dt><code>right</code></dt>
- <dd>要素は先行する<em> 右の</em> フロートと切り離され、下に移動します。</dd>
- <dt><code>both</code></dt>
- <dd>要素は先行する<em> 左右両方の </em>フロートと切り離され、下に移動します。</dd>
- <dt><code>inline-start</code></dt>
- <dd>要素は、先行する<em>包含ブロックの始端側</em>のフロートの下に移動することを示すキーワードです。これは ltr 表記では<em>左側</em>、rtl 表記では<em>右側</em>のフロートです。</dd>
- <dt><code>inline-end</code></dt>
- <dd>要素は、先行する<em>包含ブロックの終端側</em>のフロートの下に移動することを示すキーワードです。これは ltr 表記では<em>右側</em>、rtl 表記では<em>左側</em>のフロートです。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+```
+
+### 値
+
+- `none`
+  - : 要素は先行する浮動要素と切り離されず、下に移動しません。
+- `left`
+  - : 要素は先行する*左*の浮動要素と切り離され、下に移動します。
+- `right`
+  - : 要素は先行する*右*の浮動要素と切り離され、下に移動します。
+- `both`
+  - : 要素は先行する*左右両方*の浮動要素と切り離され、下に移動します。
+- `inline-start`
+  - : 要素は、先行する*包含ブロックの先頭側*の浮動要素の下に移動することを示すキーワードです。これは左書きでは*左側*、右書きでは*右側*の浮動要素です。
+- `inline-end`
+  - : 要素は、先行する*包含ブロックの末尾側*の浮動要素の下に移動することを示すキーワードです。これは左書きでは*右側*、右書きでは*左側*の浮動要素です。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式定義
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="clear-left" name="clear-left">clear: left</h3>
+### clear: left
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
-  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
-  &lt;p class="left"&gt;This paragraph clears left.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="left">This paragraph clears left.</p>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.wrapper{
+```css
+.wrapper{
   border:1px solid black;
   padding:10px;
 }
@@ -109,24 +114,26 @@ clear: unset;
 p {
   width: 50%;
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('clear-left','100%','250') }}</p>
+{{ EmbedLiveSample('clear_left','100%','250') }}
 
-<h3 id="clear-right" name="clear-right">clear: right</h3>
+### clear: right
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
-  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
-  &lt;p class="right"&gt;This paragraph clears right.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="right">This paragraph clears right.</p>
+</div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.wrapper{
+```css
+.wrapper{
   border:1px solid black;
   padding:10px;
 }
@@ -149,24 +156,27 @@ p {
 }
 p {
   width: 50%;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('clear-right','100%','250') }}</p>
+{{ EmbedLiveSample('clear_right','100%','250') }}
 
-<h3 id="clear-both" name="clear-both">clear: both</h3>
+### clear: both
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
-  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
-  &lt;p class="both"&gt;This paragraph clears both.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="both">This paragraph clears both.</p>
+</div>
+```
 
-<h4 id="CSS_3">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.wrapper{
+```css
+.wrapper{
   border:1px solid black;
   padding:10px;
 }
@@ -189,47 +199,19 @@ p {
 }
 p {
   width: 45%;
-}</pre>
-
-<p>{{ EmbedLiveSample('clear-both','100%','300') }}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
-   <td>{{Spec2('CSS Logical Properties')}}</td>
-   <td>値 <code>inline-start</code> および <code>inline-end</code> を追加</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>重要な変更はないが、細部が明瞭になった</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.clear")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="CSS/box_model">CSS 基本ボックスモデル</a></li>
-</ul>
+}
+```
+
+{{ EmbedLiveSample('clear_both','100%','300') }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS 基本ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)