htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困

質問

htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困っています。

2レベルまでの階層ならば、まだわかるのですが、3レベル以上になった場合に思い通りに動作させることができなくなってしまいます。

具体的には、下で記述した場合、
<div id="test">
テスト
</div>
が、右寄せにならないのですが、何がいけないのでしょうか？

【-------------html-------------】
<DIV id="wrap">
<div id="head">
<div id="logo">
ロゴ配置予定
</div>

<div id="test">
テスト
</div>
</div>

<div id="menu">
メニュー
</div>

<div id="left">
レフト
</div>

<div id="right">
メインコンテンツ
</div>

<div id="foot">
フッタ
</div>
</dib

【-------------css-------------】
/* レイアウトの設定*/
body{
margin:0px;
padding:0px;
text-align:center;
}

/* ラッパーの設定*/
#wrap{
position:relative;
width:600px;
background-color:#FFFFCC;
margin:0px auto;
text-align:left;
}

/* ヘッダーの設定*/
#head{
width:600px;
height:350px;
background-color:#CC9999;

div#logo{
position: absolute;
float: left;
width:200px;
height: 30px;
}

div#test{
width:100px;
height: 30px;
float: right;
}
}

/* ヘッダーの設定*/
#menu{
width:600px;
height130px;
background-color:#CC9900;
}

/* 左側の設定*/
#left{
width:150px;
height:300px;
float:left;
background-color:#FFAC99;
}

/* 右側の設定*/
#right{
width:450px;
height:300px;
float:right;
background-color:#CCCCFF;
}

/* フッターの設定*/
#foot{
position:relative;
width:100%;
height:30px;
background-color:#CCFFCC;
clear:both;
}

回答No.3

rinkyoto · ベストアンサー

はじめまして。
ssttaさんの作ったhtmlとcssを拝見してtestしてみましたが
一番の原因はcssの簡単な記述ミスかと思います。

cssの問題の表記は

【修正前】

/* ヘッダーの設定*/
#head{
width:600px;
height:350px;
background-color:#CC9999;

div#logo{
position: absolute;
float: left;
width:200px;
height: 30px;
}

div#test{
width:100px;
height: 30px;
float: right;
}
}

【問題点】
1.#headのカッコが閉じられていない。　
2.#testのカッコが一つ多い。

【修正後】
/* ヘッダーの設定*/
#head{
width:600px;
height:350px;
background-color:#CC9999;
}

div#logo{
position: absolute;
float: left;
width:200px;
height: 30px;
}

div#test{
width:100px;
height: 30px;
float: right;
}

===========================

cssを修正後のものに書き換えると添付した画像のように変化します。

以上です。

後、小さな事ですがhtmlの本文で気になった事があったので書いておきます。

【修正前】
<DIV id="wrap">
<div id="head">
<div id="logo">
ロゴ配置予定
</div>

<div id="test">
テスト
</div>
</div>

<div id="menu">
メニュー
</div>

<div id="left">
レフト
</div>

<div id="right">
メインコンテンツ
</div>

<div id="foot">
フッタ
</div>
</dib

【問題点】
1.#wrapのDIVの表記を小文字に直す。
　現在htmlを組むときは基本的に小文字になりましたので
　統一させたほうがよいでしょう。
2.#wrapのくくりの最後のdivの表記が正しくない。正しくは</div>
　私もよくやってしまうミスですが、divのくくりはしっかりと。

【修正後】
<div id="wrap">
<div id="head">
<div id="logo">
ロゴ配置予定
</div>

<div id="test">
テスト
</div>
</div>

<div id="menu">
メニュー
</div>

<div id="left">
レフト
</div>

<div id="right">
メインコンテンツ
</div>

<div id="foot">
フッタ
</div>
</div>
===========================

ソースを書くときのおすすめは
自分で書いているとソースの文字だらけで混乱してくると思います。
なので階層をソースからでも把握する為に上記の修正後のコードのようにすることです。
こうすることによって、wrapの子要素はいくつあるのか、
head要素に何の要素があるのがはっきりと分かってくると思います。

回答には足らない点もあるかと思いますが
以上になります。
頑張って下さい。

お礼

#head　#logo　#test　は、階層表記のcssにしたつもりだったのですが、
階層表記をやめたらちゃんと表示されるようになりました。
ありがとうございました。

回答No.2

noname#119957

階層表現なら。。

#wrap #head {

}

とかけばいいだけです。

回答No.1

noname#119957

<!--階層が見難いのは、インデントをしないからですね。以下のように書いたほうがいいですね-->

<div id="wrap">
　　<div id="head">
　　　　<div id="logo">ロゴ配置予定</div>
　　　　<div id="test">テスト</div>
　　</div><!--head-->
　　<div id="menu">メニュー</div>
　　<div id="left">レフト</div>
　　<div id="right">メインコンテンツ</div>
　　<div id="foot">フッタ</div>
</div><!--wrap-->

/*CSS*/
div#logo こういう divは不要で。。#logo のほうがシンプルです。
これで問題が出るなら、階層の問題ではなくて、CSS自体の問題でしょうね。