人に聞けない痔の悩み、これでスッキリ >>

Yahoo!などのように、ホームページ内の文字や画像などを、一定の幅に納めて画面の中央に表示するには、どうすればいいのですか?

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

このQ&Aに関連する最新のQ&A

A 回答 (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. …
    • good
    • 0
この回答へのお礼

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

お礼日時:2006/07/30 21:07

TABLE要素やTD要素に、Bgcolor属性で背景色を付けているのでしょうか?


上から下まで隙間無くという事なら、BODY要素に背景色を指定してはどうでしょう。

なお、BgcolorはHTML4.0で非推奨となっているので、スタイルシートの
background-colorを使っています。
また、TABLEのセンタリングについても、TABLEをDIVに入れ、そのDIVにも
スタイルシートを使っていますが、この意味については以下のリンクを
参考にして下さい。
http://allabout.co.jp/internet/hpcreate/closeup/ …

<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>
    • good
    • 0
この回答へのお礼

現在、tableタグに、外部cssで中央揃え・背景色を設定しています。

サンプルまで作っていただいてありがとうございました。
しかし、私の環境では、ページ全体が赤の背景色になってしまいます。
ページの真ん中(コンテンツがある部分)だけが赤で、その両脇は色無し(白)にしたいのですが、方法はあるのでしょうか?

当方の環境は、WinXPproSP2+IE6です。

お礼日時:2006/07/30 02:46

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング