[CSS]ウェブページを印刷対応にする際に、加えておくと効果的なスタイルのまとめ

ウェブページを制作する際に、デスクトップ・スマフォ・タブレットと多様なデバイスでの表示を検討する必要がありますが、プリンターでの印刷も忘れてはならない大切なデバイスです。

あなたのウェブページを印刷対応にする際に加えておくとよい、シンプルで効果的なスタイルシートを紹介します。

The printer is a device too!

Responsive Design.isは文字通り、レスポンシブ デザインについてさまざまな情報を提供するサイトで、「プリンターも大切なデバイスですよ！」というのは、確かに忘れがちですね。

印刷対応にするスタイルはHTML5用で、シンプルながら非常に効果的なスタイルがまとめられています。
多くのウェブページはそのまま適用しても問題ないと思います。

CSS

@media print {
  section { display: block; page-break-before: always; }
  pre code {page-break-after: always;}
  @page {
margin-top:0.4cm;
margin: 0.5cm;
}
p a, code, pre {
word-wrap: break-word;
}
img {display:none;}

pre a[href]:after {
    content: ""; }


pre abbr[title]:after {
    content: ""; }

pre   .ir a:after,
  pre a[href^="javascript:"]:after,
  pre a[href^="#"]:after {
    content: ""; }

.no-print {display:none;}

}