解決済み

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

  • 困ってます
  • 質問No.7337515
  • 閲覧数59
  • ありがとう数1
  • 気になる数1
  • 回答数1
  • コメント数0

お礼率 100% (12/12)

の勉強をしています。

私は横幅が画面一杯のサイズのホームページの作成経験が全くありません。

そこで実験的にですが、新規でファイルを作ってDivタグを挿入しCSSの設定で 背景に

適当な色をつけ、カテゴリのボックスのWidthを100%、MarginのTopとBottomを0px、

RightとLeftをautoに設定し保存。

その後ブラウザーでのプレービュー(IE9)で確認してみました。


すると、上と左右に微妙に余白ができます。

この余白を全く無くすにはどう設定すれば良いか教えて下さい。

お詳しい方宜しくお願いします。

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

  • 回答No.1

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

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;}
とすれば、「ああ、これはヘッダ内の段落についての指定だな」とすぐ理解できますよね。
お礼コメント
kuro_mi

お礼率 100% (12/12)

教えて頂いた通りにやったら解決致しました。(凄く嬉しいです!)

詳しく教えて頂きありがとうございました。
投稿日時 - 2012-03-02 11:21:07
Be MORE 7・12 OK-チップでイイコトはじまる
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