Media Queries でデバイスの対応

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

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

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

以前、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(768×1024)のに最適なデザインが作れます。しかし、パソコン意外の殆どのデバイスは iPhone や iPad ではないことを忘れないようにしましょう。Nexus One みたいな多くのスマートホーンの解像度は 480×800 であり、Wii みたいな多くのテレビ関連のデバイスは画面幅が 800 ピクセルです。開発する時はやはり特定なデバイスではなく、デバイスのある種類を考えながらデザインした方が良いでしょう。

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

メディアクエリのサンプル

Web開発者にとっての良いところはページのデザインは CSS で変わります。HTML が変わりません。つまり、JavaScript と共に CSS3 のメディアクエリを利用すれば一つだけのWebサイトで多くのユーザを満足させることができます。

関連資料

Media Queries でデバイスの対応」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>