• ベストアンサー

ホームページの内容を、一定幅で画面中央に表示するには?

Yahoo!などのように、ホームページ内の文字や画像などを、一定の幅に納めて画面の中央に表示するには、どうすればいいのですか? 1x1の表を作って、その表を中央揃えにして、その表(セル)の中に文字や画像などを入れると思い通りになるのですが、背景色を付けると、色の範囲が四角になってしまいます。 理想は、画面中央に一定幅で、文字や画像を表示し、上から下まですきまなく背景色で埋めたいのですが・・・。

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

  • ベストアンサー
  • harlan
  • ベストアンサー率77% (234/303)
回答No.2

> しかし、私の環境では、ページ全体が赤の背景色になってしまいます。 私が質問の意味を取り違えていたためで、No.1のサンプルは、それで正しい表示です。 上下の余白はゼロで左右には白の余白ができる、という事ですか? 以下のサンプルはテーブルの内容が少ないため、下に余白ができますが、テーブルの 高さが、スクロールしなければならない程、大きくなれば、下も余白がなくなります。 <html> <style type="text/css"> body { margin: 0px; padding: 0px; } div.ctable { text-align: center; } table { width: 300px; text-align: left; background-color: red; } </style> <body> <div class="ctable"> <table> <tr><td>あいうえお<br>あいうえお<br>あいうえお<br></td></tr> </table> </div> </body> </html> なお、このサンプルはIE6での表示を確認していますが、ボックス要素のセンタリングには ブラウザの解釈の違いによって、ややこしい問題があります。 http://www.tagindex.com/hp_guide/css_layout1/02.html

ka-kichi
質問者

お礼

考えていたものに限りなく近いものができそうです。 ありがとうございました。

その他の回答 (1)

  • harlan
  • ベストアンサー率77% (234/303)
回答No.1

TABLE要素やTD要素に、Bgcolor属性で背景色を付けているのでしょうか? 上から下まで隙間無くという事なら、BODY要素に背景色を指定してはどうでしょう。 なお、BgcolorはHTML4.0で非推奨となっているので、スタイルシートの background-colorを使っています。 また、TABLEのセンタリングについても、TABLEをDIVに入れ、そのDIVにも スタイルシートを使っていますが、この意味については以下のリンクを 参考にして下さい。 http://allabout.co.jp/internet/hpcreate/closeup/CU20050806A/index.htm <html> <style type="text/css"> body { background-color: red; } div.ctable { text-align: center; } div.ctable table { margin: auto; text-align: left; } </style> <body> <div class="ctable"> <table> <tr><td>あいうえお<br>あいうえお<br>あいうえお<br></td></tr> </table> </div> </body> </html>

ka-kichi
質問者

お礼

現在、tableタグに、外部cssで中央揃え・背景色を設定しています。 サンプルまで作っていただいてありがとうございました。 しかし、私の環境では、ページ全体が赤の背景色になってしまいます。 ページの真ん中(コンテンツがある部分)だけが赤で、その両脇は色無し(白)にしたいのですが、方法はあるのでしょうか? 当方の環境は、WinXPproSP2+IE6です。