ADOBE DW　5.5　ヘッダとコンテンツの隙間

解決済

質問者：3291982
質問日時：2012/05/30 16:04
回答数：4件

現在、独学でADOBE DREAM WEAVER CS 5.5でwebサイトを作成していますが、
headerとcontentの間に10pixcelほどの隙間ができてしまいます。「デザイン」ビューには
表示されないのですが、「ライブ」ビューやIE9やchromeでも隙間ができてしまっています。

これを防ぐ方法はなにかありませんでしょうか？コードは下記となります。

【HTML】---------------------------------------------------------
<html>

<body>
<div id="container">

<div id="header">
<img src="a.png" width="1000" height="150">
</div>

<div id="content">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</div>
</body>
</html>
【CSS】---------------------------------------------------------

body{ background-color: #CCC;
font: 16px/24px 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳＰゴシック','MS PGothic',sans-serif;
color: #000;

}
#container {
margin:0 auto;
width: 1000px;
}

#header {
margin: 0 auto;
padding: 0 auto;
}

#content {
width:1000px;
margin: 0 auto;
padding: 0 20;
background-color: #666;
}

よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： DrFell
回答日時：2012/06/01 05:59

それなら、画像がベースラインになっているからだと思います。

http://www.htmq.com/style/vertical-align.shtml

初期値がbacelineです。のでアルファベットのgjpqは下に少し出る設定です。それらがなくても、画像を想定のベースラインそろえて配置します。下にピョコンと出ている想定分あいてしまって見えるわけです。

そこで下ぞろえを指定すれば、希望の隙間がない状態になると思います。
セレクタ{vertical-align:bottom;}

- 0
- 件

通報する

この回答へのお礼

vertical-alignをbottomに変更したら、直りました！！またこの方法以外にheaderのサイズが指定してなかったので指定してみると、その方法でも直りました！！bacelineについて画像であってもgjpqがあることを想定して一応その分下に余白を作っておくということでしょうか？？HTMLとCSSの組み合わせで解決の方法が何通りもあり、単純な自分としてはこういうことが混乱のもとになってしまいます。実はまだ他にもいろいろお伺いしたいことがあるのですが、今自分で試行錯誤しています。またどうしてもわからないことがあれば、お伺いをしたいと思います。勉強になりました！本当にありがとうございました！！

通報する

お礼日時：2012/06/01 19:11

No.3

回答者： ORUKA1951
回答日時：2012/05/31 09:28

div内の要素のマージンが利いているだけです。

HTMLは文書構造だけを記述しましょう。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　どのような名称が良いかは、新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )

<body>
　<div class="header">
　　<h1><img src="a.png" width="1000" height="150" alt="タイトル"></h1>
　</div>
　<div class="section">
　　<h2>見出し</h2>
　　<p>aaa</p>
　　<p>aaa</p>
　　<p>aaa</p>
　</div>
　<div class="footer">
　　<h2>文書情報</h2>
　</div>
</body>
・・・

div.header,div.section,div.footer{margin:0 auto;width:100%;max-width:840px;}
h1,h2,p{margin:0 auto;line-height:1.4em;}/* 上下のマージンを0 */
p{text-indent:1em;}
この、margin:0 auto;でそのマージンは消えて、divドオシが密着するはずです。

同じ設定は、グループ化して記述する。
継承するプロパティは親ブロックに記述する。
HTMLは文書構造、スタイルシートはプレゼンテーションときちんと分けましょう。
　←構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

- 0
- 件

通報する

この回答へのお礼

上記コードは質問のために少し簡素化したもので、実際に作っているwebサイトで、インスペクタモードで確認すると隙間はheaderに起因しているものでした。bacelineをbottomに変更したり、headerのサイズを写真のサイズに固定したら、隙間は消えました。
今回は自分のCSSとHTMLの認識不足を痛感させられました。リンクしていただいたサイトなども拝見させて頂きましたが、「なんとなくわかったような気がする」という状態で実際はちゃんと理解できていないのが現状です。実際にサイトを作りながら、勉強していきたい思います。今回は本当にありがとうございました。

通報する

お礼日時：2012/06/01 19:18

No.2

回答者： naokita
回答日時：2012/05/31 03:42

旧IE非対応で良いなら：

#content p:first-child{ margin-top:0;}

style属性で１個目のPだけに直接書くなら：
<div id="content">
<p style="margin-top:0;">aaa</p>

#content { } に border-top を設置する方法もあるし、
#content p { } でmarginをリセットしてpaddingに変更するとか色々・・・

- 0
- 件

通報する

この回答へのお礼

p:first-chaildというCSSは初めて見ました。ちょっと自分にはまだレベルが高いようです。。。すみません。質問させて頂いたコードではPタグのmarginが原因だったようです。しかし上記コードは質問のために少し簡素化したもので、実際に作っているwebサイトで、インスペクタモードで確認すると隙間はheaderに起因しているものでした。1000X150pixcelの写真が原因だと思い、写真を外しても隙間は消えませんでした。header idのmarginやpaddingもすべて0になっています。header内に起因した隙間だが、marginやpadding以外に隙間や間隔を空けるものがあるかどうかわからず、行き詰ってしまっています。もう少し自分でいろいろ触ってみます。何かお気づきのことがありましたら、助言いただけるとうれしいです。ありがとうございました。

通報する

お礼日時：2012/05/31 21:03

No.1

回答者： DrFell
回答日時：2012/05/30 20:19

headerとcontentの間に10pixcelほどの……

ではなく、おそらくcontent内部の問題かと思います。

#content p{margin:0;}
を加えてみてはいかがでしょうか？

今回のような問題の場合、構造を視覚的に表示すると、原因となっている場所が判明しやすいです。アウトラインを示す表示モードにブラウザを変えたり、cssで一時的に*{border 1px solid red}などとし、問題の空間がどこの領域に属するのかを見て見られてはいかがでしょうか？

その上で今回の場合、content内と判明すれば、その最初の中身と容易に想像がつくと思います。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。今実際にためしてみました。確かに今回こちらに書いたコードはPタグが原因だったようです。こちらに書いたコードは少し簡素化したものなのですが、実際に今自分で作っているサイトはヘッダがあり、ナビゲーションバーがあり、その下にコンテンツがある状態です（1カラム）。それで、ヘッダの写真にアウトラインをつけてみたら、そのheader内の写真下のところに、隙間ができていました。写真が原因だと思い、写真を外しても隙間は消えませんでした。インスペクタモードで確認をしても、やはり、別のBOXのpaddingやmarginが影響している状態ではありませんでした。写真の大きさは1000 X 150pixcelで間違いないのですが。。。
もう少し自分でがんばってみます。何かお気づきの点がありましたら、教えて頂けるとうれしいです。アウトラインなどでの確認の方法はとても参考になりました。ありがとうございました。

通報する

お礼日時：2012/05/31 20:49

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