お世話になります。
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ベストアンサー
- 回答日時:
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
- 回答日時:
直接の回答は既にされているので蛇足かもしれませんが参考程度にどうぞ。
CSS2.1 で追加された display プロパティの値に inline-block があります。
この指定をされた要素は表示される際に置換要素のように振る舞います。
floatやpositionによって浮動している要素はその幅が内容の末までのような振る舞いになります。浮動させる要素には幅指定が必要とされていますが。
Web標準というよりHTMLの妥当性に関した話ですが、提示されている構成は問題ないと思います。
>>#3
> 文字列の無いPタグを使うのが気持ち悪いというだけで、あまり深い意味はありません。
この場合は p 要素を用いるべきです。文字列は img 要素の alt 属性値にあります。
Web標準を考慮するのであれば尚更 div 要素直下にインラインレベルの記述をすることはあり得ません。
No.3
- 回答日時:
基本的にはWeb標準から外れた書き方ではないことは他の方々の回答でもおわかりだと思います。
(img に関しては高さ、幅を記述しておいた方が良いと思いますが)
Type2に関しては、私なら、
<div style="float: left;"><img src="sample.gif" alt="sample" /></div>
<p>右に回り込ませる文章</p>
と書くかもしれません。
文字列の無いPタグを使うのが気持ち悪いというだけで、あまり深い意味はありません。
No.2
- 回答日時:
> ●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
- 回答日時:
ご回答ありがとうございます。
ご指摘いただいたサイトを拝見しました。
まだ完全に理解できていませんが、大変参考になります。
お礼が遅くなり申し訳ありません。
またよろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript htmlとcssに関する質問です 3 2022/12/06 05:36
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- Perl perlで2次元配列をサブルーチンに値渡しで渡す 5 2022/12/17 18:49
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?↑
-
テーブルの行を折りたたみたい...
-
htmlの文字が縦書きになる
-
HTML入門でもう躓いてしまった。
-
アコーディオンメニューが思う...
-
goo は、放置?
-
パソコンのマイク機能
-
HTMLタグのあるCSVファイルを利...
-
WEBページを強制的に横画面で見...
-
Duolingo のソースコードの名前...
-
、URL化させるにはどうしたらい...
-
CSSについて教えてください。 ...
-
HTMLで画像をポップアップで表...
-
HTMLです 画像のように表せます...
-
12月のカレンダーを表すHTMLを...
-
css初心者 フレックスボックス...
-
HTML電卓で1文字消す方法
-
CSSのホバーエフェクト
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルのセルデータを自動改...
-
goo は、放置?
-
htmlソース文の 各行 改行位置...
-
1つの「ホームページビルダー2...
-
HPレイアウトが同じページのヘ...
-
CSS、Bootstrapについて contai...
-
CSSについて教えてください。 ...
-
静止画画像をクリックすると音...
-
、URL化させるにはどうしたらい...
-
テーブルの行を折りたたみたい...
-
css初心者 フレックスボックス...
-
WEBページを強制的に横画面で見...
-
Webページのリンクの貼り方を教...
-
Duolingo のソースコードの名前...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネ...
-
コードを書いて下さい( ; ; )...
-
HTMLで画像をポップアップで表...
-
角丸画像の背景色を透明にした...
おすすめ情報