こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

先程の投稿は、一度削除させて頂きました。
再度、投稿しなおします。
なんとか、以下の画像のところまで持ってくることが出来ました。

おかしなところ。
Q1 hedderの上に隙間10pxが出来てしまっている(本来は、黄色の色が一番上0pxの所まで持って行きたいです)

Q2 全体が、centerに行かない、、、。左によってしまっております。

以上2点です。
宜しくお願いします。
失礼致します。

こんにちは。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 の上部に10pxぐらいの空白ができている。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: "メイリオ","MS Pゴシック", "ヒラギノ角ゴ 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;

投稿日時 - 2011-05-20 23:31:11

QNo.6751814

困ってます

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

外部CSSファイル(default.css)にて、コメントの部分はしっかりとコメントアウトしましょう。
具体的には「共通設定」や「大枠ボックス構成」の部分です。
コメント文がむき出しになっています。
これが原因でスタイルが無効になっている箇所がいくつか見受けられます。

一例を挙げると

/*------------------------------*/
共通設定
/*------------------------------*/

これを次のようにします。

/*------------------------------*/
/* 共通設定 */
/*------------------------------*/

あるいは次のようにしてもOKです。

/*
------------------------------
共通設定
------------------------------
*/


それと、HTMLファイル側でも構造がおかしいところがいくつかありますね。

クラス名menu_leftの内側にクラス名left_box_menuが入るのでしょうが、いきなりmenu_leftのDIVタグが閉じられていたり、最後の閉じDIVが多かったりします。

HTMLファイルの親要素・子要素の関係は、面倒でもしっかりとインデントすることで一目瞭然になりますよ。

投稿日時 - 2011-05-21 00:56:37

お礼

hok212 様

本当に、有難うございました。
おかしな所が4つほどありました。

コメント、、、、、お恥ずかしい。。。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が自動認識してくれないこともあるような・・・・。??
*****************************************************
この度は、ありがとうございました。
また宜しくお願い致します。
失礼致します。

投稿日時 - 2011-05-21 06:17:46

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.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">
<!--
/* XHTML,HTMLの差を吸収、必要以上に消さない */
□html,body,div{margin:0;padding0;}
□p{text-indent:1em;}
/* borderがないと隙間が開く*/
□div{border:solid Yellow 0.1px;}
/* 同じ宣言を書かないため、またメンテナンスのためグループ化する */
/* 中央配置 */
□div.header,div.section{
□□margin-left:auto;margin-right:auto;
□}
/* 内包要素のabsolute基準 */
□div.section{position:relative;}
□div.nav{position:absolute;top:0;left:0;}
□div.article pre{
□□float:left;
□□background-color:white;
□□font-size:0.8em;
□□width:24em;margin-right:20px;
□}
/* サイズ指定 */
□div.header{height:100px;}
□div.header,div.section{width:800px;}
/* navigation blockのため左を空ける */
□div.section div.article,
□div.section div.aside,
□div.section div.footer{padding-left:260px;}
/* 本文中のfloat解除にhrを使う */
□div.section div hr{visibility:hidden;margin:0;border-width:0;clear:both;}
□div#navigation{width:250px;min-height:800px;}
□div.section div.article{min-height:400px;}
□div.section div.aside{height:200px;}
□div.section div.footer{height:100px;}
/* 以下確認用 */
□div.header{background-color:Yellow;}
□div.article{background-color:Fuchsia;border-color:Fuchsia;}
□div.aside{background-color:Aqua;border-color:Aqua;}
□div.footer{background-color:Lime;border-color:Lime;}
□div#navigation{background-color:Olive;border-color:Olive;}
-->
□</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>キーワードで使用できる色は16色だけです。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 11:03:51

お礼

ORUKA1951 様

ycqです。
ご親切に教えて下さいまして、誠にありがとうございました。
ボックスは出来ても仰るとおり、構造体がバラバラで、めちゃくちゃでした。hml5のことも、全然考えておりませんでした。

>>オーサリングソフトではなくエディタを使う

なるほど、エディタを使ったら良いのですね。
notepad++ terapad,vxeditor,色々試してみました。タグの関係性を保てるのがありました、色付きです。

>>W3C CSS 検証サービス
>>Autholity HTML lint gaytway

恥ずかしながら、存じあげておりませんでした。
こちらで一度検証したら良いですね。エラーを修正すると、、。

>[ソース]□はタブに置換すること(きちんとインデントすれば閉じ忘れはない)
手で書くとシンプルでわかりやすいでしょ!!

なんと!
全然存じ上げませんでした。色々なテクニックがあるのですね。

>キーワードで使用できる色は16色だけです

色名前がありましたので、大丈夫だと思っていたのですが、、、。

これは、W3Cの仕様書を、きちんと読まなくてはなりませんね。

>E5やIE6は、absoluteしたとき、その親要素がstaticであっても、寸法をその親要素を基準にするバグ

こちらも、勉強しなくてはいけません。まだまだ、足りないでした。

ソースの方、ありがとうございます。ちょっとコードをゆっくり読ませてください。とても勉強になります。
とりあえずに、お礼の方、、、

誠にありがとうございました。
失礼致しました。

回答者1の方の解凍でソースが、一応は解決致しましたので、ベストアンサーの方は、申し訳ございません。
本当に、有難うございました。
失礼致しました。

投稿日時 - 2011-05-21 17:51:43

あなたにオススメの質問