Top > WAP2.0 > EZweb用XHTMLテンプレート

WAP2.0

EZweb用XHTMLテンプレート

EZweb向けのコンテンツ開発で使用する基本的構造のXHTML文書です。とりあえずは、これらをテンプレートとして保存し、各種コンテンツをプラスしていくと良いと思います。

  1. 基本テンプレート
    1. 文法通りの基本テンプレート文書
    2. 省略可能なものを削った基本テンプレート文書
    3. これでもOKの基本テンプレート文書
  2. 要素と属性による各種スタイル指定
    1. 色の指定
    2. テキストスタイルの指定
    3. リストマークの指定
    4. 位置指定
    5. <br />と<hr />
    6. 画像周囲の間隔指定
  3. 入力フォームテンプレート
    1. シンプル入力フォーム
    2. アンケート式入力フォーム
  4. リストテンプレート
    1. 番号付きリスト
    2. スタイルシートによるリストマークの指定
  5. テーブルテンプレート

1.基本テンプレート

1-1.文法通りの基本テンプレート文書

記述することが推奨されているものをきちんと入れたものです。
DOCTYPE宣言については、

<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

でも構いません。DOCTYPE宣言について、詳しくは、「DOCTYPE宣言」をご覧下さい。

<?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" />
  <title>文書のタイトル</title>
  <!--以下の"max-age=0"の数値は、適宜変更する-->
  <meta http-equiv="cache-control" content="max-age=0" />
  <!--その他の各種メタ情報・スタイルシート指定等を記述-->
 </head>
 <body>
  表示される文書の「内容」を記述
 </body>
</html>

1-2.省略可能なものを削った基本テンプレート文書

上記テンプレートから、EZwebにおいて省略可能なものを削った文書です。
あった方がよいと思う要素については、省略可能でも記述してあります。

<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=Shift_JIS" />
  <title>文書のタイトル</title>
  <!--以下の"max-age=0"の数値は、適宜変更する-->
  <meta http-equiv="cache-control" content="max-age=0" />
  <!--その他の各種メタ情報・スタイルシート指定等を記述-->
 </head>
 <body>
  表示される文書の「内容」を記述
 </body>
</html>

1-3.これでもOKの基本テンプレート文書

もっと削って、必要最小限にとどめたもの。EZwebでは、今のところこれでも大丈夫。
(HTMLとどこが違うんだろう?という感じですね)
これでも、EZweb携帯電話に搭載されているブラウザは、XHTML文書として解析するようです。

<html>
 <head>
  <title>文書のタイトル</title>
 </head>
 <body>
  表示される文書の「内容」を記述
 </body>
</html>


2.要素と属性によるスタイル指定

XHTML Basicや、XHTML Mobile Profileの仕様では、スタイルシートの使用を推奨しており、スタイル関連の要素や属性は限られたものしかありませんが、EZwebでは、拡張要素や拡張属性により、かなり従来のHTMLに近いスタイル指定ができるようになっています。

2-1.色の指定

<body>要素内で、背景色や、リンク色、フォントの色等を指定できます。
また、<font>要素内のcolor属性により、その部分の文字の色を指定できます。
色の指定方法は、基本的に、'#RRGGBB'方式による16進数指定ですが、標準16色については色名による指定も可能です。標準16色名については「WAPのカラーパレット-標準16色」をご覧下さい。

<body>要素内で、文書
の背景色やテキスト色、
リンク色を指定できます。

文字への色指定もできま
す。

ページトップへ
  OK
<html>
 <head>
  <title>各種色指定</title>
 </head>
 <body bgcolor="yellow" text="black" link="green">
  <a id="top"></a>
  <p>&lt;body&gt;要素内で、文書の背景色やテキスト色、
   リンク色を指定できます。</p><br />
  <p>文字への<font color="red">色指定</font>もできます。</p>
  <br />
  <p><a href="#top">ページトップへ</a></p>
 </body>
</html>

