- ベストアンサー
CSSでの背景色の出し方でつまりました。
- CSSでの背景色を設定する方法について、初心者が苦戦しています。
- オペラブラウザでの背景色の設定がうまくいかないため、質問しています。
- 過去の類似質問を参考にして解決方法を試しましたが、うまくいきませんでした。
- みんなの回答 （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の場合は、基点セレクタを書くほうがわかりやすい。
その他の回答 (1)
- kmee
- ベストアンサー率55% (1857/3366)
背景(background)が指定されているのが #sidebar{background:green;} だけなように見えますけど。 他に color で色を指定している箇所はありますが、colorは前景色の設定です。 Operaの開発者ツールを使えば、現在どんなルールでどの設定が有効になっているかわかります。 http://help.opera.com/Windows/9.60/ja/devtools.html
お礼
ありがとうございます。 私の至らないミスでした。 便利のページもあわせて紹介していただき、助かりました。
お礼
厳しい道なのですね。 定義にきちんとそった解答ありがとうございました。 ひとつひとつ知識をつけたうえで作っていくとわかりやすく、メンテナンスしやすい事をふまえて考えていきたいと思います。