Cording

印刷用スタイルの設定方法

印刷時にだけ適用されるスタイルの設定方法はいくつかありますが、
レスポンシブ時にもメディアクエリを使うことが多いので、
プリント用スタイルの設定も、メディアクエリを使った方法がオススメです。

印刷時にだけ適用されるスタイルの設定方法の一例

CSSにメディアクエリで設定する

@media print{
  印刷用スタイルをここに
}

Case Study

クライアントのご依頼でよくあるのは、
ヘッダとグローバルナビは印刷時は非表示にしたいというご要望です。
そういう場合は、単純にdisplay:none;でOKです。

クラス名は一例ですが、下記のようなイメージです。

@media print{
  header,#nav{ display:none; }
}
URL
TBURL

Leave Comments

*
*
* (公開されません)

※日本語が含まれない投稿は送信できませんので、ご了承くださいませ。

Category List

Return Top