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

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

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

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

解決済

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

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

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

3回答

1グッド

0クリップ

11612閲覧

投稿2016/08/02 07:18

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

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

CSS

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

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

stmkza👍を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答3

3

このあたりの仕様を読むといいと思います。
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

kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

3

ベストアンサー

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

kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

退会済みユーザー

退会済みユーザー

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を設定しないほうがいいかもしれません。

1

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

投稿2016/08/02 07:22

退会済みユーザー

退会済みユーザー

総合スコア0

退会済みユーザー👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

退会済みユーザー

退会済みユーザー

2016/08/02 07:35

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

退会済みユーザー

2016/08/02 07:42

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS

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