凸 ブロックのつみかさね

デザイン、技術メモ、レビュー中心の雑記ブログ

印刷用CSSを設定する

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

コード

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

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

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

@madiaでprint指定をする

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

用紙と余白を指定する

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

背景色も印刷する設定

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

今回のつみかさね

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

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

©blockworks.