アプリ版：「スタンプのみでお礼する」機能のリリースについて

Firefoxでの回り込み解除について

解決済

  • 質問者：tomoko_fujita
  • 質問日時：
  • 回答数：5件

［サイトのタイトル画像］［サイトのアイコン画像］
<div id="contents">
<P>本文．．

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

印刷する時のprint.cssファイルで、アイコン画像を｛display：none；｝とし（A4紙に収まらないので）、続いて　#contents｛clear：left；｝と記述しました。

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.2ベストアンサー

こんにちは。


まず、
>［サイトのタイトル画像］［サイトのアイコン画像］
と、並べて画像を配置したい場合ならば、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
    • 件
通報する

No.5

ごめんなさい。


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

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

No.4

  • 回答者： abril
  • 回答日時：

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



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

No.3

ごめんなさい、


<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
    • 件
通報する

No.1

  • 回答者： abril
  • 回答日時：

> タイトル画像に［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質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報