CSSを使用したページデザイン・背景色が変わらない

前へ 次へ
このQ&Aのポイント
  • CSSを使用してページのレイアウトを作成し、背景色を変更しようとしても変わらない問題が発生しています。
  • 背景色の指定をしても、コンテナの外の色の変化もなく、コンテナの背景色を指定しても同じ状態です。
  • CSSの知識が乏しいため、原因がわからず解決できずにいます。
回答を見る
  • ベストアンサー

CSSを使用したページデザイン・背景色が変わらない

現在CSSを多用したページのレイアウトを作成しています。 ある程度のレイアウトが出来てきたので背景色を付け加えてみようと思ったのですが 何故か背景色が変更できません。 中身としてはフッターの固定のために<BODY>内に親要素としてコンテナを作成して その中にメインコンテンツを入れています。 BODYに対して背景色の指定をしてもコンテナの外の色の変化もないく コンテナの背景色を指定しても同じ状態です。 CSSの知識も乏しいので原因がわからずお手上げ状態となってしまいました。 下記にhtmlとCSSのリンクを掲載しますので 原因が分かる方がいれば教えてください。 素人なのでソースは汚いですがそこはそっとして置いてください… http://beatprovider.info/oshiete/index.html http://beatprovider.info/oshiete/style.css

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

  • ベストアンサー
  • venzou
  • ベストアンサー率71% (311/435)
回答No.1

まずは下記のサイトなどで検証してみて下さい。 http://jigsaw.w3.org/css-validator/ 色の指定でエラーになってますね。 誤:#00000 正:#000000

madaya
質問者

お礼

