携帯アフィリエイト情報.net > 携帯サイトで使えるXHTMLの規格
PCサイト・携帯サイト共に、XHTMLが以前よりは一般的に使われるようになりつつあります。 ここでは、携帯端末で使われるXHTMLの主な３つの規格の簡単な概要を書いておきます。
携帯サイトの場合は、文字コードとしてShift_JISを使用することが多いと思われるため、
先頭のXML宣言は
<?xml version="1.0" encoding="Shift_JIS"?>
としなくてはなりません（省略すると、文字コードセットは UTF-8またはUTF-16 になる）。
以下のどの規格でも、先頭のXML宣言で、適当な文字コードの設定が必要です。
XHTML 1.0 Transitionalを使いたい場合は、文書型宣言で、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">とする。PCサイトで使われているXHTML Transitionalと同じ規格なので、 PC(パソコン)サイトの運営者には気が楽。 見た目に関わる非推奨のタグもサポートされています。 携帯サイトのための規格というわけではく、 現時点での携帯サイトには“豪華な”タグ揃えの規格。
XHTML Basic 1.0を使いたい場合は、文書型宣言で、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">とする。必要最小限のタグだけがサポートされているので、 いろいろな表現をするのには、あまり向いていない。 文字通りこれは「ベーシック」の規格で、拡張して使うことも多い。
XHTML Mobile 1.0を使いたい場合は、文書型宣言で、
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">とする。「XHTML Basic」を携帯用に拡張したもので、 見ために関わる要素が排除されている。一方で、 <small>や<hr>はサポートされています。
すべての携帯機種が、ちゃんとCSSに対応しているのであれば、 「XHTML Mobile + CSS」とできるのですが、CSSにきちんと対応していない携帯も多いです。 今のところ、HTMLや、XHTML Transitionalを選んで、fontタグや、color属性を使って表現することもよくあります。 PCサイトではあまり見かけなくなりつつあるtext,bgcolor,link,vlink,alinkも、まだまだ活躍しています。
このページがちょうど、XHTML Mobile 1.0の例になっています。 全体の構造は次の通りです。
<?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" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="サイト説明文。" />
<meta name="keywords" content="キーワード１,キーワード2" />
<link rel="stylesheet" type="text/css" href="./mobile.css" media="handheld, tty" />
<link rel="stylesheet" type="text/css" href="./pc.css" media="screen, projection" />
<title>タイトル</title>
</head>
<body>
<p>本文</p>
</body>
</html>
先頭のXML宣言で、どの規格にするかを決定しています。 マークアップを正しくすると、 Validになります。 head内の各タグは、携帯の端末によっては対応していないものもあり、その場合は無視されます。
(このページの実際のソースでは、<meta http-equiv>に関する二つのタグがありません。 それは、このページのHTTPレスポンスヘッダでは、 Content-Typeとして「application/xhtml+xml」を返しているからです。 この部分については下に少しだけ説明があります。）
以下は、サーバー側のMIMEタイプの設定や、 HTTPレスポンスヘッダのContent-Typeが気になる場合の参考メモです。
XHTMLを使う場合、返すべきContent-Typeは、 「application/xhtml+xml」、 「application/xml」、 「text/xml」、 「text/html」等が考えられます。
XHTMLはXML文書であるHTMLであるため、Content-Typeは「application/xhtml+xml」でいいはずです(というか、これが推奨されています)。 また、XML文書であるという点からは、「application/xml」や「text/xml」でも、問題ないと思われます。 しかし、これらのxmlを含むContent-Typeにすると、ブラウザの挙動が変わってしまう場合があって、 困ったことになります。 ダウンロードが始まってしまったり、たった一個の&と書かれていない&によって、 エラーが出たりしてしまう事があります(これはこれで、正しい挙動をしているとも言えるのかもしれませんが…)。 しかも、ブラウザによって反応が違ったりすることもあって面倒です。
実際の運用を考えると、推奨はされないのですが「text/html」にして置くのが、 当面の間、無難だと思われます。 このページでは、Content-Typeは「application/xhtml+xml」を返していますが、そうすると例えば、Firefox(1.5)なんかだと(&ではなく)「&」とそのまま書くだけでも「XMLのパースエラー」などが出て、ブラウザが止まってしまいます。 この場合は、１ページを作るだけなので、文法に気をつければ良かったのですが、 何ページも作るとなると、そこまで神経を使えません。 JavaScriptやリンクに&がそのまま入っているなんて良くあるので、これではリンクの貼り付けすら面倒です。
(「application/xhtml+xml」をContent-Typeで返す場合は、 <meta http-equiv>をメタに入れるべきではないとされているようなので省きました。 「text/html」を返す場合は、上のように「http-equiv」が必要になります。 この場合は、XML文書をContent-Type「text/html」で返すというあまりよろしくはない状態になってしまいますが、 こちらの方が、ブラウザは“普通”に処理してくれるようです。 ）
以下は、PHP、CSSの実験です。
CSSに対応している端末からのアクセスで、次の文字に色が付きます。
PCのスタイルシート反映
<-->
モバイル端末のスタイルシート反映
CSS対応端末で見ると対応部分の背景に緑色が見えるはずです。
端末のUSER AGENTの種類に合わせて、 画像の形式を「GIF,JPEG,PNG」のいずれかから選びます。 (各端末で、正しく表示されるとは限りません。変更するだけです)。
現在「PC(パソコン)でアクセス」しています。 画像形式として「jpeg」を選択しています。
間違いや、おかしな点があれば、ご連絡ください。 関連：携帯サイト作成のためのXHTML文法の基礎。
携帯アフィリエイト情報.net > 携帯サイトで使えるXHTMLの規格