floatしたdiv内の要素について

締切済

質問者：--yan--
質問日時：2014/07/06 08:26
回答数：1件

下記のようなHTML、CSSで、
floatしたdiv「leftside」内にp要素を配置すると
p要素の上下に空間が発生します。
このp要素の上下の空間はなんでしょうか？
どうすれば消えますか？

ちなみに、スタイルシートから「leftside」の「float: left;」を削除するとp要素の上下空間はなくなります。
または、pタグで囲まなくても空間は消えます。

よろしくお願いいたします。

■Html
<!DOCTYPE html>

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="test_style.css" media="all">
</head>
<body>

<div id="warapper">

<div id="head">
</div>

<div id="leftside">
<p class="test">leftside</p>
</div>


<div id="contents">
contents
</div>

<div id="footer">
<p>fotter</p>
</div>
</div>
</body>
</html>

■Css
@charset "utf-8";

body{
/*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳＰゴシック", "MS PGothic", sans-serif;*/
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size: 90%;
text-align:center;
padding: 0;
margin: 0;
background-color: #fff;
}

#warapper{
text-align: left;
width: 800px;
margin:0 auto; /*ページ全体をセンタリングする指定*/
padding: 0;
background-color: #ffffcc;
}

#head{
background-color: #000;
height: 160px;
margin: 0 0 20px 0;
padding: 0;
position: relative;/*ロゴ画像を右下に配置するため*/
}

#topbar{
background-color: #dcdcdc;
height: 50px;
margin: 0 0 20px 0;
padding: 0;
}
#leftside{
background-color: #ccc;
width: 180px;
float: left;
padding: 0;
margin: 0 0 20px 0; /*下方向に余白を設ける*/
overflow:hidden;
}

#contents{
background-color: pink;
width:600px;
float: right;
padding: 0;
margin: 0 0 20px 0; /*下方向に余白を設ける*/

}

#contents_all{
background-color: pink;
margin: 0 0 20px 0; /*下方向に余白を設ける*/
padding: 0 0 0 0;
}

#footer{
background-color:#666;
text-align: center;
clear: both;
margin: 0;
padding: 0.5em 0;

}

.test {
background-color: red;
}

通報する

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

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2014/07/06 11:34

　ウェブページ製作されているならfirefoxと Firebug(

https://addons.mozilla.jp/firefox/details/1843 )はお使いだと思いますが、それはp要素のもつマージンだという事は分かりますよね。
　英文の場合は、段落は前後にmarginをとって表示するのが一般的ですが、日本語は文字も大きく、新しい段落はインデントで示しますので、タイプセレクタで
p{margin:0;line-height:1.8em;text-indent:1em;}
のようにしておくと良いでしょう。他のp要素--例えば画像を入れるためにpを使うときは、しdiv.figure>p{text-indent:0}として上書きします。

　まだスタイルシートでのデザインを始められたばかりのように見受けられますので、今のうちに大事な事を簡単に説明しておきます。
<!doctype html> これはHTML5のDocument typeですが、そうなるとdivは安直に使えません。

Note:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html … )
　著者は他に適切な要素がないときの最後の最後の手段としてdiv要素を使用する。

　この場合は明らかに
<body>
<header>
<h1>タイトル</h1>
<nav>
<p>ナビゲーション</p>
</nav>
</header>
<section>
<h2>本文タイトル</h2>
<p>記事</p>
<section>
<h3>項見出し項見出し項見出し</h3>
<p>HTML5ではh(headding)ではなくsectionの階層で階層が決まる。</p>
<section>
<aside>
<p>本文と直接関係ない(asideな)記事。これは本文より前に書かない!!</p>
</aside>
</section>
<footer>
<h2>文書情報</h2>
</footer>
</body>
　ですよ。
※HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
　たとえ(HTML4で)DIVを使っても<div id="warapper">や<div id="leftside">はありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』でしたから、
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<div class="nav">
＿＿＿<p>ナビゲーション</p>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>本文タイトル</h2>
＿＿<p>記事</p>
＿＿<div class="section">
＿＿＿<h3>項見出し項見出し項見出し</h3>
＿＿＿<p>記事</p>
＿＿</div>
＿＿<div class="aside">
＿＿＿<p>本文と直接関係ない(asideな)記事。これは本文より前に書かない!!</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿</div>
</body>
　プレゼンテーションにスタイルシートを用いる最大の理由は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」なのですから、HTMLに文書構造と関係ないことは書かないほうがメンテナンスも楽になります。例えば将来asidを右にしたいとか、スマホだと下にというとき、left-sideじゃまずいでしょ。

　そのうえで、スタイルシートでscreen対象のデザインをしていきます。
段組にfloatを使うと本文(section)内でfloatやcleaerが使えませんし、そもそも重要でないものを先に書くのはSEO的にもまずい。

[CSS2.1]<head></head>内に記述する場合。
・たったこれだけ
・必ず基点となるセレクタを書くようにしましょう。(CSS2.1)
・グループ化,継承を活用しましょう。
<style type="text/css" media="screen">
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0 auto;line-height:1.8em;}
p{text-indent:1em;}
div.header,div.section,div.footer{
width: 80%;
min-width:460px;max-width:800px;/* スマホや幅広ディスプレイ用下限と上限 */
margin:0 auto;padding: 5px;
position:relative;
}
div.header{
padding-bottom:50px;
min-height: 160px;
position: relative;
}
div.header div.nav{
height: 50px;
position:absolute;bottom:0;left:0;width:100%;
}
div.section{padding-bottom:20px;min-height:300px;}
div.section h2,div.section p,div.section div.section{
margin-left:180px;
width:auto;
}
div.section * p{margin:0;}
div.section div.section{min-width:0;min-height:0;padding:0;margin:0;}
div.section div.aside{
width: 180px;
position:absolute;
top:0;left:0;
height:100%;
}
/* 色づけ */
div.section div.aside p{background-color: red;}
div.header{background-color:black;}
div.header div.nav{background-color: silver;}
div.section div.aside{background-color: aqua;}
div.section{background-color: fuchsia;}/* pinkはキーワードにない */
div.section div.section{background-color:yellow;}
div.footer{background-color:gray;}
-->
</style>