From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/clear/index.html | 237 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 237 insertions(+) create mode 100644 files/ja/web/css/clear/index.html (limited to 'files/ja/web/css/clear/index.html') diff --git a/files/ja/web/css/clear/index.html b/files/ja/web/css/clear/index.html new file mode 100644 index 0000000000..1c90db6387 --- /dev/null +++ b/files/ja/web/css/clear/index.html @@ -0,0 +1,237 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - CSS プロパティ + - CSS 位置指定レイアウト + - Reference +translation_of: Web/CSS/clear +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/clear.html")}}
+ + + +

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

+ +

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

+ +

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

+ +
+

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

+ +
#container::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+
+ +

構文

+ +
/* キーワード値 */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* グローバル値 */
+clear: inherit;
+clear: initial;
+clear: unset;
+
+ +

値

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

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

clear: left

+ +

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>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+
+ +

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

+ +

clear: right

+ +

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>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+ +

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

+ +

clear: both

+ +

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>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+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")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf