webサイトの印刷時の表示を整える！印刷専用のCSSを書いてみよう

今回はwebサイトを印刷するとき専用のCSSを書いてみます。
webサイトとしてあるのに、印刷が必要なの？と思うかもですが、意外と需要があるんですよね・・・
年1ぐらいで、印刷時のことを言われている気がします…

印刷専用のCSSを書く

では早速書いていきます。
今回使用するのは「@media print」です。

使用方法は簡単で、CSSの中に「@media print」で囲ってCSSを書くだけです。

@media print{
color: #000;
}

こんな感じです。
「@media print」内に書いたコードはwebサイトには反映されません。
webサイト上に表示されないので、印刷用にフォントサイズを10ptで「px → pt」に変えて読みやすいサイズに変更すると印刷しても字がでかすぎたり、小さすぎたりを避けることができると思います。

また、「display:none」を使用すれば印刷時に入らない要素も消すことができます。
webサイトを印刷しても使いたいという需要にマッチし、覚えておくと便利に使えます。