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

解決済

質問者：ka-kichi
質問日時：2006/07/29 04:56
回答数：2件

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： harlan
回答日時：2006/07/30 08:00

> しかし、私の環境では、ページ全体が赤の背景色になってしまいます。

私が質問の意味を取り違えていたためで、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. …

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

No.1

回答者： harlan
回答日時：2006/07/29 05:55

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>

- 0
- 件

通報する

この回答へのお礼

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

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

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

通報する

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

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