HTML+CSSで段組みレイアウトを作成した際の崩れる現象の解決方法

2011/05/20 23:31

このQ&Aのポイント

HTML+CSSで段組みレイアウトを作成している際、レイアウトが崩れる現象が発生しました。具体的には、ヘッダーの上に隙間ができており、全体が中央に配置されない問題が起きています。
崩れたレイアウトの原因を突き止めるために、HTMLとCSSのソースコードを修正しましたが、解決できませんでした。
質問者は、段組みレイアウトの左側にメニューを配置したいため、左側の要素をfloat:left;で配置し、右側の要素はfloat:left;で回り込むようにしています。しかし、正しく中央に配置されず、ヘッダーにも不要な隙間ができてしまっています。

段組みレイアウトがfloatleft上手くいきませ

先程の投稿は、一度削除させて頂きました。再度、投稿しなおします。なんとか、以下の画像のところまで持ってくることが出来ました。おかしなところ。 Q１ hedderの上に隙間１０ｐｘが出来てしまっている（本来は、黄色の色が一番上0pxの所まで持って行きたいです） Q2 全体が、centerに行かない、、、。左によってしまっております。以上２点です。宜しくお願いします。失礼致します。こんにちは。ycqと申します。 html+CSSでサイトを作っています。簡単に段組みレイアウトを作って、CSSで色を付けてみるのですが、レイアウトが崩れてしまっています。ソースを修正したりしたのですが、原因を見つけることが出来ませんでした。 heightは基本的に autoでも構いません。 #wrapper 950px #head 950px #main 950px (mainの中に) #main_left と#main_right があります。 #main_left 250px で左側メニューfloat:left; #main_right 700px で右側に回り込ませるために、きっちりと float:left; #main_right の中には #right_box_flash #contents #fotter が入ります。 |----------------------| |----|-----------------| | | | | |-----------------| | | | | |-----------------| |___|____________| 画像も添付させて頂きます。それぞれのボックスにたいして、CSSで色を付けております。おかしい所がございますでしょうか？ Q レイアウトがCenterを指定しているのに、真ん中にいかない。 Q #hedder の上部に１０ｐｘぐらいの空白ができている。margin:0px; padding:10px指定お時間がございましたら、どうぞ、宜しくお願いいたします。失礼致します。 index.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" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>hogehoge</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div class="header"> <h2>header</h2> </div> <div class="main"> <div class="main_left"> </div> <div class="left_box_menu"> 　 <h2>left_box_menu</h2> </div> </div> <div class="main_right"> <div class="right_box_flash"> <h2>right_box_flash</h2> </div> <div class="contents"> <h2>contents</h2> </div> <div class="footer"> <h2>footer</h2> </div> </div> </div> </div> </div> </body> </html> **************************************** default.css*********************************** @charset "utf-8"; /* CSS Document */ /*------------------------------*/ 共通設定 /*------------------------------*/ * { margin: 0; padding: 0; line-height: 1.6; font-family: "メイリオ","ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3"; list-style-type: none; } img{ border:none; } body{ margin: 0; padding: 0; text-align:center; background-color:red; } /*------------------------------*/ 大枠ボックス構成 /*------------------------------*/ .wrapper{ width:950px; height:1015; margin:0px auto; padding:0px;background-color:orange; } .header{ width:950px; height:100px; background-color:yellow; } .main{ width:950px; background-color:purple; } .main_left { width:250px; height:915px; margin:0px auto; padding:0px; float:left; background-color:DarkgGldenRod; } .left_box_menu{ width:250px; height:auto; float:left; background-color:khaki; margin:0px auto; padding:0px; } .main_right{ width:700px; height:auto; float:left; } .right_box_flash{ width:700px; height:300px; float:left; background-color:pink; } .contents{ width:700px; height:280px; float:left; background-color:blue; } .footer{ width:700px; height:115px; float:left; background-color:yellow;

ycqxs765
お礼率98% (1019/1038)

CSS
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

hok212
ベストアンサー率66% (100/150)

2011/05/21 00:56 回答No.1

外部CSSファイル（default.css）にて、コメントの部分はしっかりとコメントアウトしましょう。具体的には「共通設定」や「大枠ボックス構成」の部分です。コメント文がむき出しになっています。これが原因でスタイルが無効になっている箇所がいくつか見受けられます。一例を挙げると /*------------------------------*/ 共通設定 /*------------------------------*/ これを次のようにします。 /*------------------------------*/ /* 共通設定 */ /*------------------------------*/ あるいは次のようにしてもOKです。 /* ------------------------------ 共通設定 ------------------------------ */ それと、HTMLファイル側でも構造がおかしいところがいくつかありますね。クラス名menu_leftの内側にクラス名left_box_menuが入るのでしょうが、いきなりmenu_leftのDIVタグが閉じられていたり、最後の閉じDIVが多かったりします。 HTMLファイルの親要素・子要素の関係は、面倒でもしっかりとインデントすることで一目瞭然になりますよ。

質問者

お礼 2011/05/21 06:17

