3キャリアに対応したウェブサイトを手軽に作るにあたり
最低限、抑えておかなければいけない手順とポイントを記述します。
●XHTMLで記述する
ほとんどの3Gの端末ではHTMLに加え、XHTMLを使うことができます。
XHTMLを使うことによって、文字の背景色を設定できたりするなど、デザイン表現が多彩になっています。
ただdocomoでは、外部CSSを使用することができないため、
3キャリアで共通したhtmlを使用する場合、
style="font-size:middle"など各要素にインラインで組み込むようにします。
●DOCTYPE宣言
・DoCoMo
通常はiモードXHTMLのバージョンによってDOCTYPEが用意されているので、そちらに合わせた方が良いらしいですが
基本はこの共通系で動作します。
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
・au
DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd"
・SoftBank
DOCTYPE html PUBLIC "-//JPHONE//DTD XHTML Basic 1.0 Plus//EN" "xhtml-basic10-plus.dtd"
●ドコモ用にContent-Typeをapplication/xhtml+xmlを配信する。
auとSoftBankではPCサイトと同じようにtext/htmlでCSSを読むことができますが、
Docomoの場合はapplication/xhtml+xmlで配信しなければCSSを読み込むことができません。
方法としてはhead内に
meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"
と記述し、動作しない場合.htaccessに
AddType application/xhtml+xml .html
と一文を追加します。
上記をふまえた上でデザイン&コーディングを進めていきます
●各キャリアを考慮してデザインするには
・ベタ色のタイトル帯、画像回り込みで2カラム風レイアウトなどモバゲー、mixiモバイルなどを代表とするレイアウト。
・サイトロゴは自動縮小を回避するために横220ピクセル ~ 230ピクセルで作成。
・画像を使うよりは、絵文字に対応して見栄えを派手にするのがスタンダード・・・ですが、これにしてしまうと各種キャリアできちんと全ページの表示確認しないといけないので手軽ではなくなります。
http://www.dspt.net/tools/emoji/
http://dspt.blog59.fc2.com/blog-category-5.html
・画像は3キャリアすべてが対応しているjpg、gifを使用する。
●Docomoの癖を考慮した上でのデザイン/マークアップをする
・i-modeではmargin、padding、border(hrでのborder指定は可)、背景画像等は未対応です。
・liにするとなにかと面倒なので、基本div,pなどの要素でレイアウトしたほうが修正など効率が良い。
【参考サイト】
・モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう!
http://dspt.blog59.fc2.com/blog-entry-39.html
・3G端末(FOMA・WIN・3GC)のモバイルサイトのコーディング&デザイン
http://blog.livedoor.jp/ld_directors/archives/51104376.html
・携帯でCCSを用いる場合
http://34567.jpn.org/study1/sakusei/css.html

