締切済み

IEの印刷プレビューでレイアウトが崩れてしまう

2008/10/22 23:50

ＨＰ作成の際にＩＥで段組みレイアウトを組むと印刷プレビューで行ずれを起こしてしまいます。たとえば、全体の幅(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>

chaga
お礼率98% (52/53)

HTML
回答数4
ありがとう数6

みんなの回答 （4）
専門家の回答

みんなの回答

k0021
ベストアンサー率26% (32/120)

2008/10/23 18:47 回答No.4

No.2ですが下記アドレスと異なると思いますが。ＩＥ5.5の環境を設定できますが。ＩＥ5.5の環境を設定してテストして見て下さい。ＣＳＳ指定は全体の幅(756px)＝メニュー(55px)＋本文(700px) 合計に全て1px追加で良いと思いますが。私の場合は、全体の幅(755px)＝メニュー(54px)＋本文(700px) どちらか一方を1px減らしていますが。

参考URL：: http://www.onflow.jp/blog/archives/2005/09/internetexplore.html

質問者

お礼 2008/10/24 16:47

ご回答ありがとうございます。ご丁寧にＵＲＬもありがとうございます。実はこのソースのメニューと本文の部分が実際はもっと入り組んでいて画像等を実際は使用するため、メニュー部分と本文部分はdisplay表示はピクセルで固定しないといけないんです...。印刷用ＣＳＳだけピクセル減らしても、色んなプリンタに対応しているかわからなくって...。もう諦めて、全部％表示の印刷用ＣＳＳを作ろうかと思っております...。

adobe_san
ベストアンサー率21% (2103/9760)

2008/10/23 17:22 回答No.3

それプリンターの問題ですね。プリンターで勝手にフォント置き返して出力しての段ズレです。なので回避するには　画像にして出力か、フォントダウンロードできるプリンターでの対応となります。

質問者

お礼 2008/10/24 16:44

ご回答ありがとうございます。クライアントのプリンタ環境がちとわからないので、印刷用のＣＳＳをいちから作ってみようかと今思っております。プリンタ毎にフォント違いますものね...。ＰＤＦにして印刷しろとも言えないですし...。

k0021
ベストアンサー率26% (32/120)

2008/10/23 15:01 回答No.2

すいません印刷プレビューでは無く。何処で発生したか不明ですが。 ie55かMozilla Firefoxか不明ですが。本文がメニューの下に回り込みをしてしまいますので。全体の幅(755px)＝メニュー(55px)＋本文(700px) 無く全体の幅(756px)＝メニュー(55px)＋本文(700px) 合計に全て1px追加しました。％指定は殆ど使用していませんが。全体の幅の合計が99％で全体の幅は100％指定していますが。使われ事は無いと思いますが、縦書きで印刷プレビューで見ると色々の問題が発生するよ。

質問者

お礼 2008/10/23 16:31

ご回答ありがとうございます。 Firefox3.03ではレイアウトチェックしたのですがそれでは段ズレ起こすことなく表示されているんです。ＩＥ5.5は手元にないので、ちょっと確認できなくて申し訳ございません。ピクセル指定でレイアウトプレビューみるといろいろ問題が起きてくるみたいですので、やはり印刷用ＣＳＳを％表示で作り直すしかないんでしょうかねぇ。 Firefoxは自動調整してくれるんですが...。

adobe_san
ベストアンサー率21% (2103/9760)

2008/10/22 23:56 回答No.1

印刷しようとしてる用紙の印刷可能範囲をピクセルで計算してください。どうも微妙に印刷可能範囲より大きいのだと思います。

質問者

お礼 2008/10/23 16:28

ご回答ありがとうございます。 755pxだと印刷できないという解釈でよろしいでしょうか？印刷用ＣＳＳbodyタグに_zoom: 80%;等を書き込み（メニュー＋本文）＝外側のＢＯＸ全体を用紙の中に収まるように表示しても段ズレが起きてしまうんですよね...。

関連するQ&A

印刷プレビューでレイアウトが崩れないようにしたいのですが…
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">  </style> </head> <body> <div class="box"> <div class="boxleft">ピンクの背景（左）</div> <div class="boxright">青の背景（右）</div> </div> </body> </html> ※.boxのバックグラウンドカラーが右上と左下に出てしまいます。プレビューでは.boxの背景は出てないのですが………。
- ベストアンサー
- HTML
このcssをIEで見ると？
お世話になります。下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css">  </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
レイアウトが崩れます
汚いソースで失礼します。メニューとコンテンツとサブメニューがありますがこの３つの高さを保つにはどうしたらいんでしょうか？コンテンツ部分の高さが長いと　メニューとサブメニューの高さは短いままで　ダサい感じなんです。　なんとご説明したらいいのやら（汗コンテンツ部分が長くてもメニューとサブメニューの高さを自動に設定させるようにするには、どうしたら良いのでしょうか？ご教授願います HTMLのソース＋CSSです↓ <html> <body> <div class="wrapper"> <div class="header"> ヘッダーになります<br> </div> <div class="main"> <div class="menu"> menu<br> menu<br> menu<br> menu<br> menu<br> menu<br> </div> <div class="contents"> コンテンツになります<br> コンテンツになります<br> コンテンツになります<br> コンテンツになります<br> </div> <div class="submenu"> サブメニューはこちらです<br> サブメニューはこちらです<br> </div> </div> <div class="footer"> フッター<br> </div> </div> </body> </html> CSS .wrapper { width: 900px; margin: 0 auto; line-height: 1.5; } /* メイン*/ .main { width: 900px; } /* ヘッダ*/ .header { width: 900px; height: 200px; background-color: #66FFFF; background:url(img/top2.jpg) ; } /* Menu*/ .menu { width: 150px; float: left; background-color: #FFFF99; } /*コンテンツの設定*/ .contents { float: left; width: 600px; background-color: white; } /*SubMenuの設定*/ .submenu { float: left; width: 150px; height: 300px background-color: #66FF66; } /* 下の設定 */ .footer { clear: both; width: 900px; border-top: 1px dotted gray; height: 20px; text-align: center; font-size:0.7em; background-color:black; }
- ベストアンサー
- HTML
wrapperなしでCSSのレイアウトは組まない方がいいですか？
いつもお世話になっております。実はふとした疑問というか挑戦といいますか・・・いつもはとあるサイトさんからダウンロードしたテンプレートの枠組みを使用していたので、余り気にしていなかったのですが、今回フッター部分もヘッダー部分と同様にrepeat-xをして永遠に延長したデザインを作りたいと考えています。ヘッダー部分は背景を上に合わせて作れば問題ないと思うのですが、フッター部分はページごとに縦の長さが違うためそれぞれ別のスタイルシートを要するのもなんとなくやめたほうがいいようなきがしています。そこでいつもはwrapperで囲っていたためにヘッダー部分しか横軸を延長できなかったのですが、フッター部分だけをwarapperからはずして延長させたいとおもっています。これは可能でしょうか？どうかよろしくお願いいたいします。 body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:50px; background-color:#CCFFCC; clear:both; } ------------------------------------- <body> <DIV id="wrap">  <div id="head"> </div>  <div id="left"> </div>  <div id="right"> </div>  <div id="foot"> </div> </DIV> </body> ------------------------------------------------- これを・・・ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:50px; background-color:#CCFFCC; clear:both; } ------------------------------------- <body> <DIV id="wrap">  <div id="head"> </div>  <div id="left"> </div>  <div id="right"> </div>  <div id="foot"> </div> </DIV> <div id="foot"> </div> </body> ------------------------------------------------- このようにwrapperからはずしてレイアウトすることは可能でしょうか？色々いじっているとなんとか見た目はできたのですが、縮小するとフッターが真ん中あたりに来たり、なにかと不安でして・・・かなり長文になりましたが、どうかよろしくお願いたします。
- ベストアンサー
- HTML
clear: bothの事で質問です。
XHTML+CSSを勉強してる初心者ですが。この場を借りて質問させてもらいます。判らない事は (1) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 300px;width: 400px;float:left;">画像の説明</div> <br style="clear: both;" /> (2) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 100px;width: 400px;float:left;">画像説明</div> <div style="clear: both;"></div> (1)と(2)では、 (1)は<br style="clear: both;" />と記入してますが (2)は<div style="clear: both;"></div>と記入してます。この(1)と(2)は同じなのでしょうか？それと使うとするならどちらのほうが有効的なのでしようか？教えていただければ光栄です。
- 締切済み
- CSS
floatについて
■ □ と並んでいた場合■にスタイルシートでfloat:leftとすると□が右にきますよね。( ■□となる) それで私はfloat:leftは『次に来る要素を自分の右に移動させる』と解釈してました。それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか？次に要素がきていないからあっても意味がないと思ったのですが、実際はずしてみると間に幅ができてデザインが崩れてしまいます。また全体の枠を見えるよう最初のdivに.wakuで設定したのですがfloat:leftがあるときには長い一本の線になってしまいます。どうしてこうなるのでしょうか？ <html> <head> <style type="text/css"> .waku{border-color:#cccccc;border-style:solid;border-width:3px;} .set1{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;float:left;} .main{border-color:#cccccc;border-style:solid;border-width:1px; width:500px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;font-weight:bold;float:left;} .set2{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;font-weight:bold; color:#ffffff;margin:0 2.5;float:left;} </style> <div class="waku" align="center"> <div class="set1"> <div>左1</div> <div>左2</div> </div> <div class="main">真ん中</div> <div class="set2">右</div> </div>
- ベストアンサー
- HTML
floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2">  <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div>  <div class="news"> あ </div> <div class="topics"> い </div>  <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。どこをどう直したら良いかアドバイスいただけますようお願いします。
- ベストアンサー
- HTML
IE6のレイアウト崩れ
お世話になります。下記の内容でレイアウトをしております。 firefox3.08ではほぼ思い通りですが、 IE6では、menuがmainの左下に入り込んでしまい、 mainが真ん中より少し左にずれてしまうのです。解決策を教えてください。情報が足らないようでしたら、ご連絡下さい、宜しくお願い致します。 body { font-size : medium; } div#container { width : 730px; } div#header { font-size : 12px; width : 725px; } div#navi { width : 725px; clear : both; font-size : 12px; } .topicpath{ clear : both; width : 725px; margin : 3px 0 3px 0; } div#main{ float : right; width : 540px; } div#menu{ float : left; width : 170px; font-size : 12px; } div#footer { width : 725px; clear : both; font-size : 75%; } <div id="container"> <div id="header"> </div> <div id="navi"> </div> <div class="topicpath"> </div> <div id="main"> </div> <div id="menu"> </div> <div id="footer"> </div> </div>
- ベストアンサー
- HTML
CSSでのレイアウトが崩れてしまうんです。
お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }
- ベストアンサー
- ブログ
CSS block 表組 position:absolute;
まったくの初心者です。本当の初心者なので、凄いことをしていたり説明が分かりにくいかもしれませんが、ご教授、よろしくお願い致します＊・blocka の長方形が上・上記blockaの下を　blockb blockc blockdに縦に分けるこれで四角のまとまりができます。・この四角のまとまり、の右側をbody指定しました。 blocka blockb blockc blockdを#FFFFFFに。 bodyを#CCCC99にしたいです。下を書いたのですが、 .contents{ width:700px; background-color:#FFFFFF; 背景色#FFFFFFが、div.blocka、だけに反映されるんです。 div.blockb、div.blockc、div.blockdには、 body{ margin:0px; padding:0px; background-color:#CCCC99; } bodyの#CCCC99が反映されています。改善できる方法をご存じないでしょうか。私のおかしな説明で簡単に理解できるかどうか判りませんがよろしくお願い致します＊ ***************************************************** /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#CCCC99; } body a img{ border: none; } .contents{ width:700px; background-color:#FFFFFF; } div.blocka { width:500px; height:150px; margin-left:100px; } div.blockb { width:100px; float: left; } div.blockc { width:200px; position:absolute; left:100px; } div.blockd { width:200px; position:absolute; left:300px; }
- 締切済み
- HTML

IEの印刷プレビューでレイアウトが崩れてしまう