【HTML】@media printによる印刷範囲の指定

IT

印刷範囲の指定をするスタイルシート

 

@media print{

#jogai{display:none;}

}

 

このとき、id=jogaiを指定した要素は印刷範囲の対象外になる。

 

  

たとえば↓のようなHTMLがあったとすると

 

<html>

<head>

<style>

<!--

@media print{

#jogai{display:none;}

}

-->

</style>

<title>

TEST PRINT AREA

</title>

</head>

<body>

<div align="center">

<div width="300px">

○ここは印刷エリアのはず○

</div>

<div width="300px" id="jogai">

※ここが印刷エリア外のはず※

</div>

</div>

</body>

</html>

 

 

 

印刷プレビューすると

「○ここは印刷エリアのはず○」のみが印刷範囲として認識され

「※ここが印刷エリア外のはず※」の部分は印刷範囲から除外される。

 

 

 

最初、勘違いしていたのだが、

この方法による印刷範囲の指定は、

ここは印刷範囲に含めないでねという指示である。

つまり、標準的にはHTML全体が印刷範囲になるので、

そこから「ここに関してだけは印刷範囲から除いてくれ」という指示を出すことで

印刷範囲を意図的に決める方法になっている。