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

2013/10/14 15:46

このQ&Aのポイント

CSSでの背景色を設定する方法について、初心者が苦戦しています。
オペラブラウザでの背景色の設定がうまくいかないため、質問しています。
過去の類似質問を参考にして解決方法を試しましたが、うまくいきませんでした。

yoko-talk
お礼率100% (2/2)

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

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

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

ベストアンサー

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

2013/10/14 23:51 回答No.2

#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/15 00:27

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

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

kmee
ベストアンサー率55% (1857/3366)

2013/10/14 17:09 回答No.1

背景(background)が指定されているのが #sidebar{background:green;} だけなように見えますけど。他に color で色を指定している箇所はありますが、colorは前景色の設定です。 Operaの開発者ツールを使えば、現在どんなルールでどの設定が有効になっているかわかります。 http://help.opera.com/Windows/9.60/ja/devtools.html

質問者