ヤマレコblog

個人的に、「ブラウザで印刷することを想定して、どの程度のサイズでサイトを設計しておけばいいのか？」という疑問があったので、ちょっと調べてみました。





１．A4に印刷する場合のピクセル数

一般的なA4印刷に対するpixel計算の考え方は、はてなに質問がありました。
http://q.hatena.ne.jp/1175654835

■A4 の大きさは　297mm x 210 mm ですが、これをピクセル変換した値を教えてください

解像度によって異なりますが、
72dpiの場合　842px X 595px
150dpiの場合　1754px X1240px
300dpiの場合　3508px X 2480px

結局、ミリメートルやインチのような物理的な長さに対して、どれだけのピクセルを割り当てるかは表示デバイス（画面：ディスプレイ／紙：プリンタ）のDPI設定で決まるらしい。
ということがわかりました。





２．ブラウザを使って印刷する場合

で、本題のブラウザはどうかというと、IEでもFirefoxでも印刷設定をみても
DPI設定するところはなさそう。
画面のDPIに準じて96dpiにしてあるらしいです。

■印刷時、1pxは何mmになるのか
http://mynotes.jp/blog/2006/12/resolution

印刷時の解像度は96dpi、よって1px = 1/96inch = 約0.26mm (on Windows)

■印刷時、1pxは何mmになるのか(その2)
http://mynotes.jp/blog/2006/12/resolution2

ディスプレイの解像度を72dpiにしたときの、UAの印刷時の解像度

ディスプレイの解像度を72dpiにしたときの、UAの印刷時の解像度

UA	500px	1px	解像度
Internet Explorer 7	13.25cm	0.265mm	95.849dpi = 約96dpi
Firefox 2	17.7cm	0.354mm	71.751dpi = 約72dpi
Opera 9	17.7cm	0.354mm	71.751dpi = 約72dpi

なお、macだと画面のDPIが異なるようなので72dpiになる模様。
本当は調査してみたいんですが、手元のmac-miniが死亡しているので確認できない・・・

上記の記事を見ると画面のDPI設定に依存するので、例えば文字を大きくする、などの設定にすると、印刷範囲が変わってしまうとのことです。

まずは96dpi前提で作って良さそうだが、必要に応じてDPI値をカスタム入力する必要があるかもしれません。





３．計算

上記を踏まえて96dpiでA4印刷する場合は
・A4サイズは210mm x 297mm
　- IEの場合、上下左右に19.05mmの余白
　- Firefoxの場合、上下左右に12.7mmの余白
⇒ 余白を38.1mmとして、171.9mm x 258.9mmの幅に96dpi印刷する場合

1インチ=2.54cm
17.19cm/2.54*96= 649.7px
25.89cm/2.54*96= 978.5px





４．結論

印刷時のマージンを考えて、だいたい640px x 970px ぐらいになるようにコンテンツを用意しておけば、A4印刷ではみ出ないことが保障できるのかなぁと。

FirefoxやIE7の場合は、そもそも縮小印刷できるので縮小してもいい場合はあまり気にしなくてもいいようですが、ここの話題は「そのままのサイズで」印刷してもらうことを目的にした場合の話なので、対象外ということで。

何度か見かけていた「サイトは640px幅で」という主張について、印刷面でもとりあえず納得できる理由が確認できました。