2-2.テキストスタイルの指定

要素そのものがテキストへのスタイル指定をするものです。
ただし、要素として認識するものの、スタイルが変化しないものもあります。
C3003Pでは、<b>,<i>,<strong>は、変化しません。
スタイルシートを要素に適用させることで色等を変化させることは可能です。

<b> <big> <blink> <i> <marquee> <small> <strong> <u>

2-3.リストマークの指定

<ol>、<li>要素では、「A,B,C,D」、「a,b,c,d」を表示させることができます。
ただし、<li>要素の場合、指定したリスト項目のみへの適用となります。

<ol>要素のマーク指定
Aリスト項目1
Bリスト項目2
Cリスト項目3

<li>要素のマーク指定
aリスト項目1
リスト項目2
リスト項目3
  OK
<html>
 <head>
  <title>リストマーク</title>
 </head>
 <body>
  <p>&lt;ol&gt;要素のマーク指定</p>
  <ol type="A">
   <li>リスト項目1</li>
   <li>リスト項目2</li>
   <li>リスト項目3</li>
  </ol><br />
  <p>&lt;li&gt;要素のマーク指定</p>
  <ul>
   <li type="a">リスト項目1</li>
   <li>リスト項目2</li>
   <li>リスト項目3</li>
  </ul>
 </body>
</html>

2-4.位置指定

以下の要素で、align属性による位置指定が可能です。

<caption> <div> <h1>〜<h6> <hr> <img> <p>

以下の要素は、要素そのものが位置指定をするものです。
HDMLの<center>タグと違い、</center>で閉じるまで有効となります。

<center>

align属性
右寄せ
デフォルトは左寄せ

center要素
</center>で閉じるまで
中央揃えが有効となりま
す。
間に改行(<br />)が
入っても、中央揃えのま
まです。
  OK
<html>
 <head>
  <title>位置指定</title>
 </head>
 <body>
  <h2 align="center">align属性</h2>
  <p align="right">右寄せ</p>
  <p>デフォルトは左寄せ</p>
  <br />
  <center>
  <h2>center要素</h2>
  &lt;/center&gt;で閉じるまで中央揃えが有効となります。
  <br />
  間に改行(&lt;br /&gt;)が<br />入っても、中央揃えのままです。
  </center>
 </body>
</html>


<img>要素のalign属性は、他のテキスト関連要素のalign属性とはその働きが異なり、周囲のテキストとの位置関係を指定するものです。

<img>要素のalign属性は
周囲のテキストとの関係
を示します。

画像右寄せ、テキスト
は左側(align="right")
これはalign="top"

  OK
<html>
 <head>
  <title>画像の位置指定</title>
 </head>
 <body>
  <p>&lt;img&gt;要素のalign属性は
   周囲のテキストとの関係を示します。</p>
  <br />
  <p><img src="red.gif" align="right" width="10" height="40">
  画像右寄せ、テキストは左側(align="right")</p>
  <p><img src="red.gif" align="top" width="10" height="30">
  これはalign="top"</p>
  <br />
 </body>
</html>

2-5.<br />と<hr />

<br />では、clear="true"により、画像へのテキストの回り込みを解除することができます。
<hr />では、alignの他、size=により水平線の太さ(単位:px)を、width=により水平線の長さ(単位:px)を指定可能です。

<br />要素の
clear="true"

回り込み解除済み

↓普通の水平線

↓size="5"の水平線

↓width="50"の水平線


  OK
<html>
 <head>
  <title>改行と水平線</title>
 </head>
 <body>
  <p>&lt;br /&gt;要素の<br /></p>
  <p><img src="red.gif" width="10" height="40">
  <br clear="true" />回り込み解除済み</p>
  <br />
  <p>↓普通の水平線</p>
  <hr />
  <p>↓size="5"の水平線</p>
  <hr size="5" />
  <p>↓width="50"の水平線</p>
  <hr width="50" />
  <br />
 </body>
