• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:印刷プレビューでレイアウトが崩れないようにしたいのですが…)

印刷プレビューでレイアウトが崩れないようにする方法

このQ&Aのポイント
  • 初心者がDreamweaverを使用してウェブページを作成する際に、IE6.0で印刷プレビューをするとレイアウトが崩れてしまう問題が発生しました。FireFoxでは崩れずに表示されています。この問題の原因と解決方法を教えてください。
  • 作成したウェブページのレイアウトが印刷プレビューで崩れる問題が起きています。IE6.0では崩れますが、FireFoxでは正しく表示されています。この問題を解決する方法を教えてください。
  • Dreamweaverを使用して作成したウェブページのレイアウトが印刷プレビューで崩れてしまう問題が発生しました。IE6.0では崩れますが、FireFoxでは正しく表示されています。この問題をどのように修正すれば良いでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
  • miya_00
  • ベストアンサー率47% (9/19)
回答No.1

上記ソースから判断しますと、印刷用のCSSの記述がない為レイアウトが崩れるって現象がおきていると思います。 CSSで印刷の時の反応する記述があるので下記ソースの用に書いて下さい。 @media print { ここにCSSを記述 } 印刷用のCSSについての基礎をここで書くのは無理な話なので http://www.google.co.jp/search?source=ig&hl=ja&rlz=&q=print.css&meta= ここのどれかのサイトを参考に勉強すると良いと思います。

chiyopapad
質問者

補足

回答ありがとうございました。 LINKしていただいたアドレスから、自分の知識でわかりやすいサイトを選んで印刷用CSSを作成し、印刷用CSSの背景色を変えて動作確認をしてみました。背景色は印刷プレビューで指定通りに変わっているので、印刷用CSSというのは適用されていると思うのですがレイアウトは崩れたままです。 250px×600pxの中に[.boxleft]と[.boxright]を横並びにしたいのですが、プレビュー画面だと500px×600px程度のエリア内に左上[.boxleft]右下[.boxright]で残りの部分は[.box]の背景色で表示されています。 試しに印刷用CSSの[.rightbox]の横幅を1px短くしてみたら、[.box]の中に収まりました。ただ、.boxは横幅が600pxに対し、.rightboxと.leftboxの横幅合計は599pxですよね。この1pxというのは、横並びに表示した時に、必ず出てくる余白みたいなものなんでしょうか? もしわかる方がいらっしゃいましたら、教えていただけたら嬉しいです。

関連するQ&A