3キャリア対応の携帯ページの作り方
現在市場に出ている携帯端末のほとんどは、3G端末（第3世代の携帯端末：NTTドコモのFOMA、au by KDDIのWシリーズ、ソフトバンクの3GCなど）となっています。サイトの趣旨にも寄りますが、今後オープンする携帯向けサイトであれば、ターゲットを「3G端末以降」として問題ないと言えるでしょう。
3G以降の端末であれば、XHTMLに対応しているので、静的な単一ページで3キャリアに対応させることができます。XHTMLに対応していない下位端末まで対象に含める場合、単一ページで3キャリアに対応せるのはスクリプトを利用しない限り困難です。この場合、それぞれのキャリア／機種別のページを作り、スクリプトでユーザーエージェントによって振り分けるなど、それなりの運用コストが必要になってきます。ここでは、対象を3G以降の端末とし、なるべく少ないコストで、3大キャリアで問題なく表示させる方法を紹介したいと思います。
前方互換の携帯用ページ
これまでWeb標準によるPCサイト制作に馴染んできた方にとって、一番しっくりくる携帯用ページの作り方は、「XHTMLはそのままで、携帯用の外部CSSを適用する」という方法だと思います。iモードブラウザ1.0は、外部CSSに対応していないので、CSSは非適用、見栄えは切り捨てるということになりますが、クリーンなXHTMLを保持することができ、今後、iモードブラウザ2.0が普及してもXHTMLを書き換える必要はありません。携帯電話の新機種のリリースや普及スピードは、とても早いので、後で新しい端末の対応に追われないよう、はじめから（style属性などの記述のない）クリーンなXHTMLで運用した方が無難かもしれません。
iモードブラウザ1.0の見栄えを制御したい場合には、style属性で指定した専用のXHTMLファイルを用意し、ユーザーエージェントで振り分けるなどの対応が必要になります。EZwebやYahoo!ケータイ、iモードブラウザ2.0は、外部CSSに対応しているので、メディアタイプを「handheld, tty」とするだけで携帯電話用CSSを適用することができます。
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld, tty" />
ただし、携帯サイトで使用できるCSSプロパティは、colorやborderプロパティなど、主要なものに限られています。携帯サイトでは、PCサイトのように余白を細かく設定したり、マルチカラムにしたりするなど、複雑なレイアウトは向いていません。目線が上から下に流れるワンカラムのシンプルなレイアウトが向いています。
| color | border | background | text-align | text-indent |
| text-decoration | line-height | vertical-align | font | white-space |
| list-style | display | margin | padding |
後方互換の携帯用ページ
これから紹介する3キャリア対応の携帯用ページの作り方は、iモードブラウザ1.0の仕様に合わせ、後方互換の方法をとるものです。iモードブラウザ1.0は外部スタイルシートに対応していないため、style属性でスタイルを指定することになります。style属性での指定は、EZwebやYahoo!ケータイ、iモードブラウザ2.0など、外部スタイルシートに対応している端末にとっては不要なコードになりますし、外部スタイルシートよりも優先されるので注意が必要です。
しかし「スクリプトを用いず、静的な単一のWebページで、iモードブラウザ1.0を含めた3キャリアに対応させる」という前提がある場合、style属性でスタイルを指定するか、あるいは前項で紹介したようにiモードブラウザ1.0にはスタイルを適用しないかのどちらかの方法を取ることになります。
これまでWeb標準に従ったPCサイト制作に慣れている方にとっては、style属性でスタイルを指定する方法は、なんとなく気持ちの悪い書き方かもしれませんが、静的な単一ページだけで3大キャリアの見栄えを制御でき、制作コストを最小限に抑えられるというメリットがあります。それでは以降、後方互換を意識した携帯用ページのポイントを紹介していきます。
言語は、XHTML Mobile Profile
携帯用ページを作成するXHTMLとしては、W3C勧告の「XHTML Basic」とOMAが策定した「XHTML Mobile Profile」が挙げられます。ここでは、iモードブラウザ1.0に合わせstyle属性の使用が前提になりますが、「XHTML Basic」は、必要最小限のタグしかサポートされておらず、style属性を使用することができません。
| モジュール | 要素 |
| 構造 | body, head, html, title |
| テキスト | abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var |
| ハイパーテキスト | a |
| リスト | dl, dt, dd, ol, ul, li |
| 基本フォーム | form, input, label, select, option, textarea |
| 基本テーブル | caption, table, td, th, tr |
| 画像 | img |
| オブジェクト | object, param |
| メタ情報 | meta |
| リンク | link |
| ベース | base |
「XHTML Mobile Profile」では、上記の表「XHTML Basicで使える要素」に加え、style属性を含めた以下の要素／属性がサポートされています。従って「XHTML Mobile Profile」を採用することになります。
| 要素 | fieldset, optgroup, b, big, hr, i, small, style |
| 属性 | style属性, ol要素におけるstart属性, li要素におけるvalue属性 |
各キャリアが推奨しているDOCTYPE宣言はそれぞれ異なりますが、ここでは「XHTML Mobile Profile1.0」とします。
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
また、iモードのXHTMLではMIMEタイプを「application/xhtml+xml」とする必要があります。
<meta http-equiv="Content-Type" content="application/xhtml+xml ; charset=Shift_JIS" />