</html>

2-6.画像周囲の間隔指定

<img>要素において、vspace、hspaceを指定することができます。

画像の上下の間隔
上下に8(px)の間隔を空
けました。

画像の左右の間隔
左右の間隔
左右に10(px)の間隔を空
けました。
  OK
<html>
 <head>
  <title>画像の間隔</title>
 </head>
 <body>
  <p>画像の上下の間隔</p>
  <center>
  <img src="banner.gif" vspace="8" />
  </center>
  <p>上下に8(px)の間隔を空けました。</p>
  <br />
  <p>画像の左右の間隔</p>
  <p>左右の<img src="red.gif" align="bottom"
   hspace="10" width="10" height="40" />間隔</p>
  <p>左右に10(px)の間隔を空けました。</p>
 </body>
</html>


3.入力フォームテンプレート

XHTMLで作成した入力フォームを、HDML機と共用して使おうとすると、ゲートウェイ変換がうまくいかないことが多いようです。逆に、HDMLで記述した入力フォームは、WAP2.0対応機ではWMLに変換されますので、問題が起こることは少ないはずです。
ですから、入力フォームを、WAP2.0対応機とそれ以前の機種で共用にする場合は、HDMLで記述しておいた方が、今のところは無難のようです。
※以下のテンプレートの「some.cgi」は、架空のスクリプト名です。

3-1.シンプル入力フォーム

ユーザーに「お名前」「E-Mail」「URL」「メッセージ」を入力してもらう入力フォームです。
WAP2.0対応機のみで使用することを前提にしていますので、ゲートウェイ変換によりHDML機でも表示させるには、

ようにしなければなりません(他にも気をつける所があるかもしれません)。

メッセージ作成
[お名前]と[メッセージ]は
必須です
お名前(必須):

E-Mail(省略可):

URL(省略可):

メッセージ:


  OK
<html>
 <head>
  <meta http-equiv="content-type"
   content="text/html;charset=Shift_JIS" />
  <title>入力フォーム</title>
  <meta http-equiv="cache-control" content="max-age=0" />
 </head>
 <body>
   <p align="center"><b>メッセージ作成</b><br />
   [お名前]と[メッセージ]は必須です</p>
   <form action="some.cgi" method="post">
   <input type="hidden" name="タイトル" value="From EZ site" />
   <p>お名前(必須):
   <input type="text" name="お名前" format="MM*M" /></p>
   <p>E-Mail(省略可):
   <input type="text name="E-Mail" emptyok="true" />
   <p>URL(省略可):
   <input type="text" name="URL" value="http://" /></p>
   <p>メッセージ:<br />
   <textarea name="メッセージ" rows="3">
   </textarea>
   </p>
   <p><input type="submit" value=" 送信 " />
   <input type="reset" value="クリア" /></p>
   </form>
 </body>
</html>

3-2.アンケート式入力フォーム

ユーザーに、複数の選択肢の中から選んでもらう方式の入力フォームです。
WAP2.0対応機のみで使用することが前提です。

アンケート
すべて必須入力です
好きな季節は?:




