CSSスタイルシートのメディア依存関係を指定する2つの方法

CSSでは、スタイルシートの適用先となるメディア(画面・印刷など)を指定することで、デバイスや出力形式ごとに最適な表示を実現できます。メディア依存関係を指定する方法は、主に以下の2つです。

• @media や @import などの@ルールを使って、スタイルシート内で対象メディアを指定する
• HTMLなどの文書言語側で、対象メディアを指定する(link要素のmedia属性など)

@mediaルールの記述例

@mediaルールを使うと、1つのスタイルシートの中でメディアごとに異なるスタイルを定義できます。以下は@mediaルールの基本的な記述例です。

<style>
<!--
   @media print {
      body { font-size: 10pt }
   }

   @media screen {
      body { font-size: 12pt }
   }

   @media screen, print {
      body { line-height: 1.2 }
   }
-->
</style>

この例では、印刷時にはフォントサイズが10pt、画面表示時には12ptが適用されます。さらに「screen, print」のようにカンマで区切って記述すると、複数のメディアに共通のスタイル(ここでは行の高さ1.2)を一度に指定できます。

@importルールでメディアを指定する

@importルールを使用する場合は、URLの後ろにメディアタイプを続けて記述します。

@import url("print.css") print;

このように書くことで、読み込む外部スタイルシートを特定のメディア専用として扱えます。

文書言語側でメディアを指定する

HTMLの場合は、link要素のmedia属性を使って、外部スタイルシートの適用先メディアを指定できます。

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

用途に応じてこれらの方法を使い分けることで、画面用・印刷用など目的別のスタイルシートを効率的に管理できます。