Archive for 4 月 3rd, 2008

ドコモ端末でCSSを利用するには

2008/4/3 木曜日 Posted in DoCoMo | 2 Comments »

ドコモ端末でCSSを表示しようとして、悩まれる方が多いようなのでご紹介しようと思います。 ドコモのiモード端末では、FOMA以降の機種でXHTML対応となりCSSが使えます。 ※厳密にいうと、ごく初期のFOMA21xxシリーズでは使えません。詳しくは下記一覧表からご確認ください。 →　iモード対応機種 対応コンテンツ・機能一覧 [nttdocomo.co.jp]　※PDFです ですが、PCと同じように普通に書くだけでは、CSSは認識されません。 下記の3点を守る必要があります。 iモード用のXML宣言、DOCTYPEを付ける CSSは外部ファイルにしない、ヘッダ部にも書かない 拡張子を「.xhtml」にする　※別の方法もあり   まず1についてですが、基本的に対応したいXHTMLのバージョンに合わせて、ドコモのHPに記載されている [nttdocomo.co.jp] XML宣言やDOCTYPEを記述する必要があります。 ですが、エミュレータや実機で試してみた限りでは、それほどうるさくはないようです。 また必須ではありませんが、head部のContent-Typeも「application/xhtml+xml」に修正しておきましょう。 参考までにGoogleモバイルのヘッダ部は次のようになっています。 （iモード完全準拠ではないようです） <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS"/> ・・・   続いて2の外部CSSについてです。 他キャリアは大丈夫なのですが、なぜかドコモのみ外部CSSの読み込み（<link rel="stylesheet" type="text/css" href="xxx">）や、ヘッダ部へのCSSの記述（<style type="text/css">xxx</style>）ができません。 ただし、一部例外としてリンクの色などは指定できます。（※詳しくは後述するPDFの比較表を参照） 基本的に全てのCSSはstyle属性を使って、例えば <div style="color:#FF0000">sample</div> のように書かなくてはなりません。数が多くなると地獄です。   3の拡張子についてもハマりやすいので注意が必要です。 XTMLをアップする場合は、拡張子は「.xhtml」でなくてはなりません。 これもドコモのみの仕様となります。 拡張子を変えることができない場合は、.htaccessで AddType application/xhtml+xml .html のように指定してやれば、拡張子が「.html」のままでも表示できるようになります。 またPHPなどで、どうしても拡張子が「.php」のように制限されてしまう場合は、次のようにプログラム内でヘッダを出力することで解決できます。 header("Content-type: application/xhtml+xml");   このようにドコモのXHTMLには色々と制限が多く、早くなんとかして欲しいと思います。 他のキャリアは割りと柔軟な仕様になっていますので、ドコモさえクリアしてしまえば、他では悩まないケースが多いです。 なお、ドコモのXHTMLについての詳しい仕様はこちらを参照してください。 →　NTTDoCoMo　作ろうiモード　XTHML [nttdocomo.co.jp] →　NTTDoCoMo　作ろうiモード　iモード対応XHTMLのバージョン [nttdocomo.co.jp] →　NTTDoCoMo　作ろうiモード　iモード対応HTMLとiモード対応XHTML比較表 [nttdocomo.co.jp]　※PDFです   関連： 3キャリア対応の新ケータイエミュレータ「P1 ... Read more..