スタイルファイルで印刷範囲を指定する - クレストボウズ::技術者ブログ

htmlのページをブラウザから印刷する時に、必要な部分だけ取り出した形式で印刷させたい場合があります。そのような場合、スタイルファイルで印刷範囲を指定することができます。

各エリアが以下の例のようなid名を持つとします。

htmlEx

例として、このページの #contents に書かれた内容だけを印刷させるには、スタイルファイルに以下のように指定します。

@media print { 
#header { display: none; }
#sidebar { display: none; }
#footer { display: none; }
}

@media print {

#header { display: none; }

#sidebar { display: none; }

#footer { display: none; }

}

クラス属性でも同様の指定が可能です。

@media print { 
.header { display: none; }
.sidebar { display: none; }
.footer { display: none; }
}

@media print {

.header { display: none; }

.sidebar { display: none; }

.footer { display: none; }

}

media の前の「@」をお忘れなく。