ベストアンサー

ホームページを中央に表示するには？

2006/08/21 20:33

初心者ですがホームページビルダーで作った自分のホームページを持ってます。早速質問なのですが、ヤフーのトップページなどは左右に等間隔の余白があって、ページ全体がつねに画面の中央に表示されていますよね。「お気に入り」のボタンを押して左側にお気に入り一覧を表示させてもページはつねに真ん中に表示されます。文字のセンタリングではなくて、ページを中央に表示させる方法です。私は左に寄せてページを作っているので、見ばえを良くするためにページを真ん中に表示させるのはどのようにしたら良いのでしょうか。タグがあったら教えてほしいです。お願いします。

sophia109
お礼率27% (22/80)

HTML
回答数7
ありがとう数17

みんなの回答 （7）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#96518

2007/02/24 16:41 回答No.7

最初に本題から逸れますが、他の方が答えておられる「TABLEレイアウト」の勉強は必要ありません。恐らくTABLEレイアウトを用いている方は、プロではなくアマの方々だと思われますが、CSSレイアウトを用いるのが本来の手法です。もちろん、プロでもいまだにTABLEレイアウトを用いる人はたくさんいますし、天下のYAHOOなども未だTABLEレイアウトで作ってるみたいです。 CSSレイアウトそのもの自体を知らない自称プロのWebデザイナーもまだまだ沢山いるのは確かですが。。^^; 例えば、他の方が回答しておられる手法の、 -------------------------- <body> <table width="***" align="center"> <tr> 以下省略 -------------------------- のソースは完全にHTML4.01の手法で、現在主流になりつつある「XHTML1.0 2ndEDITION」や「XHTML1.1」に準拠したページ構成を行おうとした場合には全く誤った記述になってしまいます。ただし、現在の各種ブラウザ（IEやFirefox等）はHTML4.0でも何ら問題なく表示されますので、他の方の回答の通りにテーブルのワイドを800～1000pix程度で指定してそのテーブルをalign="center"でセンタリングするのが簡単な手法かもしれません。しかし、既にこの手法は大変古く、SEOやウェブ最適化の観点からも好ましくない手法となっており、そういったことはWeb業界では常識になっています。 TABLEタグの各パラメータをHTMLの中に書くのもダメです。全てスタイルシートで指定します。（上記ソースはこの時点で間違った記述です）そしてやっと本題に入りますが、divコンテナを用いてブロックレベル要素をスタイルシートを用いてセンタリングします。ホームページビルダーで正しくコーディングされるのかどうか分かりませんが、XHTMLでコーディングする場合、ソースは手打ちが出来ないと話になりませんので、参考URLをご覧になってXHTML の勉強をしてみて下さい。これが理解できれば、テーブルレイアウトという古い手法は一切必要がありません。ちなみに、簡単にXHTMLでソースを示しますと以下のようになります。（DOCTYPE宣言などは省略して<body>以下を示します。）もちろん、<head>の中で下部関連CSSファイルの読み込みを指示して下さい。 ---------------------------------- <body> <div id="wrapper"> コンテンツの内容 </div> </body> ---------------------------------- 以下関連CSSの中身 ---------------------------------- body { font-family: "ＭＳＰゴシック", Osaka, sans-serif; text-align: center; margin: 0px; padding: 0px; } #wrapper { margin: 0px auto; padding: 0px; height: auto; width: 800px; text-align: left; } ---------------------------------- 補足ですが、XHTMLではソースコードは全て小文字で記述します。また、<br>などのような空要素タグは<br />と閉じタグで閉じます。ぜひ、CSSレイアウトで構成されたWebページのソースをご覧になって勉強してみて下さい。

参考URL：: http://www.kanzaki.com/docs/html/xhtml1.html

ログインすると、全ての回答が全文表示されます。

その他の回答 (6)

maexxx
ベストアンサー率37% (9/24)

2006/10/06 05:49 回答No.6

htmlのタグの中に <body> というのがあると思いますが、これを <body style="text-align:center"> にすれば、中央に表示されると思います。試してみてください。

ログインすると、全ての回答が全文表示されます。

naokita
ベストアンサー率57% (1008/1745)

2006/08/22 02:03 回答No.5

回答者様達ご苦労様です。質問者さんは、多分テーブルを使ってないのでしょうね・・・まずは、テーブルを勉強して下さいね。

ログインすると、全ての回答が全文表示されます。

jprr
ベストアンサー率51% (108/210)

2006/08/21 23:33 回答No.4

＞ページ全体が真ん中に表示されるのでしょうか？ブラウザに寄りますが大体そんな感じです。＞このタグって罫線の枠ではないですよね？ヤフーのページで言えば、 <table width="***"> <tr> <td>ホームページのデータ</td> </tr> </table> の親のtable部分については罫線は表示されませんね。またそのtdにtableやdivを入れ子にしたりしているので、ソースからの解説も難しいんですけどもね。要するに、基本的には見えない四角の組み合わせで出来てるような物なんです。

質問者

お礼 2006/08/22 00:14

度々すみませんｍ(＿＿)ｍ丁寧なご説明ありがとうございます。試してみたいと思います。

ログインすると、全ての回答が全文表示されます。

aqucent
ベストアンサー率39% (78/200)

2006/08/21 21:38 回答No.3

#2の方とかぶりますが、ブロックレベル要素のセンタリングかな、と思います。これについてはブラウザ毎の仕様の差がありますので、よくお調べになることをお勧めします。

参考URL：: http://www.google.co.jp/search?ie=euc-jp&lr=lang_ja&q=%a5%d6%a5%ed%a5%c3%a5%af+%a5%bb%a5%f3%a5%bf%a5%ea%a5%f3%a5%b0

質問者

お礼 2006/08/21 21:54

あ、これっぽいですね。なんか初心者の私には意味不明なタグが並んでてとても難しそう・・・。よく読んでみます。ありがとうございます！

ログインすると、全ての回答が全文表示されます。

jprr
ベストアンサー率51% (108/210)

2006/08/21 20:46 回答No.2

凄く大まかですけど、これの事ですか？ <center> <table width="***"> <tr> <td>ホームページのデータ</td> </tr> </table> </center> ブラウザの横幅が１２００くらいなので ***は700～800くらい。

質問者

お礼 2006/08/21 21:44

初心者なのでなんとも言えませんが、多分そうかもしれません。これを入力するとページ全体が真ん中に表示されるのでしょうか？このタグって罫線の枠ではないですよね？それだったら違うのですが。

ログインすると、全ての回答が全文表示されます。

hiroko771
ベストアンサー率32% (2932/9040)

2006/08/21 20:37 回答No.1

<body> <center> </center> </body> これだけ

質問者

お礼 2006/08/21 20:42

えっ、それは文字がセンタリングされるだけじゃないですか？文字の左寄せ、中央寄せ、右寄せのことではないんですが・・・。このページもお気に入りで左側にお気に入りを表示させても枠が画面からはみ出ることなく幅を自動的に縮小して画面内にすべて表示されますよね。うまく説明できないんですが、ご存じないでしょうか？

ログインすると、全ての回答が全文表示されます。