質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

1509閲覧

floatプロパティを設定した次の要素が、回り込んで下に入るときの条件

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/08/15 00:25

前提・実現したいこと

float leftを設定した要素をA、その次の要素をBとしたときに
Aの下にBを回り込ませたい。

発生している問題・エラーメッセージ

上のことをしたいとき、下に回り込む場合と回り込まない場合があり
違いがわかりません。

最初の2つのコードは今回問題が発生しているセットで、
次の2つのコードは下に回り込むような、僕が期待している動作をするセットです。

該当のソースコード

HTML5

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>3カラムレイアウトサンプル</title> 6<link rel="stylesheet" href="style2.css" media="all"> 7</head> 8 9<body> 10<div id="wrap"> 11 <header id="header">ヘッダー領域<br>ヘッダー領域<br>ヘッダー領域</header> 12 13 <div id="contents"> 14 <main id="main"> 15 <p>メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。</p> 16 <p>メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。</p> 17 <p>メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。メインコンテンツが入ります。</p> 18 <!-- /#main --></main> 19 <aside id="side"> 20 <p>サブコンテンツが入ります。サブコンテンツが入ります。サブコンテンツが入ります。サブコンテンツが入ります。サブコンテンツが入ります。サブコンテンツが入ります。サブコンテンツが入ります。サブコンテンツが入ります。</p> 21 <!-- /#side--></aside> 22 <!-- /#contents --></div> 23 24 <nav id="navi"> 25 <ul> 26 <li>メニュー項目</li> 27 <li>メニュー項目</li> 28 <li>メニュー項目</li> 29 <li>メニュー項目</li> 30 <li>メニュー項目</li> 31 <li>メニュー項目</li> 32 <li>メニュー項目</li> 33 </ul> 34 <!-- /#navi --></nav> 35 <footer id="footer">フッター領域<br>フッター領域<br>フッター領域</footer> 36</div> 37</body> 38</html> 39

CSS3

1@charset "UTF-8"; 2/* CSS Document */ 3 4*{ 5 margin:0; 6 padding:0; 7} 8ul { 9 list-style: none; 10} 11 12 13#wrap { 14 width: 800px; 15 margin: 30px auto; 16 background-color: beige; 17} 18 19#header { 20 background-color: lightpink; 21} 22 23#side { 24 background-color: skyblue; 25 width: 200px; 26} 27 28#main { 29 background-color: palegreen; 30 width: 360px; 31 float: left; 32} 33 34 35#navi { 36 background-color: plum; 37 width: 200px; 38} 39 40/* ここでfloat: left;にすることで、 41HTMLにおいて次の要素のnavi(cssではplum色)が 42オレンジの下に入って見えなくなることを期待しています。 */ 43#contents { 44 background-color: orange; 45 border: 3px solid orange; 46 width: 580px; 47 float: left; 48} 49 50#footer { 51 background-color: gold; 52} 53

HTML5

1<!DOCTYPE html> 2 3<html> 4 <head> 5 <link rel="stylesheet" href="style.css"> 6 </head> 7 8 <body> 9 <div class="yellow"></div> 10 <div class="green"></div> 11 <div class="pink"></div> 12 </body> 13 14</html>

CSS3

1* { 2 margin: 0px; 3 padding: 0px; 4} 5 6/* 黄色の下に緑が回り込むことがブラウザで確認できて、 7こういう動きを、最初のHTML、CSSのセットでも期待しています。 */ 8.yellow { 9 background-color: yellow; 10 width: 200px; 11 height: 250px; 12 float: left; 13} 14 15.green { 16 background-color: green; 17 width: 250px; 18 height: 200px; 19 border: 3px solid black; 20} 21 22.pink { 23 background-color: pink; 24 width: 300px; 25 height: 100px; 26}

補足情報(FW/ツールのバージョンなど)

ブラウザ: chrome

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2019/08/15 00:30

>Aの下にBを回り込ませたい。 → どの要素のことですか?
退会済みユーザー

退会済みユーザー

2019/08/15 00:34

AやBというのは一般的な表現なだけで、具体的にコードの中で現れるわけではないです。 コードをご覧になれば分かるかと思いますが、最初のCSSファイルにおいてはcontentsがA、 naviがBにあたります。
yoshinavi

2019/08/15 00:48

回り込んでいます。
退会済みユーザー

退会済みユーザー

2019/08/15 00:52

「回り込む」とは、コード中のコメントのように「naviを表すピンク色がcontentsを表すオレンジ色の下に回り込んでブラウザではピンク色が見えなくなる」という意味ですか?
yoshinavi

2019/08/15 00:59 編集

floatの回り込みで、テキストまでを要素の下に隠すようにはできません。 #naviにテキストがあるので、見えなくなることはありません。どうしても隠したい場合は、positionで調整すると良いかと思います。 -追記しました。-
退会済みユーザー

退会済みユーザー

2019/08/15 00:59

