モバイルサイト作成時のHTMLヘッダー
HTML or XHTML
XHTMLは、CSSが使用できるため様々な表現を必要とするモバイルサイトの制作を考慮すると、XHTMLでの作成がオススメ。DOCTYPE宣言
現状では、キャリアごとに異なった宣言を推奨しているがキャリアごとにサイトを作成するのには手間がかかるので、3キャリア共通のモバイルサイトを作成するには、XHTML Mobile ProfileかXHTML 1.0 Transitionalに従って記述するのが望ましい。以下が、その設定例となる。XHTML Mobile ProfileのDOCTYPE宣言
<!--XML宣言-->
<?xml version="1.0"?>
<!--文書型宣言-->
<!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">
XHTML 1.0 TransitionalのDOCTYPE宣言
<!--XML宣言-->
<?xml version="1.0" encoding="Shift_JIS"?>
<!--文書型宣言-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--名前空間-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
コンテンツMIMEタイプ
XHTMLの場合は、application/xhtml+xmlが推奨されているため、以下のように設定する。metaタグ
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
また、DocomoでXHTMLを動作させるためにはサーバが送り出すHTTPヘッダーでも出力される必要があるため、.htaccsessに以下の記述を入れておく。
.htaccess
AddType application/xhtml+xml .htm .html
これを入れるとPCでモバイルサイトを見た場合に閲覧できなくなることもあるが、モバイルでは問題なく見ることができる上、GoogleやYahoo!のクローラもこの形式に対応しているため、モバイルサイトという観点からみるとあまり問題はない。
なお、モバイルサイト作成に関するより詳しい解説は、以下の本を参考にするとよい。この本を1冊買えば、3キャリアに対応可能なタグの使い方をマスターできる．これからモバイルサイトを作ろうとしている人は是非手元に置いておいて欲しい1冊だと思う。
携帯サイト コーディング&デザイン (大型本)
