アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：kuro_mi
  • 質問日時：
  • 回答数：1件

の勉強をしています。

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

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

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

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

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


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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

html,body{marign:0;padding:0;}


を書いておく。
★9. 視覚整形モデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
だけは目を通しておくこと。
ブラウザにより異なりますが、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-html4 … )』
および、
『HTML5 における HTML4 からの変更点の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』
を根拠にしています。
＞そこで実験的にですが、新規でファイルを作ってDivタグを挿入しCSSの設定で
　divは、HTMLに文書構造を示すために利用するもので、デザインのために入れるのではないことだけは、最初の最初に理解して置いてください。そしたら、将来HTML5に変わったときでも、とても楽です。その文書構造を元にデザインするのです。
div.header p{font-size:1.2em;font-weight:bold;text-indent:1em;line-height:1.4em;margin:0;}
とすれば、「ああ、これはヘッダ内の段落についての指定だな」とすぐ理解できますよね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

詳しく教えて頂きありがとうございました。

通報する
お礼日時：2012/03/02 11:21

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報