float を使って段組みのレイアウトにしているとき、印刷がおかしくなることが多々あります。
というか、おかしくならないことの方が多い。
というか、float を使ってなくてもおかしくなることの方が多い。
(特に、IE6、IE7、IE8、Firefox あたり)
そんなとき、こんな印刷用 CSS を作っておいたら解決するかもよ! 的な内容です。
まず、HTML は以下のような感じ。
<div id="wrapper">
<div id="contents">
(色々コンテンツが入ってる)
</div>
<div id="sidebar">
(サイドメニューとかバナーとか)
</div>
</div>
#contents と #sidebar に float が設定されていて、段組みになっていると思ってください。
その親要素が #wrapper という状態ですね。
(ヘッダーとかフッターとかグローバルナビとかは、とりあえず無視)
で、印刷用の CSS は以下。
(言わずもがなですが、link 要素に「media="print"」をお忘れなく!)
body {
/zoom: 0.7; /* IE6,7 */
} …①
html>/**/body #wrapper { /* IE6,7 以外 */
display: table;
} …②
html>/**/body #contents { /* IE6,7 以外 */
display: table-cell;
float: none;
width: XXXpx;
vertical-align: top;
} …③
html>/**/body #sidebar { /* IE6,7 以外 */
display: table-cell;
float: none;
width: XXXpx;
padding-left: XXXpx;
vertical-align: top;
} …④
#contents {
/zoom: 1; /* IE6,7 */
} …⑤
#sidebar {
/zoom: 1; /* IE6,7 */
} …⑥
縮小率設定
①は、IE6 と IE7 だけ 70% 縮小する設定です。
IE8 以降であれば紙のサイズに合わせて自動的に縮小してくれたりするんですが、それ以前のバージョンではそんな気の利いたことはできません。
そのままのサイズで印刷しようとしますから、だいたいの場合、はみ出てしまいます。
ので、こちらで予め小さくしてます。
(そこらへんはユーザー側で操作できるんですけど、それは期待しない方がいいです)
縮小率は制作したサイトの幅に応じて適宜調整。
float を table-cell に置き換え
②、③、④は、float を table-cell に置き換える処理です。
float は本来段組みするためのスタイルではないので(だから崩れやすいんでしょうけど)、それをテーブルで組み直してやろうということですね。
但し、IE は ver.8 以降しか対応していないので、とりあえず適用対象からは除外してます。
まず②でテーブルにする範囲全体を決めて、③と④でセルに当たる部分を定義しています。
③の width には、ディスプレイ表示用に設定した値を入れてください。
④の width には、ディスプレイ表示用に設定した値と、#contents との間のマージンをプラスした値を入れてください。
例えば、全体の幅が 900px で、#contents を 600px、#sidebar を 280px にして 20px のマージンを取っている場合、④の width は 300px になります。
そして、padding-left に 20px を設定する、という感じ。
ここが今回のキモになるんですが、要は float と table の違いですね。
古き懐かしきテーブルレイアウトを思い出してみましょう。
③と④の最後、たぶんデフォルトでは上下中央揃えになっちゃってるので、それを「vertical-align: top;」で上揃えにします。
これもまぁテーブル特有の設定。
zoom:1 ……?
⑤と⑥は……、何だったっけ…………。
正直ちゃんと覚えてないですが、様々な「IE6(,7) ゴルァ」となる場面で登場している設定です。
たぶん何らか意味があったと思うんですが、特定の何かのためっていうより、もはやおまじないに近いような…………。
入れなくても大丈夫かも知れませんが、入れといても害はないと思うので、とりあえず入れておいたらどうでしょう、な感じです。