掲示板/スタイルシート質問板/過去ログ/一覧/ BODYをCSSを使って中央に位置させる方法

0 名前： コムコム ： 2006/11/10（金） 22:00 ID:tRTVczLx: 【何をしたいのか】
→ BODYをCSSを使って中央に位置させる方法

【現在の状況】
→ bodyの中にテーブルを作り、align="center"にして中央に表示させている。

cssを使ってbodyの横幅を指定して、それを中央の位置に表示させられるような記述方法を教えて下さい。

1 名前： sasame ： 2006/11/10（金） 22:00 ID:0OYoSjA0: 1.bodyの横幅を決める。
2.(bodyの)左右のmarginをautoにする。

で、どうでしょう？

2 名前： チャンタ ： 2006/11/10（金） 22:00 ID:fk3TYl6y

Body はブラウザの画面全体そのものを指しますから、センタリングと言うのは・・・（＾＾；）。
テーブルタグや[div]タグを使わずに、コンテンツの要素全てをセンタリングするのはちょっと無謀です。

現在のように、テーブルタグ（または[div]タグ）を使い、それをCSSを使って画面の真中に表示させたいのなら方法はあります。

一般的（と思われる）CSSの記述は、

#container {
 width: 780px;　/*横幅は適当に変えてください*/
 margin: 0px auto;
 }

コンテンツの枠組みにテーブルタグを使っているなら、

<table id="container">
（略）
</table>

としておきます。

[container]の部分は、都合にあわせて変えてください。

margin の0pxは、ブラウザとテーブルの上下の余白の設定で、文字通り余白なしです。必要に応じて空けてください。
autoは左右の余白の設定ですが、ブラウザの幅に関係なく、自動で左右均等に余白を取ります。
ただし、設定した横幅よりもブラウザを狭くすると、ブラウザの下にスクロールバーが出ます。（当然ですが。）

横幅の設定の[width]は、未確認ですが、恐らくテーブルの枠やセル内の余白、セル同士の間隔まで全部含めた幅だったと思います。
もし、テーブルタグではなくて[div]タグを使うと、今度は、枠線、内側の余白[padding]、外側の余白[margin]を除いた純粋に文字や画像を納められる幅なり、テーブルタグを使ったときと見え方が変わることがあります。

これらの違いは、記述するDOCTYPEの宣言文によっても変わる事がありますので、ご注意を。

横幅の計算が少し面倒ですが、出来ればテーブルタグを外したほうが、ソースは見やすくなると思います。

お役に立てば幸いです。　では。

3 名前： コムコム ： 2006/11/10（金） 22:00 ID:SF3ra2PP: 皆様、ご回答ありがとうございます。

今まで抱いていた無謀な方法はやめて、皆様のやり方で作成していきたいと思います。

ご丁寧かつ、迅速な回答ありがとうございます。

4 名前： lota ： 2006/11/10（金） 22:00 ID:XHIe/xcN: コムコム様、締め後に申し訳ありません。
ちょうど私も同じこと（たぶん）を知りたかったので、
もう少し質問させてください。
yahoo!japanのように、ブラウザの横幅を変更しても、常に真ん中に表示される、
ということをしたいのですが・・・同じでしょうか？
チャンタ様の方法は、
すでに作ってあるページをまるごと大きなＤＩＶで囲んで
（例えば７５０ｘ９００ｐｘの）それをＣＳＳでautoに定義する、ということでしょうか？
ちょっとやってみたのですが、うまくいきませんでした。
解釈が違うのかな？
yahooの感じ、ということで教えていただけないでしょうか？

5 名前：モノ ◆7YMtX/NYmu ： 2006/11/10（金） 22:00 ID:1CHu6Lsc: >ちょっとやってみたのですが、うまくいきませんでした。

「ちょっとやってみた」状態のソースなりURLなりを提示すれば具体的な回答が得られるでしょう。

6 名前： 五月雨 ： 2006/11/10（金） 22:00 ID:Yp9ZMj/i: > ちょっとやってみたのですが、うまくいきませんでした。
動作確認に使用したブラウザは何でしょうか？
IE6以下のバージョンは "margin: 0px auto" を実装していないため、チャンタさんの紹介された手法はIE6では期待通りに動作しません。
# IE7からサポートされたので、IE7なら使えます。

IE6でセンタリングする方法は以下を参考にどうぞ。

ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
http://www.mozilla.gr.jp/standards/webtips0004.html

