★CSSの基本
| メディアタイプ
⬛︎ メディアごとにスタイルシートを指定現在のところ、ウェブページはブラウザを使用してパソコンのスクリーン上で表示されることがほとんどですが、 CSSの仕様では、スクリーン以外にもテレビ・プロジェクタ・携帯機器・印刷・音声・点字などの 様々なメディアにウェブページが出力されて利用されることが想定されています。
メディアタイプは<link>要素や<style>要素のmedia属性、または、@mediaで指定します。 メディアタイプを指定することで、スクリーン表示用(screen)やプリント用(print)など、 メディアごとにスタイルシートを指定し分けることができます。 複数のメディアタイプに同じCSSを適用する場合には、メディアタイプの値をカンマ( , )で区切って指定します。
例:メディアタイプに合わせてCSSファイルを適用する<html> <head> <link rel="stylesheet" type="text/css" media="screen, tv" href="browse.css"> <link rel="stylesheet" type="text/css" media="handheld" href="mobile.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> <style type="text/css" media="aural, speech"> <!-- p {voice-family:male;} --> </style> </head> <body><p>段落となります。</p></body> </html> ⬛︎ メディアタイプの値CSS2で定義されているメディアタイプには以下のものがあります。
|