- 締切済み
IEの印刷プレビューでレイアウトが崩れてしまう
ＨＰ作成の際にＩＥで段組みレイアウトを組むと印刷プレビューで行ずれを起こしてしまいます。 たとえば、 全体の幅(755px)＝メニュー(55px)＋本文(700px) とすると本文がメニューの下に回り込みをしてしまいます。 （メニュー＋本文を754pxに設定すると印刷プレビューはうまくいくみたいなんですが・・・） 原因や解決方法がわかれば教えていただけませんでしょうか？ よろしくお願いします。 ※ソースは以下のとおりです。 <body style="background-color: #cccccc;"> <div style="width: 755px;margin: 0px 0px 0px 20px;background-color: #ffffcc;"> <div style="background-color:#CC6666;float:left;width:55px;height:200px">メニュー</div> <div style="background-color:#CCCC66;float:right;width:700px;"> 本文<br> 本文 </div> <div style="clear:both;"></div> </div> </body>
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- k0021
- ベストアンサー率26% (32/120)
No.2ですが下記アドレスと異なると思いますが。 ＩＥ5.5の環境を設定できますが。 ＩＥ5.5の環境を設定してテストして見て下さい。 ＣＳＳ指定は 全体の幅(756px)＝メニュー(55px)＋本文(700px) 合計に全て1px追加で良いと思いますが。 私の場合は、全体の幅(755px)＝メニュー(54px)＋本文(700px) どちらか一方を1px減らしていますが。
- adobe_san
- ベストアンサー率21% (2103/9759)
それプリンターの問題ですね。 プリンターで勝手にフォント置き返して出力しての段ズレです。 なので回避するには 画像にして出力か、フォントダウンロードできるプリンターでの対応となります。
お礼
ご回答ありがとうございます。 クライアントのプリンタ環境がちとわからないので、 印刷用のＣＳＳをいちから作ってみようかと今思っております。 プリンタ毎にフォント違いますものね...。 ＰＤＦにして印刷しろとも言えないですし...。
- k0021
- ベストアンサー率26% (32/120)
すいません印刷プレビューでは無く。 何処で発生したか不明ですが。 ie55かMozilla Firefoxか不明ですが。 本文がメニューの下に回り込みをしてしまいますので。 全体の幅(755px)＝メニュー(55px)＋本文(700px) 無く 全体の幅(756px)＝メニュー(55px)＋本文(700px) 合計に全て1px追加しました。 ％指定は殆ど使用していませんが。全体の幅の合計が99％で全体の幅は100％指定していますが。 使われ事は無いと思いますが、縦書きで印刷プレビューで見ると色々の問題が発生するよ。
お礼
ご回答ありがとうございます。 Firefox3.03ではレイアウトチェックしたのですがそれでは段ズレ起こすことなく表示されているんです。 ＩＥ5.5は手元にないので、ちょっと確認できなくて申し訳ございません。 ピクセル指定でレイアウトプレビューみるといろいろ問題が起きてくるみたいですので、やはり印刷用ＣＳＳを％表示で作り直すしかないんでしょうかねぇ。 Firefoxは自動調整してくれるんですが...。
- adobe_san
- ベストアンサー率21% (2103/9759)
印刷しようとしてる用紙の印刷可能範囲をピクセルで計算してください。 どうも微妙に印刷可能範囲より大きいのだと思います。
お礼
ご回答ありがとうございます。 755pxだと印刷できないという解釈でよろしいでしょうか？ 印刷用ＣＳＳbodyタグに_zoom: 80%;等を書き込み （メニュー＋本文）＝外側のＢＯＸ全体を用紙の中に収まるように表示しても段ズレが起きてしまうんですよね...。
お礼
ご回答ありがとうございます。 ご丁寧にＵＲＬもありがとうございます。 実はこのソースのメニューと本文の部分が実際はもっと入り組んでいて 画像等を実際は使用するため、 メニュー部分と本文部分はdisplay表示はピクセルで固定しないといけないんです...。 印刷用ＣＳＳだけピクセル減らしても、色んなプリンタに対応しているかわからなくって...。 もう諦めて、全部％表示の印刷用ＣＳＳを作ろうかと思っております...。