CSSサイトの３段組レイアウトによる印刷ミス

現在CSSサイトの３段組レイアウトでのサイト構築を
しておりましてページが完成しました。

しかし印刷をしようとした際にIE6で印刷プレビューしようとすると、ヘッダーだけ出てきてしまい白い状態でまったく中身が印刷されませんでした。

三段組レイアウトの手法として下記の手法を用いております。

まず大本のブロック要素にoverflow:hiddenを指定し、
3カラムのすべてに、padding-bottom:32768pxを増やしmargin-bottom:-32768pxをネガティブします。

参考
http://css-happylife.com/log/css-template/000174 …

この設定をはずすと印刷はできるのですが、サイドの伸び幅がなくなってしまいます。
なんとかこの手法のまま印刷することは可能でしょうか？？

宜しくお願い致します。

No.2 ベストアンサー 回答者： abril 回答日時： 2008/03/01 18:31

CSSによるコラムのレイアウトはCSS使いの間ではもはや常識ですが、その際に使用されるfloat、position、padding、marginあたりのプロパティの解釈がメディアによって違う事があり、画面で表示される結果と印刷結果を（ほぼ）同一にするのは難しい場合も少なくないです。

パディングとネガティブマージンの設定を外せば背景のレンダリングは切れるが印刷はされる、という事であれば、やはりANo.1の回答者様もアドバイスされている様に、印刷時に影響を及ぼすスタイル設定の部分をscreenとprintというメディアで異なる設定に切り分けておくしかないかと…その際、制作者の立場からの考え方としては以下のいずれかになると思います。

(1)背景の色やらテクスチャやらは、印刷の際レンダリングがされなくても閲覧者にとって支障ない情報である、という程度のものであれば、screenに対する設定はそのままで、printに対してはパディングとネガティブマージンを削除するのみ。
(2)背景の色やらテクスチャやらが印刷の際も下端までレンダリングされていないと閲覧者にとって支障ある状態となる／もしくは制作を依頼したクライアントからその様に強く要求された、というのであれば、printに対してもscreenでの表示結果とほぼ同じにできる様なスタイル設定を何とかひねり出す。

個人的には(1)でかまわん、という考え方（むしろ印刷の時はヘッダー／フッタ／メニューも必要ないぐらい）なのですが、私も制作者の立場にいるので、クライアントからの依頼がある場合等はやむを得ず(2)の様に妥協策を併合する様にしています。ただ、厄介なのは印刷結果も環境（主にブラウザ）によって異なる、という問題があることで…質問者様の質問文中には「IE6で印刷プレビュー」とありますが、印刷結果はIE6からのみscreenメディアと大体同じになっていれば良い、ということでしょうか？それともIE6以外のモダン・ブラウザ（例えばFirefox）での印刷結果はこのままでもOKでIE6だけが上手くいかない、ということでしょうか？前者だったら比較的容易かもしれないのですが、後者だと場合によっては「あちらを立てればこちらが立たず」状態になりprintメディア用の設定でもhackを駆使する等して調整をしなければならない事もあります。更に印刷プレビューと印刷結果がまた異なったりすることも…
※別の質問にもありましたが、背景の印刷自体、IE6ではディフォルトになっていませんし…

とりあえず質問者様が(2)を余儀なくされる状況にあり、IE6での印刷結果だけ問題にする、と想定させて頂きます。
実際どの様に3コラムを組んでいるかにもよりますが、参考にされたサイトの様な、#contentsという親ブロックの中に#main/#sub/#exという3コラムの子ブロックが配置されるというパターンであれば、#main/#sub/#exの3コラムをぶち抜いたレンダリング用背景を作成し、printメディアに対する設定だけ、パディングとネガティブマージンを削除した上で、その画像を親である#contentsのbackgroundとして垂直方向にレンダリングさせ、子ブロックには背景を設定しない、という手法が有効な場合があります。

ただし上記で「有効な場合」とお断りさせて頂きました様に、実際の詳細な構成がわからない以上、3コラムのそれぞれの背景がどの様な感じのテクスチャであるかとか／各コラムごとに更にボーダーで囲まれていたりするのかとか／ヘッダーとフッターの境目の状態とか、諸条件にによっては更にもう一工夫や他のブロックに対してもスタイル設定の追加が必要であったり、という場合もありますので、あくまでも参考意見です。

この回答へのお礼

詳しいご説明ありがとうございます。
とりあえずIE6　IE7を対象にして行っていきたいと思います。

まずは印刷用ｃｓｓでうまくいくかどうかですね…。

また不明な点などあった際には宜しくお願いします。

お礼日時：2008/03/03 11:48

No.3 回答者： abril 回答日時： 2008/03/01 18:39

すみません、先程の訂正です。

参考サイトの構成に基づくなら、3コラム全ての親は#contents、ではなく#container、ですね。下記の文中の#contentsを#containerに置き換えて下さい。

No.1 回答者： SAYKA 回答日時： 2008/03/01 15:43

>padding-bottom:32768pxを増やしmargin-bottom:-32768pxをネガティブ

指定に忠実に印刷しようとしてるだけなんじゃないかな。

とりあえずそこだけ画面用として指定しておくとか…
http://www.tohoho-web.com/css/reference.htm#media

この回答へのお礼

ありがとうございます！
早速試してみたいと思います。

お礼日時：2008/03/03 11:46