携帯対応HTML/XHTMLタグ構造モジュール
html
(X)HTML文書のルート
2009/11/23
[iモード対応HTML Ver1.0] [iモード対応XHTML Ver1.0]
［au XHTML］
[SoftBank HTML] [SoftBank XHTML]
html要素は、(X)HTML文書のルートを表すブロック要素です。
XHTML文書でも<html>となります。
html要素内には、head要素とbody要素が1回ずつ出現する必要があります。
サンプル
▼HTML<html> <head> ・・・ </head> <body> ・・・ </body> </html>▼XHTML（auの場合）※キャリアに応じてDOCTYPE宣言が異なります。
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> <html> <head> ・・・ </head> <body> ・・・ </body> </html>
head
ページのヘッダ情報
2009/11/23
[iモード対応HTML Ver1.0] [iモード対応XHTML Ver1.0]
［au XHTML］
[SoftBank HTML] [SoftBank XHTML]
head要素は、ページのタイトル、メタ情報、関連文書など、文書に関する情報を表すブロック要素です。 head要素内には、ページのタイトル（title要素）が1回出現する必要があります。 それ以外は必要に応じて、メタ情報（meta要素）、関連文書（link要素）などを指定します。
注意事項
- SoftBank
-
- head要素は省略可。
- head要素内にscript/style/link/object要素記述不可。
- head要素内にbase要素を記述する場合は、title/meta要素より先に記述する。
- head要素内に指定可能なmeta要素はContentTypeヘッダフィールドのみ。それ以外のmeta要素は指定不可。
サンプル
▼HTML<head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS"> <title>ｻｲﾄ名</title> <meta name="description" content="ｻｲﾄﾉ説明文"> <meta name="keywords" content="ｷｰﾜｰﾄﾞ,ｷｰﾜｰﾄﾞ,..."> </head>▼XHTML
<head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /> <title>ｻｲﾄ名</title> <meta name="description" content="ｻｲﾄﾉ説明文" /> <meta name="keywords" content="ｷｰﾜｰﾄﾞ,ｷｰﾜｰﾄﾞ,..." /> </head>
title
ページのタイトル
2009/11/23
[iモード対応HTML Ver1.0] [iモード対応XHTML Ver1.0]
［au XHTML］
[SoftBank HTML] [SoftBank XHTML]
title要素は、ページのタイトルを表すブロック要素で、head要素内に記述します。
base要素を指定している場合は、base要素より後に記述します。 title要素は、ページに1回だけ出現する必要があります。 title要素に指定したタイトルは、携帯端末でマイリンク、お気に入り登録した時にリンクを識別するタイトルとして用いられます。
記述方法
ページタイトルの付け方
title要素に指定した文字列は、ブラウザのタイトルバーに表示されます。 全ページのタイトルをサイト名だけにするのではなく、「ページタイトル | サイト名」のように、ページの内容を明確に表すタイトルを指定するようにしましょう。
また「サイト名｜カテゴリ名｜ページタイトル」とするよりは、 「ページタイトル｜カテゴリ｜サイト名」にする方がよいといえます。
というのも、検索から訪れるユーザーは、欲しい情報をキーワードで検索し、求めている情報のキーワードが含まれるタイトルをクリックするからです。
検索結果に表示されるページタイトルは先頭から50文字程度で、それ以降は「...」で省略されるので、 サイト名だけだっだり、コンテンツの内容がわかるタイトルでないと何のページだか分からず、検索結果に引っ掛かってもクリックして訪問してくれる可能性は低くなります。
タイトルバーの文字化け対策
タイトルバーの文字化け対策として、ページの文字コードを定義するmeta要素より後にtitl要素を記述しましょう。
<head> <title>サービス | 株式会社hoge</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>サービス | 株式会社hoge</title>
body
ページの本文
2009/11/23
[iモード対応HTML Ver1.0] [iモード対応XHTML Ver1.0]
［au XHTML］
[SoftBank HTML] [SoftBank XHTML]
body要素は、ページの本文を表すブロック要素です。
XHTML要素ではbody要素内に直接文字列を記述できないため、p要素あるいはdiv要素内にテキストを記述します。
<body> ﾃｷｽﾄ </body>
<body> <p>ﾃｷｽﾄ</p> </body>
属性
docomo
| 属性 | iモード対応 HTMLバージョン | iモード対応 XHTMLバージョン | 説明 |
|---|---|---|---|
| bgcolor="%Color" | 2.0 | - | ページの背景色を指定。デフォルトは白。 ※カラー対応機種のみ。 |
| text="%Color" | 2.0 | - | ページの文字色を指定。デフォルトは黒。 ※カラー対応機種のみ。 |
| link="%Color" | 4.0 | - | リンク色を指定。デフォルトは青。 ※カラー対応機種のみ。 |
| alink="%Color" | 4.0 | - | マウスオーバー時のリンク色を指定。 ※カラー対応機種のみ。 |
| vlink="%Color" | 4.0 | - | 訪問済みリンク色を指定。デフォルトは紫。 ※カラー対応機種のみ。 |
| background="%URI" | 6.0 | - | ページの背景画像のURLを指定。背景画像はリピート表示されます。 |
| style="background-color:%Color" | - | 1.0 | ページの背景色を指定。 |
| style="background-image:url('%URI)" | - | 2.0 | ページの背景画像のURLを指定。背景画像はリピート表示されます。 |
| style="color:%Color" | - | 2.0 | ページの文字色を指定。 |
iモード対応XHTMLの場合、各種リンク色の指定はCSSで指定します。 i-CSS（iモード対応XHTML用CSS）は、インラインのみ対応していますが、リンクの疑似クラス（a:link、a:focus、a:visited）のみhead要素でスタイルを定義できるようになっています。
<style type="text/css">
<![CDATA[
a:link { color:blue; }
a:focus { color:red; }
a:visited { color:purple; }
]]>
▼XHTML（docomoの場合）
・・・
<html>
<head>
<style type="text/css">
<![CDATA[
a:link { color:#ffcccc; }
a:focus { color:#ff6600; }
a:visited { color:purple; }
]]>
</style>
</head>
<body style="background-color:#ff6699; color:#ffffff;">
・・・
</body>
</html>
au
| 属性 | XHTML | 説明 |
|---|---|---|
| WAP2.0 | ||
| bgcolor="%Color" | ○ | ページの背景色を指定。デフォルトは白。 |
| text="%Color" | ○ | ページの文字色を指定。デフォルトは黒。 |
| link="%Color" | ○ | リンク色を指定。デフォルトは青。 |
| alink="%Color" | ○ | マウスオーバー時のリンク色を指定。 |
| vlink="%Color" | ○ | 訪問済みリンク色を指定。デフォルトは紫。 |
| background="%URI" | ○ | ページの背景画像のURLを指定。背景画像はリピート表示されます。 |
| style="background-color:%Color" | ○ | ページの背景色を指定。 |
| style="background-image:url('%URI)" | ○ | ページの背景画像のURLを指定。背景画像はリピート表示されます。 |
| style="color:%Color" | ○ | ページの文字色を指定。 |
SoftBank
| 属性 | HTML | XHTML | 説明 | |||
|---|---|---|---|---|---|---|
| SoftBank HTML C2型 |
SoftBank HTML C3型 |
SoftBank HTML P型 |
SoftBank HTML 3GC型 |
SoftBank XHTML 3GC型 |
||
| background="%URI" | × | × | △*1 | △ | ○ | ページの背景画像のURLを指定。背景画像はリピート表示されます。 |
| bgcolor="%Color" | ○ | ○ | ○ | △ | △ | ページの背景色を指定。デフォルトは「white」。 ※カラー対応機種のみ。 |
| text="%Color" | ○ | ○ | ○ | △ | △ | ページの文字色を指定。デフォルトは「black」。 ※カラー対応機種のみ。 |
| link="%Color" | ○ | ○ | ○ | △ | △ | リンク色を指定。デフォルトは「blue」。 ※カラー対応機種のみ。 |
| vlink="%Color" | × | × | △*1 | △ | △ | 訪問済みリンク色を指定。デフォルトは「purple」。 ※カラー対応機種のみ。 |
| style="background-color:%Color" | × | × | × | × | ○ | ページの背景色を指定。 |
| style="background-image:url('%URI)" | × | × | × | × | ○ | ページの背景画像のURLを指定。背景画像はリピート表示されます。 |
| style="color:%Color" | × | × | × | × | ○ | ページの文字色を指定。 |
*1：P4(2)型端末のみ
注意事項
- SoftBank
-
- [HTML] body要素内にscript/ins/del要素記述不可（未定義のため）。
- [HTML] 一部の機種でvlink/background属性解釈不可。
サンプル
ページのスタイルを指定
<body bgcolor="#ff6699" text="#ffffff" link="#ffcccc" alink="#ff6600" vlink="purple">■XHTML
<body style="background-color:#ff6699; color:#ffffff;" link="#ffcccc" alink="#ff6600" vlink="purple"> ・・・ </body>
背景画像の指定
<body background="bg.gif"> <p>背景画像を指定してみました。</p> </body>■XHTML
<body style="background-image:url('bg.gif')">
<p>背景画像を指定してみました。</p>
</body>