@media
@mediaで、モニターやプリンターなどメディアタイプ別にスタイルを指定できます。
対応しているメディアタイプは、SCREENとPRINTです。デフォルトでは、ALLになります。
モニター（画面）出力専用の場合は、SCREENを。プリンター出力専用の場合は、PRINTを指定します。
サンプルは、P.BODYセレクタで指定された範囲を画面表示は9ptで、印刷は8ptに変えて出力する場合です。
このプロパティは、IE5..0から対応しています。
@media media type { selector { property : values ; property : values ; ・・・; }}
<style type="text/css">
<!--
@media screen { p.body { font-size: 9.0pt; line-height: 1.6em;
}
h3 { font-size: 12.0pt;}}
@media print { p.body { font-size: 8.0pt; line-height:
1.5em; }
h3 { font-size: 11.0pt;}}
-->
</style>
印刷を制御
@mediaプロパティで、ページの印刷を制御できます。
Acrobatでは、セキュリティで印刷を制御することができますが、HTMLでは、制御することができません。
@media printで簡易的ですが、印刷を制御することができます。
display：noneで要素を表示させんから、@media printでdisplay：noneを設定すれば、指定された要素を印刷 できなくすることができます。ページ全体印刷させたくない場合はbodyタグに、画像を印刷させたくない場合は、imgタグに指定すれば印刷できなくなります。
※但し、ページをダウンロードしてスタイルシートを変更された場合は効果ありません。
<style type="text/css">
<!--
@media print { body { display: none; }}
-->
</style>
<style type="text/css">
<!--
@media print { img { display: none; }}
-->
</style>
 |
 |
|---|
