※ ChatGPTを利用し、要約された質問です(原文:印刷プレビューでレイアウトが崩れないようにしたいのですが…)
印刷プレビューでレイアウトが崩れないようにする方法
このQ&Aのポイント
初心者がDreamweaverを使用してウェブページを作成する際に、IE6.0で印刷プレビューをするとレイアウトが崩れてしまう問題が発生しました。FireFoxでは崩れずに表示されています。この問題の原因と解決方法を教えてください。
作成したウェブページのレイアウトが印刷プレビューで崩れる問題が起きています。IE6.0では崩れますが、FireFoxでは正しく表示されています。この問題を解決する方法を教えてください。
Dreamweaverを使用して作成したウェブページのレイアウトが印刷プレビューで崩れてしまう問題が発生しました。IE6.0では崩れますが、FireFoxでは正しく表示されています。この問題をどのように修正すれば良いでしょうか?
印刷プレビューでレイアウトが崩れないようにしたいのですが…
HPを作成しようと思っている初心者です。
Dreamweaverというものでホームページを作ろうと思っているのですが、作成したページをIE6.0で確認し印刷して確認しようとしたところ、画面で見たレイアウトとは違う形で印刷されていて、どこを修正したらいいのかわからず困っています。FireFoxでは印刷プレビューを見てもレイアウトは崩れていませんでした。原因や解決方法がわかれば教えていただけませんでしょうか?よろしくお願いします。
OS=WINDOWS XP
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
<!--
body,td,th {font-size: 13px; line-height: 140%;}
img{border-width : 0px ;}
body{
margin-top: 0px;
margin-right: 0px;
}
.box {
float: left;
height: 250px;
width: 600px;
background-color: #FFFFCC;
}
.boxleft {
float: left;
height: 250px;
width: 190px;
background-color: #FFCCFF;
padding-left: 10px;
}
.boxright {
float: right;
height: 250px;
width: 380px;
background-color: #CCFFFF;
padding-right: 10px;
padding-left: 10px;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="boxleft">ピンクの背景(左)</div>
<div class="boxright">青の背景(右)</div>
</div>
</body>
</html>
※.boxのバックグラウンドカラーが右上と左下に出てしまいます。
プレビューでは.boxの背景は出てないのですが………。
補足
回答ありがとうございました。 LINKしていただいたアドレスから、自分の知識でわかりやすいサイトを選んで印刷用CSSを作成し、印刷用CSSの背景色を変えて動作確認をしてみました。背景色は印刷プレビューで指定通りに変わっているので、印刷用CSSというのは適用されていると思うのですがレイアウトは崩れたままです。 250px×600pxの中に[.boxleft]と[.boxright]を横並びにしたいのですが、プレビュー画面だと500px×600px程度のエリア内に左上[.boxleft]右下[.boxright]で残りの部分は[.box]の背景色で表示されています。 試しに印刷用CSSの[.rightbox]の横幅を1px短くしてみたら、[.box]の中に収まりました。ただ、.boxは横幅が600pxに対し、.rightboxと.leftboxの横幅合計は599pxですよね。この1pxというのは、横並びに表示した時に、必ず出てくる余白みたいなものなんでしょうか? もしわかる方がいらっしゃいましたら、教えていただけたら嬉しいです。