- ベストアンサー
“段組み”or“float”、どちらが原因？
こんにちは。 段組みを使い、左にメニューバー、右にメインコンテンツを配置しています。 メニューバーはfloat:left;を使って左に寄せています。 そこで問題なのですが、メニューが増えてくると、メニューバーの長さがだんだん長くなってきます。 そして、新たに一つのメニューを追加したとき、右隣りにあるメインコンテンツが下にずれたのです。 試しに、さらにメニューを追加するとまた下がります。 明らかに両者が干渉しています。 自分としては、段組みかfloatに原因があると思っていますが実際はどうなのでしょうか。 解決する方法をご存知の方、どうぞよろしくお願いします。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
#4への回答です。 CSSでは、宣言ブロック（{...}の中身）には基本的にスタイルだけしか書けないので、その中にdiv:afterのようなセレクタを含めることができません（入れ子構造が不可能）。 ですので、例えばdiet1にclearfixを適用する場合は div.diet1:after{ content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } div.diet1 { display: inline-block; } という風な感じになります。 同じクラス名は同一ページ内に何回出てきてもいいので、clearfixしたい要素にのみ指定すれば良いと思います（上の例ではclearfixしたい要素にclass="diet1"を付加）。そういう意味で、後からclearfixしたことがすぐに分かるようにクラス名を工夫してみたらいいと思います（例えばcfxとか）。それで、たとえばdiet1にはその他のスタイルを書いておいて、 <div class="diet1 cfx"> ..... </div> などと書けば、便利ではないでしょうか。
その他の回答 (5)
- suzuko
- ベストアンサー率38% (1112/2922)
#1です。検証しました。確かに、IE７ではおっしゃる現象が起きますね。 現在、段組を「manu」＋「main」とされて 「manu」にはfloat: left; width: 200px; 「main」にはpadding-left: 200px; なっていますが、これではどうしてもレイアウトの崩れが出来ます。 「page「manu」＋「main」」と大枠でくくり、 「manu」には、float: left; width: 200px; 「main」には、float: right; padding-left: 0px; width: ***px; にして、 「page」には、width: (***＋200＋α)px; と、少し大きめを指定されてはいかがですか？ もしくは 「manu」には、width: 200px; 「main」には、float: right; padding-left: 215px; width: ***px; として、「page「title」「manu」＋「main」」とするか。もちろん、「page」のwidthは(***＋200＋15＋α)ですが。 前者の方が、お勧めではあります。後者はプラウザによっては崩れます。 その他にも数カ所気になる点が・・・・ xhtml宣言をされるのならば、正規の表示をした方が良いでしょうね。「/」等の閉じタグは入れましょう。<br />など。 厳密に出来ない場合は「Transitional」の方がいいかと・・・・ 「manu」や「main」はhtmlに１度だけ使うので、id扱いの方で、他、classのdiv限定もない方がいいような。 お節介ついでに ******css****** body{ background-color:#ffffdd; margin-right: 0px; margin-left: 0px; margin-top: 0px; width:800px; } #page { width: 800px; } #title { background-color: #808080; padding-bottom:0px; margin-bottom:0px; padding-top:0px; padding-left:0px; height: 60px; } h1 { margin:0px ; padding:0.5em 0.3em 0.2em 0.3em; font-size: 14pt; font-family:"ＭＳ Ｐゴシック",Sans-Serif; position: absolute; top: 30px; } h2 { font-size:11pt; padding:0.5em 0px 0.5em 0.5em ; margin:0.3em 0.3em 0.5em 0.5em; position:absolute; top:70px font-family:"ＭＳ Ｐゴシック",Sans-Serif; } #menu { float: left; width: 200px; padding: 0px 0px 1em 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; font-size: 13pt; font-family:"ＭＳ Ｐゴシック",Sans-Serif; } .category { padding-left:2em; font-family:"ＭＳ Ｐゴシック", Sans-Serif; font-size: 14pt; margin-top:0px; } #menu ul{ margin:30px 5px 10px 5px; } #menu li{ list-style-type: none; margin-top:15px; padding:0.5em; border-bottom: solid 1px #808080; } #main { float: right; width: 580px; margin: 0px; padding: 0px 0px 0px 0px; font-size: 10.5pt; font-family:"ＭＳ Ｐゴシック",sans-serif; border-left: solid 6px #000000; border-right: solid 6px #000000; } .diet1-picture { float:left; margin-left:18px; } .diet1-point1 { font-size:15pt; margin-right:35px; } .diet1-details-top { font-size:13pt; } .clr { clear:both; } .diet2-picture { float:left; margin-left:18px; } .diet2-point2 { font-size:15pt; margin-right:35px; } .diet2-details-top { font-size:13pt; } ******html****** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html ; charset=Shift_JIS"> <title>やさしいダイエット法</title> <link rel="stylesheet" type="text/css" href="test-css.css"> <style type="text/css"> </style> </head> <body> <div id="title"> <h1><a href="index.html">やさしいダイエット法</a></h1> <h2>誰でも簡単にできるダイエット法を紹介しています。</h2> </div> <div id="page"> <div id="menu"> <p class="category">Ｍｅｎｕ</p> <ul> <li><a href="1.html">方法1</a></li> <li><a href="2.html">方法2</a></li> <li><a href="3.html">方法3</a></li> <li><a href="4.html">方法4</a></li> <li><a href="5.html">方法5</a></li> </ul> </div> <div id="main"> <img src="diet1.jpg" width="200" height="200" class="diet1-picturediet1"> <div class="diet1-point1"> <p>ポイント１</p> <br /> <p class="diet1-details-top"> まずは運動から始めましょう。無理なく痩せることが大事。 </p> </div> <br /> <hr size="2" width="95%" class="clr"> <img src="diet2.jpg" width="200" height="200" class="diet2-picture"> <div> <p class="diet2-point2">ポイント2</p> <br /> <p class="diet2-details-top"> もちろん食事も大切です。きちんと3食をとるのが基本。 </p> </div> <br /> <hr size="2" width="95%" class="clr"> </div> </body> </html>
お礼
ご回答ありがとうございます。 menuが200pxで、mainをmargin-left:200px;にするとぴったりだと思うのですが、これだとレイアウトが崩れるのですね。 とりあえずmenuとmainを大枠でくくっておきました。 そしてレイアウトが崩れる可能性があるのならとりあえずmainもfloat:right;にしておきます。
- twinhourse
- ベストアンサー率45% (5/11)
すみません、#3です。 先ほどの方法では、画像がはみ出してしまいますね。 自分的にはメニューとメインを新たなdivで括って、メインを右にフロートして…ということを考えるのですが、やや煩雑だし変更箇所が多いので、ここではやめておきます。 代わりにclearfixを考えてみてはいかがでしょうか。diet1やdiet2に設定すればフロートされた画像をきちんと内包してくれます。
お礼
ご回答ありがとうございます。 cssに次のように記載しましたが、画像がはみ出してしまいます。 記載方法が間違っているのでしょうか？ div.diet1{ div:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } div { display: inline-block; } }
- twinhourse
- ベストアンサー率45% (5/11)
突然失礼します。 メインコンテンツが下にずれる件ですが、brやhrを使うのではなく、クラス名がdiet1やdiet2（どちらもdietなどで統一してみては？）のdivに対して border-bottom:1px solid #000; などを設定してみてはどうでしょうか。そうすればclearを使うこともなく、メニューの影響もなくなり、hrの横に空白があくこともなくなると思います。少なくともFirefox3では成功しました。
お礼
ご回答いただきありがとうございます。 brやhrではなく、border-bottomを使うとメインコンテンツが下にずれるという現象が解消されました。 しかし、画像がはみ出すという新たな問題もあります。 そこはmarginやbrを使って何とかなるのですが、それだと余白などの位置関係がブラウザによって変わってきます。 No.4でも参考URLをいただいているので明日試してみます。 そして、新たな発見がありました。 borderが欠けるということがなくなりました。 欠けているところは画像の右の説明文の終わり、つまりfloatに対して clear:both;を使っているところです。 しかし、アドバイスいただいた方法でmargin-bottomを代わりに使うことによって解消されました。 だだし、clearfixというものをご紹介いただいたので、これでボーダーが欠けなければ言うことなしですね。
- suzuko
- ベストアンサー率38% (1112/2922)
^^; ＃１です。 補足、読みました。なさりたい事はわかりました。書かれている方法もほぼ正解です。 ですので、どこが悪くてどのプラウザでおっしゃる現象が起きるのか、検証するためにも、ソースを示して下さい。（補足されているは、方法だけですよ）CSSに何を書き、HTMLにどう指示しているかです。
お礼
ご回答ありがとうございます。 もうひとつ問題があります。 メインの左右のborderが欠けるのです。 欠ける場所はメインの画像の右にある説明文が終わったところです。 CSSは分けて載せます。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html ; charset=Shift_JIS"> <title>やさしいダイエット法</title> <link rel="stylesheet" type="text/css" href="test-css.css"> <style type="text/css"> </style> </head> <body> <div class="title"> <h1><a href="index.html">やさしいダイエット法</a></h1> <h2>誰でも簡単にできるダイエット法を紹介しています。</h2> </div> <div class="menu"> <p class="category">Ｍｅｎｕ</p> <ul> <li><a href="1.html">方法1</a></li> <li><a href="2.html">方法2</a></li> <li><a href="3.html">方法3</a></li> <li><a href="4.html">方法4</a></li> <li><a href="5.html">方法5</a></li> </ul> </div> <div class="main"> <div class="diet1"> <div class=diet1-picture> <img src="diet1.jpg" width="200" height="200" class="diet1"> </div> <div class="diet1-point1"> ポイント１ <br> <p class="diet1-details-top"> まずは運動から始めましょう。無理なく痩せることが大事。 </p> </div> </div> <br class="clr"> <hr size="2" width="95%"> <div class="diet2"> <div class=diet2-picture> <img src="diet2.jpg" width="200" height="200" class="diet2"> </div> <div class="diet2-point2"> ポイント2 <br> <p class="diet2-details-top"> もちろん食事も大切です。きちんと3食をとるのが基本。 </p> </div> </div> <br class="clr"> <hr size="2" width="95%"> </div> </body> </html>
補足
body{ background-color:#ffffdd; margin-right: 0px; margin-left: 0px; margin-top: 0px; width:800px; } div.title { background-color: #808080; padding-bottom:0px; margin-bottom:0px; padding-top:0px; padding-left:0px; height: 60px; } div.title h1 { margin:0px ; padding:0.5em 0.3em 0.2em 0.3em; font-size: 14pt; font-family:"ＭＳ Ｐゴシック",Sans-Serif; position: absolute; top: 30px; } div.title h2{ font-size:11pt; padding:0.5em 0px 0.5em 0.5em ; margin:0.3em 0.3em 0.5em 0.5em; position:absolute; top:70px font-family:"ＭＳ Ｐゴシック",Sans-Serif; } div.menu{ float: left; width: 200px; padding: 0px 0px 1em 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; font-size: 13pt; font-family:"ＭＳ Ｐゴシック",Sans-Serif; } div.menu p.category{ padding-left:2em; font-family:"ＭＳ Ｐゴシック", Sans-Serif; font-size: 14pt; margin-top:0px; } div.menu ul{ margin:30px 5px 10px 5px; } div.menu li{ list-style-type: none; margin-top:15px; padding:0.5em; border-bottom: solid 1px #808080; } div.main { margin-top:0px; margin-left:200px; margin-right:0px; padding: 0px 0px 0px 0px; font-size: 10.5pt; font-family:"ＭＳ Ｐゴシック",sans-serif; border-left: solid 6px #000000; border-right: solid 6px #000000; } div.diet1-picture{ float:left; margin-left:18px; } div.diet1-point1{ font-size:15pt; margin-right:35px; } p.diet1-details-top{ font-size:13pt; } br.clr{ clear:both; } div.diet2-picture{ float:left; margin-left:18px; } div.diet2-point2{ font-size:15pt; margin-right:35px; } p.diet2-details-top{ font-size:13pt; }
- suzuko
- ベストアンサー率38% (1112/2922)
それだけの情報では、誰も何もいえませんよ。 ソースを補足するか、URLを載せてください。
お礼
ご回答ありがとうございます。 わかりました。 サイトは作成段階でまだ公開はしていません。 ソースについての情報を検討してみます。
補足
補足します。 メニューバーはfloatで左、メインは右になっています。 メニューバーは「ul」と「li」でリストになっています。 メインは、画像をfloatで左に置き、右はその画像の説明となっています。（つまり、メイン内にもfloatを使っています） HTMLでは、画像の説明が終わったところで<br class="○○">とし、 CSSでそのクラスに対してclear:both;としてその画像については終わっています。 そして、紹介している画像はいくつかあり、それを<hr>で区切りながら縦に並べています。 ちょうど新しいメニューを追加しようとしている高さのところに最初の画像の下にある区切り線<hr>があります。 そして、メニューを追加すると、この区切り線<hr>が下がります。 以上のような現象です。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ご回答いただきありがとうございます。 clearfixでうまく画像を囲むことができました。 また、これによってIEで起こっていた「横のボーダーが欠ける」という現象も解消しました。 とりあえずこれで2つの問題は解決できました。