印刷用CSSを設定する

print.md

レスポンシブウェブデザインでCSS組みをする事が一般的になってきましたが、印刷対応まではほぼしていませんでした。 校正をプリントアウトする方から「印刷枚数が多すぎるので、なんとかならないか」という指摘を受けたので、最低限の対応をしたのでメモ。

コード

まずはコードをご覧ください。それを踏まえて、以下に補足します。

<script src="https://gist.github.com/blockworks/fe79c35bc6bf1c7cef86b760a4530b81.js"></script>

レイアウトの基本はPC版で

スマホ版・タブレット版は表示を大きくみせるため、印刷枚数を多く使ってしまいます。PC版は段組みレイアウトをしている事が多いでしょう。そのため、PC版のCSSコードをベースにしていきます。

@madiaでprint指定をする

そもそも、@madiaでprint指定をしていませんでしたｗ。なので、mediaにprintを追加します。

用紙と余白を指定する

@pageという、用紙サイズと余白を指定するプロパティがあるそうです。ただ、正直ブラウザサポートは微妙です。でもまぁないよりはましか、程度につけておきました。対応ブラウザはこちらから確認できます。

• [https://caniuse.com/#search=%40page:title]

背景色も印刷する設定

-webkit-print-color-adjust: exact;という記述をすることで、一部のブラウザは対応しているようです。webkit系だけですね。（chrome、safariはどうなんだろ？）こちらもないよりはましか、程度につけておきました。

今回のつみかさね

レスポンシブな上に、印刷対応までするのは正直しんどいですねｗ最近はchromeがIE化してきている気もします。早くそのあたりの環境が常に統一されるといいですね。

[asin:4295002356:detail]