CSS メディア タイプ
メディア タイプを使用すると、さまざまなメディアでファイルをレンダリングする方法を指定できます。ファイルは、画面上、紙上、聴覚ブラウザなど、さまざまな方法で表示できます。
メディア タイプ
一部の CSS プロパティは、特定のメディア専用に設計されています。たとえば、「voice-family」属性は、ユーザー エージェントの声を聞くために設計されています。他にもいくつかのプロパティがさまざまなメディア タイプで使用できます。たとえば、「font-size」属性は画面メディアと印刷メディアに使用できますが、値は異なります。画面上の文書と紙の文書は異なり、通常、画面上ではサンセリフ フォントの方が読みやすく、紙上ではセリフ フォントの方が読みやすくなります。
@media ルール
@media ルールを使用すると、同じスタイル シートで異なるメディアに異なるスタイルを設定できます。
以下の例は、ブラウザ画面に 14 ピクセルの Verdana フォント スタイルを表示するように指示しています。ただし、ページを印刷すると、10 ピクセルの Times フォントで表示されます。フォントの太さは画面上でも紙上でも太字に設定されていることに注意してください:
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html> Mozilla/Firefox または IE5 以降を使用してこのページを印刷すると、「メディア タイプ」が表示されます。他のテキストのフォント サイズよりも小さい別のフォントを使用して表示されます。
その他のメディア タイプ
注: メディア タイプ名では大文字と小文字が区別されません。
メディアタイプの説明
all すべてのメディアデバイスに使用されます。
聴覚スピーチおよびオーディオ シンセサイザーに使用されます。
点字は、目の見えない人のための点字触覚フィードバック装置です。
ページネーション用のエンボス点字プリンター。
ハンドヘルド
print プリンター用。
投影は、スライドなどのプロジェクトのプレゼンテーションに使用されます。
スクリーン コンピュータのモニターに使用されます。
ttyテレタイプライターや端末など、固定密度の文字グリッドを使用するメディアで使用します。 で使用されるtv録音。
次のセクション
