印刷用（プリント用）cssについて

スマートフォンや携帯電話の普及で、webサイトを印刷はすることが少なくなってきている。

なんだけど、稀に印刷までしっかり組んでほしいという要望があるので備忘録。

横幅をA4に無理やり納める方法

以下の様にscaleでページ全体を縮小してしまうのが有効倍率はwebサイトの横幅とA4の差異に合わせて変更。

@media print {
    body{
        transform: scale(0.7);
        transform-origin: 0 0;
    }
}

縮小する前の、ページまたぎの部分で変な間が開くことがある。その部分に画像があると、見切れたり画像が表示されないことがある。

これはブラウザ事に仕様が異なるので注意。 edgeなんかは基本的にbackgroundは印刷されない。

疑似classなんかに、背景色の画像を作ってはめ込めば印刷されるけど果てしなく無駄なので、基本はやらない。

chromeで背景色を印刷するには、以下の方法が有効。

インク代がもったいなさそうだし、仕様のブレが出そうなのであんまり使いたくはない。

@media print {
    body{
        -webkit-print-color-adjust: exact;
    }
}

たまにしか見ないからいつも忘れる。

1.f12（デベロッパーツール）

2.・が三つ縦に並んだヤツをクリック

3.More tools

4.Rendering

5.Emulate CSS mediaをprintに

印刷プレビューとまったく同じではないけどどのcssが有効になっているかの確認には便利。そもそも、いちいち印刷プレビュー押すのはめんどくさい。

ブラウザ毎の差異が大きいし、完璧に合わせることが実際無理なので、印刷用cssは触りたくない。