• 締切済み

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

下記のような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 Pゴシック", "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; }

  • CSS
  • 回答数1
  • ありがとう数9

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

 ウェブページ製作されているなら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#the-div-element )  著者は他に適切な要素がないときの最後の最後の手段として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/html5-diff/#new-elements )  たとえ(HTML4で)DIVを使っても<div id="warapper">や<div id="leftside">はありません。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』でしたから、 <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-html401j/intro/intro.html#h-2.4.1 )」なのですから、HTMLに文書構造と関係ないことは書かないほうがメンテナンスも楽になります。例えば将来asidを右にしたいとか、スマホだと下にというとき、left-sideじゃまずいでしょ。  そのうえで、スタイルシートでscreen対象のデザインをしていきます。 段組にfloatを使うと本文(section)内でfloatやcleaerが使えませんし、そもそも重要でないものを先に書くのはSEO的にもまずい。 [CSS2.1]<head></head>内に記述する場合。 ・たったこれだけ ・必ず基点となるセレクタを書くようにしましょう。(CSS2.1) ・グループ化,継承を活用しましょう。 <style type="text/css" media="screen"><!-- HTML5はtypeは不要,mediaはかならず指定しておく --> 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>

関連するQ&A

  • divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

    divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・?

    • ベストアンサー
    • CSS
  • float の clear

    CSS によるレイアウトを試しています。 float を中断したいときにはその次の要素で clear=left|right する、というのは理解したのですが、この clear, 要素のネストを無視するのでしょうか。 たとえば次のソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>File Browser</title> <style type="text/css"> <!-- #leftside { background-color: #66FF00; float: left; width: 120px; height: 120px; } #rightside { background-color: #33CC99; margin-left: 120px; } #navlink .boxrow { float: left; height: 30px; width: 120px; background-color: #CC9999; margin: 5px; } #content { background-color: #CCFF99; height: 300px; clear: left; } --> </style> </head> <body> <div id="leftside"> </div> <div id="rightside"> <div id="navlink"> <div class="boxrow"></div> <div class="boxrow"></div> <div class="boxrow"></div> </div> <div id="content"> </div> </div> </body> </html> (rightside の要素の中なので)content の clear により navlink の直下に配置されて欲しいのですが、leftside の float まで clear してしまっているようです。 親の要素の中だけで clear することはできないのでしょうか?

    • ベストアンサー
    • HTML
  • CSSでfloatした要素の高さを100%にしたい

    はじめまして。 下記のコードは、HTMLファイルで<head>内に<style>を設けて、そこでCSSを操作しています。 この中で<section>が一か所あるのですが、この要素を一番したの<footer>まで届かせたいのですが、hight: 100%, min-height:100%などにしても言うことを聞いてくれません。 heightを極端に大きくすれば<footer>まで届きますが、それ以外にCSSを使ってきちんとアジャストする方法があれば、ご教授いただければ幸いです。 以下コードです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html { height: 100%; } body { height: 100%; margin: 0; position: relative; } #root { background: #ccc; min-height: 100%; width: 100%; } header { background: red; height: 30px; width: 100%; } nav { background: gray; float: left; width: 20%; height: 400px; } section { background: green; float: left; width: 70%; min-height: 100%; /** <----- なぜか下まで行かない **/ padding: 60px 0; } footer { background: blue; height: 200px; width: 100%; position: absolute; bottom: -25px; left: 0; margin: 0; } </style> </head> <body> <div id="root"> <header>header</header> <nav>nav</nav> <section>section</section> <footer>footer</footer> </div> </body> </html> 

    • ベストアンサー
    • CSS
  • CSS floatについて教えて下さい。

    【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか?初心者ですので、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • floatを適用したdiv内部にあるpタグのmarginについて

    floatを適用したdiv内部にあるpタグのmarginについて 現在HTMLとCSSを勉強している者です。 cssのmarginの挙動がいまいち理解できずに困っていたもので、 ご回答いただきたく質問させていただきました。 以下私が作ったサンプルHTMLとCSSです。 ==========HTML========== <div id="test01"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test02"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test03"> <p>Pタグで囲まれた文章です。</p> </div> <div id="clear"> <p>clear: bothです。</p> </div> (<body>前、</body>後省略) ==========CSS========== html, body, div { margin: 0; padding: 0;} p {margin: 10px; padding: 0;} div#test01 {background-color:#EEE; width: 900px;} div#test02 {background-color:#CCC; float: left; width: 650px;} div#test03 {background-color:#AAA; float: left; width: 250px;} div#clear {background-color:#888; clear:both; width: 900px;} 先頭に900pxのdiv(test01)、その下に二つのdiv(test02、03)をfloat:leftで並べました。 最後にclear:bothを行っております。 そして各div内に10pxのmarginを付与したpタグ文字を入力しているのですが、先頭のdivとfloat:leftを行ったdivで、marginの結果が異なってしまいました。 先頭のdivは上下に白い10pxの余白、左はtest01で指定した背景色を残したまま10pxの余白が作られ、float:leftのdivではtest02、03で指定した背景色を残したまま上下左右に10pxの余白が作られています。 このように同じ効果のpタグでも表示が異なってしまう理由は何でしょうか。 また先頭のdivの場合、上下左右に10pxの白または背景色の余白ができるのなら理解できるのですが、何故上下と左右でmargin結果が異なるのか、理由も知りたいです。 おそらくpaddingを併用すれば思った表示にはできると思うのですが、今回はこうなってしまう理由が知りたく質問させていただきました。 また私の記述方法に誤りがあればご指導いただけると助かります。 宜しくお願い申し上げます。

  • CSSで文字が流れ込んでしまいます

    CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。 どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto;    margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto;    margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>

    • ベストアンサー
    • HTML
  • floatすると親要素より横にずれてしまいます

    #contentsにある2つのボックスが左へ20pxほどずれてしまいます。 いろいろと調べてみたのですが解決できませんでした。 長文になってしまい申し訳ありませんが、ご指導よろしくお願いします。 <<CSS>> body { font-size:10px; margin: auto; padding: 0; text-align:center; min-width: 810px; max-width: 850px; height: 100%; } #wrapper { width: 830px; height:100%; margin-left:auto; margin-right:auto; padding-top: 10px; padding: 0; background-color: #FFF; } #header { width: 830px; height: 150px; margin: 0; padding-bottom: 0; min-height: 1%; overflow: hidden; line-height: 0px; background: url(back_top.gif) #F9F9F7 center top no-repeat; } img { display:block; } #logo { float: left; width: 450px; height: 78px; padding-top: 50px; padding-bottom: 0; margin-left: 40px; background: transparent; } #logo h1 { width: 450px; height: 78px; font-size:12px; margin: 0; padding-bottom: 0; background: transparent; } #navi { float: right; width: 310px; height: 50px; padding-top: 60px; margin-right: 30px; line-height: 0px; } #contents { width: 830px; min-height: 600px; margin: 0; background: url(back_main.gif) #F9F9F7 center repeat-y; } #contents #sub { float: left; width: 180px; height: auto; text-align: center; } ul { margin: 0; padding: 0; float: left; width: 180px; list-style: none; color: #794c2c; background-color: #EDE4EB; } li { display: block; margin: 0; padding: 0; font-size: small; } li span { display: block; font-size: x-small; } li#c01 a { background: url(c01.jpg) 7px 5px no-repeat; } li#c02 a { background: url(c02.jpg) 7px 5px no-repeat; } li a { display: block; min-height: 40px; padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; text-decoration: none; color: #aa8f78; background-color: #F3EEDE; } ul li a:hover { color: #794c2c; background-color: #F3FAD1; } /* Hides from IE-mac \*/ * html ul li a, * html ul li { height: 40px; line-height: 1.5; } /* End hide from IE-mac */ /* line-heightはli間の隙間をなくするために指定 */ #contents #main { float: right; margin-right: 50px; width: 500px; height: auto; background-color: transparent; } #footer { width: 830px; height: 100px; background: url(back_bottom.gif) #F9F9F7 center no-repeat; margin: 0; } <<html>> <body> <div id="wrapper"> <div id="header"> <div id="logo"><h1><a href="/"><img src="../../Documents/logo.png" width="450" height="78" border="0" alt="HOMEPAGE" /></a></h1></div> <div id="navi"><p>SAMPLE</p> <div id="srchBox">**yahoo検索窓** </div></div> <div style="clear:both;"></div> <div id="contents"><div id="sub"><ul><li>&nbsp;</li><li id="c01"><a href="c01.htm">c01<span>c01</span></a></li><li>&nbsp;</li><li id="c02"><a href="c02.htm">c02<span>c02</span></a></li</ul></div> <div id="main"><img src="../../Documents/001.jpg" width="400" height="354" border="0" /></div></div> <div id="footer"><table border="0" width="750" height="100" align="center"><tr><td width="250" height="70" align="center" valign="top">AAA</td><td width="250" height="70" align="center" valign="top">BBB</td><td width="250" height="70" align="center" valign="top">CCC</td></tr><tr><td colspan="3" width="750" height="30">&nbsp;</td></tr></table></div> </div> </div> </body>

  • floatタグの使い方

    FOM出版 WEBクリエイター検定 初級のテキスト問題で分からないことがあります。 詳しいかたお力をおかしください。 htmlファイルの記述ーーー(少し簡略化してます) <!DOCUTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www3c.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="left"> <p>古代の七不思議</p> </div> <div class="right"> <p>古代の七不思議</p> </div> </body> </html> CSSの記述ーーー .left{color:#000000; background-color:#cccc99; padding:10px; margin-left:10px; width:300px; float:left; } .right{color:#000000; background-color:#cccc99; padding:10px; margin-left:350px; width:300px; } これが正解のようで、クラスleftの右にクラスrightが回り込みます。 しかし僕にはクラスrightに記述したmargin-left:350px;がよく分かりません。 divタグでボックスを二つ創ってあるので、.leftにfloat:left;の記述をして .rightが回り込んで.rightにmargin-left:10px;記述とかで隙間が開くのだと思っていました。 ちなみに.rightのmargin-left:350px;を10pxにして.rightにもfloat:left;とかけるとうまく回り込みます。これもよくわかりません。 つたない文章で分かりづらいかもしれませんが、どうか解説をお願いいたします。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • cssでのdiv要素内div要素の上部marginについて

    毎回コーディング中に起きる問題で、 独学でcssを学んだために一番スマートなやり方がわからずその場しのぎで対応していたのですが、 毎回モヤモヤしてしまっていたので綺麗なやり方を知りたく思い質問させて頂きました。 まずはこの画像を見て下さい。 http://pajt.paq.jp/t/a/p/test.html 赤のボックスを緑のボックス内で上部からmarginをとりたいのですが、 緑の要素ごと黄色の要素からmarginとってしまいます。 横はきれいにmarginをとれるのに上のmarginがうまくいきません。 簡易的に書くとこのようなものです。 ↓ http://pajt.paq.jp/t/a/p/test2.html <html> <head> <title>画像</title> <style type="text/css"> <!-- #yellow { width:300px; height: 10px; background: #00FFFF} #green { width:200px; height: 400px; background: #00FF00} #green #red { width: 50px; height: 50px; margin: 50px; background: #FF0000} --> </style> </head> <body> <div id="yellow"></div> <div id="green"> <div id="red"> </div> </div> </body> </html> こういったコーディングをする際に、なるべくスマートな記述の方法を教えて頂きたいです。 宜しくお願いします。

  • marginが効いてくれません。

    下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>

    • ベストアンサー
    • HTML