Docomo 携帯向け CSS 記述方法

September 3, 2007

Docomo 携帯向け CSS 記述方法

Docomo でCSSを使うために四苦八苦しましたが、やっと設定がうまくいったので備忘録的に書いておきます。

キーポイントは
・XML 宣言、Doctype 宣言をきちんとする
・Content-Type は’application/xhtml+xml;’
・拡張子はxhtml

多分、この３つを押さえておけば大丈夫かと。
あともしかしたら.htaccessに以下の記述をしてあげるといいかもしれない。
AddType application/xhtml+xml .xhtml

とりあえず、テストのソースコードを置いておきます。ドコモ携帯で見てください。

http://blog.cyber-media.co.jp/files/mobile/docomo_css.xhtml


<?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" lang="ja" xml:lang="ja">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml;"/>
	<title>Docomo Html</title>
	<style type="text/css">
	<![CDATA[
	a:link{color:#333333;},
	a:focus{color:#FF0099;},
	a:visited{color:#AAAAAA;}
	]]>
	</style>
</head>

<body style="color:#888888;">

<p>
<img src="img/pic_1.jpg" alt="pic1" width="80" height="120" style="float:left; vertical-align:top; margin-left:5px; margin-right:5px" />
画像１まわりこみも問題なし。画像１まわりこみも問題なし。画像１まわりこみも問題なし。画像１まわりこみも問題なし。画像１まわりこみも問題なし。
</p>

<p style="clear:both;">
<img src="img/pic_2.jpg" alt="pic2" width="80" height="120" style="float:left; vertical-align:top; margin-left:5px; margin-right:5px" />
<span style="font-size:x-small; color:#336633;" >画像２フォントサイズと色を変えてみた。floatを解除するにはpタグ等に'style="clear:both;"'を設定</span>
</p>

<p style="clear:both;">
<a href="http://google.com">リンク1</a><br />
<a href="http://google.com">リンク2</a>
</p>

</body>
</html>

画像に対するフロートやマージンが利いているところがミソですね。あと、font タグの代わりにspanタグを使う必要があったり、body タグに書いていた aタグの疑似要素をhead タグ内に書かなきゃいけないところは要注意。

ただ、これだとAUに対してはfloatが利かないですし、そもそもMova ユーザーだとi-mode xhtmlは見れないというわけで…。全キャリアほぼ共通仕様で書くためにはCSS的な機能をあきらめて、fontタグ等でやり過ごしていくのが賢明なようです。

あぁ、モバイルhtmlにWeb Standard が普及するのはいつになることやら…。

今回参考にしたページ

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

http://q.hatena.ne.jp/1174467853

http://www.extype.com/gofa/archives/2005/10/foma.html

Comments (0)

Categories: モバイル — @ 4:33 pm