2007.12.27

小型携帯端末向けスタイルの分岐方法（CSS 3 Media Queries）

イメージ：小型携帯端末向けスタイルの分岐方法（CSS 3 Media Queries）

一歩先のWeb標準 ♯9
ゆう（我的春秋）

早いもので、もう年の瀬ですね。先日、いよいよアップルが 3G版 iPhone の、日本での発売に向けて動き出したみたいですね。iPod Touch 共々、これでウェブブラウジングの選択肢が、またひとつ増えることになりそうです。

もちろん、iPhone や iPod Touch 以外にも、PDA や、スマートホン、携帯電話、携帯ゲーム機など、ウェブにアクセスできる小型携帯端末はたくさんあります。これら小型携帯端末は、PC 用のディスプレイに比べて画面が小さく、縦長のもの、横長のもの、縦横両用のものなど、大きさも縦横比もまちまちです。

最近は、こうした小型携帯端末から、携帯電話用ではなく、PC 向けのコンテンツにアクセスする機会が増えつつありますが、さすがに小さな画面で、マルチカラムレイアウトのページを閲覧するのはツライですよね。

そこで今月は、小型携帯端末向けの CSS を、PC 向けのものと分岐させる方法を紹介しようと思います。

CSS 以外の分岐方法の選択肢

小型携帯端末を、PC と選り分けるのには、いくつか手段があります。

今回はあまり詳しくは説明しませんが、まずは JavaScript やサーバーサイド CGI、.htaccess などによって、ユーザーエージェント（UA）ごとに分岐させる手段。

この手段は、たとえば特定の機種でしか動作しないスタンドアローンアプリケーションを配信するといった場合には有効ですが、UA リストのメンテナンスが大変だったり、UA の詐称に弱いといった弱点があります。JavaScript にいたっては、そもそも JavaScript が無効な UA に対しては全く用をなしません。

ただし、JavaScript に関しては、UA 名ではなくウィンドウサイズを取得して、スタイルを動的に切り替えられるので、JavaScript が有効な環境なら、それなりに効果的な選択肢になります。

携帯電話機種ごとのUA名: 携帯電話スペック一覧（ke-tai.org）（※画面サイズや色数も。）
JavaScript での実装記事: Articles: Switchy McLayout: An Adaptive Layout Technique（A List Apart）

CSS Media Types で出力デバイスごとに分岐

そしてもちろん、（ページスタイルのためという条件がつきますが）CSS を使って出力デバイスを選り分ける方法があります。このデバイスメディアを選り分けるための CSS の枠組みが CSS Media types です。

CSS Media typesには、all, braille, embossed, handheld, print, projection, screen, speech, tty（teletypes）, tv という 9（+1）種類の出力デバイスが定義されていますが、この出力デバイスごとに分岐させる方法が、比較的よく知られているのではないでしょうか。印刷メディア用スタイルシートの指定なんかがそうですね。

HTML

<link rel="stylesheet" type="text/css"
     media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css"
     media="print" href="print.css" />

CSS

@media screen {
     p { font-family: sans-serif; }
}
@media print {
     p { font-family: serif; }
}

なお、小型携帯端末のメディア記述子は handheld になります。前節の UA ごとの分岐と違って、UA リストをメンテナンスする必要がないのが、この手法の嬉しいところです。ちなみに handheld デバイスには、別途、携帯端末向けに CSS の仕様を縮小した CSS Mobile Profile 2.0 の策定が佳境に入ってます。

フルブラウザの分岐は、今後要注意！

ところが、ここで注意しなくてはならない点があります。

最近の小型携帯端末には、Mobile Opera や IE Mobile のような、PC 向けのウェブページを閲覧できる、いわゆるフルブラウザを搭載したものが増えてきています。

実はこのフルブラウザには、handheld ではなく、screen デバイスとして認識されるようになっているものがあります。たとえば、iPhone や iPod Touch の Safari は、ハイエンドなリッチコンテンツを提供できなくなるため、handheld や print 指定は無視すると明言しています。（ちなみに Mobile Opera は切替可能。）

CSS3 recognizes several media types, including print, handheld, and screen. iPhone ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iPhone.（Safari Web Content Guide for iPhone: Using Conditional CSS）

代わりにということで、小型携帯端末にも製品を供給している一部のメジャーブラウザは、デバイスの種類だけでなく、画面の大きさや表示色といったデバイスのディスプレイ仕様で選り分けられる CSS 3 Media Queries の media features をサポートするようになってきています。