2009 May 07

最近仕事の方で、横幅1024pxクラスのサイトを作るようになってきて、
クライアントに「A4で印刷できるようにできませんか?」と、よく言われるように(´ー`;)
確かに印刷サイズと画面のピクセルサイズがぜんぜん別規格になるので、観たままを印刷することは難しいのですけどね...

といっても、Firefox、Safariといったブラウザを使ってもらえれば、
ブラウザ側で自動縮小をしてくれるのでこの問題はほぼないのですけど...

IEだけが非対応...(ノД`)マタカヨ

まだシェア率が高いブラウザには違いないので、しっかりと対応するようにしないと(・ω・;)

今まで、「screen用スタイルシート」と「print用スタイルシート」を別々作って対応してきましたけど、「print用スタイルシート」は、アクマで内容を確実に印刷する為の設定ファイル設定なので、見た目だけでぜんぜん必要の無い箇所は非表示にしたりと、ブラウザで観た通りに印刷する事できないっていう問題があります。

納得してもらえるクライアントだったら良いのですけど、そうでないクライアントもいるので、色々調べてみました!
とりあえず、IE6、7で使用できる方法をみつけましたので、メモ書き程度に残しておきます(*'-')

IE専用プロパティ「zoom」を使います。
現段階(2009.05)のウチのサイトの横幅が、960pxで制作していますので、
横幅960pxのサイトをIE6でもちゃんと印刷出来るサイズ(649px)に変更する場合には、

* { zoom: 67%; }

の指定だけを印刷用のスタイルシート内に記入すれば基本はOKです(*'-')b

zoom指定のパーセント数字の出し方は、

649(印刷での表示幅) ÷ 960(スクリーンでの表示幅) x 100 = 67(端数切り捨て)

で、出しています。

それで、このままだと印刷用のスタイルシートを既存のスタイルシートと別ファイルを作らないといけないので...いつも作ってる方なら良いのですが、大概はメンドイ!って事になると思われます(笑)
ので、既存のスタイルシートに組み込んでしまいましょうヽ(´ー`)ノ

やり方は、

@media メディアタイプ名 {
(通常のスタイル指定を記入)
}

の記述を加えます。
具体的に書くと

/* =========== IE用印刷設定CSS =========== */

@media print{

body {
_zoom: 67%; /*WinIE only */
}

}

こんな感じ。

一応、WinIE6の方で検証してみたら、印刷プレビュー内でキレイにA4サイズで縮小されていました。

やっとIE8からブラウザ側で対応出来る用になるらしいのですけど、
WinIE6、7の環境の方はまだまだ使用ユーザーは多い思いますので、追加してみてはどうですか?(*'-')

今回の参考サイト様

◎印刷時専用のスタイルシートを作る - [ホームページ作成]All About
http://allabout.co.jp/internet/hpcreate/closeup/CU20050728A/

◎螺旋デザイン|はじめてのCSS 印刷用CSS:スクリーンと全く同じように印刷する
http://www.rasen-d.net/first-css/file34.html

TrackBack

このエントリーのトラックバックURL; http://mtw.cocotte.jp/cgi-bin/mt4/mt-tb.cgi/402
このエントリーのリンクURL: http://mtw.cocotte.jp/blog/diary/html/2009/05/07-2234.php

Comment

■コメントを投稿

  コメントをプレビュー

ご利用のブラウザ、設定ではコメントのリアルタイムプレビューはご利用になれません。


画像の中に見える文字を入力してください。

Amazon オススメ人気RANKING BEST8

Amazon ねんどろいど人気RANKING BEST8

Site Search

Tag Cloud


2002.6.6 count start