- ベストアンサー
CSSを勉強中の初心者が、要素を分割する方法とfloatの必要性について質問
- CSSを勉強中の初心者が、ページの要素を分割する方法についての質問です。特に、floatの必要性について疑問を持っています。
- floatを使って要素を分割するとき、片方のクラスにのみfloatを指定すれば良いのかどうかについての質問です。
- 実際に試した結果、片方のクラスにのみfloatを指定すると少し位置がずれることがありますが、問題がないのかどうかわからないという疑問があります。
- makiko3300
- お礼率4% (2/48)
- HTML
- 回答数3
- ありがとう数12
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
実際そういう方法もありです。が おそらく作っているhtmlはmainが先にきてmenuが後に来ているのではないかと推測しているのですが これがmenuが先でmainが後だと、段落ががくんと落ちます。 両方にfloatがかけてあれば、HTML側でどちらが先に来ていてもきちんと左右に配分されます。 業務でコーディングをしていると h1～h6の見出しの順番を順守するために 今回の例でいうならmenuとmainの順番を入れ替えるということはよくあるので… あまり正確な回答ではないかもしれませんが、御一考まで。
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
> 実際にやってみるとmenuが少し下に位置にずれますが、 ずれることがダメだから、両方にfloatを入れるのでは？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞ページを段落にわけたいので、以下のようなクラスを作りました。 段落ではないですね。 何事も「用語」には定義がありますから、それを外すと意思疎通ができなくなります。 段落は<p>(paragraph)です。 この場合は、段組み、枠組み、あるいは欄組みですね。 floatは、本来の目的はある文章の中で画像など周囲に文字を回り込ませるための物で、デザインには使わないほうが無難です。単純なので、初心者向けの説明サイトでは本当によく使われますが、たとえば左右に脚注などをfloatで配置して、中央の本文内で画像をfloatさせようとすると行き詰まりますし、float段は本体より長くなると、おかしなことになります。 また、 .menu{width:160px} .main{float:right;width:525px} の様な記述もよく見かけるセレクタの指定方法ですが、詳細度は10ですし、body内にひとつしかなclassというのもおかしい。 <body> <div class="menue"> <p class="menue"> のようにclassはクラスで複数かけるから意味があるのに、.menueでは両方に適用されてしまう。 <body> <div id="Top"> <h1>見出し</h1> <p>段落</p> <p>段落</p> <p>段落</p> <ol id="nav"> <li>項</li> <li>項</li> </ol> <div class="note"> <h3>見出し</h3> 以下省略 というマークアップにでもして、div#Topをposition:rarative;で配置してから、div.noteやol#navをabsoluteで絶対配置するほうが良いでしょう。floatはmain内で使えるように予約しておく。
