Engineer's Way

主にソフトウェア関連について色々書くブログです。

印刷に関するCSSの書き方

 

印刷時の用紙サイズの指定方法

@page {
  size: A4;
}

のように書くことで、ページが印刷される時の用紙サイズを指定できる。

印刷時のみに適用されるCSS

@media print {
 selector {
  display:none;
   }
}

のように「@media print」ブロックを作ると、印刷時のみのCSS設定ができる。
ここで印刷したく無い要素に「display:none;」を設定することで、余計なものが印刷されないようにできる。


なお、印刷するためのボタンはこんな感じ。

<button onclick="javascript:window.print();">
このページを印刷
</button>