質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

12233閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

1クリップ

投稿2016/08/02 07:18

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

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

CSS

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

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

stmkza👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

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

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

投稿2016/08/02 07:44

NatsumiOki

総合スコア1298

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

html

1<DIV id="wrapper"> 2中身 3</DIV>

css

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

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

投稿2016/08/02 07:26

編集2016/08/02 07:33
RyoM

総合スコア90

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/08/02 07:33

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

2016/08/02 07:36

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

退会済みユーザー

2016/08/02 07:39

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

2016/08/02 07:47

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

0

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

投稿2016/08/02 07:22

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/08/02 07:35

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

退会済みユーザー

2016/08/02 07:42

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問