CSS PR

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サイトを印刷しても使いたいという需要にマッチし、覚えておくと便利に使えます。

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)