最近発売されているドコモの機種（FOMA）のブラウザにはたいてい
iモードHTMLとiモードXHTMLの両方に対応したモードが搭載されています。
例えば、最新のハイエンド機種FOMA 904iでは、ドコモの技術情報の端末スペック表を見ると、
iモードHTMLはバージョン7.0、iモードXHTMLは2.1に対応していることが分かります。
これは、携帯電話が機能向上するのと並行して、
携帯に対応したHTMLもバージョンアップを繰り返すためです。
このi-HTMLとi-XHTMLの違いは、多くはHTMLタグで指定できる属性やCSSの対応状況になりますが、簡単に言ってしまえば、i-XHTMLのほうがより豊かな表現が可能になっていると解釈しても間違いではないでしょう。
さて、携帯サイトを作成する際のポイントについてふれますが、
多くの方が勘違いされているのは、
ドコモの機種が割と新しい機種、つまりXHTMLに対応した機種であれば、
HTMLは自動的にXHTMLモードになるということ。
言い換えると、
i-XHTMLでしか対応していないCSSや書き方でも、
普通にHTML内に書けばそれに対応している機種なら表示できるということ。
結論から言ってしまえば、これはどちらも間違いです。
ドコモ携帯のブラウザをi-XHTMLモードで表示させるためには、
以下のような点に注意しなければなりません。
かつサーバー側においても正しいHTTPヘッダが出力されている必要があります。
設定されていない場合は、.htaccessで
「AddType application/xhtml+xml .html」
のいう一文を追加します。
このような条件がそろって初めて、ドコモの機種はi-XHTMLモードでの表示が可能になります。
よりstrictな設定が必要だということですね。
これに関連して、よく質問される内容として、
ドコモ機種では文字の後ろに背景色をつけたような表示をさせるには、
以下の2種類の方法があります。
DIVタグのstyle指定ならi-XHTML1.0以上という条件ですから、
DIVタグで指定する方法のほうが、より多くの端末を内包することになります。
従って、上記のようなケースではDIVタグを用いるほうが正解ですが、これも先ほど説明したようにブラウザがi-XHTMLモードになるようにHTML側で正しく設定していた場合の話です。
以下のサンプルを参考によく理解しておきましょう。
■DIVタグのSTYLE属性で背景を指定する例
iモードHTMLとiモードXHTMLの両方に対応したモードが搭載されています。
例えば、最新のハイエンド機種FOMA 904iでは、ドコモの技術情報の端末スペック表を見ると、
iモードHTMLはバージョン7.0、iモードXHTMLは2.1に対応していることが分かります。
これは、携帯電話が機能向上するのと並行して、
携帯に対応したHTMLもバージョンアップを繰り返すためです。
このi-HTMLとi-XHTMLの違いは、多くはHTMLタグで指定できる属性やCSSの対応状況になりますが、簡単に言ってしまえば、i-XHTMLのほうがより豊かな表現が可能になっていると解釈しても間違いではないでしょう。
さて、携帯サイトを作成する際のポイントについてふれますが、
多くの方が勘違いされているのは、
ドコモの機種が割と新しい機種、つまりXHTMLに対応した機種であれば、
HTMLは自動的にXHTMLモードになるということ。
言い換えると、
i-XHTMLでしか対応していないCSSや書き方でも、
普通にHTML内に書けばそれに対応している機種なら表示できるということ。
結論から言ってしまえば、これはどちらも間違いです。
ドコモ携帯のブラウザをi-XHTMLモードで表示させるためには、
以下のような点に注意しなければなりません。
2点目のMIMEタイプはHTMLのヘッダーで・DOCTYPE宣言が正しく行われていること。
・コンテンツのMIMEタイプが「application/xhtml+xml」であること。
が指定されていて、<meta http-equiv="ContentType" Content="application/xhtml+xml">
かつサーバー側においても正しいHTTPヘッダが出力されている必要があります。
設定されていない場合は、.htaccessで
「AddType application/xhtml+xml .html」
のいう一文を追加します。
このような条件がそろって初めて、ドコモの機種はi-XHTMLモードでの表示が可能になります。
よりstrictな設定が必要だということですね。
これに関連して、よく質問される内容として、
というケース。DIVタグでbackgroundプロパティを指定したい
ドコモ機種では文字の後ろに背景色をつけたような表示をさせるには、
以下の2種類の方法があります。
ただ、tdタグでの背景色指定はi-HTMLバージョンが6.0以上、i-XHTMLで2.0以上という条件に対し、・tableタグを用いる。（正確にはtdタグのbgcolor要素を使用する）
・DIVタグを用いる。（正確にはstyleでインライン指定する。）
DIVタグのstyle指定ならi-XHTML1.0以上という条件ですから、
DIVタグで指定する方法のほうが、より多くの端末を内包することになります。
従って、上記のようなケースではDIVタグを用いるほうが正解ですが、これも先ほど説明したようにブラウザがi-XHTMLモードになるようにHTML側で正しく設定していた場合の話です。
以下のサンプルを参考によく理解しておきましょう。
■DIVタグのSTYLE属性で背景を指定する例
<?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">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>テスト</title>
</head>
<body>
<div style="background-color:#808080;">aaa</div>
</body>
</html>
3
 |
