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

上付き(下付き)の設定は(X)HTMLタグかCSSか。

「m3」や「CO2」など、上付き・下付き文字を設定する場合にいつも悩みます。 上付き(下付き)にすることに意味があるような気がするので、(X)HTMLで問題ないとは思いつつ。 でもやっぱり見た目をコン …

no image

floatとline-heightを一緒に指定すると、文字が欠ける。

ときどきWindowsのIEで、文字が数ピクセル欠けて表示されることがあります。 その原因の一つが、floatとline-heightを一緒に指定していること。 とりあえず同じ要素に指定しなければ発生 …

no image

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

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

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …

no image

OOCSS(Object Oriented CSS:オブジェクト指向CSS)を初めて知った。

「CSSや画像の命名規則について : Web Design KOJIKA17」という記事を読んで、「OOCSS(Object Oriented CSS:オブジェクト指向CSS)」のいうのがあることを初 …