先日からいろいろとここで教えていただいてますが、また壁にぶつかってしまいました。とりあえず下記のソースを見てください。
<html>
<head>
<title>タイトル</title>
<style type="text/css">
<!--
body{margin-top:0; margin-bottom:0;}
.tt1{background-color:#ccffcc; line-height:150%; vertical-align:top;}
-->
</style>
</head>
<body>
<table align="center" width="600" height="100%" border="0" cellspacing="0" cellpadding="30">
<tr><td class="tt1">
本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります。
</td></tr>
</table>
</body>
</html>
(宣言とmetaは省略)
これで画面を縦に3分割したレイアウトで真ん中の色のついたエリアに文字や写真を入れていくフォーマットになります。しかしW3Cによる定義では厳密にはtableの「align」と「height」は非推奨になっているようなのです。そこで、cssで指定しようと思うのですが、tableを左右方向で常にセンターに配置するのと、真ん中の色の部分を画面下にぴったりくっつけるのがどうやってもできません。
どなかかヒントでも結構なのでいただけませんでしょうか・・・
No.1ベストアンサー
- 回答日時:
こういう単純なレイアウトなら、CSSですべきですよ。
複雑なレイアウトで、どうしてもCSSではやりにくいって時はtable要素も使っても仕方ないかな、とは思いますけど。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
<!--
body {
margin: 0px;
paddig: 0px;
}
#container {
width: 600px;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 30px;
background-color: #ccffcc;
line-height: 150%;
vertical-align: top;
}
-->
</style>
</head>
<body>
<div id="container">ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ。</div>
</body>
</html>
text-align: center;は本来不要ですが、古いバージョンのIEのバグ配慮。
及びDOCTYPE宣言で必ず標準準拠モードにしないと、IE6ではバグの為、本来margin-left: auto; margin-right:auto;でセンタリングされるべきなのが、センタリングされませんので。
検証してないけどこれでうまくいく・・と思います。
早速ありがとうございます。先日もDOCTYPE宣言の件で教えていただいた方ですよね。
左右のマージンを:auto;にするというのはいろんな解説サイトを読みましたが書いてませんでしたので、教えていただいて非常にありがたいです。
ただ、書いていただいたソースを丸ごとコピーして検証してみたのですが(WinXP:IE6・Firefox2.0)、標準準拠モード(URLつき)では左右のセンターになりますが、下にくっつきません。また後方互換モードでは下にはくっつきますがセンターにならず左に寄ってしまいます。
両方を実現するのは無理なんでしょうか???
No.3
- 回答日時:
> しかし標準準拠モードだとIE5とか古いブラウザで正しく表示されるのでしょうか。
特にMacの人とか。この程度のレイアウトであれば、Valid CSS で想定される全てのWWWブラウザに対するクロスブラウザは実現可能です。
より厳密な指定に対してクロスブラウザを実現したいのであれば製作者に相当の知識がないと難しいかもしれません。
製作段階で不具合に繋がる指定を施す可能性があります。
すいません、Valid CSS という言葉も始めて知ったのですが、「正しい」とか「正確な」CSSという解釈でいいのでしょうか。
ということは、真っ当な間違いのないCSSを書けば古いブラウザやMacの人でも問題ないということですね。
下記で教えていただいたソースでアップしてみて、知人に環境の違いで表示がどうなるか確認してみます。
No.2
- 回答日時:
下記プロパティを付け加えましょう。
> 標準準拠モード(URLつき)では左右のセンターになりますが、下にくっつきません。
html,body{height:100%;}
> また後方互換モードでは下にはくっつきますがセンターにならず左に寄ってしまいます。
body{text-align:center;}
#containerの中身を左寄せにしたいなら
#containerのtext-align: center;をleftに。
できました!!
html,body{height:100%;}なんてまったく思いつきもしませんでした。
ありがとうございました!
しかし標準準拠モードだとIE5とか古いブラウザで正しく表示されるのでしょうか。特にMacの人とか。
知り合いの中には案外古い環境の人も多いですから、できれば新旧のブラウザでも確実に崩れずに見れるのが望ましいのですが、そこまで多くを望むのは無茶でしょうか・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<legend>で表示されるタイトル...
-
Dreamweaverで画面サイズを一定...
-
marginを指定した見出し要素の...
-
引用文を囲むボックスの作り方
-
cssでheight: auto;を指定して...
-
段落の高さを調節することは出...
-
divタグを中央寄せでwidthを指...
-
IBMのホームページビルダー10で
-
CSSで<p>の幅指定を解除したい。
-
css。横並びBOXに長文textを流...
-
text-alignの解除の方法
-
ページのマージン・・・
-
CSSの設定
-
CSSのマークアップでつまずいて...
-
<h1>タグの後の行間を詰めたい。
-
htmlでテーブル内にテキストボ...
-
javascriptでタイトルバーを非...
-
エクセル 画面表示拡大率によ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
インラインフレームの表示位置...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
macとwindowsのレイアウト崩れ...
-
INPUT TEXT内の文字位置を指定...
-
text-alignの解除の方法
-
ホームページビルダー 空白の...
-
Formタグのブロックの高さについて
-
端から端まで横線を引きたい
-
<legend>で表示されるタイトル...
-
なぜ左に寄っているの?
-
FireFoxで見るとブラウザの幅に...
-
コードを書いて下さい( ; ; )...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
文字を内側にも色の付いた枠で...
-
テキストボックスの文字を右揃...
-
Dreamweaverで画面サイズを一定...
おすすめ情報