ゼロから始めるガラケーコーディング DOCTYPEとCSS編

2009年01月05日

前回は初歩の初歩ということで、携帯サイトのコーディングに関する基礎的な事項についてご紹介しましたが、今回はもう少し踏み込んだ、DOCTYPE宣言とCSSの使用可否について考えます。

携帯サイトにおけるDOCTYPE宣言

そもそもDOCTYPE宣言とは、そのHTML文書がどういったバージョンで記述されているかを宣言するものであり、携帯サイトをコーディングする際にもDOCTYPE宣言は必要です。そこで、キャリアごとのDOCTYPE宣言について、ご紹介します。

docomo

1<?xml version="1.0" encoding="Shift_JIS"?>
2<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/x.x) 1.0//EN" "i-xhtml_4ja_10.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

※x.xにはiモード対応XHTMLのバージョンが入ります。iモード対応XHTML 1.0ならば、

`1`	`<!DOCTYPE html PUBLIC` `"-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN"` `"i-xhtml_4ja_10.dtd">`

となります。

最後のmetaタグはMIMEタイプを指定するもので、Docomo機種でXHTMLを使う際は、metaタグのcontent属性を「application/xhtml+xml」としなければなりません。これはauやSoftBankの機種では必要なく、DocomoのFOMAのみの仕様となります。
また、Docomo機種でXHTMLを使用する場合、DOCTYPEを省略したり、記述の間違いなどがあると、ブラウザがXHTMLモードにならないので注意が必要です。

au

1<?xml version="1.0" encoding="Shift_JIS"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

SoftBank

1<?xml version="1.0" encoding="Shift_JIS"?>
2<!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN" "xhtml-basic10-plus.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
4<head>    
5<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

上記はすべて文字エンコードがShift-JISの場合の例ですが、各キャリアではShift-JIS、あるいはUTF-8のどちらかを使用可能です。また、SoftBankではそれ以外にも、ISO-2022-JPとEUC-JPの2つが使用可能です。しかし、実状としては、一般的にShift-JISが使われます。

3キャリア共通

3キャリア共通のDOCTYPE宣言も行うことは可能です。

1<?xml version="1.0" encoding="Shift_JIS"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
5<head>
6<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7<meta http-equiv="Content-Style-Type" content="text/css" />

XHTML 1.0のTransitionalでDOCTYPE宣言をします。
ただし、こちらのやり方だと、各キャリア独自の仕様などに対応できないので注意する必要があります。

CSSの使用可否について

各キャリアとも、第3世代…いわゆる3G携帯以降であれば基本的にCSSには対応していますが、それぞれ対応状況が異なります。以下にその特徴を記載します。

docomo

・XHTMLのみでCSSが有効です。
・基本的にインラインのみに対応しています。つまり、

`1`	`<p style="color: #99FFFF;">テキストです。</p>`

このような形でのみ使用可能です。
・内部参照については、a:link、a:focus、a:visitedのみに対応しています。
・外部参照については対応していません。
・class/id指定は無効です。

ただし、iモードブラウザ2.0以降が搭載されている機種では、外部参照を含むCSSに対応しています。

au

・HTML/XHTML共にCSSが有効です。
・インライン、内部参照、外部参照にすべて対応しています。
・class/id指定に対応しています。

SoftBank

・HTML/XHTML共にCSSが有効です。
・インライン、内部参照、外部参照にすべて対応しています。
・class/id指定に対応しています。

ただし、au、SoftBank共に一部の機種にてid指定には対応していない模様です。

キャリアごとにDOCTYPEを振り分けるスクリプト

最後に、キャリアごとにDOCTYPEを振り分けるスクリプトをご紹介いたします。

01<?php
02    $agent=$_SERVER['HTTP_USER_AGENT'];
03 
04    if(preg_match("/DoCoMo/", $agent)) {
05        print("<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n");
06        print("<!DOCTYPE html PUBLIC \"-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/x.x) 1.0//EN\" \"i-xhtml_4ja_10.dtd\">\n");
07        /* x.xにはiモード対応XHTMLのバージョンを入れてください */
08        print("<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\" xml:lang=\"ja\">\n");
09        print ("<head>\n");
10        print("<meta http-equiv=\"Content-Type\" content=\"application/xhtml+xml; charset=Shift_JIS\" />");
11    }
12 
13    elseif(preg_match("/KDDI\-/", $agent)||preg_match("/UP\.Browser/", $agent)) {
14        print("<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n");
15        print("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML Basic 1.0//EN\" \"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd\">\n");
16        print("<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\" xml:lang=\"ja\">\n");
17        print("<head>\n");
18        print("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\" />");
19    }
20 
21    elseif(preg_match("/J\-PHONE|Vodafone|MOT\-[CV]980|SoftBank/", $agent)) {
22        print("<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n");
23        print("<!DOCTYPE html PUBLIC \"-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN\" \"xhtml-basic10-plus.dtd\">\n");
24        print("<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\" xml:lang=\"ja\">\n");
25        print("<head>\n");
26        print("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\" />");
27    }
28 
29    else {
30        print("<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n");
31        print("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
32\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
33\n");
34        print("<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\" xml:lang=\"ja\">\n");
35        print("<head>\n");
36        print("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\" />");
37    }
38    print("</head>");
39    print("<body>");
40    print("<p>Sample Text</p>");
41    print("</body>");
42    print("</html>");
43 
44?>

携帯サイトのコーディングにおいて、DOCTYPE宣言とCSSの扱いはPC用サイトのコーディング手法と大きく異なる点の一つです。これらの差異を把握し、携帯サイトのコーディングに挑戦してみてください。