アキラのＩＴメモ：印刷用CSSの作成

CSS（スタイルシート）は、画面表示用、印刷用、携帯端末表示用などと用途に合わせてどのCSSを適用するかを記述できる機能があるのですが、ここでは印刷用CSSの記述方法を書いておきます。具体的にはmediaとしてscreenを指定すると画面表示用のCSSとして、mediaとしてprintを指定すると印刷用のCSSとして適用されます

mediaの指定方法ですが2つ方法があります。1つ目は各(X)HTML中で以下のように記述する方法です。

<link rel="stylesheet" href="style-site.css"
  type="text/css" media="screen" />
<link rel="stylesheet" href="style-print.css" 
  type="text/css" media="print" />

2つ目の方法は、あらかじめ1つの外部CSSの中で印刷用と画面表示用の2つを指定する方法です。こちらの方が、各（X)HTMLを書き換えずに済むので楽です。

@media screen { /* stylesheet for screen */
    body {}

}
@media print { /* stylesheet for print */
    body {}

    #header, #footer {
        display: none; 
    }
}

上記のように印刷に不要な部分をdisplay:none;と指定してやれば、必要な部分だけを印刷させることができます。

コメントを投稿