めざましTech

Media Queries でデバイスの対応

Friday, April 16, 2010 6:48:00 AM

あるウェブサイトは iPhone 専用のバージョンがあります。しかし、Opera Mini が Apple さんの App Store に入りましたので、iPhone ユーザのブラウザは必ずしも Safari だけではありません。

あるウェブサイトはモバイル専用のバージョンがあります。しかし、iPad みたいなタブレットなどが現れるとモバイルと呼ばれるデバイスがファジーになりました。

いろんなデバイスのため、複数のウェブサイトバージョンを別々に作って、管理するのが大変。このため、一つのサイトをいろんなデバイスや画面の大きさに対応するの方が楽だと思います。

以前、HTML5 をサポートしないブラウザでも Modernizr を使って HTML5 が利用できることについて書きました。、JavaScript の window.innerWidth も画面の幅を判断して機能のカストマイズができます。ところがデザインはどうすれば良いでしょう？CSS3 がオタスケマーンになります！

CSS は handheld, print, screen などという media の種類がありますが、メディアクエリ（Media Queries）という似たこともあります。条件付きの CSS なのである種類のデバイスのためにページのデザインが簡単に変更できます。例えば、iPhone を含めた狭い画面（～320px）のあるデバイスは下記のコードが使えます：

（インラインな CSS）

@media screen and (max-device-width: 320px) {...}

（外部の CSS）

<link rel="stylesheet" type="text/css" href="mobile.css"
  media="screen and (max-device-width: 320px)">

同じように device-width: 768px にすれば iPad（768x1024）のに最適なデザインが作れます。しかし、パソコン意外の殆どのデバイスは iPhone や iPad ではないことを忘れないようにしましょう。Nexus One みたいな多くのスマートホーンの解像度は 480x800 であり、Wii みたいな多くのテレビ関連のデバイスは画面幅が 800 ピクセルです。開発する時はやはり特定なデバイスではなく、デバイスのある種類を考えながらデザインした方が良いでしょう。

いくつかのメディアクエリの使い方がありますが、参考のため、メディアクエリの事例（http://bit.ly/mqexample）を作ってみました。是非いろんなデバイスを使って、それともブラウザを狭くして見てください。（※ Internet Explorer は対応されていません）画面の幅に合わせてデザインが変わり、ある部分が消えたり、表示したりするはずです。下の写真では同じページがノートパソコン、iPad、iPod Touch （もちろん Opera Mini です！）に表示されています。