Media Queryのおはなし

CSS3から登場する予定のMedia Query。メデイアタイプ指定よりも、さらに細かくデバイスを指定してスタイルを適用することができます。実は、Operaに先行実装されており、Wiiブラウザ「インターネットチャンネル」にも実装されているのです。

実際には、

• 幅
• 高さ
• 解像度
• 画面の縦横比

などの定義されたプロパティで、ユーザの使用しているデバイスを細かく指定することになります。指定方法は複数あり、

<link rel="stylesheet" type="text/css" href="xxx.css"
    media="screen and (device-width: 650px) and (device-height: 600px)" />

上のようにlink要素のmedia属性に指定したり、

@media and (device-width: 650px) and (device-height: 600px) {
    E {
        color: red;
    }
}

上のように、CSSのアットルールとして書くこともできます。
がしかし、Media QueryはOperaとKHTMLベースのブラウザ(のナイトリー)のみ先行実装されているもので、Firefoxで見ると、link要素に指定した場合はMedia Queryを無視し表示してしまいます。

Operaでは@importを使っても、Media Queryを指定することが可能なので、Media Queryを使用する場合は、先ほどの@mediaでCSS内に直接定義するか、

@import url("xxx.css") screen and (device-width: 800px) and (device-height: 600px);

このような感じで、@importにて指定してあげると良いと思います。

ちなみに、Wiiのみにスタイルを適用させる手段の一つに、このMedia Queryがあります。詳しくは、CSS勉強会でプレゼンしたときの資料をご覧ください。