CSSでプリント用のスタイルシートを書くことがいまいちない、この世の中だけど、Webサイトによっては、このプリント用のスタイルシートがすごく重要なものもあるんだと考える私。

例えば、資料的に使ってもらいたいような情報を提供しているサイトにおいては、この「プリントアウトする」という行為自体がクロスメディア戦略の一つになるのではないだろうか・・・。

なんてえらそうに言ってみてるけど、結局は、「プリントアウトしたほうが結構みやすいじゃん」ってことなんです。（個人的に）


なんで、このプリントアウトしたときの見栄えってのも気になる私。

じゃあ、どんな見栄えが必要かといえばまずは、「無駄なものは消す。」

例えば、プリントアウトしたときに、バナーなんてものは邪魔でしかないし、もしかしたら、ナビゲーションバーも不要のときもある。そこらは上手に情報整理する場所でしょう。
このバナーやらなんやらがあるせいで、プリントアウトしたときに、汚くなったり、紙資料としての価値が低くなったりするわけです。邪魔なものは消すということは必要です。
やり方としては、対象となるセレクタに対して、

display:none;

をすることになります。

続いてこれに付属して...ですが、「必要なものを出す」です。

例えば、webサイトではボタンというものは、意味があります。ユーザがクリックすれば、ハイパーリンクというインターネット独特の考え方で別のページへ飛べるからです。

でも、紙の上でそのボタンは果たして有効でしょうか？紙の上にあるボタンをおしても、当然ながらリンクされません。

では何が必要か？それは例えば、URL。時にはリンクページの説明でもいいでしょう。やり方は対象となるセレクタ（この場合はaタグが多いでしょうが...）に対して、

a:after{
    content:attr(href);
}

のようにcontentプロパティを指定してやることです。

ちなみに上記例では、aタグの後ろに、href属性で与えられている値を挿入しているという形になります。場合によっては、括弧をつけるなどして、見栄えをよくします。

しかし、ここで問題なのは、このやり方は、ブラウザ依存してしまうという点です。
特に...IEは反応しません。最近リリースされたgooglechromeは対応していました。IEは仕方ないと切り捨てる方法になりますが、僕自身、必要なものと考えています。


そして最後に「改ページ」のタイミング。
プリントアウトしたときによくあるのが、意味不明な部分での改ページです。

これを解決してくれるのが、page-break-beforeプロパティまたは、page-break-afterプロパティです。これは、要素の前後で改ページをしてくれるというものです。

例えば、h2タグの直前で改ページを行いたい場合などは、

h2{
    page-break-before:always;
}

とすれば可能です。

プリントアウトの際は、ブラウザ画面で見えるまま出力されたらいいというものではないでしょう。それはあくまでWeb主体の考え方。プリントアウトしてみてもらいたいようなコンテンツの場合は、そのときのスタイルまで気を配る必要があるでしょう。

こんなことを考えてみたのでした。

【参考資料】
Web標準の教科書　益子貴寛　著（p478-p485)