2009年度版　携帯サイトのコーディングまとめ - 主に技術的なことを書くブログ

各キャリアがだいたい対応してきているというだけで、「XHTMLでコーディングしなければいけない」っていう理由がいまいちわからなかったんですが、いろいろ調べてみると、どうやら、CSSを使うためには、XHTMLでコーディングしないとダメで、携帯ではdocomoがIE的なポジションで、XHTMLじゃないとCSSが効かなかったり（インラインしかダメなくせに）いろいろ問題があるみたいです。

個人的には、こまかい文字サイズの違いとか、勝手に空いてしまう余白とかは、ある程度、携帯のせいにして、昔のPCサイトのコーディングみたいに、DOCTYPE宣言とかもなしで、原始的なHTMLでコーディングする感じでいいんじゃないかとも思います。

でも、会社で制作するとなると、そういうわけにもいかないので、一応、勉強しながらやってみようかな、と。

ただ、書いてることがあちこちで微妙に違ってて、結局、PCのコーディングと一緒で、人それぞれやり方が違うみたいで、調べれば調べるほど混乱しました。

以下の記事がけっこううまくまとまってる気がしたので、引用させてもらうと

WebTecNote - [XHTML] 携帯サイト用 XHTML仕様まとめ

XHTML Mobile Profile1.0

DOCTYPE宣言を省略しない。キャリア別に変更できるなら変更を推奨

文字コードはShift-jis

iモードブラウザ1.0端末に対応する場合はstyle属性を使ってCSSを記述する

要素を入れ子にする記述をなるべく避ける

PC98系機種依存文字を使用しない

スペース、タブ、改行の扱いに注意する

テキストのみで10kb以下、全体で100kb以下を目安にする

だいたい、こういう感じでやればいんじゃないかなと、思いました。

ただ、個人的には、容量は全体で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宣言について
 モバイルサイトデザイン集のモバイルデザインアーカイブ