携帯サイトとPCサイトはここまで違う！

XHTML Mobile Profileに対応したHTML

　本連載では、「PCサイトを制作してきたけど、携帯サイトは初めて」といった企業や個人クリエイター向けにPCとモバイルの違いなどをふまえ、携帯サイトを公開するまでの入門的なノウハウを紹介していきます。

　まず、今回はHTMLの種類やタグ、CSSなど携帯ブラウザによる違いと、画面サイズやキャッシュ容量などの端末による違いについて紹介していきます。

　では、早速携帯サイトを作る上でマークアップの基本となるHTMLについて説明します（図1-1）。携帯電話はPCと比べても非常に早い進化を遂げてきたため、どれも基本はHTMLを基準に作られていますが、携帯ブラウザ（iモード、EZweb、Yahoo!ケータイ）で表示可能なHTMLの仕様には実に多くの種類が存在します。

　現在市場に出回っている機種ということに限定すれば、XHTML Mobile Profile（http://openlab.ring.gr.jp/k16/htmllint/tagslist.cgi?HTMLVersion=XHTML-MP）に対応したHTMLタグでページを記述していけば良いでしょう。キャリア別に現在の主要なHTML規格は次のようになっています。

　ドコモはiモードXHTML（http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/index.html）（movaは非対応。対応率は約85%程度）、auはHTML WAP 2.0（http://developer.openwave.com/ja/tools_and_sdk/documentation/index.html）（ほぼすべての機種で対応。対応率は約99%程度）、ソフトバンクはソフトバンクXHTML（XHTML Basic基準）／ソフトバンクXHTML（XHTML-MP1.2基準）（http://creation.mb.softbank.jp/）（3GC/3GC2端末で対応。対応率は約81%程度）となっています。

　HTMLのDOCTYPEやMIMEタイプについても図1-2のように正しく記述する必要があります。もちろんプログラムでキャリアごとに推奨された宣言を出力すれば良いのですが、ここでは3キャリアに対応するようにある程度、幅を持たせた文書宣言にしています。

　なお、ドコモでは注意が必要です。XHTMLの正しいDOCTYPEとMIMEタイプを設定するだけでは、機種側がXHTMLモードにはなりません。サーバー側で正しいHTTPヘッダーが出力されている必要があり、静的なHTMLでサイトを制作する場合、サンプルコードのように「.htaccess」等で設定をする必要があります。サンプルはこちらからダウンロード（http://www.thinkit.co.jp/images/article/143/1/14311.zip）できますので、参照ください（14311.zip/1.01 KB）。

　また、文字コードについて、現在はShift-JIS、UTF-8、EUC-JPに対応している端末も多く、中には機種側で切り替えることができる端末もありますが、古い機種まで考慮するのであれば、Shift-JISで記述しておくと良いでしょう。

キャリア別のCSSの書き方に注意する

　現在の携帯ブラウザの多くはXHTMLモードでのCSSをサポートしています。ただし、キャリアによっては制限が大きいので使えるCSSやその書き方に注意する必要があります。

　現在、携帯端末向けのCSSには、W3Cが勧告した「CSS Mobile Profile（http://www.toyfish.net/docs/css-mobile/）」とOMAが策定した「WCSS（Wireless CSS）（http://www.openmobilealliance.org/technical/release_program/docs/Browsing/V2_3-20080331-A/OMA-WAP-WCSS-V1_1-20061020-A.pdf）」の2種類に分けられます。キャリア別の対応状況は次のようになります。

・ドコモ：CSS Mobile Profile、一部のWCSS
・au：CSS Mobile Profile 、WCSS
・ソフトバンク：CSS Mobile Profile、WCSS

　CSSにおいても、ドコモでは注意が必要です。auやソフトバンク携帯では比較的CSSをサポートしていますが、ドコモでは非常に制限が厳しくなっています。3キャリア対応の携帯サイトを制作する場合は、図1-2を参考に下記に注意してください。

・インライン指定（style属性）のみサポート
・内部参照はリンク疑似クラス（a:link, a:visited）と動的疑似クラス（a:focus）のみ
・外部参照（外部CSS）には非対応

　インライン指定のみのサポートでは、HTMLの要素の属性に直接スタイルを適用しなければなりませんが、内部参照はリンク関連の疑似クラスのみの対応なので、これらのクラスはHTMLのヘッダー部に記述することになります。

　また、外部CSSには非対応ですので、linkタグで読み込むといったことはできません。対応するCSSプロパティもCSS Mobile Profile通りとはならず、かなり使用できるCSSプロパティが少ないので、注意しましょう。