7 名前： 五月雨 ： 2006/11/10（金） 22:00 ID:Yp9ZMj/i: 追記です。
DOCTYPE宣言をすれば、IE6でもセンタリングされるようです。

> Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、
> これによってブロックレベル要素がセンタリングされるのはWindows版のIEのみで、これは同ブラウザのバグです
> (ただし、IE6の標準準拠モードではこのバグは修正されています)

ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
http://www.mozilla.gr.jp/standards/webtips0004.html

IE5.5以下ではどうなるか判りませんが…。

8 名前： チャンタ ： 2006/11/10（金） 22:00 ID:fk3TYl6y

＞コムコム様

まず、先ほどのコメントを訂正させてください。

Bodyに横幅を設定するのは一般的ではないと思いますが、＞１の方の言うとおり、Bodyに横幅と、[margin]でセンタリングを指定することは可能です。
したがいまして、先ほどはBodyに横幅を設定するのは不可と言う意味で書いてしまいましたが、それは誤りです。申し訳ありません。
コムコム様の言う、BodyタグをCSSで操作してセンタリングすることは可能ではあります。
もしも、Bodyに横幅を設定する場合は、セットで必ず[margin]で左右の余白を[auto]にしておく必要があるみたいです。
そうしないとヘッダ、フッタなどのブロック要素ごとに[margin: auto;]を設定しても、無効になってしまうようです。ご注意ください。

前コメントの件で、コムコム様、 sasame様、大変ご迷惑をおかけしました。m(_ _)m

＞lota様

イメージ的にはおっしゃる通りです。ただし、Yahoo！はテーブルタグを<center>～</center>でくくってます。

CSSで実現するには前のコメントのように[margin]で左右の余白を[auto]にしてあげればよいと思います。

が、lotaさんのように上手くいかない場合、多分ブラウザはIEでは？？
まずはDOCTYPE宣言文を確認してみてください。
例えば、ここではHTML4.01のTransitionalの宣言文ですが、

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

のようになっているか、または記述されていないと言うことはありませんか？

そうだとしたら、宣言文の最後のURLまで省略せず入れてみてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

↑多分あってると思いますが・・・。

宣言文を全部記述すれば、恐らく[margin]が有効になると思います。
宣言文がなかったり、省略されていて[margin]が無効になるのは、ＩＥくらいかと。Ｆｘ、Operaは宣言文がなくても、省略形でも大丈夫みたいですが・・・。

もし宣言文に問題がないとすると、それ以外はちょっと原因がわかりません・・・。
申し訳ありません。

まずはこれでお試しくださいませ。では。

＞五月雨さま

私の使っているブラウザはIE６ですので、恐らく問題ないと思いますが・・・。

9 名前： チャンタ ： 2006/11/10（金） 22:00 ID:fk3TYl6y: ＞五月雨様

文章を作るのに手間取って、五月雨様の追記の後で、同じような内容と五月雨様の＞６のコメントに対する文言を入れてしまいました。
すいません。

10 名前： 五月雨 ： 2006/11/10（金） 22:00 ID:Yp9ZMj/i

＞チャンタさん
いえ、私も配慮が足りませんでした。m(_ _)m
(「IE6の標準準拠モード」の記述を見逃していました)

Webサイトの見え方は閲覧者の環境によるので、どのブラウザまでをサポートするかは難しいテーマだと思います。
例え、センタリングできなくても、コンテンツは表示されるから問題ない、とお考えの方もいるかもしれませんし…。

# 以下、余談です。
具体的なソースを示されていないので希望と合わないかもしれませんが、table要素を使っていないのなら、適当な margin を指定するだけでもセンタリングらしく見せることが出来ます。

<style>
body {
	margin: 0px;
	padding: 0px 5em
}
</style>

