※ ChatGPTを利用し、要約された質問です（原文：上部の余白をなくしたいのですが・・・）
Dreamweaver CS5でホームページ作成時の上部の余白をなくす方法
このQ&Aのポイント
Dreamweaver CS5でホームページを作成している際に、上部に余白ができる問題が発生しました。デザインビューでは問題ありませんが、ライブビューやブラウザーのプレビューで隙間が発生します。この記事では、Dreamweaverで上部の余白をなくす方法を紹介します。
上部の余白ができる問題は、CSSの設定に原因があります。具体的には、body要素に設定されているmarginやpaddingが影響しています。上部の余白をなくすためには、このCSSの設定を修正する必要があります。
まず、CSS部分でbody要素に指定されているmarginやpaddingの値を確認してください。margin: 0px; padding: 0px; と指定されていることを確認しましょう。もし値が異なっている場合は、0に修正してください。この修正により、上部の余白がなくなります。
Dreamweaver CS5でホームページを作成しています。
デザインビューで見ると一番上に隙間は出来ないのですが、ライブビューやブラウザーでプレビューすると,隙間が出来てしまいます。上部に隙間が出来ない方法を教えてください。
<body>
<div id="headWrap">
<div id="header">
<h1><img src="imges/rogo.png" alt="**" width="365" height="74" /></h1>
<ul>
<li><a href="#">**</a></li>
<li><a href="#">**</a></li>
</ul>
</div>
</div>
<div id="menu">
<div id="button">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">HOME</a> </li>
<li><a href="#">**</a> </li>
</ul>
</div>
</div>
<div id="contents">
<p>id "contents" の内容<!--/#contents--></p>
</div>
<div id="footer">
<div id="footerMenu">
<ul><li><a href="#">ホーム</a></li>
<li><a href="#">**</a> </li>
</ul>
<address>Copyright © All Rights Reserved.</address>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
CSS部分
* {
font-family:"Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif;color:#333;
}
body {background: #FFF url(imges/bg_body.gif) repeat-x left top;
margin: 0px;
padding: 0px;
}
a {text-decoration:none;
}
#headWrap {width: 100%;
background: url(imges/bgimgHead.jpg) repeat-x left top;
margin: 0px auto;
padding: 0px 10px;
}
#header {height: 90px;
width: 850px;
margin: 0px auto;
}
#menu {height: 100px;
width: 100%;
background: url(imges/bgimgMemu.jpg) repeat-x left top;
clear: both;
}
#button {height: 40px;
width: 850px;
margin: 0px auto;
}
#contents {width: 850px;
background: #FFF;
margin: 0px auto;
clear: both;
}
#footer {width: 100%;
background: url(imges/bgimgFoot.jpg) repeat-x left top;
margin: 0px;
}
#footerMenu {margin: 0px auto;
width: 850px;
}
#headWrap #header ul li {float: right;
list-style: none;
padding-left: 10px;
padding-right: 10px;
}
#headWrap #header h1 img {float: left;
margin-top: 0px;
}
#footer #footerMenu ul li {float: left;
list-style: none;
padding-right: 5px;
｝
どうぞよろしくお願いします。
お礼
できました！！ ご丁寧にありがとうございます。 #headWrap #header ul liにfloat: rightを設定した事と#headWrap #header h1 img にfloat: leftを設定したのが間違っていたのですね。 とても勉強になりました。