CSSのbodyの勉強でつまずいています

前へ 次へ
このQ&Aのポイント
  • http://www.mitsuike.ed.jp でCSSを勉強していますが、bodyの色や背景について疑問があります。
  • http://www.mitsuike.ed.jp/common/css/common.css のbodyのスタイルについて疑問があります。
  • 初歩的なことですが、CSSの勉強でつまずいてしまいました。質問にお答えいただけると嬉しいです。
回答を見る
  • ベストアンサー

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を勉強して覚えていきたいと思っているのですが、こんな初歩的な事でつまって質問してしまい申し訳ありません。 よろしくお願いします。

  • CSS
  • 回答数2
  • ありがとう数4

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

  • ベストアンサー
回答No.2

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の色になります。

rossi46mail
質問者

お礼

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

その他の回答 (1)

noname#132800
noname#132800
回答No.1

http://validator.w3.org/ http://jigsaw.w3.org/css-validator/ http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html HTMLにすごいエラーがでます。XHTMLとか宣言のこと全くわかってない人書いたみたいですが、まず参考にするのはやめましょう。 ただcssのエラーは少ないですが警告は多いですね。

rossi46mail
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • cssでbodyタグのtopマージを0にしているのですがスペースが。。。

    cssでbodyタグのtopマージを0にしているのですがスペースが空いてしまいます。 下記がCSSです。 /* body */ body,td,th { color: #000000; } body { background-color: #FFFFFF; margin-left: 0px; margin-top: 0px; background-image: url(share_img/bg_back.gif); } CSSを外部ファイルにする前は、TOPは空くことは無かったのですが、 CSSを外部ファイルにした途端、空いてしまうようになってしまいました。 どうしても方法がわからなくて困ってます。 どなたかご教授お願いします。

    • ベストアンサー
    • HTML
  • CSSについて教えて下さい

    ホームページビルダーでの経験しかない初心者です。CSSに挑戦していますが不明な点ばかりです。 無料テンプレートを加工していますが下記の内容を教えて頂けませんか。 topとtop2の左側（上下位置は中間）に私が追加したtop3の画像を 表示させたいのですがうまくできません。宜しくお願いいたします。 CSS #bodyid{ background:#eafefe url('img/bg.png'); padding:0; margin:0; text-align:center; } #bg{ width:706px; background:#fff; margin:0 auo; } #top{ width:400px; height:80px; background:url('img/title1.gif') no-repeat center top; text-align:left; } #top2{ width:400px; height:60px; background:url('img/title2.gif') no-repeat center top; text-align:left; } #top3{ position:absolute; left 120px; top 30px; width:100px; height:80px; background:url('img/image555.gif') no-repeat center top; } html <body id="bodyid"> <DIV id="bg"> <div id="top"></div> <div id="top3"></div> <div id="top2"></div>

  • CSS floatについて教えて下さい。

    【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • Firefoxでの上部の余白について

    XHTMLとCSSでページを作成していまして、 ■XHTML部分 <div id="header"> </div> ■CSS部分 body{ scrollbar-arrow-color:#DDDDDD; scrollbar-base-color:#000000; scrollbar-shadow-color:#E9E9E9; scrollbar-face-color:#FFFFFF; scrollbar-track-color:#E5E5E5; scrollbar-highlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-3dlight-color:#C7C7C7; background:url(../images/bg_main.gif); background-position:center top; background-repeat: repeat-y; background-color:#ffffff; color:#ffffff; margin:0; padding:0; height:100%; } #header { font-size: 12px; color:#666666; text-align:left; width:800px; height:90px; background: url(../images/bg_header.gif) center top repeat-y; } としているのですが、Firefoxで見るとヘッダ画像（背景に指定）の 上に余白が出来てしまいます。 どうすれば無くなるのでしょうか？ どうぞ宜しくお願い致します。

  • 背景画像を二つ指定

    こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか？ 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }

    • ベストアンサー
    • HTML
  • bodyから左右に15pxずつ背景画像をのばしたい

    cssの基本設定ですが、 背景色をひき、さらにbodyから左右に15pxずつ背景画像をのばしたい という設定を試みていますがうまくいかずご教授いただけたらと思い書き込みさせていただきました。 背景色が #9999cc　これを全面に表示し 背景画像を width 800pxで作り下にリピート そしてbodyが width 770pxの #ffffffの白色です。 そして cssで記述して表示してみたところ safaiではきちんと表示されるのですが、firefoxではbodyの幅までしか背景画像が表示されていません。 bodyから左右に15pxずつ背景画像をのばしたいのですが、どうやればよいでしょうか。 現在の状況ですが、 /* ここからcss ------------------------------------ */ *{ color: #333333; font-size: 12px; line-height: 20px; text-decoration: none; margin: 0; padding: 0; word-wrap:break-word; } html { height: 100%; margin: 0px; padding: 0px; background-color: #9999cc; background-image:url(../img/bg.jpg); background-position:center; background-repeat:repeat-y; } body { margin: 0px; padding:0px; color: #333; text-align:center; font-family:"メイリオ",Meiryo,"MS Pゴシック", Osaka, sans-serif; } 本当に困っております。 誰かわかる方がいらっしゃればよろしくおねがいいたします。

    • ベストアンサー
    • CSS
  • CSS backgroundが反映されない件

    CSSレイアウトで問題にぶつかってしまいました。 http://www.vivibond.com/demo/test/test.html 上記URLをFirFoxで見ると#contentsに書いた 「background: url(images/bg2.gif) repeat-y;」が反映されません。 いったい何故でしょうか。。。 CSSはこんな感じです。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ body { background: #FFFFFF; margin: 0px; padding: 0px; font: 12px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; } /*font*/ .pink {color:#F26E71;} /*ページ全体ラッパー*/ #wapper { margin: 0px; padding: 0px; width: 850px; } #wapper1 { margin: 0px; padding: 0px; width: 850px; background: url(images/bg.jpg) repeat-y; } /*コンテンツ*/ #contents { margin: 0px; padding: 0px; width: 800px; height: auto; clear: both; background: url(images/bg2.gif) repeat-y; } /*ナビ*/ #navi { background: #F3EDEE url(images/b_bg.jpg) no-repeat; padding: 44px 44px 150px 42px; width: 160px; float: left; } .navibox1{ height: 52px; background: url(images/naviboxbg.gif) no-repeat bottom; width: auto; } .navibox2{ height: 52px; width: auto; } #main { margin: 0px; padding: 0px; float: right; width: 554px; } .image { margin: 0px; padding: 20px 34px 20px 20px; } .topics { margin: 0px 34px 0px 20px; padding: 0px; } .about_text { margin: 0px 30px 0px 24px; padding: 0px 5px 30px 10px; line-height: 20px; } /*フッター*/ #footer { margin: 0px; background: url(images/footer.jpg) no-repeat; text-align: justify; clear: both; padding: 30px 0px 30px 470px; } ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSで複数の背景画像を実装する方法

    いまコーディング中なのですが、背景画像がたくさんあるデザインでどうやるか悩んでいます。 添付画像を参照していただきたいのですが、白い背景の下にトップ(赤丸で囲ったオブジェクトが左右に二つあり、グラデーションだけが左右にエンドレスで伸びます。)に固定の背景、センター(青丸で囲った左右のオブジェクトがふたつ)に下方向ににリピートする背景があります。あああああ。。。。となっている部分はフッターで白い背景はフッター部分で切れます。 自分が試した方法です。 html要素に左右に伸びるグラデーションを指定、body要素に赤丸のオブジェクトを指定。これでトップの背景は実装できました。body要素に追加で青丸のオブジェクトも指定してみましたが、画面を上方向にリサイズすると赤丸のオブジェクトの下に重なってしまします。青丸のオブジェクトは白い背景の部分だけでリピートさせ、画面をリサイズしても赤丸オブジェクトに重ならないようにしたいのですが、この場合どのように実装するのが理想でしょうか。よろしくお願いします。 html { background: #F3F0E1 url(../img/share/bg_line.jpg) center top repeat-x; } body { background: url(../img/share/bg_t.jpg) center top no-repeat, url(../img/share/bg_m.jpg) center center repeat-y; } #wrapper { margin:0 auto; width: 960px; background-color:#FFFFFF; }

    • ベストアンサー
    • CSS
  • IE,Firefoxでbodyの背景画像が表示されません。

    IE8とFirefox3.0で、 cssでbodyに入れている background-image、background-colorがどちらも適用されません。 Sleipnir2.8.5ではきちんと表示されます。 ですので、htmlはあっているかと思います。 一通り、タグぬけがないかとかも、調べてみましたが、 特にないようです。 いろいろ調べてみましたが、わかりません。 hasLayout対策とかも試してみました。 （width　や　position　をいれるなど） 下記がbodyのcssです。 body { color: #333; text-align: center; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; background-color: #FFFF66; background-image: url("img/bg.jpg"); background-position: center top; background-repeat: repeat-y; margin: 0px; } 教えていただけると、 大変助かります。 よろしくお願いいたします。

  • css

    プリント時のCSS設定についておたずねします。 現在index.htmlとindex.cssがあります。 index.htmlに ----------------------------------------------------------- <link href="index.css" rel="stylesheet" type="text/css" media="all" /> ----------------------------------------------------------- としてindex.cssを読み込み index.css内では ----------------------------------------------------------- body{ background:url("../images/bg_body.gif") repeat-x; } ----------------------------------------------------------- として、bodyの背景に画像を貼り付けています。 これを印刷時にはbodyに指定している背景画像を非表示にして 印刷させたいのです。 ※ブラウザの詳細設定「背景の色とイメージを印刷する」にはチェックを入れたまま。 別途cssを用意しhtml側で ----------------------------------------------------------- <link href="print.css" rel="stylesheet" type="text/css" media="print" /> ----------------------------------------------------------- とすれば出来そうなのですが、ちょっと答えが出ません・・・ そもそもなぜこのような事がやりたいのかというと コンテンツ内容が長くなった時、印刷すると複数ページに渡りますが、 <body>に指定した画像が、2ページ目、3ページ目にも表示される為です。 背景にしている画像は高さを十分に確保しており横32px×縦3000px位で、 一番上（0pxの高さ）から150px位の高さまで単純なグラデーションをかけたものです。 151px以降は1色のベタ塗りという感じです。 ブラウザ閲覧上はコンテンツ内容が長くても背景画像のグラデは ページ上部のみ表示されるのですが、印刷時に2ページ目、3ページの上部に グラデが表示されてしまうという事です。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する