- ベストアンサー
CSS floatの挙動について
- floatを使用して配置した画像と説明文が意図した位置に配置されない問題について質問です。
- 画像側にmarginを設定すると空白が設けられますが、説明文の文字数が多く、高さが画像の高さをオーバーすると、画像の方に溢れてしまいます。
- この問題を解決するためにはどのようにすれば良いでしょうか？ご教示いただけると幸いです。
- ninnikutips
- お礼率50% (56/110)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシート部分だけ、差し替える ★タブは＿に置換してあるので戻す。 ★HTMLの文書構造のマークアップさえきちんと出来ていれば、HTMLメンテナンスは楽になる。 デザイン関係はHTMLに一切書いてない。 そうしてあると、どのようにマークアップされていても、同じようにデザインできます。 ★もちろんデザインを変更すことも容易でわかりやすい。 div.figure imgと書かれていれば、figureブロック内の画像 ul.album li imgと書かれていれば、アルバムリスト内の画像 とね。 ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} /*ここから*/ div.figure,ul.album{width:50%;margin:5px auto;border:solid 1px gray;padding:5px 10px;} div.figure img,ul.album li img{ ＿float:left;display:block; ＿width:200px;height:auto; ＿margin:5px 10px; } ul.album {list-style:none;} ul.album li{margin:0;padding:5px;} div.figure div.figcaption,ul.album li p{margin-left:180px;} /* これを忘れると重なっちゃう */ div.figure div.figcaption:after,ul.album li:after{ ＿content:""; ＿display:block; ＿clear:left; ＿white-space:pre; } /* おまけ(色分け) */ body{background-color:gray;} div.header,div.section,div.footer{background-color:white;} --> ＿</style>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
仕様書は読まれたと思いますが・・ ＞浮動ボックスと他ボックスとの間のマージンは相殺しない（浮動ボックスと、そのフロー内の子の間でも相殺しない）。( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html#collapsing-margins ) ★二つ考慮しなければなりません。 1) floatする画像の周囲のマージン 画像の高さより文章が短いとき 2) 説明文が長いときのマージン 画像の高さより文章が長くなるとき たとえば、画像とその説明からなる挿入図としてマークアップされていたとします。 <div class="figure"> <img src="" width="" height="" alt=""> <div class="figcaption"> <p> 画像の説明文 </p> </div> </div> あるいは、 画像とその説明のリストだと <ul class="album"> <li><img src="" width="" height="" alt=""> <p> 画像の説明文 </p> </li> ・・・・ </ul> 画像をfloatさせるのですから、画像の幅を160pxとかにして・・ div.figure img,/*figureブロックのimg */ ul.album li img/* アルバムリストのimg */ { float:left;display:block; width:200px;height:auto; margin-right:10px;/* 回りこむ文書との間隔 */ } div.figure div.figcaption,/*figureブロックの説明ブロック */ ul.album li p/* アルバムリスト中の段落 */ { margin-left:180px;/* 説明文章が長いとき */ } [サンプル] ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みのHTML4.01strictとCSS2.1です。 ★タブは＿に置換してあるので戻す。 ★http:はhttp：(全角：)に置換してあるので戻す。 ★DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) に使用しています。 ★画像はWikiのものを使用しています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http：//www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- あとで・・ --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="figure"> ＿＿＿<img src="http：//upload.wikimedia.org/wikipedia/commons/thumb/3/3b/%E5%8C%97%E6%92%AD%E7%A3%A8%E4%BD%99%E6%9A%87%E6%9D%91%E5%85%AC%E5%9C%92%E3%81%AE%E3%83%90%E3%83%A9%E3%80%8C%E5%8D%83%E4%BB%A3HT%E3%80%8DP6023030%E5%8D%83%E4%BB%A3HT.JPG/160px-%E5%8C%97%E6%92%AD%E7%A3%A8%E4%BD%99%E6%9A%87%E6%9D%91%E5%85%AC%E5%9C%92%E3%81%AE%E3%83%90%E3%83%A9%E3%80%8C%E5%8D%83%E4%BB%A3HT%E3%80%8DP6023030%E5%8D%83%E4%BB%A3HT.JPG" width="160" height="120" alt="千代(HT)"> ＿＿＿<div class="figcaption"> ＿＿＿＿<p> ＿＿＿＿＿バラ（薔薇）は、バラ科バラ属の総称である。あるいは、そのうち特に園芸種（園芸バラ・栽培バラ）を総称する。ここでは、後者の園芸バラ・栽培バラを扱うこととする。 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿バラ（薔薇）は、バラ科バラ属の総称である。あるいは、そのうち特に園芸種（園芸バラ・栽培バラ）を総称する。ここでは、後者の園芸バラ・栽培バラを扱うこととする。<strong>説明文が長いとき</strong> ＿＿＿＿</p> ＿＿＿</div> ＿＿＿<img src="http：//upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Mrs._Herbert_Stevens_May_2008.jpg/250px-Mrs._Herbert_Stevens_May_2008.jpg" width="250" height="179" alt="ミセス・ハーバート・スティーブンス"> ＿＿＿<div class="figcaption"> ＿＿＿＿<p> ＿＿＿＿＿バラ（薔薇）は、バラ科バラ属の総称である。 ＿＿＿＿</p> ＿＿＿</div> ＿＿</div> ＿＿<ul class="album"> ＿＿＿<li><img src="http：//upload.wikimedia.org/wikipedia/commons/thumb/3/3b/%E5%8C%97%E6%92%AD%E7%A3%A8%E4%BD%99%E6%9A%87%E6%9D%91%E5%85%AC%E5%9C%92%E3%81%AE%E3%83%90%E3%83%A9%E3%80%8C%E5%8D%83%E4%BB%A3HT%E3%80%8DP6023030%E5%8D%83%E4%BB%A3HT.JPG/160px-%E5%8C%97%E6%92%AD%E7%A3%A8%E4%BD%99%E6%9A%87%E6%9D%91%E5%85%AC%E5%9C%92%E3%81%AE%E3%83%90%E3%83%A9%E3%80%8C%E5%8D%83%E4%BB%A3HT%E3%80%8DP6023030%E5%8D%83%E4%BB%A3HT.JPG" width="160" height="120" alt="千代(HT)"> ＿＿＿＿＿<p> ＿＿＿＿＿＿あるいは、そのうち特に園芸種（園芸バラ・栽培バラ）を総称する。 ＿＿＿＿＿</p> ＿＿＿</li> ＿＿＿<li><img src="http：//upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Mrs._Herbert_Stevens_May_2008.jpg/250px-Mrs._Herbert_Stevens_May_2008.jpg" width="250" height="179" alt="ミセス・ハーバート・スティーブンス"> ＿＿＿＿＿<p> ＿＿＿＿＿＿バラ（薔薇）は、バラ科バラ属の総称である。 ＿＿＿＿＿</p> ＿＿＿</li> ＿＿</ul> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ご丁寧なご説明、どうもありがとうございました。 時間をかけて拝見いたしました。 float属性の二つ目以降の要素でマージンを設定するとがx=0から計算されるのは仕様なんですね。 今後はそれを前提に組んでいくことにします。 floatは知らないことがまだたくさんあるなあ。。。と言うのが今の感想です。 そして、ulはこんな使い方もあるのかと今更知りました。 文書構造の作り方も丁寧で参考になりました。 独学でやってることもあり、こうして見せて頂く事が何よりの勉強にもなります。 ありがとうございました。