WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:tableを使わずにページをブラウザ中央に表示したい

0:[投稿] かーる [2003/03/24 19:28 ][環境:IE6,NN7,Opera7,Win2k ?]

HTML・CSS初心者です。
ページ全体(width指定有)をブラウザのリサイズにかかわらず中央に表示されるようにしたいのです。但し、tableを使わずに。
見た目の例はYahoo!ですがあれもtable使っているし、否tableレイアウトにこだわり過ぎでしょうか。

又、BODYへのwidth指定がIEでは対応しないのですが仕様でしょうか?
(例:テキストの行送り、水平線の幅等。NN,Operaは対応)


1:[回答] YYY [2003/03/25 13:01 ]

解決のヒントとしては
ページ全体を<P></P>で囲みCSSでPに対して任意の横幅を与えてやる事で
ウインドウ内でブロックごとセンタリングできます。
ただし、<DIV align="center"><P>***</P></DIV>のような形で
センタリングを行うとPの中身もセンタリングされますので(IE6で検証)
Pに対してCSSでtext-align:left;などの処理が必要です。

この手法がCSSの使用法として正しいかどうかは僕には分かりませんが
この方法で目的は達成できると思います。
なお、半角文字を連続すると指定の横幅を超えても自動改行されません。

例)
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<STYLE>
p{width:120px;text-align:left;}
</STYLE>
</HEAD>
<BODY bgcolor="#ffffff">
<DIV align="center">
<P>aiueoああああああああああああああああああああああああああああああああああああああああ</P>
</DIV>
</BODY>
</HTML>


後段の質問に関しては知識不足で回答不能です。すいません。


2:[回答] ma-to [2003/03/25 14:06 ]


IE6がどのように適用するかどうかについては、
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp
を参照すれば、概略を把握できるかと。

質問内容は、
    body { width : .. ; }
を水平方向に中央寄せしたい、ということでしょうか。とりあえず、最低でも、希望するwidthの値を単位付きで提示する方が好ましいと思います。HTMLとCSSを全部記入しても管理人は機嫌をそこねたりしないと予想されます。


3:[回答] (*゚Д゚) [2003/03/25 15:33 ]

>BODYへのwidth指定がIEでは対応しないのですが仕様でしょうか?
MSIE 6 の標準準拠モードでは問題ないですが。

参考:Internet Explorer 6 における CSS の拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp

というか body の width を調整云々ではなくて、
マージンのプロパティで調整すれば良いのでは?

参考:ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>tableを使わずに中央に表示</title>
 <style type="text/css">
 div.section {
   border: solid 1px;
   margin-left: 10%;
   margin-right: 10%;
   
   /* 下記の規則でも仕様的には上述と大体同じ。
    ただし、MSIE 5.5以下はサポートされない。 */
   /*
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   */
 }
 </style>
</head>
<body>
<div class="section">
 <h1>tableを使わずに中央に表示</h1>
 <p>(*゚Д゚)ニョォォォォォォォ!!!!!!!</p>
 <p>(*゚Д゚)ニョォォォォォォォ!!!!!!!</p>
</div>
</body>
</html>


4:[完了] かーる [2003/03/25 20:47 ]

YYYさん、ma-toさん、(*゚Д゚)さん、御回答ありがとうございます。
目指したのは「ページ幅を600pxに固定してブラウザ中央に表示する。」でした。
が、皆様すいません。!DOCTYPE に Transitional を指定していました。
(*゚Д゚)さんのおっしゃる通り標準準拠モードならば質問2つとも
下記の指定でIE,NN,Opera全てほぼ同様に表示され問題解決しました。
body {width: 600px; margin-left: auto; margin-right: auto;}


5:[完了] ma-to [2003/03/25 22:16 ]


/*
予想していた通りの箇所で間違っている。
*/

もし、
「画面の左側にbodyの一部が隠れて読めなくなっても、正しく中央に寄せたい。」
というのであれば、margin-right: auto; margin-left: auto; とすればよい。
しかし、殆どの場合、バグっているOperaやWinIEの実装のような、
「画面の左側に隠れる直前に、中央寄せを止める。」
を求めるだろう。
意味が分からなければ、ブラウザサイズを縮めて、Mozillaの表示を拝んでみればよいでしょう。

pxを単位とする場合、作成者の求める(左に隠れない)中央寄せは * 出来ない * と考えてもらって間違いは無い。
作成者の求める中央寄せは、厳密な中央寄せではなく、大まかなそれだから、左右のマージンに同じ数値を%付きで指定して、適用させる方法で十分だろう。
従って、widthは%で指定されなければならない。ところが、この時、既にwidthは自動的に算出されている、というか、させるに限る。もし仮にどうしても指定しなければならない場面があるとすれば、それは、計算誤差(スクロールしないスクロールバーが水平方向に出現する)を補正する目的でのみ、現実的な意味を持つ。


6:[完了] ma-to [2003/03/25 23:53 ]


>「画面の左に隠れて読めなくなって」

Mozillaに関して、間違えました。申し訳ありません。

ただし、initial C.B.の定義は各UA任せだから、Mozillaまでがバグっているわけではない。仮に、initial C.B.がviewportにされたとしたら、当然、左に隠れて見えなくなる。そして、そういう実装のブラウザの存在を仕様書は否定していない。
万が一を考慮するならば、隠れて見えなくなっては困る場合、左右のマージンを数字と単位を明示して揃える方法だけが、正しく作成者の意図を反映する。
特に今回はbody相手だった。しかし、h1とかdivとかpとかでは、margin-right(left): auto; をはみ出して表示しなければならない状況は、画面サイズ変更を考えれば頻発する。従って、
「margin: auto; は不注意に使われてはならない 。」

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World