ドコモ端末でCSSを利用するには
    このエントリをはてなブックマークに登録

2008/4/3 木曜日 matsui Posted in DoCoMo | 9 Comments »

ドコモ端末でCSSを表示しようとして、悩まれる方が多いようなのでご紹介しようと思います。

ドコモのiモード端末では、FOMA以降の機種でXHTML対応となりCSSが使えます。
※厳密にいうと、ごく初期のFOMA21xxシリーズでは使えません。詳しくは下記一覧表からご確認ください。
→　iモード対応機種 対応コンテンツ・機能一覧 [nttdocomo.co.jp]　※PDFです

ですが、PCと同じように普通に書くだけでは、CSSは認識されません。
下記の3点を守る必要があります。

  1. iモード用のXML宣言、DOCTYPEを付ける
  2. CSSは外部ファイルにしない、ヘッダ部にも書かない
  3. 拡張子を「.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です

 

関連：


 

最近の記事







9 Responses to “ドコモ端末でCSSを利用するには”

  1. もぎゃ Says:
    5月 2nd, 2008 at 11:09:37

    Googleモバイルの送信するヘッダ、上記の引用だと、version=”1.0″という具合に201D(RIGHT DOUBLE QUOTATION MARK)と2033(DOUBLE PRIME)でくくってあることになっていますね。

    今試しに自分の環境でGoogleモバイルの送信するヘッダを取得してみたら、普通に””の0x22(QUOTATION MARK)でくくってあったので、たぶん、ブログに貼り付ける時に勝手に変換されたんじゃないのかな、と。

    そのままコピーペーストして自分のサーバで使うと(使うな^^;)、xmlとして通らなくてはまったので、一応ご指摘まで。

  2. matsui Says:
    5月 2nd, 2008 at 11:54:41

    もぎゃさん

    ご指摘ありがとうございます。
    おっしゃるとおりWordpressが勝手に変換していたようです。
    書き方を変えて修正しました。
    また何かありましたらよろしくお願いします。

  3. 携帯サイトを作る。 - まとめ » CSSとXHTMLで携帯サイト(モバイルサイト)を作るまとめ…まとめ Says:
    3月 23rd, 2009 at 10:51:02

    […] ke-tai.org > Blog Archive > ドコモ端末でCSSを利用するには http://ke-tai.org/blog/2008/04/03/docomocss/ […]

  4. PHPのテクメモ » Blog Archive » 携帯でCSS Says:
    10月 19th, 2009 at 0:08:33

    […] と、ここまできてからウェブで検索してみた。ke-tai.orgさんに情報があった。 […]

  5. ドコモのケータイでCSSを効かせる｜ASTRODEO Says:
    3月 8th, 2010 at 18:06:54

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

  6. docomo用サイトでcssを使う場合(php) | Moral Hazard!! Says:
    8月 24th, 2010 at 12:19:51

    […] FOMAで中途半端に対応している"i-css"。 携帯サイトをdocomoに対応させるには、以下が大前提。 […]

  7. DoCoMoのCSSとXHTMLまとめ | 村式流 イッパシエンジニアへの道 Says:
    10月 2nd, 2010 at 2:00:16

    […] ドコモ端末でCSSを利用するには http://ke-tai.org/blog/2008/04/03/docomocss/ […]

  8. docomoでCSSを表示させるには Says:
    9月 27th, 2011 at 19:46:21

    […] モします。 http://ke-tai.org/blog/2008/04/03/docomocss/ […]

  9. ドコモのケータイでCSSを効かせる | 株式会社LIG Says:
    11月 6th, 2015 at 16:49:30

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

コメントを書く

«
»