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/float/index.html | 229 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 229 insertions(+) create mode 100644 files/ja/web/css/float/index.html (limited to 'files/ja/web/css/float') diff --git a/files/ja/web/css/float/index.html b/files/ja/web/css/float/index.html new file mode 100644 index 0000000000..8f0737bbba --- /dev/null +++ b/files/ja/web/css/float/index.html @@ -0,0 +1,229 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/float +--- +
{{CSSRef}}
+ +

float は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。要素はウェブページの通常のフローから外れますが、 (絶対位置指定 とは対照的に) フローの一部であり続けます。

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

浮動要素 (floating element) とは、float の計算値が none 以外の要素です。

+ +

float は暗黙的にブロックレイアウトの使用を意味しており、 {{cssxref("display")}} の計算値を変更する場合があります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
指定値計算値
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
inline-flexflex
inline-gridgrid
その他変更されません
+ +
注: JavaScript で {{domxref("HTMLElement.style")}} オブジェクトのメンバーとしてこのプロパティを参照する場合、最近のブラウザーは float に対応していますが、古いブラウザーは cssFloat という綴りになり、 Internet Explorer のバージョン 8 以前では、 styleFloat を使用しています。これは、ダッシュ区切りの CSS 名は DOM メンバーとしてキャメルケースで綴るというルールの例外でした (これは "float" が JavaScript の予約語であるためで、 "class" を "className" とする必要があったり、 <label> の "for" を "htmlFor" とする必要があったりするのと同じです)。
+ +

構文

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

float プロパティは、以下の値からひとつのキーワードを選択して指定します。

+ +

値

+ +
+
left
+
要素は、必ずその包含ブロックの左側に浮動します。
+
right
+
要素は、必ずその包含ブロックの右側に浮動します。
+
none
+
要素は決して浮動しません。
+
inline-start
+
要素は、必ずその包含ブロックの始端側に浮動します。 ltr 表記では左側、 rtl 表記では右側になります。
+
inline-end
+
要素は、必ずその包含ブロックの終端側に浮動します。 ltr 表記では右側、 rtl 表記では左側になります。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

浮動要素の位置をどのように決めるか

+ +

上述のとおり、要素は浮動すると、文書の通常のフローから外されます (ただし、フローの一部であり続けます)。浮動要素は、包含ブロックか他の浮動要素の辺に触れるまで、左側または右側に移動させられます。

+ +

この例では、3つの赤い正方形があります。このうち2つは左側に浮動しており、1つは右側に浮動しています。2つめの「左の」赤い正方形は、1つめの正方形の右に置かれていることに注意してください。正方形を追加していくと、包含ボックスが埋まるまではその右側に詰め込まれていきますが、その後は次の行に回り込みます。

+ +

浮動要素は、少なくともその中に含まれるもっとも高い子の浮動要素と同じ高さでなければなりません。ここでは親を width: 100% かつ浮動要素として、その子の浮動要素を配置するのに十分な高さを確保し、親の幅を保証することで、子孫を浮動解除する必要がなくなるようにしています。

+ +

HTML

+ +
<section>
+  <div class="left">1</div>
+  <div class="left">2</div>
+  <div class="right">3</div>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
+     lectus vulputate. Donec id iaculis velit. Aliquam vel
+     malesuada erat. Praesent non magna ac massa aliquet tincidunt
+     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
+</section>
+
+ +

CSS

+ +
section {
+  border: 1px solid blue;
+  width: 100%;
+  float: left;
+}
+
+div {
+  margin: 5px;
+  width: 50px;
+  height: 150px;
+}
+
+.left {
+  float: left;
+  background: pink;
+}
+
+.right {
+  float: right;
+  background: cyan;
+}
+ +

結果

+ +

{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}

+ +

浮動の解除

+ +

あるアイテムを浮動要素の下へ強制的に移動したいことがあるでしょう。例えば、段落は浮動要素に隣接させたいが、見出しは強制的に単独の行にしたい場合があるでしょう。この例については {{cssxref("clear")}} をご覧ください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}値 inline-start および inline-end を追加
{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#float', 'float')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

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