Webサービス開発、あるよ
Webサービス開発、あるよ
2010.03.08

ドコモのケータイでCSSを効かせる

まっちー

ケータイ向けのページを作っていて、実機テストなんかをしてみると、何かドコモの端末だけスタイルが効いていない、みたいな事態に遭遇することがあるかもしれない。っていうか、あった。

まあ理由はよく分かんないんすけど、ドコモのケータイはCSSを使うのにちょっち面倒な手続きが必要みたいです。

まずはXML宣言やらDOCTYPEの記述から。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver .=ja/2.3) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

DOCTYPEの書き方はこれ一通りではないようなんですが、その辺はちょっと詳しくないので、今回は僕がデザイナーからもらったhtmlファイルに書いてあったのをそのまま載せてみました。

ちなみにPHPでこれを書くと、1行目の<?xml~?>のところでparse errorが出るかもしれない。っていうか、出た。

これはphp.iniでshort_open_tagってのがOnになっていると、<?php コード ?>と書くところを<? コード ?>と書いても良いような設定になるらしく、つまり<?xml~?>がPHPタグと判定されてエラーになるみたいです。

だからこのshort_open_tagをOffにすれば問題は解決する。

<?php echo '<?xml version="1.0" encoding="utf-8"?>' ?>

みたいな感じで回避しちゃっても良いかもしれない。

それから、ドコモ端末は外部CSSを読み込んでくれないという、江戸時代の鎖国みたいなノリがあるらしいので、必要なスタイルはstyle属性を使って記述しないといけないっぽいです。量がある場合は大変ですよね。まあ、中には例外もあるみたいですが、どんな例外があるかは申し訳ないですけど調べてませんので、ここでは省略。

あとは拡張子の問題もあります。CSSを使うには拡張子を.xhtmlにする必要がある。

ただこれも、PHPを使う場合は、拡張子を.xhtmlにじゃなくて.phpにしないといけないから、別の方法を使わないといけません。

<code>header("Content-type: application/xhtml+xml charset=utf-8");</code>

こんな感じでheader関数を使って出力してやれば、何とか大丈夫です。

詳しいことは以下のサイトさんに書いてあります。

http://ke-tai.org/blog/2008/04/03/docomocss/

http://digibot.jp/blog/archives/2004/08/phpxml_1.html

U Y A
K A