テキストのあるなしが理由というのは、yoshinaviさんの経験から知ったことなのか、理屈的にそうなのかどちらなのでしょうか。もし理屈的にそうなら教えていただけるとありがたいのですが。。
guest

回答1

0

ベストアンサー

もし理屈的にそうなら教えていただけるとありがたいのですが。

参考になりますか?
MDN:float

投稿2019/08/15 01:06

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/08/15 01:14

yoshinaviさんがおっしゃったような、中身があれば云々の話は書かれていないので、参考になるとは思えませんでした
yoshinavi

2019/08/15 01:22

簡単に言えば、floatはテキストを回りこせるためのプロパティです。その特性を利用して、ボックスレイアウトに以前は使用していましたが、flex等の出現により、本来の使い方に使用するのが良いと思います。 中身の有無について分かりやすく言えば、テキストはインライン要素。しかし、そのままでは書けないので、何かしらの(div、p等)ブロック要素に納めます。 ブロック要素同士は、先の要素がfloatされていれば重なりますが、インライン要素(テキスト)は重ならず、引き寄せられるように回り込むだけになります。
yoshinavi

2019/08/15 01:26

MDNの内容は、最初は少しわかりにくい場合があるかもしれませんが、根拠になる先であり、慣れれば、簡潔に要点を纏めて説明がキチンとされていることが多いのが分かるかと思います。
退会済みユーザー

退会済みユーザー

2019/08/15 01:39

詳しい説明ありがとうございます。 最後の「インライン要素(テキスト)は・・・、引き寄せられるように回り込む」ということは、上2つのコードについてwrapが800pxに対してcontentsが580px、naviが200pxで合わせると800pxより小さいので、contents(オレンジ色)をfloat leftするとcontentsの右にnavi(ピンク色)が回り込むという理解でいいんでしょうか。 ブラウザで見ると回り込まずにcontentsの下にnaviがいるのですが。
yoshinavi

2019/08/15 01:51

スミマセン。今はPCの前にいなく、確認出来るまで、お待ち願います。
退会済みユーザー

退会済みユーザー

2019/08/15 02:32

お世話をかけます、よろしくお願いします。
yoshinavi

2019/08/16 01:08

ご返事遅くなりスミマセン。先程ようやく戻れました。 (^^;) >ブラウザで見ると回り込まずにcontentsの下にnaviがいるのですが。 → #naviがブロック要素のためです。質問者さんが提示している「下側のコード」と同じになっているはずです。 ちなみに、ulとliがあるのでインライン要素を持つ「display: inline-block;」にしてあげると右に並びます。 「display: inline;」だと、インライン要素がないので、中身(liのテキスト部分)が飛び出す形になりますが、右に並びます。
退会済みユーザー

退会済みユーザー

2019/08/17 11:15

いえいえ、とんでもないです。返信ありがとうございます。 「質問者さんが提示している「下側のコード」と同じになっているはずです。」というのは、下側のコードでyellowクラスに float: left; を設定するとgreenクラスが回り込まずにyellowクラスの下にいる、ということでしょうか?もしそうなら、それは違ってて、確認すると黄色の下に回り込んで緑色は一部しか見えなくなります。 (※ 下というのは、平面としてと、層としてがあると思いますが、「contentsの下にnaviがいる」は平面としてで、「黄色の下に緑色がいる」は層としてです。) 層として、naviがcontentsの下にいかずに、greenがyellowの下にいくのはtextの有無というのは、そういうものだと割り切りますが、何が「下側のコードと同じになっている」のかが分からないので、教えていただきたいです。 よろしくお願いします。
yoshinavi

2019/08/17 22:48

>何が「下側のコードと同じになっている」のかが分からない → 私の「回り込む」の説明不足で混乱させている部分がありスミマセン。 上側の「contentsの下側にnaviがいる」も、下側の「yellowの下側にgreenがいる」も全く同じ動作です。 各要素「contents」と「navi」の位置関係も、「yellow」と「green」の位置関係も同じです。 「回り込む」のインライン要素は、文字通り、先の要素が「float:left」なら、右に回り込もうとしますが、ブロック要素なら、先の要素が浮いているので、隙間が空いているところへ単純に「上へ」行き、floatした要素の「下へ」潜り込む形になります。 ※ブロック要素は基本的に親要素いっぱいに広がる性質があるため、右や左に並ぶとの概念ではなく、いっぱいいっぱいの要素同士なので、上下動作が基本になります。 navi部分とgreen部分の違いは幅の設定のみです。navi部分はそこにテキストがありますので、その中で右に回り込もうとしますが、幅の制限があるため、下に並んでいるように見えるだけです。
yoshinavi

2019/08/17 22:59 編集

ブラウザ(Chrome等)のデベロッパーツールで、navi部分の幅を600px、900pxで試してみてください。また、各要素を確認してみてください。どの位置で、どのような大きさになっているのかが分かるかと思います。 -追記しました-
退会済みユーザー

退会済みユーザー

2019/08/18 03:22

じっくり考えます。 丁寧な返信、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問