DoCoMoのCSSとXHTMLまとめ | 村式開墾日記

2008年6月4日水曜日

DoCoMoのCSS、XHTMLにはクセがあります。注意すべき点をまとめてみました。
これに関してはいろいろなサイトで論じられていますが、既出のネタや仕様書の内容も含めなるべく広範囲に渡って情報を集めました。
他のキャリアについてはまた書くと思います。

特に気をつけるべき点を先にまとめると、こんな感じです。
・CSSはインラインでしか記述できない。
・XHTMLが必須でかつ適切なContent-Typeヘッダを吐く必要がある。
・istyle属性は使えない。
・MARQUEEタグは使えない。
・object要素によるFlashの埋め込みはiモード対応XHTML1.1から。
・TABLEタグはiモード対応XHTML2.0以降でないと使えない。
・GPS用の属性lcsはiモード対応XHTML2.1以降でないと使えない。

(DoCoMoに限った話ではない内容も含まれています)

CSSの名称、記述方法

http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/about/#p01

i-CSSは、iモード対応XHTML用のCSS。
インラインのみに対応。
内部参照にも基本的に対応していないが、以下に限り内部参照に対応している。
リンク擬似クラスa:link
動的擬似クラスa:focus
リンク擬似クラスa:visited
外部参照には対応していない。

名前はi-CSSというらしい。
インラインのみ対応という仕様。
インライン記述とは一個一個のタグの中にstyle属性でCSSを書く方式。

インラインで一個一個書いていくのは大変なので、外部参照ファイルからインラインに展開するライブラリが公開されている。

ドコモでも CSS を外部参照を使える HTML::DoCoMoCSS をリリース
http://d.hatena.ne.jp/tokuhirom/20070809/1186617282

ドコモでも CSS を外部参照で使えるEthna_Plugin
http://goe.geo.jp/?p=4
(タイプセレクタ、クラスセレクタ、IDセレクタに対応)

XHTML必須

CSSを使う場合はiモード対応XHTMLにする必要がある。
XML宣言とi-mode用のDOCTYPE宣言が必要。
Shift-JISもしくはUTF-8のみ対応。

iモード対応XHTML1.0、Shift-JISの場合の宣言/ヘッダの例：

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>docomo css</title>
</head>

XHTMLのバージョンを変える場合、DOCTYPE宣言を以下のように指定する。

iモード対応XHTML1.0 :
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
iモード対応XHTML1.1 :
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd">
iモード対応XHTML2.0 :
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
iモード対応XHTML2.1 :
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.1) 1.0//EN" "i-xhtml_4ja_10.dtd">
iモード対応XHTML2.2 :
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.2) 1.0//EN" "i-xhtml_4ja_10.dtd">

対応するXHTMLバージョン(2008/4/10現在)

◆iモード対応XHTML1.0/iモード対応HTML4.0
F2051,F2102V,N2051,N2102V,N2701,NM705i,NM850iG,P2102V
※NM705iは2008年3月の機種

◆iモード対応XHTML1.1/iモード対応HTML5.0
700i全機種
701i全機種
900i全機種
901i全機種
L600i,N600i,L601i,L602i,M702iG,M702iS,SA800i,P851i,SH851i,F880iES,F881iES

◆iモード対応XHTML2.0/iモード対応HTML6.0
702i全機種(ただしM702iG, M702iSは1.1)
902i全機種
N601i,P703iμ,L704i,P704iμ,L705i,L705iX,D800iDS,D851iWM,F882iES,F883i

◆iモード対応XHTML2.1/iモード対応HTML7.0
703i全機種(ただしP703iμは2.0)
704i全機種(ただしL704i, P704iμは2.0)
903i全機種
904i全機種
D705i,D705iμ,F705i,SH705i,SH705iII,F801i,F883iES

◆iモード対応XHTML2.2/iモード対応HTML7.1
905i全機種
N705i,N705iμ,P705i,P705iCL,P705iμ,SO705i

◆XHTML未対応機種
最も新しいもので2006年発売のN506iSIIとP506iCII。
2005年発売のものも5機種しかない。(SO213iWR,P253iS,N506iS,SO506i,SO506iS)
2005年以前の機種およびこれら7機種を無視できるなら全てXHTMLにして構わない。

XHTMLバージョンによる差異(主要なもののみ抜粋)

詳しくはこちら。

◆iモード対応XHTML1.1から導入
aの属性：ilet,iswf,irst
formのaction属性：action="mailto:char"
hnのnの値でサイズ変更可能
span,divのstyle：font-size
objectのtype属性：
type="application/x-shockwave-flash",
type="application/x-ir",
type="application/x-avatar"

