DoCoMo の iモード用サイトで CSS(スタイルシート) を使用する際の注意点

TOP > Web制作技術 > モバイル(携帯電話・ケータイ)Web > DoCoMo の iモード用サイトで CSS(スタイルシート) を使用する際の注意点

2009年9月 9日 20:50

DoCoMo の iモード用サイトで、CSS を使用する際には、色々と注意しなきゃいけない点があるので、ざっくりと書いておきます。

一番重要なのは、2009年3月以前に発売された機種(iモードブラウザ1.0搭載端末)と、2009年5月以降に発売された機種(iモードブラウザ2.0搭載端末)とで、大きく使用が異なることです。

大前提として、外部CSS は効きません。各要素に対して style 属性でスタイルを指定する必要があります。
ぶっちゃけ、管理・運用の効率化の面では CSS を使用するメリットは皆無に近いかと。

<span style="color:#3399cc;font-size:large;">ウルトラセブン！</span>

上記のような感じで、いちいち各要素に記述していかないとダメなわけです。

例外的に、a 要素の link, focus, visited クラスのみ、 style 要素による内部参照が可能なようです。というか、逆にそれしか手段がないから対応している、という感じでしょうか。

また、xhtml で書かれた文書で、かつ Content-type ヘッダが application/xhtml+xml でないとダメです。
text/html ではアウトです。

なので、perl や PHP でページを出力する場合には、以下のように Content-type ヘッダを出力する必要があります。

#-- perl の場合
print qq|Content-type: application/xhtml+xml\n\n|;

#-- PHP の場合
header("Content-type: application/xhtml+xml");

スクリプトではなく、ベタの xhtml 文書の場合は、 .htaccess で Content-type ヘッダを指定する必要があります。

#-- 拡張子が .html の場合
AddType	application/xhtml+xml .html

どちらにしても、3キャリア対応のサイトの場合などは、DoCoMo 用にだけ適用しないといけないので、非常に面倒ですね。

link 要素による外部CSS の参照も可能になり、style 要素による内部参照も a 要素限定ではなくなりました。

また、html、xhtml どちらでも CSS が有効になったので、 Content-type ヘッダも text/html で大丈夫です。

というわけで、今後出る機種に関しては、CSS を使用する場合において、DoCoMo だけ特別な何かをしなければならない、ということはあんまりなくなりそうです。
ただ、まだまだ現状では iモードブラウザ1.0搭載端末の方が圧倒的に多いと思うので、簡単に取り捨てるわけにはいかないでしょうね。

関連するブログ記事

スポンサードリンク

カテゴリー: スタイルシート(CSS) | モバイル(携帯電話・ケータイ)Web
タグ: .htaccess | Addtype | Content-type | CSS | DoCoMo | perl | PHP | style属性 | style要素 | xhtml | モバイル | 拡張子

現在位置: TOP > Web制作技術 > モバイル(携帯電話・ケータイ)Web > DoCoMo の iモード用サイトで CSS(スタイルシート) を使用する際の注意点
前のブログ記事: 2009年4月の読了本まとめ [2009年9月 8日 23:40]
次のブログ記事: 2009年5月の読了本まとめ [2009年9月10日 22:14]