CSS @media(媒体)

CSS媒体类型使您可以格式化文档，使其在各种类型的媒体（例如屏幕，打印，听觉浏览器等）上正确显示。

媒体类型简介

CSS @media(媒体)是样式表最重要的功能之一，您可以为不同的媒体类型指定单独的样式表。这是构建打印机友好的Web页面的最佳方法之一-只需为“打印”媒体类型分配不同的样式表即可。

一些CSS属性仅适用于某些媒体。例如，该page-break-after属性仅适用于分页媒体。但是，有几个属性可以由不同的媒体类型共享，但是可能需要对该属性使用不同的值。font-size例えば、この属性はスクリーンと印刷メディアに使用できますが、異なる値を持つ可能性があります。

より良い可読性と比較して、ドキュメントは通常、コンピュータのスクリーン上で印刷のコンピュータのスクリーン上よりも大きなフォントが必要であり、無線フォントもスクリーン上で読みやすく考えられています。一方、ルリフォントは印刷で人気があります。したがって、スタイルシートやスタイルルール群が特定のメディアタイプに適用される必要があります。

メディアに依存するスタイルシートを作成

スタイルシートのメディア依存関係を指定するには、通常3つの方法を使用します：

メソッド1：@mediaルールを使用

この@mediaルールは、単一のスタイルシート内で異なるメディアタイプに異なるスタイルルールを定義するために使用されます。通常、その後には、カンマで区切られたメディアタイプリストと、ターゲットメディアのスタイルルールを含むCSS宣言ブロックが続きます。

以下の例のスタイル宣言は、ブラウザがスクリーン上で14ポイントArialフォントで正文内容を表示するが、印刷の場合はTimesポイントフォントで表示されます。12ポイントに設定されています。しかしline-height、二つの属性の値はともに1.2：

@media　screen{
　　　　body　{
　　　　　　　　color:　#32cd32;
　　　　　　　　font-family:　Arial,　sans-serif;
　　　　　　　　font-size:　14px;
　　　　}
}
@media　print　{
　　　　body　{
　　　　　　　　color:　#ff6347;
　　　　　　　　font-family:　Times,　serif;
　　　　　　　　font-size:　12pt;
　　　　}
}
@media　screen,　print　{
　　　　body　{
　　　　　　　　line-height:　1.2;
　　　　}
}

メソッド2：@importルールを使用

この@importルールは、特定のターゲットメディアにスタイル情報を設定するもう一つの方法です-インポートされたスタイルシートのURLの後に、カンマで区切られたメディアタイプを指定するだけで十分です。

@import　url("css/screen.css")　screen;
@import　url("css/print.css")　print;
body　{
　　　　background:　#f5f5f5;
　　　　line-height:　1.2;
}

ステートメントのprintメディアタイプ@importは、ブラウザが外部スタイルシート（print.css）をロードし、そのスタイルを印刷メディアにのみ適用する指示です。

メソッド3：使用 <link>要素

media属性の要素は、HTMLドキュメントの外部スタイルシートとしてのターゲットメディアを指定するために使用されます。

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">

この例では、media属性はブラウザが「screen.css」の外部スタイルシートを読み込むことを示し、スクリーンにのみそのスタイルを使用し、「print.css」を印刷に使用します。

異なるメディアタイプ

以下のテーブルには、異なるタイプのデバイス（例えばプリンタ、ハンドヘルドデバイス、コンピュータスクリーンなど）に位置付けるために使用できるさまざまなメディアタイプが示されています。

メディアタイプ