2009年度版 携帯サイトのコーディングまとめ
各キャリアがだいたい対応してきているというだけで、「XHTMLでコーディングしなければいけない」っていう理由がいまいちわからなかったんですが、いろいろ調べてみると、どうやら、CSSを使うためには、XHTMLでコーディングしないとダメで、携帯ではdocomoがIE的なポジションで、XHTMLじゃないとCSSが効かなかったり(インラインしかダメなくせに)いろいろ問題があるみたいです。
個人的には、こまかい文字サイズの違いとか、勝手に空いてしまう余白とかは、ある程度、携帯のせいにして、昔のPCサイトのコーディングみたいに、DOCTYPE宣言とかもなしで、原始的なHTMLでコーディングする感じでいいんじゃないかとも思います。
でも、会社で制作するとなると、そういうわけにもいかないので、一応、勉強しながらやってみようかな、と。
ただ、書いてることがあちこちで微妙に違ってて、結局、PCのコーディングと一緒で、人それぞれやり方が違うみたいで、調べれば調べるほど混乱しました。
以下の記事がけっこううまくまとまってる気がしたので、引用させてもらうと
WebTecNote - [XHTML] 携帯サイト用 XHTML仕様まとめ
だいたい、こういう感じでやればいんじゃないかなと、思いました。
ただ、個人的には、容量は全体で50KB以下がベスト、できれば30KB以下を目指したいところですね。
3キャリア共通テンプレート
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=shift_jis" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>ページタイトル</title>
<style type="text/css">
a:link{color:#0075a9;}
a:visited{color:#eb6100;}
a:focus{color:#fff;}
div {margin: 0; padding: 0; border: 0;}
</style>
</head>
<body>
こんな感じでどうなんでしょう?
fontタグは使わずに、ほとんどdivとspanにstyle直書きという感じで、文字サイズは、x-smallとmediumぐらいしか使わない(機種によって、大きさが違うけど、このふたつは許せる感じ)。
あと、docomoはXHTMLのとき、拡張子が.xhtmlじゃないとだめらしく、以下の.htaccessを設置。
AddType application/xhtml+xml .htm .html
au端末はかなりキャッシュが残るらしく、更新したのに反映されないとかを防ぐために、ヘッド内に以下の一文を追加するといいかも。
<meta http-equiv="cache-control" content="no-cache" />
画像の横幅は240pxがぴったりだけど、一部の機種では勝手に縮小されて、画像がつぶれてしまうので、228pxにしておくのがベターかと。でも、隙間があくから、どっちもどっちという感じ。つぶれるか、隙間か、みたいな。
これで、絵文字を使わない携帯サイトなら、だいたい使い回せそうです。
その他の参考:
【mobile site】3キャリア共通XHTMLでコーディングしてみた
3キャリア共通のモバイルサイトコーディングにおけるポイント
ケータイ3キャリアに対応するためのDOCTYPE宣言について
モバイルサイトデザイン集のモバイルデザインアーカイブ