印刷用ページを作ってみよう

今回のテクニックは見た目に影響はありませんが、場面によっては強烈な威力を発揮します。さらなる使いやすさを提供したい方はぜひお使いください。

テクニック使用後

このテクニックを知るには印刷をする必要があります。ためしにこのページを印刷してみてください。

さて、印刷された方は分かると思いますが、画面に見えているものと、印刷されたものではずいぶん違いますね。ロゴや、ヘッドナビゲーション、広告が消えてコンテンツのみが印刷されていると思います。これが今回のテクニックです。

使い方は、印刷用のスタイルシートを作って、次のようなソースをHTMLファイルに加えるだけです。

加える場所はheadタグの内側です。スタイルシートを使っている方なら分かりますよね。
注意点は、普通のと印刷用の順番を間違えないことです。先に印刷用を書いてしまうと、印刷用スタイルシートが適用されないことがあります。

今回のポイントはmedia="all"とmedia="print"です。
スタイルシートはmedia属性を加えることで、ページを閲覧する環境によって使うスタイルシートを切り替えることができます。 media="all"は全ての環境で適用され、、media="print"は印刷するときに適用されます。
他にもテレビやモバイルなどに適用させることもできますが、printだけ覚えておけば十分だと思います。

使いこなすための＋α

今回のテクニックが有効なページとしては、このサイトのように参考書代わりになるページ、料理のレシピ、小説や漫画、イラストなどがあります。応用範囲は広いと思いますよ。

いくつか印刷用スタイルシートを作るポイントを書いておきます。

最初はmedia属性を指定せず、パソコンのディスプレイで確認しながら作ると楽。
ある程度できたら印刷プレビューで見て、よければmedia="print"にする。
display:none;を使っていらない要素は消してしまう。
例えばうちのサイトではヘッドナビ部分と広告を消しています。
フォントサイズはfont-size:14pt;のようにptで指定する。
普段見ている印刷物は10～11ptぐらいです。
color:#000000;を使って通常の文字色は黒にする
可読性やインクの節約のためにも重要です。
ページの横幅は640pxぐらいまでにすること。これより大きいと読みにくくなります。

もうひとつ大事なポイントがあります。これを忘れると、印刷しようとしたときブラウザー（IE）がフリーズしてしまいます。それは普通のスタイルシートでposition:absolute;を使用しないこと。おそらくブラウザーのバグだと思いますが、かなりの確率でフリーズします。ページが長いと起きやすいです。どんな状況で発生するのかの全貌はつかめていませんが、使わないほうが無難です。 position:rerative;は大丈夫なようです（うちのサイトに限ってですが）。もし追加で情報をお持ちの方がいれば、教えてください。

いままで、印刷用に別ページを作っていた方は今すぐにでも取り入れて欲しいテクニックです。容量や手間隙が大幅に減りますよ。

何気に自慢ですが、このposition:absolute;バグを紹介しているのは今のところうちのサイトだけでは無いかと・・・（未確認）発見＆解決のきっかけを与えてくれた、みぃさんに感謝！

一覧へ戻る