- ベストアンサー
float と text-indent について
floatを利用して、画像を右か左に寄せたとき、ネットエスケープ7.1でインデント2emが反映されない。(IE6は、OK) 同じく背景を画像に合わせて付けたいのですが、何かいい方法はありませんか。 2つの疑問についてお願いいたします。 <HTML> <HEAD> <TITLE>無題ドキュメント</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- p { background-color: #99CC00; text-indent: 2em; font-size: 12px} img { float: right} --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <p><IMG src="test.jpg" width="100" height="75">floatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについて</p> </BODY> </HTML>
- azisaihana
- お礼率83% (10/12)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
indentに関しては#2の方と同じ意見です。但し、どちらの解釈が正しいかはちゃんと調べていません。（そもそも文書型宣言がないので、どちらが正しいも何もないのですが。。） 解決策ですが、下記のようにするとどうでしょうか。 <HTML> <HEAD> <TITLE>無題ドキュメント</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css; charset=Shift_JIS" /> <STYLE type="text/css"> <!-- p { background-color: #99CC00; text-indent: 2em; font-size: 12px; } img { float: right; } --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <IMG src="test.jpg" width="100" height="75"> <p>floatとtext-indentについてfloatとtext-indentについてfloatとtext- indentについてfloatとtext-indentについてfloatとtext-indentについて</p> </BODY> </HTML> もうちょっと綺麗にするなら下記のようになります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang="ja"> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css; charset=Shift_JIS"> <TITLE>無題ドキュメント</TITLE> <STYLE type="text/css"> <!-- body { background-color:#FFFFFF; color:#000000; } p { background-color: #99CC00; text-indent: 2em; font-size: 12px; } img { float: right; } --> </STYLE> </HEAD> <BODY> <IMG src="test.jpg" width="100" height="75" alt="test image"> <p>floatとtext-indentについてfloatとtext-indentについてfloatとtext- indentについてfloatとtext-indentについてfloatとtext-indentについて</p> </BODY> </HTML> ＞同じく背景を画像に合わせて付けたい これについては、ちょっとどうしたいのかわかりませんのでまた別の機会に。
その他の回答 (2)
- 08narutotoruna
- ベストアンサー率25% (5/20)
回答ではないのですが、画像を回り込みさせて、インデントが反映されないのは、正しい動作だと思います。 IEが、勘違いしているのだと思います。 ブロック要素（ここではp要素）の最初に画像を書いていると、インデントは、画像に反映されるはずです。 それで、インデントが反映された画像を右側に回りこみさせているので、画像の後に書かれている文章には、インデントは適用されないと思われます。 それと、失礼ですが、img要素に必須のalt属性が抜けてます。今回うっかり忘れてしまったのならかまいませんが、普段から付け忘れているのなら、つける習慣をつけたほうがいいと思います。
お礼
回答ありがとうございます。 ブロック要素の意味もあまり考えず、タグを打っていたけど、改めて考えさせられました。
- potan
- ベストアンサー率27% (18/65)
おはようございます、potan です。 不思議ですね・・ potan もどうにかfloatをつかってやってみようとしたんですが、撃沈でした。。 変わりにtableをつかったソースを書いてみました。表示上では上記ソースとほぼ変わりないはずです。（Win版IE6.02とN7.1で動作確認済み） 少しでもお役に立てれば幸いです。(^ ^) <HTML> <HEAD> <TITLE>無題ドキュメント</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- table{background-color: #99CC00;} td.text { text-indent: 2em; font-size: 12px; vertical-align:top;} --> </STYLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="text" style="text-indent: 2em;"> floatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについてfloatとtext-indentについて<br> </td> <td width="100"> <IMG src="test.jpg" width="100" height="75" border="0"><br> </td> </tr> </table> </BODY> </HTML>
お礼
ありがとうございます。 一人でもくもくと悩んでいたのですごく助かります。
お礼
ありがとうございます。 さっそく、試してみました。ちゃんと反映されてました。 これで、少しは先に進めそうです。