dポイントプレゼントキャンペーン実施中！

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

解決済

  • 質問者：sophia109
  • 質問日時：
  • 回答数：7件

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

通報する

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

質問の本文を隠す

A 回答 (7件)

No.7ベストアンサー

  • 回答者： DIETMAN
  • 回答日時：

最初に本題から逸れますが、他の方が答えておられる「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
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： maexxx
  • 回答日時：

htmlのタグの中に


<body>
というのがあると思いますが、これを
<body style="text-align:center">
にすれば、中央に表示されると思います。

試してみてください。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： naokita
  • 回答日時：

回答者様達ご苦労様です。



質問者さんは、多分テーブルを使ってないのでしょうね・・・

まずは、テーブルを勉強して下さいね。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： jprr
  • 回答日時：

＞ページ全体が真ん中に表示されるのでしょうか？


ブラウザに寄りますが大体そんな感じです。

＞このタグって罫線の枠ではないですよね？
ヤフーのページで言えば、
<table width="***">
<tr>
<td>ホームページのデータ</td>
</tr>
</table>
の親のtable部分については罫線は表示されませんね。
またそのtdにtableやdivを入れ子にしたりしているので、ソースからの解説も難しいんですけどもね。
要するに、基本的には見えない四角の組み合わせで出来てるような物なんです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/08/22 00:14

No.3

  • 回答者： aqucent
  • 回答日時：

#2の方とかぶりますが、ブロックレベル要素のセンタリングかな、と思います。


これについてはブラウザ毎の仕様の差がありますので、よくお調べになることをお勧めします。

参考URL：http://www.google.co.jp/search?ie=euc-jp&lr=lang …
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/08/21 21:54

No.2

  • 回答者： jprr
  • 回答日時：

凄く大まかですけど、これの事ですか？


<center>
<table width="***">
<tr>
<td>ホームページのデータ</td>
</tr>
</table>
</center>
ブラウザの横幅が１２００くらいなので
***は700～800くらい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/08/21 21:44

No.1

  • 回答者： hiroko771
  • 回答日時：

<body>


<center>

</center>
</body>

これだけ
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/08/21 20:42

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報