テーブルレイアウトの外側

解決済

質問者：sisyamomo
質問日時：2007/12/22 11:40
回答数：5件

こんにちは。
現在テーブルレイアウトでホームページを作成しています。
http://www.shoshinsha.com/hp/
のようにテーブルレイアウト内側を白にして、何もないことがわかる様にテーブルレイアウトの外側を黒とか色を変えたいのです。
何かアドバイスをお願いします。

通報する

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

質問の本文を隠す

回答 (5件)

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

No.5ベストアンサー

回答者： NymphLuna
回答日時：2007/12/25 23:58

#2～#4です。

確認させていただきました。
まずCSS（スタイルシート）の記述に間違いがあります。

* {margin:0;padding:0;}
body{
background-color:#000000;/*外枠の黒の背景*/
margin:0px;
}
#my_body{
margin:0 auto;
width:780px;/*白くしたい部分の横幅*/
background-color:#ffffff;/*内側の白の背景*/
}/*←この記述が抜けているためうまく表示されません*/
a {
font-size:9pt;
color:#0000ff;
text-decoration:underline
}
a:hover{
font-size:9pt;
color:#ff0000;
text-decoration:underline
}
h4{
border-left:solid 10px #00ff00;
border-bottom:solid 1px #00ff00;
padding-top:3px;
padding-left:3px;
width:180px;
}

また最後に
</table></div>
<div></div>
<script type="text/javascript">
・
・
</script></body>
</html>
とありましたが正しくは
</table>
</div>
<script type="text/javascript">
・
・
</script>
</body>
</html>
です。これでFirefoxでも正しく表示されます。

- 0
- 件

通報する

この回答へのお礼

本当にありがとうございました。
NymphLunaさんのおかげでイメージ通りに作れました。
助かりました。

通報する

お礼日時：2007/12/26 10:56

No.4

回答者： NymphLuna
回答日時：2007/12/23 12:20

#2、#3です。

×　<div align="center"><div align="left"><h4>文字</h4></div></div>
○　<div align="left"><h4>文字</h4></div>または<div align="center"><h4>文字</h4></div>
です。申し訳ありません。

- 0
- 件

通報する

この回答へのお礼

度々ありがとうございます。
現在、左寄りでもいいので、Firefoxで見出しが正しく表示されるように、調べています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
を入れていないのにFirefoxでは中央表示になっていて、そして見出しが消えるのです。
http://gyokuro2000.web.fc2.com/
ですので、何か分かればアドバイスをお願いします。
もう少し調べてダメのようなら、見出しを画像に変更して締め切ります。

通報する

お礼日時：2007/12/24 16:13

No.3

回答者： NymphLuna
回答日時：2007/12/23 01:56

> で中央になりますが、見出しがおかしくなってしまいます。

とのことですがどのようにおかしくなっているのでしょうか？
<div align="center"><div align="left"><h4>文字</h4></div></div>
と明記するのが正しいようですが…。
テキストを左寄せにしたい場合は
h4{
border-left:solid 10px #00ff00;
border-bottom:solid 1px #00ff00;
padding-top:3px;
padding-left:3px;
width:180px;
text-align:left;/*ここを追加しています*/
}
と明記されるといいですよ。

"http://www.w3.org/TR/html4/loose.dtd"については
http://www.shoshinsha.com/hp/ref/html/dtd.htmlを参考にしてください。
下記の厳密型やXHTMLへ移行中ですという意味だそうです。
Firefoxでは入っていなくてもセンターになりますが、IEの場合は指定しないと左寄りになります。

- 0
- 件

通報する

No.2

回答者： NymphLuna
回答日時：2007/12/22 13:19

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<div id="my_body">
テーブルを含んだHP内容
</div>
</body>
</html>

これでどうでしょうか？
「margin:0 auto;」を入れていますので、DTD宣言（"http://www.w3.org/TR/html4/loose.dtd"）を
書き忘れると左寄りになってしまいますのでご注意ください。
また、<body>の直下に<div id="my_body">を入れて、最後は必ず</body>の直前で</div>で終わって下さい。

この回答への補足

上記の現象はブラウザをIEにすると普通ですが、Firefoxで見ると
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
が入ってなくても、見出しが解除されます。

補足日時：2007/12/23 01:30

通報する

- 0
- 件

通報する

この回答へのお礼

ありがとうござました。解決しました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
で中央になりますが、見出しがおかしくなってしまいます。
私のホームページの中に<head>の中に
h4
{
border-left:solid 10px #00ff00;
border-bottom:solid 1px #00ff00;
padding-top:3px;
padding-left:3px;
width:180px;
}
を見出しで使っていて
、<div align="center"> <h4><div align="left">文字</div> </h4></div>をテーブル内に入れています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
もしよろしければ上記の意味を教えてもらえないでしょうか？