サイト全体を中央に表示したいのですが・・（Dream weaver）

質問

いつもお世話になっております。
HP作成について、ご指導お願い致します。

かなり前になりますが、Dream weaverを使ってテンプレートを作成し
どうにかこうにかHPを作ったことがあります。
その時は参考書片手に、テンプレートにテーブルを作成し
そのテーブルをcssで中央に配置したように思います。
今回新たに作成するにあたり、色んなサイトを勉強して回っているのですが、
中央に配置されているサイトのソースを見ても
テーブルがないように思うのです。（私がわからないだけでしょうか・・）
もし、テーブルを使用しない場合
どのような方法を使われているのでしょうか？
また、テーブルを使用しての配置は好ましくない、ってことはありますか？
宜しくお願い致します。

回答No.1

nori_007 · ベストアンサー

最近のサイトの作りは、CSS が主流になり、サイトの全体のデザインを、<table> タグを利用してデザインする方法は、出来れば避けた方が良いと思います。

基本的な考えたとして、要素を <div> タグで囲み、フロートや、ポジションを利用して、デザインを構築していきます。
色々なサイトを見ているという事ですので、ソースを頂いて来て、検証sてみるのが良いと思います。

詳細は、書籍を１冊購入する事をお勧めします。
Dreamweaver を利用されている言う事ですが、Dreamweaver は単なる道具にしか過ぎません。

>また、テーブルを使用しての配置は好ましくない、ってことはありますか？

公的なホームパージや、仕事で受けているので有れば、余り好ましいとは思いません。
ただ、個人の趣味の範囲であれば、<table> タグを利用して、構築しても良いかも知れません。

お礼

よくわかりました。
かなり時間がかかりそうですが
グチャグチャなサイトにならないよう勉強してみます。
また何かありましたら、ご指導のほど宜しくお願い致します。

回答No.4

reverie013

こんにちは。

敢えて皆様が書かれていることを簡潔にまとめて書きますｗ

・tableタグはあくまで表として使用するものであって、
デザインに使用するものではない。
※ついでに言うと、tableタグを多用するとページが重くなります

・デザインをするためには、専用にCSSというものが存在します。
中央に置きたい内容をdivなどのブロック要素で囲み、
配置を指定すると良いでしょう。

・蛇足ですが、HTML他CSSやJavascriptに関してお勉強されるのに
おすすめのページ(でも初心者には不向きかも？)を貼っておきますので
参考にして下さい。

参考URL：

http://www.tagindex.com/index.html

お礼

お礼が遅くなり申し訳ございません。

＞※ついでに言うと、tableタグを多用するとページが重くなります

そんなこともあるのですか・・
私が以前作ったサイトは　「tableの中にtable・・」みたいなサイトでした。
勉強になりました。
かなり時間がかかりそうですが、教えて頂きましたサイトが「参考」にできるように勉強していきます。
また何かありましたら、ご指導のほど宜しくお願い致します。

回答No.3

ORUKA1951

tableは表を示すのでデザインのためにtableを使うのは(HTMLの趣旨から)誤りです。
>・・単に文書内容を整形する目的だけで表を用いるべきでない。・・中略・・こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
<--http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html#h-11.1より
　HPではなく、HTMLの作成方法について、「文書をページの中央に配置したい」という質問でよいでしょうか？
　最も単純な方法は、中央に配置したい要素を<div class="body"></div>で囲み（class名は適当に）、スタイルシートで
div.body{
margin-left: 10%;/* 固定幅の画像や脚注を配置するなら */
margin-right: 10%;/* margin-left: 200px;とかにする・・*/
}
ですかね。IE対策としてbody要素にも
body{
margin: 0px;
}
を指定しておいたほうが良いかも。

お礼

ご指導いただきましてありがとうございます。
お礼が遅くなりましたことをお許し下さい。

丁寧なご指導で、助かりました。
これからじっくりと勉強することになりますが
スタイルシートも楽しいので頑張ってみます。
また何かありましたら、宜しくお願い致します。

回答No.2

pick52

ここを参考にしてみて下さい。

http://www.yomotsu.net/lab/css/center-left-text
http://www.yomotsu.net/lab/css/center-left-text/demo.html

divなどのブロック要素でサイズを固定し、そのブロック要素を
中央揃えします。

基本的に表以外の目的にテーブルを使用するのは非推奨となって
います。

どうしてもテーブルで表現したい場合、IEではバグでテーブルを
centerタグやtext-align: centerなどでセンタリングできてしまいますが、
仕様上は本来、上記の方法ではブロック要素をセンタリングできません
ので他のブラウザでは無効になります。
テーブルをセンタリングする場合はテーブルにmargin: autoをつけます。
ただし、これまたIEのバグでmargin: autoが有効にならないので
結果的にテーブルをtext-align: centerで囲み、テーブルに
margin: autoを指定します。

http://mozilla.gr.jp/standards/webtips0004.html

お礼

出張に出ておりました。
お礼が遅くなり、申し訳ございません。
わかりやすくご指導いただきありがとうございます。
教えて頂きましたサイトでじっくり勉強致します。
よくこちらでお世話になっております。
また何かありましたら、宜しくお願い致します。