印刷時にだけ適用されるスタイルの設定方法はいくつかありますが、
レスポンシブ時にもメディアクエリを使うことが多いので、
プリント用スタイルの設定も、メディアクエリを使った方法がオススメです。
印刷時にだけ適用されるスタイルの設定方法の一例
CSSにメディアクエリで設定する
@media print{
印刷用スタイルをここに
}
Case Study
クライアントのご依頼でよくあるのは、
ヘッダとグローバルナビは印刷時は非表示にしたいというご要望です。
そういう場合は、単純にdisplay:none;でOKです。
クラス名は一例ですが、下記のようなイメージです。
@media print{
header,#nav{ display:none; }
}
