• ベストアンサー

サイトは中央配置、背景に画像、または色をつける

css初心者です。 サイト(すみませんこの言葉でいいでしょうか?)を ブラウザ画面の中央に配置したいとき cssでbodyを中央配置にしています。 その両サイドにも、色または画像をつけたいのです。 テーブルを使用せず 下記のページのように サイトは中央に配置、背景に色や画像をつけるには cssでどのように指定すれば よろしいでしょうか? http://www9.nhk.or.jp/umechan/ http://www.nikoand.jp/ よろしくお願いいたします。

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

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

  • ベストアンサー
  • neko-ten
  • ベストアンサー率55% (1287/2335)
回答No.1

bodyを中央配置するのではなく、コンテンツを格納するdivをつくって、それを中央に配置すればいいん出ないかな。 全体の背景はbodyに指定して、コンテンツ背景を格納divに指定すれば。 --------簡易的サンプル-------- HTML-> <body> <div class="wrapper"> </div> </body> CSS-> body{ background:url("がぞう") #背景色 posx posy; } .wrapper{ width:幅; background:url("がぞう") #背景色 posx posy; margin:0 auto; }

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

postion:relativeについて - Webデザイン・CSS - 教えて!goo ( http://okwave.jp/qa/q7465796.html ) や (CSS)画像が完全に右端に寄りません・・・ - Webデザイン・CSS - 教えて!goo ( http://okwave.jp/qa/q7440223.html#a6 ) にあげたサンプルをご覧ください。  そこのCSSに、 body{background-image:url();} を追加するだけです。  デザインのためにHTMLは決して書きません。HTMLは文書構造を記述して、それさえできていればスタイルシートでご自由に・・

関連するQ&A

  • CSSで背景画像設定

    ページ自体はテーブルで位置を特定しています。 中央に750ピクセルのテーブルを配置しその中にコンテンツを入れています。 さて、背景画像を固定にしたいと思っています。 場所なのですが、ブラウザサイズに左右されない下部分・中心から375右の位置が右端になるようにしたいんです。 いわゆる「中央に750ピクセルのテーブルを配置しその下部分に画像を配置」した状態で、なおかつ固定としたいんです。 このような言い回しでわかっていただけたでしょうか? CSSで右下に配置ってのはやったことがあるのですが、「中央から375ピクセルの位置が右端」なんてことが可能なのでしょうか? 方法があれば教えてください。

    • ベストアンサー
    • HTML
  • CSSでの背景画像の設定について

    CSSでの背景画像の設定について質問です。 参照ページ(http://www.balmuda.com/jp/)のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper> メニューバー部分の背景画像を指定 <topmenu> margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents> margin0 auto;で画面中央に配置 <footer-wrapper> フッター部分の背景画像を指定 <footer> margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。> 解決策を教えて頂ければ幸いです。よろしくお願い致します。

    • ベストアンサー
    • HTML
  • firefoxとIEの背景画像の位置を合わせる

    背景画像の中央にテキストがくるよう指定するのに、CSSでline-heightで調整しています。 firefoxではピタリと中央にきますが、IEだと少しずれます。 paddingで調整するとIEだと中央にきますが、firefoxだと少しずれます。 両ブラウザー共にテキストを中央配置する方法を教えてください。 よろしくお願いします。

  • CSS 画像の配置について

    http://www.handmc.jp/pc/index.html こちらのページにある メインの写真が2枚 バック画像の上に並べられていますが これをCSSで配置するにはどうしたらよいでしょうか? 背景のグレーのグラデーションもあるので 写真の上に写真を並べているように見えます 今までのテーブルであれば簡単なのですが 沢山本を買ったり WEBで調べていますが  画像配置の方法が文字の回り込みのものばかりで  このページのように画像背景の上に  さらに画像背景を配置する方法を知りたいと思っております  お手数ですがどなたがご教授お願いします

    • ベストアンサー
    • HTML
  • テキストと画像の縦の中央揃えの質問です

    下記の参考サイトのサイトマップをホームページ作成の練習として作成中です http://lolipop.jp/home/sitemap/ テキストリンクの左右に画像が配置されております。 左の画像は<dd>の背景画像。 右の画像は<img>でテキストリンクの右横に配置されてます(html)。 <dd><a>テキスト</a><img></dd> 左は上手くいくのですが、右の星型の画像が上手く配置されません。 <img>にvertical-align:middleを指定するのですが、各ブラウザでばらつきがあり、均一になりません。 テキストリンク、画像が縦に中央配置されません。 求めていることは、<dd>の中で、テキストリンク、画像を縦に中央配置させたいと思っております。 <dd>の高さは26px フォントサイズは13px <img>は、高さ17px、幅17px が希望です。 どのように、html、cssを指定すれば各ブラウザで均一に表示されるでしょうか?

    • ベストアンサー
    • CSS
  • 画像を中央に配置させたい

    基本的な質問かもしれませんが、画像をブラウザの縦横中央に配置することはできるのでしょうか?

  • フッターの背景に色を指定したいのですが、

    フッターの背景に色を指定したいのですが、 下記内容でフッターを記述し、 "#"には任意の画像またはテキスト等を指定しています。 <div id="footer"> <img src="#" /> </div> CSSで footerにheight:100%;や、 height:autoを試しましたが無理でした。 下記サイトのような感じで、ブラウザの一番下までフッターの背景の色を指定したいのですが、教えていただけないでしょうか? 宜しくお願いいたします。 http://www.nattoku.jp/ http://www.lets-co.com/

    • ベストアンサー
    • HTML
  • 画像を画面中央配置したいのですが、

    画像を画面中央配置したいのですが、 ネットで検索していて、テーブルレイアウトが一番単純な作りのようなので試してみました。 左右中央にはなるのですが、上下中央に表示されません。 単純に↓が間違っているだけなのでしょうか? <body> <table border=0 width=100% height=100%> <tr><td align=center valign=middle> <img src="images/intro.jpg" /> </td></tr> </table> </body> ご存知の方いらっしゃいましたら、よろしくお願いします。 ーーーーーーーーーーーーーーーーー 作業環境 ・Mac OSX 10.6 仕様アプリ ・Dreamweaver 確認ブラウザ ・Safari 5.0 ・Firefox 3.6.6 ・Opera 9.20 ーーーーーーーーーーーーーーーーー

    • ベストアンサー
    • HTML
  • 中央に配置されない

    dreamveaverでcssでもテーブルでも中央に配置するようにしているのにsafariではセンターに表示されない なにかテーブルをセンターにする方法はないのでしょうか? これ以上設定はあるのか?わからなくなってきました

  • 背景色が出ません。

    CSSで bodyに背景画像、 wrap全体にbackgroundで色の指定、 wrapの中のdivにもbackgroundで色の指定をしていますが、divのbackground色が出てきません。 wrapの指定色が利いたままです。 ブラウザはFirefoxです。 IEでは問題ないのですが・・・。 どのようにしたら、Firefoxでもbackgroundの色が利くようになりますか?

    • ベストアンサー
    • HTML

専門家に質問してみよう