【ブラウザの印刷機能を使う】 CSSで印刷範囲を指定する

今までのホームページでもそうですが、ウェブアプリで印刷機能を使う機会があったので覚書。

印刷範囲を指定すると書きましたが、「印刷時に表示しない個所を指定する」といったほうが正しいです。

以下がやり方です。

印刷時だけ読み込むCSSファイルを作成します。今回は「print.css」とします。

/*********** print.css ************/
.off
{
display:none;
}

これを、HTML側で以下のように呼び出します。

＜link rel="stylesheet" type="text/css" href="print.css" media="print" /＞

そして、印刷時のみ表示したくない箇所の親要素に、class="off"を指定します。

こんな感じ。

＜div class="leftcolumn off"＞
＜a href=""＞メニュー1＜/a＞

＜a href=""＞メニュー2＜/a＞

＜a href=""＞メニュー3＜/a＞

＜a href=""＞メニュー4＜/a＞

＜/div＞

＜div class="contents"＞

ここだけ印刷します

＜/div＞

＜div class="footer off"＞

copyright *** allright reserved.

＜/div＞

もちろん、要素のclass名ごとにdisplay:noneを指定するというのもアリと思います。

こんな感じで・・・

.leftcolumn,.footer

{

display:none

}

カジュアルなのは上の方法かな、と思います。

ページ数が多い場合なんかは、下の方法の方がいいと思います。

よろしくどうぞ。