媒体により表示/非表示を切り替える

例えば、画面にのみ表示すればよくて印刷には載せたくないような項目がある場合。

CSSのメディアクエリを使うとすっきりする。

@media print { 
.noprint {display:none;} 
}
@media screen { 
.noscreen {display:none;} 
}

と定義しておく。@mediaの後のprint、screenがメディア(媒体の種類を表す。
printは印刷、screenは画面の場合。

この例では、画面にだけ表示するクラスとしてnoprint、印刷だけ表示するクラスとしてnoscreenを定義した。

例：コントロールボタンを画面にのみ表示する場合

<form class="noprint">
   <input type="button" value="このページを印刷" onclick="window.print();" />
</form>