CSSメディアタイプ
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+ を使用している場合は、「メディア」と表示されます。 Type」は、他の文字フォントサイズよりも小さい別のフォントで表示されます。
その他のメディア タイプ
注: メディア タイプ名では大文字と小文字が区別されません。すべてのメディア デバイス用の
| 説明 | |
|---|---|
| 。音声およびオーディオシンセサイザー用の | |
| 。 | |
| 視覚障害者のための点字触覚フィードバック装置。 | |
| ページネーション用の視覚障害者用点字プリンター。 | |
| 小型ハンドヘルドデバイスに使用されます。プリンター用の | |
| 。 | |
| は、スライドなどの解決策のプレゼンテーションに使用されます。コンピューターモニター用の | |
| 。 | |
| テレタイプや端末など、固定密度の文字グリッドを使用するメディアに使用されます。 | |
| TV タイプのデバイス用。 |
