@mediaルール
CSSを各メディア毎に振り分ける方法です。
印刷を出力する際やテレビ、携帯電話など様々なメディアがあり、ユーザーはパソコンからサイトにアクセスするとは限りません。
そこで、必要に応じてメディアを特定し設定することで、ユーザーの環境に合ったスタイルを表示できるようにします。
メディアの種類
| メディア | 解説 |
|---|---|
| all | 全ての環境に対応 |
| screen | パソコンディスプレイに対応 |
| 印刷する際に対応 | |
| aural | 音声出力に対応 |
| brille | 視覚障害者用点字ディスプレイに対応 |
| embossed | 点字印刷する際に対応 |
| tv | テレビの環境に対応 |
| projection | プロジェクターに対応 |
| handheld | 携帯電話に対応 |
| tty | 文字固定環境に対応 |
@mediaルールの記述例
body{
background:#000000;
color:#ffffff;
}
@media print{
body{
background:#ffffff;
color:#000000;
}
}
上記の場合、パソコン環境では背景が黒で文字が白ですが、
印刷した時は、背景が白で文字が黒となります。
背景が黒で文字が白の状態で印刷した場合、インクが無駄が出ます。
そこで印刷の時は、背景が白、文字を黒と設定するようにします。
このように必要に応じて、ユーザーの環境を配慮した設定が必要となります。
また複数のメディアに対して指定するときは、以下の通りに記述します。
body{
background:#000000;
color:#ffffff;
}
@media print,handheld{
body{
background:#ffffff;
color:#000000;
}
}
外部スタイルシートでCSS毎指定
次の方法は、外部スタイルシートをリンクする際、まとめてメディア毎に設定します。
印刷用のスタイルシートと、パソコン環境で見る際とそれぞれ専用のスタイルシートを用意してメディア環境に合わせた設定となっています。
<link rel="stylesheet" type="text/css" href="style.css" media="print" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<head>間に書く方法
次の方法は、<head>間に直接スタイルシートを記述するときに指定する方法です。
<style type="text/css" media="print">
body{
background:#ffffff;
color:#000000;
}
</style>
<style type="text/css" media="screen,tv">
body{
background:#000000;
color:#ffffff;
}
</style>
ブックマーク登録：
0 user
0 user
0 user
(No Ratings Yet)
Loading ...
0 user
0 user
0 user (No Ratings Yet) Loading ...
