携帯ブラウザとCSS適用方法

今回は、i-mode、EZweb、Y!ケータイの3つに対してCSSを適用する場合の適用方法についてです。

結論としては、これさえすればPC向けサイトを携帯3キャリアすべてに対応出来るなんていうのはありません。

携帯ブラウザ handheld CSS適用方法についての一覧

携帯ブラウザ handheld CSS適用方法についての解説

携帯ブラウザにCSSを適用しようと思ったときに、足を引っ張ってくれるダントツの存在はi-modeです。XHTML対応端末でも外部スタイルシートが全く使えません。そもそもi-mode向けXHTMLやHTMLでは、link要素が定義されていないのです。
参考：iモード対応XHTML比較表

iモード対応XHTMLではstyle要素もa:link、a:focus、a:visitedというのしか適用できません。実質style属性を用いることしか出来ないため、昨今のPCサイトでのCSS適用事情を考えると、PCサイトをベースにしてi-mode向けにCSSを適用させるなんてことは考えない方がいいです。
ちなみに、i-mode HTML シュミレータ2で確認したところ、style属性で指定した内容が適用されていなかったです。実機での確認がいるとは思うのですが。

EZwebとY!ケータイですが、これらの2つは最近機種であればメディアタイプhandheldに対応します。ただし、確実に適用できてなおかつベストな方法は、link要素でmedia="handheld"を記述することです。

EZwebは@media規則でバグがあり、一番下に書いたメディアタイプのCSSを適用してしまいます。外部CSSファイル内での記述・style要素内での記述いずれもです。Y!ケータイは問題ありません。

@importでメディアタイプを指定するというのは、EZweb、Y!ケータイ両方対応しているのですが、PC向けの最大シェアを持つInternet Explorerが対応していないという現状があります。

Y!ケータイに関しては、ウェブコンテンツヴューアーでの表示はあてになりません。いつもテストに使っているページはことごとくすっぴん状態（CSS非適用）になり、実機動作と大きく異なりました。なお、今回使った実機は812SHです。

今回テストに使ったテストページ一覧：http://hpbuilder.net/mobileopera/apply.htm#kyopon

次回は、携帯フルブラウザ（ネイティブアプリケーション系）についての記事を予定しています。

（追記 2007-05-23）

HashiMさんからご指摘をいただきました。→「i-modeってまだ…だったのか…」

確かi-modeのXHTMLはMIME Typeがtext/htmlじゃなくapplication/xhtml+xmlで認識可能(つか認識しない)…だったんじゃなかったかと思いましたえぇ．EZwebとかはMIME Typeがtext/htmlじゃないと認識しないんですよね…

で、MINE Typeをapplication/xhtml+xmlにしたテストページ（注：IEでは閲覧できません）を用意したところ、i-mode HTML シュミレータ2、実機（SH903i）とも、style属性への指定でCSSが適用されることを確認しました。

XHTMLでMINE Typeをapplication/xhtml+xmlにした場合、EZwebではいくつか適用されない方法があります。

• <link rel="stylesheet" href="style.css" type="text/css" media="screen,handheld" />といった、media属性で複数のメディアタイプを併記する
• 外部スタイルシート内に記述した@importでメディアタイプを指定する

（追記 2007-05-26）

XHTMLでMINE Typeをapplication/xhtml+xmlにした場合、Y!ケータイ（812SH）ではmedia="handheld,screen"はダメでした。（MINE Typeがtext/htmlではOKです）

出力先デバイスをきちんと意識してCSSを書く場合、screenとhandheldで全く同じというのは非現実的です。従って、この不具合については重要度が低いと考えます。