こんなサイトがあったんですね。 さっそくお気に入りに追加しました。 凡ミスで恥ずかしいばかりです。 ありがとうございました。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • CSSでの背景画像の設定について

    CSSでの背景画像の設定について質問です。 参照ページ（http://www.balmuda.com/jp/）のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper>　メニューバー部分の背景画像を指定 <topmenu>　margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents>　margin0 auto;で画面中央に配置 <footer-wrapper>　フッター部分の背景画像を指定 <footer>　margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。＞ 解決策を教えて頂ければ幸いです。よろしくお願い致します。

    • ベストアンサー
    • HTML
  • Dream Weaverを使ってCSSレイアウト

    Dream Weaverを使ってCSSレイアウトをしようとしています。 これまでコンテンツをひとまとめにcontainerでdivにしていたのですが、今回、footer部分（エビアンのサイト（http://www.evian.co.jp/）でいうと、一番下のサイトマップが載ったピンクの部分）をこのように横広がりのベタ一色の背景にしようと思っています。 しかしその場合、footerの背景はcontainerの幅までしか設定できません。containerの幅よりも広く、ブラウザの際まで横に伸びる背景はどのように設定するのか分かりません。 分かる方、教えてください。 よろしくお願いします。

  • CSSで背景画像が表示されない

    CSSレイアウトで通常のHTMLで作成しています。 背景画像が表示されないくて困っています。 他の方の質問で似た事例があったのと、 情報サイトを見てみたのですがどうしても上手くいきません。 この場合floatとclearはどう使えば背景が表示されるのでしょうか？ http://oshiete1.goo.ne.jp/qa3882745.html http://2nose.com/css/?ID=120 bodyには別背景を指定してあるのでbodyへの指定はできません。 何かアドバイスがあれば教えて頂けますでしょうか。(__) 確認はIE8です。 [ css ]----------------------------------------------------- #wrap{ width: 920px; height: 100%; margin-left: auto; margin-right: auto; background: url(../img/background.jpg) repeat-y; } #contents{ clear: both; } #sidemenu{ width: 275px; float: left; } #mainbox{ width: 570px; float:right; } [ html ]---------------------------------------------------- <div id="wrap"> <div id="contents"> <div id="sidemenu">サイドメニュー内容</div> <div id="mainbox">メインコンテンツ</div> </div> </div> 以上です、よろしくおねがいします！

    • ベストアンサー
    • HTML
  • 下記サイトみたいな大胆なデザインとなる背景をcssでレイアウト設定する

    下記サイトみたいな大胆なデザインとなる背景をcssでレイアウト設定するには？ お世話になります。css初心者です。 このサイトみたいに、http://www.blackcatpedals.com/pedal_od_1.html (1)ヘッダー部分のデザインがコンテンツ部分にまで関わっている（参考サイト→top左上のエフェクター写真みたいなデザイン） (2)コンテンツ枠の背景（参考サイト→情報が表示される部分＝中央白部分／両サイドに暗い壁のような背景）をtopから表示させ、情報量でheightが可変してもコンテンツ枠全体が違和感なく表示されている といったデザインのwebサイトを制作したいと考えています。 自分は全体の背景を#bodyにbackground-image no-repeatで表示していますが、#contensのbackground-colorを指定すると、ヘッダーからコンテンツ部分にまで関わっている上部のデザインが塗りつぶされてしまいます。 かといって、background-colorを指定しないと、背景が切れてしまいレイアウトが崩れます。これを解決するにはどうしたらよいのでしょうか？ 参考サイトはどのようにcssを組んでいるのでしょうか？ どなたか教えてください、よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSの三段組みレイアウトについて教えて下さい。。

    CSSレイアウト初心者ですが、CSSの作成段組みを作る時に <div id="container"> <div id="header"> </div><!--/header--> <div id="contents"> <div id="left_bar"> </div><!--/left_bar--> <div id="main"> </div><!--/main--> </div><!--/contents--> <div id="right_bar"> </div><!--/right_bar--> <div id="footer"> </div><!--/footer--> </div><!--/container--> と三段組固定レイアウトを作成したいのですが、 一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、 contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、 どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。 これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか？ CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び？！ CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか？

    • 締切済み
    • CSS
  • 背景をＣＳＳで

    背景の色や壁紙をＣＳＳで指定したいのですがＣＳＳでの指定の仕方がわかりません。 ＨＴＭＬの<body background=>ならわかるんですが どうしてもＣＳＳで指定したいのでＣＳＳでの指定のはわかりましたら教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSで高さ100％のレイアウト

    テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。

    • ベストアンサー
    • CSS
  • 【CSS】不具合の原因がわかりません。

    すいません、少しややこしいかもしれませんが・・・。 下記のように、「ヘッダ」「コンテンツ」「フッタ」の3つにレイアウトが分かれていて、「コンテンツ」「フッタ」に　clear: both;　float: none;　をかけると不具合なく表示されます（縦に3つ並びます）。 ですが、諸事情により「フッタ」部分にcssをかけることが出来なくなりました。 （企業によるガイドラインなので詳しくは書けません。すいません・・・。） 「フッタ」から　clear: both;　float: none;をはずすとFirefoxではレイアウトがずれてしまいます。float: left　をかけたように「コンテンツ」の右側に「フッタ」が来てしまいます。 いちから構築しなおしてはいるのですが、「コンテンツ」部分にmarginやpaddingの値を加えたり（左右ではなく上下でも）、高さを指定したりするだけでずれてしまいます。 原因は何が考えられるでしょうか？ よろしくお願い致します。 ちなみに宣言文は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> としています。 ////////html//////// <body> <div id="header"> ヘッダ </div> <div id="contents"> コンテンツ </div> <div id="footer"> フッター </div> ////////css//////// #header{ } #contents{ clear: both; float: none; } #footer{ clear: both; float: none; }

  • フッター固定時のdivの背景について

    フッターを画面下部に固定するため以下のようなHTMLを書きました。 フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。 コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？ <style type="text/css"> <!-- html, body { height: 100%; margin: 0; padding: 0; text-align: center; } #container { min-height: 100%; height: auto !important; height: 100%; position: relative; } #screen { width: 100%; text-align: left; padding-bottom: 100px; } #contents{ margin: 0 auto; width: 50%; background:Khaki; } #footer { height: 100px; width: 100%; position: absolute; bottom: 0; background-color: #7EC4E6; } --> </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • ＣＳＳで(3)段組のページを作りたいのですが

    上から３段のページを作りたいと思っています。 ヘッダー ↓ コンテンツ ↓ フッター という形にしたいのです。 ヘッダーとフッターの背景色は同じにして、フレームを使ったように見せたかったのですが、画面いっぱいまで広がってくれず困っています。 フレームを使ったら簡単にできるのですが、ＣＳＳでは不可能なのでしょうか？ 基本的かもしれませんがよろしくお願いいたします。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する