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>

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

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