- ベストアンサー
floatタグの使い方について
- floatタグの使い方について解説します
- floatタグを使用することで、要素を左右に配置することができます
- 要素の回り込みや隙間の開け方についても詳しく説明します
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
floatは回り込ませるプロパティではありません。ある条件の場合にはそのように見えるだけです。 http://mb.blog7.fc2.com/blog-entry-61.html http://d.hatena.ne.jp/ku__ra__ge/20120418/p2 フロートは簡単にいうと、本来の流れから切り離して右や左に寄せる感じです。 コップに水を入れ氷を入れます。氷はフロートです。コップの中で右に寄せると、水を押しのけ右にいくでしょう。でも氷がない場所は（氷の下）は水で埋まります。通常のmarginは接するコップです。氷は切り離されているので自身になります。 最初のソースでは、まずフロートで切り離して左にleftが寄ります。次にrightの右に間を空けたい記述をmargin-leftで行ったようです。margin-leftは切り離され邪魔をしているleftからの距離ではなく、その親（コップ）、からの距離を指定します。もしこれが、left側からmargin-rightをする場合は、10pxとなります。切り離されたブロックの周りに10ｐｘあけるということです。 2つ目のソース.「rightのmargin-left:350px;を10pxにして.rightにもfloat:left;とかけるとうまく回り込みます。」 今、切り離されたブロックが2つあります。ブロック自身の空きを10pxとしているので空きが10pxあきます。 2つとも切り離されていますので、ソースや表示の大原則、左から右に、上から下に解釈され、1つ目のフロートの右側に2つ目のフロートが入るスペースがなくなるまで左から右に（float:leftの場合）上から下につめられます。回り込んでいるのではなく、浮いたものが順番に並んでいる状態です。 左右は上記です、上下はfloatは切り離されているので（浮いている？）高さが持てません。今は割愛しますが、floatを回り込ませるプロパティなんて考えていると、つっかえたり、高さが持てない（親が自動で広がらない。例：バックグラウンドがなぜか思うように効かない）ことがわからず苦労しますよ。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
こういうときに役に立つテクニックですが。 どこかに *{border:solid 1px red;} p{border-color:green;}html{border-color:yellow;}body{border-color:blue;} とでも書いてみることです。 すこし長い回答になりますので、腰をすえて読んでください。 まず、floatですが、これは本来の目的は、文中の挿絵などの周囲に本文を回りこませるためのプロパティ(タグじゃないです!!)です。 ＞rightにもfloat:left;とかけるとうまく回り込みます。 のような使い方をしばしば見受けますが、その使い方は誤りです。なぜなら、本当に本文中で回りこませたい挿絵が登場するとclearなどが破綻するからです。 <div class="right"> <div class="figure" style="width:100px;float:right"> <p><img></p> </div> <p>本文</p> <h2 style="clear:right">次章</h2> <p>本文</p> </div> ができないでしょう。 1) ここで、<div class="right"></div>内に長文を入れてみると、なぜmargin-right:350px;なのかの意味が意味がわかります。 このmargin-rightは、<div class="left"></div>のとの間隔を決めているのではなく、<div class="left"></div>を置く場所を確保すると同時に、テキストの回り込みを防ぐ役割もしているのです。 これは、次のソースで理解できるでしょう。 _________________________ここから <div class="left"> <p>古代の七不思議1</p> </div> <div class="left"> <p>古代の七不思議1</p> </div> <div class="right"> <p>古代の七不思議2</p> <p>これが正解のようで、クラスleftの右にクラスrightが回り込みます。</p> <p>しかし僕にはクラスrightに記述したmargin-left:350px;がよく分かりません。</p> <p>divタグでボックスを二つ創ってあるので、.leftにfloat:left;の記述をして</p> <p>.rightが回り込んで.rightにmargin-left:10px;記述とかで隙間が開くのだと思っていました。</p> <p>ちなみに.rightのmargin-left:350px;を10pxにして.rightにもfloat:left;とかけるとうまく回り込みます。これもよくわかりません。</p> </div> ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで に対して、 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから .left{color:#000000; background-color:#cccc99; padding:10px; margin-left:10px; margin-right:10px;/* この値も変えてみる */ width:300px; float:left; } .right{color:#000000; background-color:#cccc99; padding:10px; margin-left:0;/* この値を増やしてみる。 */ width:100%;/* widthの値を減らしていく */ } ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで マージンの詳細については「10. 視覚整形モデル詳細 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html )」を参照してください。 この場合、.left{margin-right:10px;}で隙間を空けることができます。 最後に・・・・ このHTMLのマークアップも、スタイルシートの書き方も（テストですから条件があるのでしょうが）、本来のマークアップやスタイルシートの書き方からすると、明らかにおかしい部分があります。 ・class名は、文書(の意味的な)構造を補完するためにつけます。rightやleftとつけてしまうと将来、左右を入れ替えたり、小さなディスプレイ用に縦に並べようとしたときにあわなくなります。 →「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 HTML4.01やHTML5的な考え方を取り入れて書くと <body> <div class="header"> </div> <div class="section"> <h2>本文見出し</h2> <p>記事</p> <p>記事</p> <div class="contentTable"> <ol></ol> </div> <div class="aside"> <h3>余談</h3> <p>本文と直接関係のない記事</p> </div> </div> <div class="footer"> </div> </body> とかになるべきです。 そして、 div.section{position:relative;min-hight:400px;} div.section h2,div.section p{margin:0 21%;} div.section div.contentTable, div.section div.aside{ position:absolute;top:0; width:20%; height:100%; } div.section div.contentTable{left:0;} div.section div.aside{right:0;} div.section div.contentTable h2, div.section div.contentTable p, div.section div.aside h2, div.section div.aside p{margin:0;} とか・・・ HTMLが <div class="section"> <div class="section"> <p>古代の七不思議1</p> </div> <div class="section"> <p>古代の七不思議2</p> </div> <div class="section"> <p>古代の七不思議3</p> </div> </div> のように並列な構造でしたら、あなたがおっしゃるように div.section div.section{width:300px;float:left;height:400px;overflow:auto;} のほうが、良いでしょう。--ユーザーのディスプレイ幅に合わせてコマ数が変化します。 ★このようにCSS2では、セレクタを書くとき基点となるセレクタを書くことになっています。 .leftではなく、div.leftとか。ただし*.leftについては、それを省略して書くことが出来ます。 →5.3 全称セレクタ（Universal selector） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#universal-selector ) これはつける癖をつけておいたほうが良いです。すなわち div.left{}ないし*.left{}--前者は詳細度0,0,2,0、後者は0,0,1,0です。目的によって使い分ける。単に、.leftは、*.leftとみなされる。
お礼
回答ありがとうございます。 回答をくださった方皆さん同じことを説明してくださったかと思うのですが、 No3の方が私には分かりやすかったのでその方をベストアンサーにさせていただきます。 でもご回答本当にありがとうございました。 細かなテクニックまで教えていただきありがとうございます。 今の私では理解が及ばないところもありますが、今後の参考にさせていただきます。 丁寧にありがとうございました。
- t_ohta
- ベストアンサー率38% (5238/13705)
.leftにfloat:left;を指定すると<div class="left">は浮き上がって上のレイヤーに行って左に寄るので、次の<div class="right">は<div class="left">の下に入り込んでしまいます。 なのでmargin-left:350px;で<div class="left">の右側に表示されるよう移動させるのです。 <div class="left">と<div class="right">の両方にfloat:left;を指定すると同じレイヤーで並ぶのでrightにmargin-left:10px;を指定するだけで意図された通りの表示になります。
お礼
回答ありがとうございます。 回答をくださった方皆さん同じことを説明してくださったかと思うのですが、 No3の方が私には分かりやすかったのでその方をベストアンサーにさせていただきます。 でもご回答本当にありがとうございました。 参考にさせていただきます。
お礼
ご回答ありがとうございます。 私には一番イメージ、理解しやすく説明していただけたので ベストアンサーにさせていただきます。 なるほど！と思いました。 本当にありがとうございます。