はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
印刷用CSS：スクリーンと全く同じように印刷する
2009/02/09
トモ・リーン
今回はスクリーンと印刷、全く同じようにする方法の紹介です！
図解：スクリーンと印刷、全く同じようにする概念図
ケンジ
う〜〜ん、前のヘッダの所みたいなことを全体でするんだよね？
トモ・リーン
ちょっと違います。
画像を縮小させたり、全てのサイズの再計算とかしていたら死んでしまいます。
そこでIE専用プロパティzoomの出番です！！
ケンジ
おお〜〜！
zoomプロパティ
zoom: 1; で実寸、zoom: 0.5; で1/2、zoom: 2; で２倍の大きさになる。
zoomで指定した数値をそのオブジェクトにかけてサイズを変えるプロパティです。
トモ・リーン
これをページ全ての要素にかけます。
具体的に言うと、800pxの幅のサイトをIE6でもキッチリ印刷出来るサイズ（649px）に変更する場合は
* { zoom: 0.8; }
と書きます。
ケンジ
・・・・・・。
ってゆーか、「0.8」って数値はどっから来たの？
トモ・リーン
649(印刷での表示幅) ÷ 800(スクリーンでの表示幅) =0.811125
つまり、800に0.811125をかけたら649になるのだけど、数値が細か過ぎるから「0.8」にしたのよ。
ケンジ
ふ〜〜〜ん。
納得だぜ！
トモ・リーン
実際に組んでみるわよ。
実際のHTML 全メディア用CSS 印刷用CSS
トモ・リーン
こんなかんじになります。
印刷用CSSの「*」にzoom:0.8しただけだけど。
IE6でのスクリーン表示と印刷プレビューの比較　※クリックで拡大します。
キャプチャ
IE7での印刷プレビューの比較　※クリックで拡大します。
キャプチャ
ケンジ
ん？
真ん中のメニューとコンテンツの幅がヘッダ＆フッタのより狭いよね。
おかしくね？？
トモ・リーン
（バレたか）そこは気合いで微調整します。
あと、じつはIE7の用紙幅に合わせる設定のレンダリングも、まぁまぁ、いいかげんなのです。
印刷用CSSでzoom設定していない場合はこんな↓感じになってるわよ。
IE7での印刷プレビューの比較：印刷用CSS無し　※クリックで拡大します。
キャプチャ
ケンジ
えええええ〜〜〜！！
印刷に関してはIE7のことは信じていたのに！！
ちっくしょおーーーーーー！！
トモ・リーン
こーいうのは根性で直します。
実際のHTML 全メディア用CSS 印刷用CSS
ケンジ
ってゆーか、トモ・リーン。
これメンドくさいよね？（数式とか出さないで根性とか言っちゃったし）
トモ・リーン
よく気づいたわね・・・・・・。
簡単そうだけど、実際に内容がある場合は面倒なのよ。
すべてのページで印刷時にズレがないか確認＋調整が必要なのよね。

デザイン上でもサイト全体を印刷するとしたら、どうしてもデザイン上、背景画像＋背景色を使うところが出てくると思うけど、白っぽいデザインにしておけば、それ程印刷時との違和感は出ないはずよ。
ケンジ
そっか〜。
やっぱり、背景処理無しでサイトを作るのも限界があるよね・・・。
トモ・リーン
他にもページ区切り問題とかあるのだけど、このあたりはまたコミ入ってくるので、また次回にします。
今回のポイント！
IE6の印刷設定はプリント用CSSにzoom指定で縮小しましょう！
IE7の用紙サイズに合わせて印刷内容を調整する機能は癖がありますので、不都合が出た場合は、手を入れましょう。
トラックバック(0)
このブログ記事を参照しているブログ一覧：印刷用CSS：スクリーンと全く同じように印刷する
このブログ記事に対するトラックバックURL
http://www.rasen-d.net/z/mt/mt-tb.cgi/123
コメントする
名前
e-mail
URL
コメント(スタイル用のHTMLタグを使うことができます)
オススメ本
HTMLタグ+スタイルシート辞典ちび

基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！

現場のプロから学ぶXHTML+CSS

実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト
TAG index

ものすごく使いやすいHTML & CSSのリファレンスサイト

CSSフリーライブラリー

色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会
CSS Nite

お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。

Re:Creator’s Kansai（リクリ）

関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！
アイコン：大藤幹のHYML/XHTML辞典
XHTML+CSS プロが教える“本当の使い方”

現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ
アイコン：大藤幹のHYML/XHTML辞典icon
大藤幹のHYML/XHTML辞典icon

HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪

アイコン：myPANTONE
myPANTONE

色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

POWERED BY MOVABLE TYPE® ver4