Ajaxian

2010年6月にはいったあたりからCSSメディアクエリを活用してiPhone 4を含むさまざまなデバイスへ対応可能なWebページを制作するためのテクニックが矢継ぎ早に紹介されるようになった。CSSメディアクエリを使った方法は今でも注目度の高いテクニックで、CSSメディアクエリを使ったさまざまなテクニックが日々紹介されている。

• ピクセル濃度に依存しないWebページの制作方法
• iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方
• iPhone 4に対応したWebサイトを作る方法
• iPad向けWebアプリケーション開発テクニック

逆に、CSSメディアクエリによる切り分けはモバイルデバイスにとっては逆効果であり、やめたほうがいいと考える向きもある。6月あたりからはじまったこのあたりの流れがAjaxian » CSS Media Queries: Bees Knees Or Spawn of Satan?にわかりやすくまとまっている。説明によれば、CSSメディアクエリを使ったテクニックの走りとなったのはEthan Marcotte氏がA List Apartに掲載した次の記事。

• A List Apart: Articles: Responsive Web Design

この記事に疑問を感じ、反論記事をアップしたのがJason Grigsby氏。Cloud Fourに次の記事を掲載している。

• CSS Media Query for Mobile is Fool’s Gold « Cloud Four

反論の内容をまとめると次のようになる。CSSメディアクエリを活用した場合に問題点として挙げられる部分を、軽く流すのではなく、それこそが問題なんだという主張になっている。

• 画像をスケールダウンして表示するテクニックは、モバイルデバイスにとっては実行速度的によいとはいえないし、大きな画像をダウンロードすることで余分な帯域を消費し、結果としてより多くのメモリを消費する。
• CSS3を使って該当するサイズの画像だけをダウンロードするテクニックを採用したとしても、iPhoneは表示しない画像までダウンロードしてしまうので無駄が発生する。この問題を回避する設定もあるが、もはやシンプルな解決方法とはいいがたい。
• 結局のところすべてのモバイルデバイスに適用できるような方法はなく、それぞれのモバイルデバイスごとにページを用意するというのが、そのモバイルデバイスにとっていい策ということがいえる。

Jason Grigsby氏はCSSメディアクエリが有効に機能するケースについても言及しており、たとえばモバイルデバイスにHTMLメールを送る場合など、相手がどういったデバイスを使っているかわからないのでCSSメディアクエリを使ってあらかじめどのデバイスにも適応できる内容にしておくというのは価値のある方法としている。

CSSメディアクエリで切り分ける方法を採用するか、モバイルデバイス向けにそれぞれページを用意するかは、どういったWebページやWebアプリを制作するかという点に大きく依存してくる。CSSメディアクエリによる切り分けでほとんど事が足りるデザインであったりCSS構成であったりもあれば、逆に欠点が目立ってしまうケースもある。ケースバイケースで判断する必要がある。ここで紹介されている2つの記事のように逆の視点から意見をまとめた記事は、どういった方針を採用するかの状況判断における資料として参考になる。