JavaScriptで実装している機能をメディアクエリと連携させるためのちょっとしたテクニックを紹介します。テーブルタグがCSSに変わり、レスポンシブデザインは心躍るコンセプトの1つです。レスポンシブデザインはメディアクエリで閲覧中の機器の画面幅、高さ、向き、解像度、アスペクト比、色深度などを把握し、応じたスタイルシートを適用しています。以下の例はcssbasic.cssをすべてのデバイスに適用して、水平方向の画面幅が500ピクセル以上なら、csswide.cssも適応します。/>インターネット上の多くのWebサイトがメディアクエリを活用しています。ブラウザーの幅を変えれば、Webページのレイアウトも変化します。メディアクエリで、CSSによるデザイン分岐や要素のサイズ変更が容易になりましたが、小さな画面の場合だけ短いヘッドラインを表示したり、JavaScriptライブラリーの利用を減らしたり、ウィジェットの動作を変更したり、コンテンツや機能を変更したりするにはどうすれば良いでしょう?JavaScriptでviewportサイズを調べるのは少し手間です。大半のブラウザーはwindow.innerWidthやwindow.innerHeightに対応しているしかしIE6、7、8、9の互換モードでは、document.body.clientWidthおよびdocument.body.clientHeightの記述が必要window.onresize主要ブラウザーはdocument.documentElement.clientWidthおよびdocument.documentElement.clientHeightに対応しているが、一貫しない。ブラウザーやモードにより、ウィンドウ幅が返ってきたりドキュメントサイズが返ってきたりするうまくviewportのサイズ変更を検知しても、向きや縦横比などを計算しなければなりません。CSSのメディアクエリのルールを適用したとき、計算が想定した通りに反映される保証はありません。JavaScriptにおけるメディアクエリの書き方JavaScriptでCSS3メディアクエリのステート変化に対応できます。鍵になるAPIはwindow.matchMediaです。CSSメディアクエリと同じ「メディアクエリ文字列」が渡されます。);matchesプロパティは問い合わせの結果に応じてtrueもしくはfalseを返します。500px}変更を検知したときに実行するイベントリスナーを追加できます。}}イベント定義後にイベントハンドラを直接呼ぶため、ページが読み込まれる間もしくは読み込み後にコードを初期化します。ユーザーがブラウザーの大きさを変更しない限りWidthChange()は呼ばれません。執筆時点ではmatchMediaは主要ブラウザーの多くで対応しています。本番サイトで使わない手はありません。以下のデモでブラウザーのサイズを変えるか、サンプルコードをダウンロードして、横幅が500ピクセル以上の場合とそれより小さい場合とで文字の表示が変化するのを確かめてください。※2011年10月12日に公開した記事を更新しました。変更点は最新情報の追加、冒頭画像の追加、CodePenデモです。Bucklerイギリス人のWebコンサルタントで、1995年にIE2.0向けにはじめてのWebサイトを製作。それ以降、Webの標準化とアクセシビリティ向上、HTML5の優れた事例を紹介・提唱してきました。SitePointでは1,000以上の記事を書いています。Twitterのアカウントは@craigbuckler。