ベストアンサー

DreamweaveCS5を使ってホームページ作成

2012/03/02 07:56

の勉強をしています。私は横幅が画面一杯のサイズのホームページの作成経験が全くありません。そこで実験的にですが、新規でファイルを作ってDivタグを挿入しCSSの設定で背景に適当な色をつけ、カテゴリのボックスのWidthを100％、MarginのTopとBottomを0px、 RightとLeftをautoに設定し保存。その後ブラウザーでのプレービュー(IE9)で確認してみました。すると、上と左右に微妙に余白ができます。この余白を全く無くすにはどう設定すれば良いか教えて下さい。お詳しい方宜しくお願いします。

kuro_mi
お礼率100% (12/12)

CSS
回答数1
ありがとう数1

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

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/03/02 10:54 回答No.1

html,body{marign:0;padding:0;} を書いておく。 ★9. 視覚整形モデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html ) だけは目を通しておくこと。ブラウザにより異なりますが、html,bodyのルート要素はマージン、パディングを持っています。 HTMLの基本の文書構造は [HTML4.01] <body> 　<div class="header"> 　</div> 　<div class="section"> 　</div> 　</div class="footer"> 　</div> </body> [HTM4.01 ※2] <body> 　<div class="article"> 　　<div class="header"> 　　</div> 　　<div class="section"> 　　</div> 　　</div class="footer"> 　　</div> 　</div> </body> あるいは、HTML5でしたら、 [HTML5] <body> 　<header> 　</header> 　<section> 　</section> 　</section> 　<footer> 　</footer> </body> {HTML5 ※2] <body> 　<article> 　　<header> 　　</header> 　　<section> 　　</section> 　　</section> 　　<footer> 　　</footer> 　</article> </body> のような構造をしているはずですから、スタイルシートで html,body{margin:0;padding:0;} body{background-color:gray;} div.header,div.section,div.footer{width:100%;margin:0 auto;min-width:640px;max-width:1000px;background-color:white;} と書き始める他の例なら [HTML4.01 ※2] html,body{margin:0;padding:0;} body{background-color:gray;} div.article{width:100%;margin:0 auto;min-width:640px;max-width:1000px;background-color:white;} [HTML5] html,body{margin:0;padding:0;} body{background-color:gray;} header,section,footer{width:100%;margin:0 auto;min-width:640px;max-width:1000px;background-color:white;} [HTML5 ※2] html,body{margin:0;padding:0;} body{background-color:gray;} article{width:100%;margin:0 auto;min-width:640px;max-width:1000px;background-color:white;} ちなみに、ここで使用したclass名、要素名は、 HTML4.01仕様書の『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』および、『HTML5 における HTML4 からの変更点の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』を根拠にしています。＞そこで実験的にですが、新規でファイルを作ってDivタグを挿入しCSSの設定で　divは、HTMLに文書構造を示すために利用するもので、デザインのために入れるのではないことだけは、最初の最初に理解して置いてください。そしたら、将来HTML5に変わったときでも、とても楽です。その文書構造を元にデザインするのです。 div.header p{font-size:1.2em;font-weight:bold;text-indent:1em;line-height:1.4em;margin:0;} とすれば、「ああ、これはヘッダ内の段落についての指定だな」とすぐ理解できますよね。

質問者