2. XHTMLでベースを作る

PC向けのウェブサイトであれば、記述には HTML4.01 や XHTML1.1 など、いくつかの言語が使えます。 文字コードも SHIFT-JIS や EUC-JP、UTF-8など、様々な規格が使えます。 しかし、携帯端末向けのウェブサイトだと、使える言語や文字コードには制限があります。

記述に使う言語は「 XHTML Mobile Profile 1.0 」

携帯サイトを作るための言語としては、以前は「CompactHTML」や「HDML」などいくつかの規格がありました。 これらは、3大キャリア各社で採用規格や仕様が異なるため、単一ページで3大キャリアすべてに対応させるのは困難です。 また、スタイルシートで装飾が記述できないなど、不便でもあります。

現在発売されている携帯端末では、3大キャリアとも「XHTML」を解釈できるので、XHTMLで記述するのが良いでしょう。 XHTMLにもいくつかの規格がありますが、この記事では「XHTML Mobile Profile 1.0」を使って記述することにします。

「XHTML Mobile Profile 1.0」であれば、3大キャリア共通のページを作成できます。 また、検索エンジンからも「携帯サイト」であると認識されます。
※携帯端末向けのXHTMLとしては「XHTML Basic」がありますが、docomoが必要とするスタイルシートの記述方法が「XHTML Basic」では使えません(詳しくは後述)。 従って、現状で3大キャリア共通のページを作るには、「XHTML Mobile Profile 1.0」が最も良いでしょう。

文字コードは SHIFT-JIS

文字コードは、「SHIFT-JIS」を採用します。理由は、SHIFT-JISしか読まない端末があるためです。 作成したページは、文字コードを「SHIFT-JIS」にして保存して下さい。
※端末によっては、UTF-8やEUC-JPなどの文字コードが読めるものもありますが、SHIFT-JISしか読めない端末も多いため、SHIFT-JISで作成しておくのが良いでしょう。

携帯サイトを作るXHTMLソース(枠組み)

「 XHTML Mobile Profile 1.0 」を使って、文字コード「 SHIFT-JIS 」で記述するXHTMLソースは、以下のようになります。

<?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" lang="ja" xml:lang="ja">
<head>
   <meta http-equiv="Content-Type" content="application/xhtml+xml ; charset=Shift_JIS" />
   <meta http-equiv="Content-Style-Type"  content="text/css" />
   <meta name="description" content="紹介文" />
   <title>ページタイトル</title>
</head>
<body>

(--- 本文領域 ---)

</body>
</html>

■1行目:<?xml version="1.0" encoding="Shift_JIS" ?>

XML宣言です。XHTMLで記述しているので最初にこの1行を書きます。 文字コードをSHIFT-JIS以外にした場合は、「encoding="Shift_JIS"」の部分を書き換えて下さい。 ただし、現状で携帯端末向けのサイトを作るならSHIFT-JISで作ることをお勧めします。(SHIFT-JISしか読まない機種があるため)

■2行目:<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML ~

「 XHTML Mobile Profile 1.0 」で記述していることを示すDOCTYPE宣言です。これはこのまま記述します。

■3行目:<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" ~

HTML要素と名前空間の記述です。これもこのまま記述します。
(コンテンツが日本語でない場合は「ja」の部分を修正する必要があります。)

■5行目:<meta http-equiv="Content-Type" content="application ~

MIMEタイプと文字コードを記述しています。XHTMLでは、MIMEタイプを「application/xhtml+xml」とする必要があります。 この記述は、特にdocomoの端末向けに必須です。 なお、文字コードをSHIFT-JIS以外にした場合は、「charset=Shift_JIS」の部分を書き換えます。
※docomoの端末向けには、このほか、HTTPヘッダでも正しいMIMEタイプを出力する必要があります。(次のページで解説)

■7行目:<meta name="description" content="紹介文" />

PC向けサイトと同じように、検索エンジン向けに紹介文を書いておきましょう。 必須ではありませんが、何か書いておくことをお勧めいたします。

■8行目:<title>ページタイトル</title>

タイトルは常時表示されない端末が多いですが、閲覧者がブックマークする際や、検索結果に表示される際などに使われます。 短く分かりやすいタイトルを付けておきましょう。

次に、ウェブサーバからMIMEタイプを出力する方法です。

【携帯サイトの作り方 第1回 目次】

1. はじめに・サンプル
2. XHTMLでベースを作る (このページ)
3. HTTPヘッダでMIMEタイプを出力
4. 使える装飾方法と使えない装飾方法
5. 文字色・背景色・文字サイズなどの装飾基本
6. マーキー(流れる文字)を作る
7. サイズに気をつけて画像を掲載する
8. リンク・ページ内リンクを作る
9. ソースのまとめ