いつもお世話になっております。
HP作成について、ご指導お願い致します。
かなり前になりますが、Dream weaverを使ってテンプレートを作成し
どうにかこうにかHPを作ったことがあります。
その時は参考書片手に、テンプレートにテーブルを作成し
そのテーブルをcssで中央に配置したように思います。
今回新たに作成するにあたり、色んなサイトを勉強して回っているのですが、
中央に配置されているサイトのソースを見ても
テーブルがないように思うのです。(私がわからないだけでしょうか・・)
もし、テーブルを使用しない場合
どのような方法を使われているのでしょうか?
また、テーブルを使用しての配置は好ましくない、ってことはありますか?
宜しくお願い致します。
No.1ベストアンサー
- 回答日時:
最近のサイトの作りは、CSS が主流になり、サイトの全体のデザインを、<table> タグを利用してデザインする方法は、出来れば避けた方が良いと思います。
基本的な考えたとして、要素を <div> タグで囲み、フロートや、ポジションを利用して、デザインを構築していきます。
色々なサイトを見ているという事ですので、ソースを頂いて来て、検証sてみるのが良いと思います。
詳細は、書籍を1冊購入する事をお勧めします。
Dreamweaver を利用されている言う事ですが、Dreamweaver は単なる道具にしか過ぎません。
>また、テーブルを使用しての配置は好ましくない、ってことはありますか?
公的なホームパージや、仕事で受けているので有れば、余り好ましいとは思いません。
ただ、個人の趣味の範囲であれば、<table> タグを利用して、構築しても良いかも知れません。
よくわかりました。
かなり時間がかかりそうですが
グチャグチャなサイトにならないよう勉強してみます。
また何かありましたら、ご指導のほど宜しくお願い致します。
No.4
- 回答日時:
こんにちは。
敢えて皆様が書かれていることを簡潔にまとめて書きますw
・tableタグはあくまで表として使用するものであって、
デザインに使用するものではない。
※ついでに言うと、tableタグを多用するとページが重くなります
・デザインをするためには、専用にCSSというものが存在します。
中央に置きたい内容をdivなどのブロック要素で囲み、
配置を指定すると良いでしょう。
・蛇足ですが、HTML他CSSやJavascriptに関してお勉強されるのに
おすすめのページ(でも初心者には不向きかも?)を貼っておきますので
参考にして下さい。
参考URL:http://www.tagindex.com/index.html
お礼が遅くなり申し訳ございません。
>※ついでに言うと、tableタグを多用するとページが重くなります
そんなこともあるのですか・・
私が以前作ったサイトは 「tableの中にtable・・」みたいなサイトでした。
勉強になりました。
かなり時間がかかりそうですが、教えて頂きましたサイトが「参考」にできるように勉強していきます。
また何かありましたら、ご指導のほど宜しくお願い致します。
No.3
- 回答日時:
tableは表を示すのでデザインのためにtableを使うのは(HTMLの趣旨から)誤りです。
>・・単に文書内容を整形する目的だけで表を用いるべきでない。・・中略・・こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
<--http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …より
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
- 回答日時:
ここを参考にしてみて下さい。
http://www.yomotsu.net/lab/css/center-left-text
http://www.yomotsu.net/lab/css/center-left-text/ …
divなどのブロック要素でサイズを固定し、そのブロック要素を
中央揃えします。
基本的に表以外の目的にテーブルを使用するのは非推奨となって
います。
どうしてもテーブルで表現したい場合、IEではバグでテーブルを
centerタグやtext-align: centerなどでセンタリングできてしまいますが、
仕様上は本来、上記の方法ではブロック要素をセンタリングできません
ので他のブラウザでは無効になります。
テーブルをセンタリングする場合はテーブルにmargin: autoをつけます。
ただし、これまたIEのバグでmargin: autoが有効にならないので
結果的にテーブルをtext-align: centerで囲み、テーブルに
margin: autoを指定します。
http://mozilla.gr.jp/standards/webtips0004.html
出張に出ておりました。
お礼が遅くなり、申し訳ございません。
わかりやすくご指導いただきありがとうございます。
教えて頂きましたサイトでじっくり勉強致します。
よくこちらでお世話になっております。
また何かありましたら、宜しくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- MySQL PHPとMySQLを使った掲示板の作り方 1 2022/06/02 13:00
- MySQL 【投稿情報用データベース posts】は必要ないと思います。 1 2022/06/02 21:25
- その他(データベース) pythonでsqlight勉強中、クエリー結果の利用法教えて下さい 1 2022/04/28 20:38
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- MySQL MySQLのテーブル作成で 自信がありません。 2 2022/08/28 05:35
- Access(アクセス) Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
- MySQL [1000地域 × 10カテゴリー = 1万件のテーブル]!グループ化? 1 2023/06/14 23:56
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- その他(データベース) Notion@リレーション値の取得について 1 2023/06/28 10:27
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlでテーブル内にテキストボ...
-
スペースが空きすぎて困ってい...
-
テーブルを横に並べたい
-
【ホームページビルダー】表の...
-
TABLEタグにTITLEをつけたら
-
以下のHTMLをスタイルシートで...
-
TD、THタグ内の水平罫線(...
-
テーブル内の一部のみ線を変更...
-
エクセルでサイズに合ったもの...
-
エクセルでサイズ指定でPOP...
-
Excel で等間隔で縦線を引きた...
-
CSSのtransform: translate(-50...
-
パソコンでランドルト環の作成...
-
指定時間になったら、WEBサイト...
-
ホームページビルダーで表の列...
-
table内で画像と文字をセンター...
-
エクセル 画面表示拡大率によ...
-
テーブルで3セル作った行の下に...
-
インラインフレームの表示位置...
-
ホームページビルダー(表の色...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlでテーブル内にテキストボ...
-
テーブル内の一部のみ線を変更...
-
TD、THタグ内の水平罫線(...
-
Dreamweaverのテーブル内テキス...
-
実行結果をデジタル時計みたい...
-
【ホームページビルダー】表の...
-
iframeのスクロールバー:縦だ...
-
DREAMWEAVERでテーブルに枠線
-
colspanで余計な余白
-
markdownでテーブルの罫線は、...
-
かっこいいウェブを作るテク
-
gooブログに表を挿入できないで...
-
サイト全体を中央に表示したい...
-
<table>の<thead>を固定したい。
-
SEO対策 <Body>タグ直下のテキ...
-
<H1>を使わずに<H2>以下を使用...
-
テーブル固定幅のサイトをスマ...
-
Iフレームを置いているページの...
-
テーブルをテーブルで囲う意味...
-
ホームページビルダーで表と表...
おすすめ情報