メディア別のスタイル

デフォルトのスタイルシート言語の設定

HTML４．０１やCSS２．１ではlink要素やstyle要素のmedia属性、CSSの@mediaや＠importにメディアタイプを指定し、各メディアに対応したスタイルを指定することができます。例えば、コンピューターのディスプレイ用と印刷用にそれぞれ異なるフォントを適用したい場合、次のような方法があります。

link要素を使用

<link rel=”stylesheet”type=2text/css”media=2screen”href=2sans-serif.css”>

<link rel=”stylesheet”type=2text/css”media=”print”href=serif.css”>

@mediaを使用
@media screen{⋆{font-family:sans-serif;}}
@media screen{⋆{font-family:serif;}
現在CSS2.1で規定されているメディアタイプは以下の通りです。一般的なホームページでは「all」「handheld」「print」「screen」が良く利用されています。複数のメディアを指定する場合には、カンマで区切って並べます。