CSSの@mediaルールとは？メディアタイプごとにスタイルを切り替える方法

CSSの@mediaルールは、一連のスタイルルールを適用する対象のメディアタイプを指定するためのものです。メディアタイプはカンマ（,）で区切ることで、複数同時に指定することもできます。

これにより、「画面表示用」と「印刷用」など、出力先に応じて異なるスタイルを1つのスタイルシート内で柔軟に定義できます。

主なメディアタイプ

• all：すべてのデバイス（初期値）
• screen：コンピュータやスマートフォンの画面
• print：印刷時や印刷プレビュー
• speech：スクリーンリーダーなどの音声読み上げ

@mediaルールの記述例

以下は、@mediaルールを使ってメディアタイプごとにスタイルを切り替える基本的な例です。

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

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

      @media screen, print {
         body { line-height: 1.2 }
      }

   -->
</style>

コードの解説

• @media print：印刷時に本文のフォントサイズを10ptに設定します。紙面では小さめの文字が読みやすいためです。
• @media screen：画面表示時にはフォントサイズを12ptに設定し、モニター上での視認性を高めます。
• @media screen, print：カンマで区切って複数のメディアタイプを指定しています。この場合、画面・印刷の両方に対して行間（line-height）を1.2に適用します。

まとめ

@mediaルールを活用すれば、同じHTML文書でも「画面」「印刷」「音声読み上げ」など、出力メディアに応じた最適なスタイルを提供できます。また、現代のCSSではメディア特性（幅や向きなど）を組み合わせたレスポンシブデザインにも@mediaが広く使われており、Web制作における重要な基礎技術となっています。