hok212 様本当に、有難うございました。おかしな所が４つほどありました。コメント、、、、、お恥ずかしい。。。Dreで見ると、しっかりピンク色になっていたのですが、全く気付きませんでした。 htmlの構造もおかしかったです。 <menu_left> </div> おかしいです。 <div class="main_left"> <div class="left_box_menu"> 　 <h2>left_box_menu</h2> </div> </div> ですね。 DIVが沢山あり、ついつい見落としてしまっておりました。とても助かりました。 ****************************************************** もしよろしければ、、、 DIVタグの確認などは、Dreでされて居らっしゃらないのでしょうか？または、エディタで色を付けているのでしょうか？ Dre以外で編集てししまうと、Dreが自動認識してくれないこともあるような・・・・。？？ ***************************************************** この度は、ありがとうございました。また宜しくお願い致します。失礼致します。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/05/21 11:03 回答No.2

「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。」＜＜＜W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) ★オーサリングツールでは、文仕様の意味までは理解してくれないのでマークアップはテキストエディタで行う。　HTMLエディタ ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB#HTML.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF ) ★CSSもグループ化や継承など最も重要なカスケーディング処理に対処していないためテキストエディタで行う。 ★文書構造が後日、他人、検索エンジンでもわかるように意味をわかるように。　leftとかcenterとかはだめ。サンプルはHTML5,XHTML5への変更を考慮してclass名が付けてある。 ★CSSを書く前に、Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )やThe W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )でチェックしよう。 ★firefoxに付属のDOM Inspector( http://ja.wikipedia.org/wiki/DOM_Inspector )やアドオンのFirebug( https://addons.mozilla.org/ja/firefox/addon/firebug/ )を併用すると便利［ソース］□はタブに置換すること(きちんとインデントすれば閉じ忘れはない) 手で書くとシンプルでわかりやすいでしょ!![ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> □<link rev="made" href="mailto:ORUKA@hoge.com" title="send a mail" /> □<link rel="contents" href="./index2.html" title="サイトマップ" /> □<style type="text/css">  □</style> □<title>サンプル</title> </head> <body> □<div class="header"> □□<h1>見出し</h1> □</div> □<div class="section"> □□<div class="article"> □□□<h2>frash</h2> □□□<p>文書解析木</p> <pre>　　element　　　class　　id body 　　div　　　　　header 　　　　h1 　　div　　　　　section 　　　　div　　　article 　　　　　　h2 　　　　　　pre 　　　　　　p 　　　　　　p 　　　　　　hr 　　　　div　　　aside 　　　　　　h2 　　　　　　p 　　　　div　　　footer 　　　　　　h2　　　　　　　copyright 　　　　　　p 　　　　div　　　nav 　　　　　　div　　　　　　navigation 　　　　　　　　 ul</pre> □□□<p> □□□□IE5やIE6は、absoluteしたとき、その親要素がstaticであっても、寸法をその親要素を基準にするバグがあるので、本来はsection内にあるべきnavigationもルート直下に置くほうがよい。 □□□</p> □□□<p>floatは文章内で挿絵などの周囲を回りこませるために使用するため、ブロックの配置には使わない</p> □□□<hr/> □□</div> □□<div class="aside"> □□□<h2>説明</h2> □□□<p>キーワードで使用できる色は１６色だけです。6.5 色 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#h-6.5 )</p> □□□<p>Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple, Teal, Fuchsia, Aqua</p> □□</div> □□<div class="footer"> □□□<h2 id="coryright">footer</h2> □□□<p>著作権表示など</p> □□</div> □□<div class="nav"> □□□<div id="navigation"> □□□□<ul> □□□□□<li>ナビゲーション</li> □□□□</ul> □□□</div> □□</div> □</div> □</div> </body> </html>

質問者

お礼 2011/05/21 17:51

ORUKA1951 様 ycqです。ご親切に教えて下さいまして、誠にありがとうございました。ボックスは出来ても仰るとおり、構造体がバラバラで、めちゃくちゃでした。hml5のことも、全然考えておりませんでした。＞＞オーサリングソフトではなくエディタを使うなるほど、エディタを使ったら良いのですね。 notepad++ terapad,vxeditor,色々試してみました。タグの関係性を保てるのがありました、色付きです。＞＞W3C CSS 検証サービス＞＞Autholity HTML lint gaytway 恥ずかしながら、存じあげておりませんでした。こちらで一度検証したら良いですね。エラーを修正すると、、。＞［ソース］□はタブに置換すること(きちんとインデントすれば閉じ忘れはない) 手で書くとシンプルでわかりやすいでしょ!! なんと！全然存じ上げませんでした。色々なテクニックがあるのですね。＞キーワードで使用できる色は１６色だけです色名前がありましたので、大丈夫だと思っていたのですが、、、。これは、W3Cの仕様書を、きちんと読まなくてはなりませんね。＞E5やIE6は、absoluteしたとき、その親要素がstaticであっても、寸法をその親要素を基準にするバグこちらも、勉強しなくてはいけません。まだまだ、足りないでした。ソースの方、ありがとうございます。ちょっとコードをゆっくり読ませてください。とても勉強になります。とりあえずに、お礼の方、、、誠にありがとうございました。失礼致しました。回答者１の方の解凍でソースが、一応は解決致しましたので、ベストアンサーの方は、申し訳ございません。本当に、有難うございました。失礼致しました。