From ce31153ae37ba4bb6559cea6bd1b0f99754f4311 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 7 Nov 2021 13:13:32 +0900 Subject: CSS Positioned Layout のプロパティの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/06 時点の英語版に同期 --- files/ja/web/css/clear/index.md | 224 ++++++++++++++++++---------------------- 1 file changed, 103 insertions(+), 121 deletions(-) (limited to 'files/ja/web/css/clear/index.md') 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 --- -
{{CSSRef}}
- -

CSS の clear プロパティは、要素が先行する浮動要素の下に移動 (clear) する必要があるかどうかを設定します。 clear プロパティは、浮動要素と非浮動要素のどちらにも適用されます。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/clear.html")}}
+ **`clear`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素をその前にある[浮動](/ja/docs/Web/CSS/float)要素の下に移動 (clear) する必要があるかどうかを設定します。`clear` プロパティは、浮動要素と非浮動要素のどちらにも適用されます。 - +{{EmbedInteractiveExample("pages/css/clear.html")}} -

非浮動ブロックに適用された場合は、その要素の境界の辺が、関係するすべての浮動要素のマージンの辺より下まで下に移動します。非浮動ブロックの上マージンは折り畳まれます。

+浮動でないブロックに適用された場合は、その要素の[境界の辺](/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)より下まで移動します。浮動でないブロックの上マージンは折り畳まれます。 -

一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。

+一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。 -

解除されることに関連する浮動要素は、その前の浮動要素と同一のブロック整形コンテキスト内の先行する浮動要素です。

+解除されることに関連する浮動要素は、その前の浮動要素と[同一のブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)内の先行する浮動要素です。 -
-

メモ: 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に clear を設定しなければなりません。これは clearfix と呼ばれます。また、実現方法のひとつとして、置換 {{cssxref("::after")}} 疑似要素 に clear を使います。

- -
#container::after {
-  content: "";
-  display: block;
-  clear: both;
-}
-
-
+> **Note:** 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に clear を設定しなければなりません。これは **clearfix** と呼ばれます。また、実現方法のひとつとして、置換 {{cssxref("::after")}} [擬似要素](/ja/docs/Web/CSS/Pseudo-elements) に `clear` を使う方法があります。 +> +> ```css +> #container::after { +> content: ""; +> display: block; +> clear: both; +> } +> ``` -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 clear: none;
 clear: left;
 clear: right;
@@ -46,46 +46,51 @@ clear: inline-end;
 /* グローバル値 */
 clear: inherit;
 clear: initial;
+clear: revert;
 clear: unset;
-
- -

値

- -
-
none
-
要素は先行するフロートと切り離されず、下に移動しません。
-
left
-
要素は先行する 左の フロートと切り離され、下に移動します。
-
right
-
要素は先行する 右の フロートと切り離され、下に移動します。
-
both
-
要素は先行する 左右両方の フロートと切り離され、下に移動します。
-
inline-start
-
要素は、先行する包含ブロックの始端側のフロートの下に移動することを示すキーワードです。これは ltr 表記では左側、rtl 表記では右側のフロートです。
-
inline-end
-
要素は、先行する包含ブロックの終端側のフロートの下に移動することを示すキーワードです。これは ltr 表記では右側、rtl 表記では左側のフロートです。
-
- -

形式文法

+``` + +### 値 + +- `none` + - : 要素は先行する浮動要素と切り離されず、下に移動しません。 +- `left` + - : 要素は先行する*左*の浮動要素と切り離され、下に移動します。 +- `right` + - : 要素は先行する*右*の浮動要素と切り離され、下に移動します。 +- `both` + - : 要素は先行する*左右両方*の浮動要素と切り離され、下に移動します。 +- `inline-start` + - : 要素は、先行する*包含ブロックの先頭側*の浮動要素の下に移動することを示すキーワードです。これは左書きでは*左側*、右書きでは*右側*の浮動要素です。 +- `inline-end` + - : 要素は、先行する*包含ブロックの末尾側*の浮動要素の下に移動することを示すキーワードです。これは左書きでは*右側*、右書きでは*左側*の浮動要素です。 + +## 公式定義 + +{{cssinfo}} + +## 形式定義 {{csssyntax}} -

例

+## 例 -

clear: left

+### clear: left -

HTML

+#### 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>
-
+```html +
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

+

This paragraph clears left.

+
+``` -

CSS

+#### CSS -
.wrapper{
+```css
+.wrapper{
   border:1px solid black;
   padding:10px;
 }
@@ -109,24 +114,26 @@ clear: unset;
 p {
   width: 50%;
 }
-
+``` -

{{ EmbedLiveSample('clear-left','100%','250') }}

+{{ EmbedLiveSample('clear_left','100%','250') }} -

clear: right

+### clear: right -

HTML

+#### 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>
-
+```html +
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

+

This paragraph clears right.

+
+``` -

CSS

+#### CSS -
.wrapper{
+```css
+.wrapper{
   border:1px solid black;
   padding:10px;
 }
@@ -149,24 +156,27 @@ p {
 }
 p {
   width: 50%;
-}
+} +``` -

{{ EmbedLiveSample('clear-right','100%','250') }}

+{{ EmbedLiveSample('clear_right','100%','250') }} -

clear: both

+### clear: both -

HTML

+#### 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>
-
+```html +
+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.

+

This paragraph clears both.

+
+``` -

CSS

+#### CSS -
.wrapper{
+```css
+.wrapper{
   border:1px solid black;
   padding:10px;
 }
@@ -189,47 +199,19 @@ p {
 }
 p {
   width: 45%;
-}
- -

{{ EmbedLiveSample('clear-both','100%','300') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}値 inline-start および inline-end を追加
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}重要な変更はないが、細部が明瞭になった
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.clear")}}

- -

関連情報

- - +} +``` + +{{ EmbedLiveSample('clear_both','100%','300') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 基本ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) -- cgit v1.2.3-54-g00ecf