スマートフォン 09
解像度ごとにスタイルシートを指定する方法

解像度の違う端末によってCSSを書き分けたり、表示される画面サイズによってCSSを書き分けるにはCSS3のMedia Queriesを利用することで対応できる。

制作・文／野崎侑士（ユージック）

BROWSER iOS Andoroid

Media Queriesとは

まず初めにタイトル画像を作る。

Media Queries とはCSS2 からあるMedia Type を拡張する仕様だ。Media TypeとはCSS を適用するメディア（パソコン、テレビ、プリンタなど）を指定するときに使う【01】。

Media Queriesを簡単に説明すると、CSS を適用するメディアを Media Typeよりも細かく指定することができる拡張機能だ。端末の解像度であったり、ブラウザの表示サイズだったりを細かく指定してCSSを書き分けることが可能となる。Media Queriesの書き分け条件に利用できるおもな属性には【02】のようなものがある。

【01】Media Typeの使用例。

【02】Media Queriesのおもな属性。

devicePixelRatioとは

スマートフォン以前の従来の携帯電話でもVGAやQVGAといったディスプレイの解像度に違いがあった。

スマートフォンでも同様にiPhone3G-3GS（480×320ドット）とiPhone4-4S（960×640ドット）では4倍の解像度の違いがある。

また、iPhoneのみならず、Android端末もメーカーや機種によって解像度は異なる。スマートフォン（iPhoneやAndroid）に搭載されているWebKit系のブラウザには、解像度を扱うdevicePixelRatioというプロパティが定義されている。

devicePixelRatioの値によってWebサイトの1pxがディスプレイの何ドットで表示されるかを知ることができる【03】。

そこでCSS3のMedia Queriesを利用してdevicePixelRatioの値を元に書き分けを行うことで、解像度の違う端末でもそれぞれの端末に合わせたくっきりとした最適な画像を表示させることが可能となる【04】。

【03】スマートフォン、タブレット端末のdevicePixelRatioの値一例。

【04】解像度に適した画像を表示させた例。

Media Queriesを利用してCSSを書き分ける

それではCSS3のMedia Queriesを利用して、devicePixelRatioの値によって書き分ける方法を紹介しよう。

まずは１枚のCSS の中でMediaQueriesを利用して分岐させて使うケースだ【05】。

等倍サイズ（iPhone3 ～ 3GS）とdevicePixelRatio未対応ブラウザには通常のCSSを設定する。

そしてAndroid系に多いdevicePixelRatio1.5とiPhone4/4SなどのdevicePixelRatio2と3つに分岐させて異なるサイズの画像を指定する。

こうすることで、画像のジャギーやぼけがなくなり、くっきりとした鮮明な画像を表示することができる。

外部リンクでCSSを切り分けて指定するケースは【06】のようになる。ただし、このようにMedia Queriesを利用した複数のCSSファイルの分岐は、読み込むCSSファイルを選べるわけではない。いったんすべてのCSSファイルを読み込んだうえで該当するCSSが適用されるため、該当しないCSSも読み込まれてしまう点に注意しよう（CSS上で指定した画像については、表示するもの以外は読み込まれない）。

【05】１枚のCSSの中でMedia Queriesを利用して分岐させて使うケース。

【06】外部リンクでCSSを切り分けて指定するケース。

IEなどCSS3非対応のブラウザ対策

ワンソースでスマートフォンサイトとPCサイトを作成する場合、Googleコードで公開されている、css3-mediaqueries.js を使えば、IE6 〜 8 といったMedia Queries非対応のブラウザでも使えるようになる【07】。

サイトからcss3-mediaqueries.jsをダウンロードしたら、headの中に条件付きコメントで挟んで挿入しよう。これで制作段階でIE8などのMedia Queries非対応のブラウザにおいてもウィンドウサイズを広げたり縮めたりして動作を確認することができる。

【07】css3-mediaqueries.jsを上記のように外部から読み込むこともできる。

[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。