btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

CSS

各種ブラウザの印刷のバグが治る(かも知れない)CSS の設定。

投稿日:

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) ゴルァ」となる場面で登場している設定です。
たぶん何らか意味があったと思うんですが、特定の何かのためっていうより、もはやおまじないに近いような…………。
入れなくても大丈夫かも知れませんが、入れといても害はないと思うので、とりあえず入れておいたらどうでしょう、な感じです。







-CSS
-, , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSS のプロパティの書き順をちゃんと決めることにした。

「今さらかよ」という声が聞こえてきそうですが。 前々から「いつかやろう」「これが終わったらしよう」と思いつつ早幾月。 ようやく踏ん切りが付きました。 ので、自分はこういう順番で書きますよー、という宣言 …

no image

背景画像を設定した要素のテキストに IE でもドロップシャドウを表示する方法。

CSS3 には「text-shadow」というプロパティがあり、これを指定するだけでテキスト要素に影を付けることができます(色や距離やぼかし具合もコントロール可)。 ただし、IE 以外ですが。例に漏れ …

no image

今日は裸の日 – CSS Naked Day。

4 月 9 日は「CSS Naked Day」ということなので、便乗してみます。 »CSS Naked Day…公式(?)サイト »そういえば裸の日でした|CSS HappyL …

no image

jQuery で CSS を切り替えて文字サイズを変更する 2 つの方法。

最近、文字サイズの切り替えボタンを設置しているサイトも多くなってきましたね。 自治体や病院など公共性の高いサイトを中心に、導入が進んでいるようです。 僕自身も医療系のサイトに関わることが多いのですが、 …

no image

IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。

ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。 IE6 で float を使ったレイアウトをしているとき、文章の末尾(最後の2文字くらい)が変なと …