メディア クエリとリスナー

Windows Internet Explorer 9 では、CSS、HTML、XML、XHTML におけるメディア クエリのサポートが導入されました。Internet Explorer 10 と、JavaScript を使った Windows ストア アプリでは、メディア クエリ リスナーのサポートが導入されました。Windows 10 の Internet Explorer 11 には、対話式メディア機能であるメディア クエリ レベル 4 のサポートが導入されています。 メディア クエリを使うと、開発者はデバイスの機能に応じて最適なスタイル シートを適用でき、メディア クエリ リスナーを使うと、ページを実行中のメディアまたは環境の変化にスクリプトを使って対応できます。

メディア クエリ

メディア クエリを使うと、ユーザーが閲覧に使っているデバイスごとにページのデザインを変更して、モバイル デバイス向け (画面が非常に小さく、カラー パレットが制限されていて、解像度が低いなど)、ネットブック向け (画面が小さく、フル カラー パレットで、解像度が高いなど)、標準コンピューター向け (大画面、フル カラー パレットで、解像度が高いなど) のページを作成できます。CSS3 のメディア クエリでサポートされているメディア プロパティは、width、height、device-width、device-height、orientation、aspect-ratio、device-aspect-ratio、color、color-index、monochrome、resolution です。

次の宣言は、@media 規則を使った典型的なメディア クエリです。


@media screen and (max-width:400px) {div {border:none;}}

この場合、screen は対象のメディア タイプを示し、max-width が対象のメディア プロパティです。この宣言は、幅が最大 400 ピクセルの画面にページが表示された場合にだけ、指定した規則 (div 要素に境界線なし) が適用されることを記述しています。メディアのプロパティを組み合わせて、次のようにさらに具体的なクエリを作成することもできます。


@media screen and (max-width:400px) and (max-height:600px) {…}

この宣言では、幅が 400 ピクセル以下、高さが 600 ピクセル以下の画面の場合に、指定した規則が適用されます。

Windows 10 の Internet Explorer 11 では、メディア クエリ レベル 4 仕様のポインター メディア機能ホバー メディア機能のサポートが導入されています。これらの機能強化は、入力の正確さと、ユーザーのデバイスのモダリティに応じて、開発者が UI を調整できるように設計されています。開発者は、マウス、ペン、指のどれを使ってユーザーが閲覧するかに関係なく、コンテンツを使用するデバイスに対応する 1 つのサイトや Web アプリケーションを作成できます。

次の例では、精度が制限されているポインティング デバイスが存在する場合に、特定のクラスが拡大されます。


@media (pointer: coarse) {
   .button {
      min-width: 100px;
      min-height: 50px;
   }
}


次の例では、スマート フォンで使う指のような、主なポインティング デバイスでポイントできない場合に、特定のクラスが非表示になります。


@media (hover:none) {
   .menu {
      display: none;
   }
} 

メディア クエリ リスナー

メディア クエリ リスナーでは、このトピックで後述する 2 つの新機能を利用できます。

  • JavaScript を使った実行時のメディア クエリの評価
  • メディア クエリの評価の変更を監視するリスナーの受信登録

メディア クエリ リスナーの作成

実行時にメディア クエリを評価するために、新しいウィンドウ メソッド matchMedia を使って、MediaQueryList オブジェクトが作成されます。

メソッド説明

matchMedia(sList)

1 つ以上のメディア クエリを含む文字列を受け取り、MediaQueryList オブジェクトを返します。

 

matchMedia メソッドは、メディア クエリ文字列を受け取り、MediaQueryList オブジェクトを返します。次の例では、ウィンドウの幅または高さが特定のサイズより小さいかどうかを確認するメディア クエリが作成されます。


mql = window.msMatchMedia("(min-width:450px)");

MediaQueryList オブジェクトは、次のプロパティを提供します。

プロパティ説明

matches

メディア クエリ一覧が現在のウィンドウ状態と一致する場合、"true" が返されます。そうでない場合は、"false" が返されます

media

メディア クエリ一覧の (MediaQueryList オブジェクトの作成に使用された) シリアル化されたバージョンを返します。

 

MediaQueryList オブジェクトは、次のメソッドを提供します。

メソッド説明

addListener(callback)

コールバック関数を MediaQueryList オブジェクトのリスナー一覧に追加します。メディア クエリの評価が変更されると、この関数が常に呼び出されます。

removeListener(callback)

この MediaQueryList オブジェクトのリスナー一覧から特定のコールバック関数を削除します。

 

matches プロパティは、メディア クエリの評価を返すブール値です。ウィンドウの幅が指定された最小幅以上である場合、matches は上記の例を使って true を返します。


if (mql.matches) 
{
  // Window is fine. 
} else 
{
  // Window is too narrow.       
}

メディア クエリ リスナーの受信登録

メディア クエリの変更を検出するには、MediaQueryList オブジェクトにリスナーを受信登録します。addListener メソッドはコールバック関数を受け取り、メディア クエリの評価が変更されたときに、この関数を呼び出します。次の例では、上記のメディア クエリを使って、メディア クエリの変更を受信登録します。


mql.addListener(sizeChange); // Size change is the callback function.function sizeChange(mql) 
{
  if (mql.matches) 
  {
    // The window is big enough for content.
  } 
  else 
  {
    // The window has gotten too small for content.
  }
}

メディアの状態が実際に変更されたとき、リスナーはコールバック関数を常に呼び出します。ウィンドウのサイズが指定された minwidth 属性値よりも狭くなるように変更された場合、コールバック関数が呼び出されます。ウィンドウのサイズが指定された最小幅よりも広くなるように変更された場合も、コールバック関数が呼び出されます。MediaQueryList オブジェクトは、パラメーターとしてコールバック関数に渡されます。

API リファレンス

Media Queries
Media Query Listeners

サンプルとチュートリアル

アダプティブな Web サイトの設計

Internet Explorer Test Drive デモ

CSS3 メディア クエリとメディア クエリ リスナーに関するページ

IEBlog 記事

異なるウィンドウ サイズへのサイトの対応に関する記事
CSS コーナー (CSS3 メディア クエリ) に関する記事

仕様

メディア クエリ
CSSOM ビュー モジュール: セクション 4.1

関連トピック

CSS3 メディア クエリを使って異なるデバイスに対応する方法に関するページ

 

 

表示: