ドコモ端末で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です
関連: