CSSの@mediaを使って画面表示と印刷で異なるフォントファミリを設定する方法

Webページを画面で閲覧するときと印刷するときでは、読みやすさに適したフォントが異なります。CSSの@mediaルールを使えば、出力メディアに応じてスタイルを切り替えることができます。

以下の例では、画面表示（screen）と印刷（print）それぞれに異なるフォントファミリを指定しています。

ポイント

• @media screen：画面表示時に適用されるスタイルを定義します。例では、視認性の高いサンセリフ体（verdana、arial）を指定しています。
• @media print：印刷時に適用されるスタイルを定義します。例では、紙面に適したセリフ体（georgia、times）を指定しています。
• @media screen, print：カンマで区切って複数のメディアを指定すると、両方に共通するスタイルをまとめて定義できます。例では、画面と印刷のどちらにも同じフォントサイズ（10pt）を適用しています。

コード例

<style>
    <!--
        @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ルールを活用することで、1つのHTMLファイルから、画面用と印刷用の異なるスタイルシートを出し分けることができます。古いブラウザへの配慮として、スタイル内をHTMLコメント（<!-- ～ -->）で囲んでいる点も特徴です。

フォントファミリは必ず代替候補をカンマ区切りで複数指定し、最後にsans-serifやserifなどの総称ファミリを記述しておくと、環境によってフォントが存在しない場合でも意図に近い表示になります。