11 名前： lota ： 2006/11/10（金） 22:00 ID:XHIe/xcN: ＞チャンタ様、五月雨様
ありがとうございます。
知識が乏しくて、「標準準拠モード」について調べたり･･･もう色々で
遅くなってしまいました。
いつもホームページビルダーで作っていて、必要なとこだけソースで
ちょこちょこ直すという方法を取っていました。
例えば「ちょっとここに文字入れよう」とすると、
<DIV style="width : 248px;height : 71px;top : 22px;left : 480px;
position : absolute;
z-index : 4;
" id="Layer3">
こんな感じで入ってしまいます。
これを後からセンタリングしようとしても、位置をがっちり決めてあるので無理ですよね・・？
それから、
<META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900">
こういう風に入っていました。
「ＣＳＳでBODYの横幅を指定」というのは、
body{
width:650px;
margin:0 auto;
｝
というように記述するということでしょうか？
そうした場合、pagewidthの記述は削除しないと有効ではないということでしょうか？
上記のように作られたページでは、全体をセンタリングしようというのは今からでは無理なのでしょうか？
本当に初心者の質問で申し訳ありません。
カテゴリが違ってきてしまっているかも、で申し訳ありませんがよろしくお願いします。

12 名前： Newのり太 ： 2006/11/10（金） 22:00 ID:g13kGvKd: >>11

> これを後からセンタリングしようとしても、位置をがっちり決めてあるので無理ですよね・・？

御意。

> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900">

どこでも配置モードで作っている限り、お望みのような事は無理だと思います。

> 「ＣＳＳでBODYの横幅を指定」というのは、
> body{
> width:650px;
> margin:0 auto;
> ｝

これをホームページビルダーの機能を使ってやるとすれば、
スタイルシートマネージャーで、
HTMLタグ名＝body
位置タブの幅を、650px
レイアウトタブのマージンを、上下を0、左右を自動に。
# cssの記述は、上記サンプルの省略された書式ではなく、
# 上下左右それぞれのマージンに値が割り振られる形となります。

他サイトですが、HPBにおける中央寄せレイアウトの方法を書いたものがあるので
参考に載せておきます。
http://www.aimix.jp/hpbbbs/patio/patio.cgi?mode=view&no=2250

とりあえず、どこでも配置モードはやめといたほうがいいです。

13 名前： Newのり太 ： 2006/11/10（金） 22:00 ID:g13kGvKd: あ、あと、ホームページビルダーでは、doctype宣言はデフォルトで
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
となり、ブラウザは後方互換モードとして解釈します。
標準準拠モード（編集モードのことではありません）でいくなら、
オプションでdoctypeを書き換えておく必要があります。

HPB FAQ：[DOCTYPEを出力する] について
http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb0060

14 名前： チャンタ ： 2006/11/10（金） 22:00 ID:0c9D8wwQ: ＞lotaさん

私のコメントが、ノートパッドなどのエディタでHTMLやCSSを手打ちすることを前提としたものだったため、lotaさんのケースの解決法としては適切でなかったようで、申し訳ありません。

Newのり太さんが返答を寄せてくださったので、言うことがありません（＾＾）。

私はHPBを使ったことがなかったもので、

> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900">

がわからず、Newのり太さんのコメントは助かりました。
Newのり太さん、ありがとうございました。

基本的なHTMLやCSSを理解しておくと、HPBやDWで作ったサイトでも細かな修正は苦にならなくなると思います。
時間はかかるかもしれませんが、頑張ってみてください。

あまり参考になることを書けなくてすみません。

15 名前： lota ： 2006/11/10（金） 22:00 ID:XHIe/xcN: ＞Newのり太様

ありがとうございます。やっぱり「どこでも配置モード」ではダメなんですね。

他サイト等でも、後方互換モードと標準準拠モードについて参照したのですが、
結局どちらがいいのかよくわかりませんでした。
ブラウザによって見え方が違うというのはわかるんですが・・。

＞チャンタ様
いえいえ、大変参考になりました。ありがとうございます。
むか～し（7,8年前）にＨＰを作ったのですが、最近また作ることになって
「そうかー、今はフレームはダメかぁ、ＣＳＳかぁ・・」てな感じで、説明を見ながら
ＣＳＳだけ手打ちで作っていました。
昔はなかった「どこでも配置」なんてものがあって、パワーポイントみたいに
好きなところに置けるのでラク～なんて。
作り直す時間を考えるとちょっと怖いですが、イチから出直してがんばります！
また壁に当たったらこちらにおじゃましますので、どうぞよろしくお願いします。

16 名前： lota ： 2006/11/10（金） 22:00 ID:XHIe/xcN: ＞コムコム様

申し遅れました。コムコム様のご質問の場をお借りしたのに、
結果的に少し違った内容も混じってしまい、申し訳ありません。
皆さんのおかげで、ご質問の「中央に位置させる方法」について、
私も勉強させていただきました。ありがとうございました。