[CSS]Body Selector 背景色の幅を指定できない・・・

Question

BODYの幅を、500pxにしています。
でも、背景色をブラックにすると、
画面全体がブラックになってしまいます。

ボーダーはちゃんと500pxで大丈夫なのですが・・・

body {
width: 500px;
background-color: black;
border: #fff solid 1px;
}

ご教示いただければ幸いです・・・

Answer 1

このあたりの仕様を読むといいと思います。
http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#containing-block-details

body要素の幅は親のhtml要素によって決定され、そのhtml要素はビューポートによって、つまりウィンドウサイズによって固定されます。

bodyは（名前のとおり）HTML文書の本体の領域を示すものですので、divやpといった中身のコンテンツとは別物として考えた方がわかりやすいでしょう。

Answer 2

bodyではなくdivで囲ってあげた部分にbackgroundcolorを設定してあげればどうでしょうか？

<DIV id="wrapper">
中身
</DIV>

#wrapper{
    background-color: black;
    border: #fff solid 1px;
    width: 500px;

こうしてあげると、500pxの幅の黒い背景が設定できると思います。

Comments

[退会済みユーザー]

BODYは、
背景色に関しては、
デフォルトが、
画面全体ということでしょうか。

[RyoM]

bodyにかけてしまうと、body全体に背景色がかかってしまう状況になるはずです。
つまり、表示される中身全体に黒の背景色が設定されてしまいます。

[退会済みユーザー]

BODY全体でも、BODYのWIDTHを設定しています。
BORDERは、ちゃんと設定している500PXまでしか表示されません。
背景色は、別なんでしょうか。

[RyoM]

bodyでかけているwidthは幅に対する設定ですよね。
だからこそ、それで背景色も設定できると考えられていると思うのですが、
質問者様の今の認識に合わせて答えると、背景色は別であると考えてもらっても構わないと思います。bodyの中にdivで箱を作ってあげて、そこでwidthを設定してあげると上手くいくと思います。
ちなみにbodyにwidthをかけてしまうと、画像など他の幅に対してもその設定が効いてきてしまうので、どちらにせよbodyにwidthを設定しないほうがいいかもしれません。

Answer 3

表示したものの元の部分の背景色が黒で、範囲指定した部分はきちんと表示出来ている…ということは無いでしょうか？
もしそうであれば指定した色を黒から別の色に変えれば確認できるのではと思いました。
(ただ確認するだけで根本的な解決にはなっていないと思います。申し訳ありません)

Comments

[退会済みユーザー]

BODY意外には、背景色は設定していません。
BODYの背景色は、WIDTHは指定できない、ということでしょうか。

[退会済みユーザー]

調べた所によるとBODYだと背景全体の設定になるようです。
なのでBODYを使いつつ指定した範囲にしたいのであれば表示するウィンドウのサイズを変える物を使えば良いのではと思います。