[サイトのタイトル画像][サイトのアイコン画像]
<div id="contents">
<P>本文..

..というページを作りました。
タイトル画像に[align="left"]として、アイコン画像をタイトル画像のすぐ右に並べてあります。

印刷する時のprint.cssファイルで、アイコン画像を{display:none;}とし(A4紙に収まらないので)、続いて #contents{clear:left;}と記述しました。

MSIEだとアイコン画像が表示されないだけの’希望するデザイン’になるのですが、Firefoxだと本文がタイトル画像の右側に回りこんでしまいます。

<div id="contents">の位置指定は行っていないのですが、絶対or相対位置指定しないと、Firefoxで本文がタイトル画像へ回り込むのを止めるのはムリでしょうか?
他にも方法がありましたらご教示ください

このQ&Aに関連する最新のQ&A

A 回答 (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 版 ブラウザについては、印刷のプレビュー機能がないので、
印刷表示については解りません。(印刷してみれば、解るのですが…。)
    • good
    • 0

ごめんなさい。


この場をお借りして、訂正します。

確かに、印刷のプレビューが出来ました。大変失礼しました。
    • good
    • 0

> Windows 版 ブラウザについては、印刷のプレビュー機能がないので、



…?ありますよ?私のNo.1での答えは実際にプレビューで見てから言ってますから。
    • good
    • 0

ごめんなさい、


<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>

でした。
    • good
    • 0

> タイトル画像に[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でスタイルを一括した方が良いですよ。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング