スマートフォン用の表示で見る

メディアクエリ

メディアクエリとは、閲覧者の出力メディア(画面サイズやOS)に合わせて、スタイルシートcss)内に適用する条件を細かく指定する仕組みのこと。Media Queries.

閲覧者のスクリーンサイズや環境に応じて、表示させる条件を変更することができる。Media Queries.レスポンシブWebデザインを実現する手法の1つ。例えば、横幅が1200pxのモニターで見ているユーザーに対しては「width(ウィンドウの横幅):800px」、iPhoneで見ている人には「width:320px」に適用するといったことが可能である。Internet Explorer 8以下ではcss3メディアクエリに対応していないという欠点もある。

対応表一覧(一部)

iPhone3G / 3GS320×480
iPhone4 / IS03640×960
iPad / iPad 2768×1024
Galaxy S / HTC Desire (X06HT)480×800
Galaxy Tab600×1024
Xperia (SO-01B) / Xperia arc (SO-01C) 480×854
HT-03A320×480
Xperia (SO-01B) / Xperia arc (SO-01C)480×854
Nexus One480×800