ケータイ向けのページを作っていて、実機テストなんかをしてみると、何かドコモの端末だけスタイルが効いていない、みたいな事態に遭遇することがあるかもしれない。っていうか、あった。
まあ理由はよく分かんないんすけど、ドコモのケータイはＣＳＳを使うのにちょっち面倒な手続きが必要みたいです。
まずはＸＭＬ宣言やらＤＯＣＴＹＰＥの記述から。
<?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でこれを書くと、１行目の<?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"?>' ?>みたいな感じで回避しちゃっても良いかもしれない。
それから、ドコモ端末は外部ＣＳＳを読み込んでくれないという、江戸時代の鎖国みたいなノリがあるらしいので、必要なスタイルはstyle属性を使って記述しないといけないっぽいです。量がある場合は大変ですよね。まあ、中には例外もあるみたいですが、どんな例外があるかは申し訳ないですけど調べてませんので、ここでは省略。
あとは拡張子の問題もあります。ＣＳＳを使うには拡張子を.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
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
