- ベストアンサー
ホームページを中央に表示するには？
初心者ですがホームページビルダーで作った自分のホームページを持ってます。 早速質問なのですが、ヤフーのトップページなどは左右に等間隔の余白があって、ページ全体がつねに画面の中央に表示されていますよね。 「お気に入り」のボタンを押して左側にお気に入り一覧を表示させてもページはつねに真ん中に表示されます。 文字のセンタリングではなくて、ページを中央に表示させる方法です。 私は左に寄せてページを作っているので、見ばえを良くするためにページを真ん中に表示させるのはどのようにしたら良いのでしょうか。 タグがあったら教えてほしいです。 お願いします。
- みんなの回答 （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ページのソースをご覧になって勉強してみて下さい。
その他の回答 (6)
- maexxx
- ベストアンサー率37% (9/24)
htmlのタグの中に <body> というのがあると思いますが、これを <body style="text-align:center"> にすれば、中央に表示されると思います。 試してみてください。
- naokita
- ベストアンサー率57% (1008/1745)
回答者様達ご苦労様です。 質問者さんは、多分テーブルを使ってないのでしょうね・・・ まずは、テーブルを勉強して下さいね。
- jprr
- ベストアンサー率51% (108/210)
＞ページ全体が真ん中に表示されるのでしょうか？ ブラウザに寄りますが大体そんな感じです。 ＞このタグって罫線の枠ではないですよね？ ヤフーのページで言えば、 <table width="***"> <tr> <td>ホームページのデータ</td> </tr> </table> の親のtable部分については罫線は表示されませんね。 またそのtdにtableやdivを入れ子にしたりしているので、ソースからの解説も難しいんですけどもね。 要するに、基本的には見えない四角の組み合わせで出来てるような物なんです。
- aqucent
- ベストアンサー率39% (78/200)
#2の方とかぶりますが、ブロックレベル要素のセンタリングかな、と思います。 これについてはブラウザ毎の仕様の差がありますので、よくお調べになることをお勧めします。
お礼
あ、これっぽいですね。 なんか初心者の私には意味不明なタグが並んでてとても難しそう・・・。 よく読んでみます。ありがとうございます！
- jprr
- ベストアンサー率51% (108/210)
凄く大まかですけど、これの事ですか？ <center> <table width="***"> <tr> <td>ホームページのデータ</td> </tr> </table> </center> ブラウザの横幅が１２００くらいなので ***は700～800くらい。
お礼
初心者なのでなんとも言えませんが、多分そうかもしれません。 これを入力するとページ全体が真ん中に表示されるのでしょうか？ このタグって罫線の枠ではないですよね？それだったら違うのですが。
- hiroko771
- ベストアンサー率32% (2932/9040)
<body> <center> </center> </body> これだけ
お礼
えっ、それは文字がセンタリングされるだけじゃないですか？ 文字の左寄せ、中央寄せ、右寄せのことではないんですが・・・。 このページもお気に入りで左側にお気に入りを表示させても枠が画面からはみ出ることなく幅を自動的に縮小して画面内にすべて表示されますよね。 うまく説明できないんですが、ご存じないでしょうか？
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
度々すみませんｍ(＿ ＿)ｍ 丁寧なご説明ありがとうございます。 試してみたいと思います。