Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2008年10月 > メディアクエリーの最終草案が公開

Web標準Blog

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

2008年10月17日

メディアクエリーの最終草案が公開

フロントエンド・エンジニア 矢倉

CSS WGより、メディアクエリー (Media Queries)の最終草案が公開されました。

メディアクエリーとは

メディアクエリーは、link要素のmedia属性やCSSの@mediaを拡張したもので、デバイスの条件を指定しスタイルシートを適用可能にする技術です。

たとえば、「幅が1280pxなディスプレイ」と「幅が1600pxなディスプレイ」で、異なるスタイルを割り当てることができます。

/* 一般的なスクリーン */
@media screen and (device-width: 1280px) {
  .main {
    width: 600px;
  }
  .sub {
    /* 何もせずフッターにする */
  }
}
/* 幅の広いスクリーンでは2カラムに */
@media screen and (device-width: 1600px) {
  .main {
    width: 800px;
    float: left;
  }
  .sub {
    width: 250px;
    float:right;
  }
}

device-width」はデバイスの幅を表します。このような情報は「媒体特性 (media features)」と呼ばれ、メディアクエリーでは幅や高さ、カラーインデックスなど計13の媒体特性が定義されています。

各ブラウザーのサポート状況

メディアクエリーの実装状況ですが、正式版としてリリースされたものの中では、Operaが最も進んでいます。Operaはモバイル機器など、デスクトップコンピューター以外のデバイスにもブラウザーを提供しているため、メディアクエリーの実装も積極的に行っていたようです。このため、たとえばWiiのインターネットチャンネルでもメディアクエリーを利用することが可能です。

続いて、Safari (WebKit)です。iPhoneの登場もあり、Safariは3よりメディアクエリーに対応しています。しかし、現段階では動的な変更(ウインドウ幅を変えた、など)に対応していないため、すこし使い勝手がよくありません。現在開発版として提供されているSafari 4では、メディアクエリーの動的変更に対応しているため、来年あたりにはより良いサポート状況になっていると思われます。

Firefoxですが、来年公開予定のバージョン3.1での対応を表明しています。しかし、先日公開されたFirefox 3.1 Beta 1でサポートがされ始めているようです。

Internet Explorerについては、最新版のIE8でも対応していませんが、IE9以降でのサポートに期待したいところです。

メディアクエリーの今後と日本語訳

メディアクエリーは昨年6月に勧告候補となったものの、その時点でSafariやFirefoxでの実装がスタートしていませんでした。その後実装が進み、得られたフィードバックを反映させた結果、今回は再び最終草案として公開されています。しかし、3つのブラウザーベンダーが実装に動いていることから、勧告もそう遠くはないと考えています。

さて、勧告候補版は日本語訳を公開していたこともあり、新しい草案についても日本語訳を用意しました。

また、実装状況を調べるため、ほんの少しですがテストを作成しました。メディアクエリーがどのようなものなのかをつかむ手助けになれば幸いです。