CSSの浮動ボックスとWeb標準に関する疑問

質問

お世話になります。
CSSを使った回り込みのせレイアウトでWeb標準に関する疑問について教えてください。

2通りの記述を考えました。
■Type1ソース
<p><img style="float: left;" src="sample.gif" alt="sample" />右に回り込ませる文章・・・....・・・・</p>

■Type2ソース
<p style="float: left;"><imgsrc="sample.gif" alt="sample" /></p>
<p>右に回り込ませる文章・・・....・・・・</p>

[質問1]
●CSSのfloatプロパティでleftを設定した要素はブロックレベル要素になると理解しています。その場合Type1ソースのimg要素はブロックレベル要素になり、p要素はブロック要素を子要素としてもてない規則に違反する気がしますが、Web標準として良いのでしょうか。

[質問2]
●Type2ソースもWeb標準で認められているか自身が持てません。

[質問3]
●回り込みレイアウトに関して、基本的な勘違いをしていないか大変気になっています。実際に良く使われる書き方などがあれば教えてください。

よろしくお願いします。

回答No.5

LLLuna · ベストアンサー

CSS2の仕様書に「'float'が'none'以外の値をもつときは，'display'は'block'に設定され，ボックスは浮動する。」
とあることから、float:leftを設定した要素はブロックレベル要素になるというのは間違いではありません。しかし、これは飽く迄表示上の変化であり、文書構造上で変化するわけではありません。よって、Type1ソースは標準に違反していません。逆に、例えばspan要素にdisplay:blockを指定したからといって、それにp要素を含めることは許されません。また、Type2も違反ではありません。
なお、CSS2ではfloatを設定した場合はwidthを0と仮定することになっており、その為floatと同時にwidthを設定することが推奨されますが、CSS2.1ではfloatを設定した場合のwidthは適当なサイズに設定されることになります。が、現在ではwidthを指定しておいた方が無難でしょう。

ただ、回り込みという表現が必ずしも適切ではないことに注意してください。（参考URIを参照のこと）

参考URL：

http://mb.blog7.fc2.com/blog-entry-61.html

お礼

ご回答ありがとうございます。
>表示上の変化であり、文書構造上で変化するわけではありません。よって、>Type1ソースは標準に違反していません。逆に、例えばspan要素にdisplay:>blockを指定したからといって、それにp要素を含めることは許されません。

ずっと気になっていた点で大変分かりやすく説明していただきありがとうございます。理解が深まりました。

回り込みの表現についてのご指摘ありがとうございます。サイトを見ながら勉強していきます。

ありがとうございました。

回答No.4

quads

直接の回答は既にされているので蛇足かもしれませんが参考程度にどうぞ。

CSS2.1 で追加された display プロパティの値に inline-block があります。
この指定をされた要素は表示される際に置換要素のように振る舞います。

floatやpositionによって浮動している要素はその幅が内容の末までのような振る舞いになります。浮動させる要素には幅指定が必要とされていますが。

Web標準というよりHTMLの妥当性に関した話ですが、提示されている構成は問題ないと思います。

>>#3
> 文字列の無いPタグを使うのが気持ち悪いというだけで、あまり深い意味はありません。
この場合は p 要素を用いるべきです。文字列は img 要素の alt 属性値にあります。
Web標準を考慮するのであれば尚更 div 要素直下にインラインレベルの記述をすることはあり得ません。

お礼

inline-blockはご指摘いただいて,始めて知りました。
自分なりに調べてみます。

詳しい解説ありがとうございます。

回答No.3

frogeye

基本的にはWeb標準から外れた書き方ではないことは他の方々の回答でもおわかりだと思います。
（img に関しては高さ、幅を記述しておいた方が良いと思いますが）

Type2に関しては、私なら、

<div style="float: left;"><img src="sample.gif" alt="sample" /></div>
<p>右に回り込ませる文章</p>

と書くかもしれません。
文字列の無いPタグを使うのが気持ち悪いというだけで、あまり深い意味はありません。

お礼

ご回答ありがとうございます。
img要素への幅と高さはつい忘れてしまいます。

ありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

> ●CSSのfloatプロパティでleftを設定した要素はブロックレベル要素になると理解しています。
なりません。
ブロック要素のように表示するにはdisplay:blockなどの指定が必要です。
（細かく言うと、ブロック要素になるわけではありません。
あくまで「そのように見せる」というだけです。）

> ●Type2ソースもWeb標準で認められているか自身が持てません。
認められていますが、Type1とは目的が違います。
こうすると違いがわかるかも。

<p><img src="sample.gif" style="float:left;">あ<br>い<p>
<p>う</p>

<p style="float:left;"><img src="sample.gif">あ<br>い<p>
<p>う</p>

<p>にborderやbackground-colorを指定すると、よりわかりやすくなります。

お礼

ご回答ありがとうございます。
早速指摘していただいた例を試して見ました。
大分floatについて理解が深まってきました。

ありがとうございました。

回答No.1

steel_gray

float指定＝浮動ボックス化ですが
ブロックレベル要素化ではありませんので心配要りません。
http://www.y-adagio.com/public/standards/tr_css2/visuren.html#floats

お礼

ご回答ありがとうございます。
ご指摘いただいたサイトを拝見しました。
まだ完全に理解できていませんが、大変参考になります。

お礼が遅くなり申し訳ありません。
またよろしくお願いします。