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 以降を使用してこのページを印刷すると、「メディアタイプ」が表示されます。他のテキストのフォントサイズよりも小さい別のフォントを使用して表示されます。

その他のメディアタイプ

注: メディアタイプ名では大文字と小文字が区別されません。

メディアタイプの説明

all すべてのメディアデバイスに使用されます。

聴覚スピーチおよびオーディオシンセサイザーに使用されます。

点字は、目の見えない人のための点字触覚フィードバック装置です。

ページネーション用のエンボス点字プリンター。

ハンドヘルド

print プリンター用。

投影は、スライドなどのプロジェクトのプレゼンテーションに使用されます。

スクリーンコンピュータのモニターに使用されます。

ttyテレタイプライターや端末など、固定密度の文字グリッドを使用するメディアで使用します。で使用されるtv録音。

学び続ける

新しいファイル

<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>

提出するリセットコード

自動運転