cssのbodyの勉強をしているのですが

質問

http://www.mitsuike.ed.jp
このサイト↑を使ってcssを勉強しているのですが、
http://www.mitsuike.ed.jp/common/css/common.css
のcssのbodyで

body {
color: #666666;
margin: 0px;
padding: 0px;
text-align:center;
background: #F9F9F9 url(../images/bg.gif) repeat-y top center;
}
となっているのですが
このサイトは
color: #666666となっている程暗いグレーではないのでなぜなのか分かりません。
また、画像が置かれているhttp://www.mitsuike.ed.jp/common/images/bg.gif
をrepeat-y top center;ということで
下方向に連続しているのでbodyの部分の背景になってるということは分かるのですが、
そこになぜ更に#F9F9F9と背景色を使用しているのかが分かりません。

これからcssを勉強して覚えていきたいと思っているのですが、こんな初歩的な事でつまって質問してしまい申し訳ありません。
よろしくお願いします。

回答No.2

metametamu · ベストアンサー

colorは文字の色の指定です。a要素の指定なども見てみると#666666相当で統一しようとしていることがわかると思います。

backgroundは背景の指定です。
backgroundはbackground-image、background-position、background-repeat、background-colorを一括で指定できるプロパティなので#F9F9F9というのはbackground-colorの指定になります。
このサイト場合、サイトの左右の余白の色が#F9F9F9の色になりますね。

backgroundに画像と背景色を利用している理由ですが、background-repeatにrepeat-y、background-positionにcenterが指定してあるのでまず背景画像はサイトの中央で縦方向にリピートされることなります。bodyは横幅いっぱいに取られるので残りの余白(画像の横幅を超えた範囲)はbackground-colorの指定によって#F9F9F9の色になります。

お礼

返事が遅くなってしまって大変申し訳ありません。

最近だいぶCSSが分かってきて改めてこの文章を見ると、とても詳しく分かりやすく説明していただいたのだなと感謝しています。いつも親切に回答していただいてありがとうございます＾＾

回答No.1

noname#132800

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

HTMLにすごいエラーがでます。XHTMLとか宣言のこと全くわかってない人書いたみたいですが、まず参考にするのはやめましょう。
ただcssのエラーは少ないですが警告は多いですね。

お礼

なるほど
こういう風にチェックすることができるんですね＾＾
勉強になりました。ありがとうございます。