みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

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

解決済みの質問

CSSでの背景色の出し方でつまりました。

独学で学んでいる初心者です。

HTML


<link rel="stylesheet" href="hp.css" type="text/css">
<div id="container">
<div id="header">ヘッダー</div>
<div id="main">メイン</div>
      <div id="sidebar">サイドバー</div>
<div id="footer">フッター</div>
</div>

CSS

#container{ width:940px;
overflow:hidden;
}


#main{
width:620px;
float:left;
color:black;
}

#sidebar{
width:320px;
float:right;
background:green;
}

#footer{ clear:both
color:red;
}

簡単なものにしてみても出なかったので、
なぜ出ないのか教えていただければと思います。
ブラウザはオペラです。
サイドバーのグリーンしかつきません。
過去の似たような質問をいくつかみて
overflow:hidden;

.clearfix:after {
content: "";
display: block;
clear: both;
}
を入れてみてもダメでした。
お願い致します。

投稿日時 - 2013-10-14 15:46:12

QNo.8305363

困ってます

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

#sidebar{
width:320px;
float:right;
background:green;
}
と背景background-colorの指定をしているのは、#sidebarだけだからです。
他の要素にもbackground-colorを指定すればよいだけです。

 それよりも、「独学で学んでいる初心者です。」が気になります。独学--私も--であろうと、なかろうと誤った道に入り込むと無駄です。
<div id="container">
<div id="header">ヘッダー</div>
<div id="main">メイン</div>
      <div id="sidebar">サイドバー</div>
<div id="footer">フッター</div>
</div>
 のマークアップは、とてもよく見かけますが、その時点で誤りです。DIVの目的は、HTMLに用意してある要素(どのような要素であるかはタグで示す)が足りないときに!!
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ために存在するのですよ!!
 今後一般化するHTML5の「新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」を見られるとわかるように!!
<body>
 <div class="article">
  <div class="header"><h1>ヘッダー</h1></div>
  <div class="section"><h2>メイン</h2>
   <div id="aside"><h3>サイドバー</h3></div>
  </div>
  <div class="footer"><h2>フッター</h2></div>
 </div>
</body>
・・・・header/section/footeをひとつしか含まないならarticleは不要ですから
<body>
 <div class="header"><h1>ヘッダー</h1></div>
 <div class="section"><h2>メイン</h2>
  <div class="aside"><h3>サイドバー</h3></div>
 </div>
 <div class="footer"><h2>フッター</h2></div>
</body>
 だけでも良いです。idではなくclassを使用するのは、これらは文書内に何度も登場するはずのものなのでidではまずいです。HTML5では、そのまま要素(タグ)ですからね。
headerは、記事の見出し
sectionは、本文、section内にsectionで見出しレベルが下がる
footerは、記事のフッター
asideは、本文と直接関係ない記事
・・html5だと
<body>
 <header><h1>ヘッダー</h1></header>
 <section><h2>メイン</h2>
  <aside><h3>サイドバー</h3></aside>
 </section>
 <footer><h2>フッター</h2></footer>
</body>
となります。こうしてデザインとは関係なく内容で書かれていると、あとあとのメンテナンスもとっても楽になります。そして、デザインと無関係なので自在にデザインできます。

そのうえで、スタイルシートは
上記最初のHTMLなら・・
div.header,div.section,div.footer{
width:80%;min-width:480px;
margin:0 auto;
padding:5px;
}
div.section{
position:relative;
min-height:300px;
}
div.section div.aside{
width:20%;
position:absolute;
right:0;top:0;
height:100%;
}
div.section h2{
margin-right:21%;
}
/* 色をつけておく */
div.header{background-color:yellow;}
div.section{background-color:lime;}
div.aside{background-color:green;}
div.footer{background-color:aqua;}
div.section h2{background-color:red;}

HTML5用なら

header,section,footer{
width:80%;min-width:480px;
margin:0 auto;
padding:5px;
}
section{
position:relative;
min-height:300px;
}
section aside{
width:20%;
position:absolute;
right:0;top:0;
height:100%;
}
section h2{
margin-right:21%;
}
/* 色をつけておく */
header{background-color:yellow;}
section{background-color:lime;}
aside{background-color:green;}
footer{background-color:aqua;}
section h2{background-color:red;}

※CSS2以降、基点となるセレクタに続けてセレクタを書きます。
#section は、*#section の意味に解釈されます。#は兎も角classの場合は、基点セレクタを書くほうがわかりやすい。

投稿日時 - 2013-10-14 23:51:51

お礼

厳しい道なのですね。
定義にきちんとそった解答ありがとうございました。
ひとつひとつ知識をつけたうえで作っていくとわかりやすく、メンテナンスしやすい事をふまえて考えていきたいと思います。

投稿日時 - 2013-10-15 00:27:49

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

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

回答(2)

ANo.1

背景(background)が指定されているのが #sidebar{background:green;} だけなように見えますけど。
他に color で色を指定している箇所はありますが、colorは前景色の設定です。

Operaの開発者ツールを使えば、現在どんなルールでどの設定が有効になっているかわかります。
http://help.opera.com/Windows/9.60/ja/devtools.html

投稿日時 - 2013-10-14 17:09:45

お礼

ありがとうございます。
私の至らないミスでした。
便利のページもあわせて紹介していただき、助かりました。

投稿日時 - 2013-10-14 23:53:26

あなたにオススメの質問