3キャリア対応携帯サイト制作覚書
3キャリア共通でコード利用したいのであれば、基本3G以上を対応機種と考えて、古い機種についてはある程度の割りきりが必要。
XHTMLで記述
コンテンツのMIMEタイプもHTTPヘッダーも「application/xhtml+xml」
文字コードは、Shift-JIS
CSSは基本インライン
画像の全画面表示サイズは、240pxで作成してwidth=100%としておく
画像フォーマットは、JPEGかGIF
ページ全体の容量は、トップページで100KB以内（広範囲で対応させるには5KB）
文字サイズは、標準で全角10文字程度（小で13文字程度）
絵文字を共通化するにはPHPなどの絵文字共通化プログラムが必要
コーディングでインデントを使わない
【デザインのポイント】
<hr>はキャリアによって指定・表示に癖が出る
・ドコモでは、XHMLでは全ての属性に非対応
・ソフトバンクは、罫線の上下にマージンができる、hrの余白調整はmargin/paddingプロパティで対応可能、noshadeにも対応
・auは、ライン色はcolorで指定可能、height/borderは指定できない、text-alignプロパティが使用可能（au以外では、align属性を使用する）
・WIDTHは全キャリア使用可能
・hrを使うより画像使用したほうがキレイにできる
画像
・ドコモXHTMLではalign属性が非対応、CSSでのフロートはauが非対応のため、画像の回り込みをするには、両方の属性を併用しなければならない
・回り込みの解除は、<br clear=”all” />だが、ドコモ非対応、ドコモでは、「blockquote」「dl」「div」「form」「hr」「h1-h6」「ol」「ul」「p」「pre」にclear属性を記述すれば旧機種でも対応できる。
・画像のmarginはドコモでも対応
・画像のborderはドコモ非対応
リンク
・ドコモxhtmlは、<a>タグのname属性に非対応なので、<a>タグには、nameとidを両方使用する
・auでは、auではdivなどのブロックレベル要素間で1pxほどのすき間が生じてしまうというバグがある
・ドコモとau／ソフトバンクの違いということであれば、外部CSSにau／ソフトバンク用のCSSを書いておいて、ドコモにはインライン指定のCSSを優先させるといった手順をふむことで、違いを吸収するということが可能
・CSSはstyle属性が優先されるので、ドコモのインラインCSSとソフトバンク/auの外部CSSを共存する場合は、<DIV>タグを入れ子にして外側をインラインCSSにして内側のdivにソフトバンク/au用のクラスを指定する
・アクセスキーの設定：一般的には「[0]がトップページ」「[9]が1つ前のページへ戻る」「[5]更新」としているサイトが多い
・入力モードの設定：ドコモのiモードHTMLの場合は、「istyle」属性を、iモードXHTMLの場合は、style属性で「-wap-input-format（WCSS）」を指定します。auの場合は「format」属性で、ソフトバンクの場合は「mode」属性をinputタグに指定します。3キャリア対応で書く場合は、それぞれの属性をinputタグに併記すれば問題ない。ただし、-wap-input-format（WCSS）をソフトバンクで読み込むと入力制限がかかるバグがある。このため、入力設定をしたいフォームでは、スクリプト側でキャリアごとの振り分けをするとよい。
振り分けをする場合は
DoCoMo
style=-wap-input-formatのみ
au/SoftBank
istyle、format、modeをすべて記述
という感じになるように切り替えてやると、おかしな状況にも対応でき、きちんとした入力モードの切り替えが実装できる。
Smartyのプラグインなり、ヘルパーにまとめるなりしてやると、簡単に使える。