- ベストアンサー
Firefoxでの回り込み解除について
［サイトのタイトル画像］［サイトのアイコン画像］ <div id="contents"> <P>本文．． ．．というページを作りました。 タイトル画像に［align="left"］として、アイコン画像をタイトル画像のすぐ右に並べてあります。 印刷する時のprint.cssファイルで、アイコン画像を｛display：none；｝とし（A4紙に収まらないので）、続いて #contents｛clear：left；｝と記述しました。 MSIEだとアイコン画像が表示されないだけの’希望するデザイン’になるのですが、Firefoxだと本文がタイトル画像の右側に回りこんでしまいます。 <div id="contents">の位置指定は行っていないのですが、絶対or相対位置指定しないと、Firefoxで本文がタイトル画像へ回り込むのを止めるのはムリでしょうか？ 他にも方法がありましたらご教示ください
- tomoko_fujita
- お礼率42% (63/150)
- HTML
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんにちは。 まず、 >［サイトのタイトル画像］［サイトのアイコン画像］ と、並べて画像を配置したい場合ならば、float 要素を使ってみて下さい。 所謂、浮動ボックスを使って画像を並べ、テキストには回り込み解除を させるため、id 名 contents に clear : left を利用しましょう。 そして、印刷時には［サイトのアイコン画像］を非表示にして、 テキストの回り込みをクリアしたいと言うことならば、 span 要素を利用して、サイトのアイコン画像 だけを印刷時に非表示にしましょう。 CSS の一例 class でも id でも構いませんが、私は class を使用。 @media print { span.icon {display : none ;} } div.sample {float : left ;} #contents {clear : left ;} html の一例 <!DOCTYPE> や <meta> <link> <body> <html> などは省略。 (xhtml での記述になります) <div class="sample"> <img src="title の画像" width="xxx" height="xxx" alt="title 画像" /> <span class="icon"> <img src="icon の画像" width="xxx" height="xxx" alt="icon 画像" /> </span> </div> <p id="contents"> ここは、回り込みを解除する要素、clear : left ; を使用しています。 </p> 取り敢えず、Mac 版 Firefox , Opera , Safari で確認 OK でした。 (Mac には印刷プレビューがある。) Windows 版 ブラウザについては、印刷のプレビュー機能がないので、 印刷表示については解りません。(印刷してみれば、解るのですが…。)
その他の回答 (4)
ごめんなさい。 この場をお借りして、訂正します。 確かに、印刷のプレビューが出来ました。大変失礼しました。
- abril
- ベストアンサー率69% (388/560)
> Windows 版 ブラウザについては、印刷のプレビュー機能がないので、 …？ありますよ？私のNo.1での答えは実際にプレビューで見てから言ってますから。
ごめんなさい、 <div class="sample"> <img src="title の画像" width="xxx" height="xxx" alt="title 画像" /><span class="icon"><img src="icon の画像" width="xxx" height="xxx" alt="icon 画像" /></span> </div> でした。
- abril
- ベストアンサー率69% (388/560)
> タイトル画像に［align="left"］として、アイコン画像をタイトル画像のすぐ右に並べてあります。 > 印刷する時のprint.cssファイルで、アイコン画像を｛display：none；｝とし（A4紙に収まらないので）、続いて #contents｛clear：left；｝と記述しました。 つまりこういう事ですよね？ ■HTML（画像サイズは適当） <img src="images/hoge1.jpg" alt="サイトのタイトル画像" width="500" height="50" align="left" /><img src="images/dummy1.gif" alt="サイトのアイコン画像" width="50" height="20" class="hoge1"> <div id="contents"> <p>本文</p> <p>本文</p> <p>本文</p> </div> ■print用CSS img.hoge1 { display: none; } div#contents { clear: left; } Firefox2/3でも印刷プレビューを見る限りは解除されている様ですが…？ > <div id="contents">の位置指定は行っていないのですが、絶対or相対位置指定しないと、Firefoxで本文がタイトル画像へ回り込むのを止めるのはムリでしょうか？ いえ、そんな筈はないです。こちらでの検証結果もそうですが、適切に指定していれば回り込みは解除できる筈です。 他の指定部分に原因があるのか、あるいはprint用CSSの記述に何かIEだと見過ごされてしまう様なミスがあるのか… もう少し細かい情報がないと、現状では同じ結果を得られない為原因の特定は難しいです。 それからどうせCSSを使用するなら、半端にalign="left"とかの装飾的な属性をHTML側に残すのは一切やめて、CSSでスタイルを一括した方が良いですよ。