◆iモード対応XHTML2.0から導入
bodyのstyle：background-image
table,tr,th,td,caption
objectの属性：width,height

◆iモード対応XHTML2.1から導入
aの属性：lcs,ifb
formの属性：lcs
input,textareaの属性：iprof
objectのtype属性：
type="application/x-character-overlay",
type="application/x-ucf-package",
type="application/x-pkcs12"

◆iモード対応XHTML2.2から導入
タグ/属性は2.1からの変更はなし。
ただしFlashLite 3.0は2.2以前だと表示できない。

Content-Typeの指定が必要

http://www.nttdocomo.co.jp/service/imode/make/content/html/notice/basis/#p05

コンテンツファイルに対応したContent-Typeが指定されないと、
携帯電話はコンテンツファイルを正しく扱うことができない場合があるため注意が必要。

このため、スクリプトでヘッダを出力する必要がある。

header('Content-Type: application/xhtml+xml');

あるいは .htaccessでAddTypeする

AddType application/xhtml+xml .html

リンクの擬似クラス

リンクの擬似クラスのみ内部参照に対応している。
http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/about/#p01
記述例：

<style type="text/css">
<![CDATA[
    a:link{color:#FF0000;}
	a:focus{color:#0000FF;}
	a:visited{color:#009900;}
]]>
</style>

使える属性が限られている

基本的にはHTMLの物理属性の代わりなのでborderなどは使えない。
[PDF]iモード対応HTMLとiモード対応XHTML比較表

上の比較表からstyle属性を抜粋すると以下のようになる。
ただし、元の比較表はHTMLとXHTMLの対応表であって、使える属性のリストではない。
したがって、ここに書かれていない属性や属性とタグの組み合わせがある可能性がある。

background-image : body
background-color : body, div, table, td, th, tr
color : body, color, div, span
border-color : td, th, tr
font-size : body, color, div, span
text-align : div, hn, p, td, th, tr
margin-left : img
margin-right : img
margin-top : img
margin-bottom : img
width : td, th, tr
height : td, th, tr
vertical-align : img
float : img, hr
clear : blockquote, div, dl, form, hn, hr, ol, p, pre, ul
list-style-type : ol, ul, li
-wap-input-format : input, textarea
-wap-marquee-style : div, span
-wap-marquee-dir : div, span
-wap-marquee-loop : div, span

文字サイズ

[PDF]iモード対応HTMLとiモード対応XHTML比較表

font-size:char で指定する。span要素とdiv要素のみ有効?
xx-small,x-smallはいずれも「フォントサイズ小」扱い
mediumが標準サイズ(デフォルト)
large,x-large,xx-largeはいずれも「フォントサイズ大」扱い

絵文字

絵文字が含まれるHTML要素にcolorの指定があると絵文字本来の色が損なわれ、colorで指定した色になる。

istyle属性

istyle属性は使えないので、代わりに"-wap-input-format"を使う。
inputとtextareaに対応。
iモード対応XHTML1.0から利用可能。

style="-wap-input-format:&quot;*&lt;ja:h&gt;&quot;;"  (istyle="1" 全角かな/全角文字)
style="-wap-input-format:&quot;*&lt;ja:hk&gt;&quot;;" (istyle="2" 全角カナ/全角文字)
style="-wap-input-format:&quot;*&lt;ja:en&gt;&quot;;" (istyle="3" 英字/半角文字)
style="-wap-input-format:&quot;*&lt;ja:n&gt;&quot;;"  (istyle="4" 数字/半角文字)

(* ltとかquotになってるのはこれで合ってます。書き間違いではありません。)

blink要素

blinkは使えないので、代わりにdivかspanに"text-decoration:blink"を使う。
書式：<span style="text-decoration:blink;">
iモード対応XHTML1.0から利用可能。

marquee要素

marqueeは使えないので、代わりにdivかspanに"display:-wap-marquee"を使う。
書式：<span style="display:-wap-marquee;">
iモード対応XHTML1.0から利用可能。(ただしbackground-colorは1.1から)

style="-wap-marquee-style:scroll;"    (behavior="scroll")
style="-wap-marquee-style:slide;"     (behavior="slide)
style="-wap-marquee-style:alternate;" (behavior="alternate")
style="-wap-marquee-dir:rtl;"         (direction="left")
style="-wap-marquee-dir:ltr;"         (direction="right")
style="-wap-marquee-loop:char;"       (loop="char")
style="background-color:char"         (bgcolor="char" ※iモード対応XHTML1.1以降)