好きな動物(複数選択可:


ライオン

トカゲ

  OK
<html>
 <head>
  <meta http-equiv="content-type"
   content="text/html;charset=Shift_JIS" />
  <title>アンケート</title>
  <meta http-equiv="cache-control" content="max-age=0" />
 </head>
 <body>
  <p align="center"><b>アンケート</b><br />
  すべて必須入力です</p>
  <form action="some.cgi" method="post">
   <input type="hidden" name="タイトル" value="From Enquete" />
   <p>好きな季節は?:
   <input type="radio" name="季節" value="" />春<br />
   <input type="radio" name="季節" value="" />夏<br />
   <input type="radio" name="季節" value="" />秋<br />
   <input type="radio" name="季節" value="" />冬
   </p>
   <p>好きな動物(複数選択可:
   <input type="checkbox" name="動物" value="" />犬<br />
   <input type="checkbox" name="動物" value=""
    checked="checked" />猫<br />
   <input type="checkbox" name="動物" value="ライオン" />ライオン<br />
   <input type="checkbox" name="動物" value="" />馬馬<br />
   <input type="checkbox" name="動物" value="トカゲ" /> トカゲ<br />
   </p>
   <input type="submit" value=" 送信 " />
   <input type="reset" value="クリア" />
   </p>
  </form>
 </body>
</html>


4.リストテンプレート

EZwebで使うことのできるリスト関連要素は、<ol><ul><dir><dd><dt><dl><menu><li>です。
この内、主に使用するのは、多分<ol><ul><li>ではないかと思います。

4-1.番号付きリスト

HDMLのCHOICEカードのように、番号選択で該当ページにリンクを可能にします。

目 次
1
01.htmlへ
2
02.htmlへ
3
03.htmlへ
4
04.htmlへ
5
05.htmlへ
  OK
<html>
 <head>
  <meta http-equiv="content-type"
   content="text/html;charset=Shift_JIS" />
  <title>目次</title>
  <meta http-equiv="cache-control" content="max-age=0" />
 </head>
 <body>
  <p align="center"><b>目 次</b></p>
  <ol>
   <li><a href="01.html" accesskey="1">01.htmlへ</a></li>
   <li><a href="02.html" accesskey="2">02.htmlへ</a></li>
   <li><a href="03.html" accesskey="3">03.htmlへ</a></li>
   <li><a href="04.html" accesskey="4">04.htmlへ</a></li>
   <li><a href="05.html" accesskey="5">05.htmlへ</a></li>
  </ol>
 </body>
</html>

4-2.スタイルシートによるリストマークの指定

スタイルシートを使用することで、<ul><menu><dir><li>要素のリスト項目の先頭につく画像(ビルトイン・アイコン)を指定することができます。

好きなモノ
ケーキ
コーヒー
映画
反町隆史
釣り
  OK
<html>
 <head>
  <meta http-equiv="content-type"
   content="text/html;charset=Shift_JIS" />
  <title>目次</title>
  <meta http-equiv="cache-control" content="max-age=0" />
 </head>
 <body>
  <p align="center"><b>好きなモノ</b></p>
  <ul style="list-style-image:localsrc(heart)">
   <li>ケーキ</li>
   <li>コーヒー</li>
   <li>映画</li>
   <li>反町隆史</li>
   <li>釣り</li>
  </ul>
 </body>
</html>


5.テーブルテンプレート

デフォルトではテーブル枠は表示されません。
Openwave SDKではborder属性を指定すると枠が表示されますが、実機ではどうなのでしょうか。
また、携帯電話の幅以上のテーブルを作成することはできません。携帯電話は、横スクロールができませんので、当然と言えば当然ですが。

テーブル
デフォルトでは枠は表示
されない
枠無しテーブル
1   2   3   4  

border指定により枠を表
示する
枠有りテーブル
1   2   3   4  

画面の幅より広いと折り
畳まれる
長いテ
キスト
5678 9   0  
  OK
<html>
 <head>
  <meta http-equiv="content-type"
   content="text/html;charset=Shift_JIS" />
  <title>テーブル</title>
  <meta http-equiv="cache-control" content="max-age=0" />
 </head>
 <body>
  <p align="center"><b>テーブル</b></p>
  <p>デフォルトでは枠は表示されない</p>
  <table>
   <caption>枠無しテーブル</caption>
   <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  </table><br />
  <p>border指定により枠を表示する</p>
  <table border="1">
   <caption>枠有りテーブル</caption>
   <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  </table><br />
  <p>画面の幅より広いと折り畳まれる</p>
  <table border="1">
   <tr><td>長いテキスト</td>
   <td>5678</td><td>9</td><td>0</td></tr>
  </table>
 </body>
</html>

Go to Top

最終更新日:2006年01月08日
© Kimura