CSS印刷-@mediaルール

CSSを使用して、紙に印刷されたWebページの外観を変更できます。画面バージョン用に1つのフォントを指定し、印刷バージョン用に別のフォントを指定できます。

前の章で@mediaルールを見てきました。このルールにより、メディアごとに異なるスタイルを指定できます。そのため、スクリーンとプリンターに異なるルールを定義できます。

以下の例では、スクリーンと印刷用に異なるフォントファミリを指定しています。次のCSSは、画面とプリンターの両方で同じフォントサイズを使用します。

<style type = "text/css">
   <!--
      @media screen {
         p.bodyText {font-family:verdana, arial, sans-serif;}
      }

      @media print {
         p.bodyText {font-family:georgia, times, serif;}
      }
      @media screen, print {
         p.bodyText {font-size:10pt}
      }
   -->
</style>

あなたが別のファイルでスタイルシートを定義している場合は、外部スタイルシートにリンクするときにメディア属性を使用することもできます-

<link rel = "stylesheet" type = "text/css" media = "print" href = "mystyle.css">

Css-printing

CSS印刷-@mediaルール