|
 教えて下さい。 今現在i-mode対応HPを作成しているのですが、どうしても文字の背景の色を(下記)変更したいのですが、上手く行きません。
下記に掲載してあるソースをコピペしてサーバーへUPし、ドコモの携帯(N701i)にて確認すると文字の背景色が表示されません。PCで見ると変更されているのですが、何が原因か分かりません。 おわかりでしたら、教えて下さい。 又、必要な情報がありましたらお知らせ致します。 追加 色々試して見た所、「***.html」のファイルだと変更されるのですが、 CGIにて出力「***.cgi」の場合だと変更されません。 何か良い方法を教えて下さい。 ManTan | URL | 2008/05/12/Mon 10:05 [EDIT]
修正させてもらいます。 >>管理人さんの書かれているもの
<?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"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> <title>テスト</title> </head> <body> <div style="background-color:#808080;">aaa</div> </body> </html> これだとモバイルサイトとして検索エンジンに登録するのには、どうしたらいいの？？と、後々苦労されるでしょう…。（特にモバイルサイトとして検索エンジンインデックスされているサイトがまだまったくないかた。） ですので赤文字部分修正され以下のようになります↓ <!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> <title>テスト</title> </head> <body> <div style="background-color:#808080;">aaa</div> </body> </html> なぜ赤文字部分の修正が必要なのか？ �仝気�DOCTYPE宣言、DTD XHTML 1.0 Transitionalだとファイルサイズがよほど小さくないかぎり、大手検索エンジンにＰＣサイトとして扱われます。 また、元のDOCTYPE宣言、DTD XHTML 1.0 Transitionalはモバイルプロファイルではありません。（修正には例でopenwaveを記述しました。） ��lang="ja"は現在XHTMLのルート、HTMLの要素に書く必要はありません。 ��もっとも重要な部分です↓ <?xml version="1.0" encoding="Shift_JIS"?> いわゆるXML宣言ですが、省略可能なうちは省略しておくべきです。 これを書いていることによって、携帯からyahooモバイルで採用されているＰＣ→携帯変換ブラウザによって表示することができなくなります。 携帯からＰＣサイトを検索しようとする人は結構います。 解決法がわからず、携帯サイトがＰＣサイトとしてインデックスされている場合にも重要です。 <?xml version="1.0" encoding="Shift_JIS"?>を記述しなくても閲覧できます。 省略不可の時が来れば記述するようにすればよいでしょう。 通行人 | URL | 2008/02/23/Sat 21:06 [EDIT]
i-mode HTML Simulator IIでは以下でも背景が付きますが
これはSimulatorの間違いなのでしょうか？ <?xml version="1.0" encoding="Shift_JIS"?> <html> <head> </head> <body> <div style="background-color:#808080;">aaa</div> </body> </html> | URL | 2007/10/26/Fri 03:57 [EDIT]
|
| ホーム |
