EZweb向けのコンテンツ開発で使用する基本的構造のXHTML文書です。とりあえずは、これらをテンプレートとして保存し、各種コンテンツをプラスしていくと良いと思います。
記述することが推奨されているものをきちんと入れたものです。
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>
上記テンプレートから、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>
もっと削って、必要最小限にとどめたもの。EZwebでは、今のところこれでも大丈夫。
(HTMLとどこが違うんだろう?という感じですね)
これでも、EZweb携帯電話に搭載されているブラウザは、XHTML文書として解析するようです。
<html> <head> <title>文書のタイトル</title> </head> <body> 表示される文書の「内容」を記述 </body> </html>
XHTML Basicや、XHTML Mobile Profileの仕様では、スタイルシートの使用を推奨しており、スタイル関連の要素や属性は限られたものしかありませんが、EZwebでは、拡張要素や拡張属性により、かなり従来のHTMLに近いスタイル指定ができるようになっています。
<body>要素内で、背景色や、リンク色、フォントの色等を指定できます。
また、<font>要素内のcolor属性により、その部分の文字の色を指定できます。
色の指定方法は、基本的に、'#RRGGBB'方式による16進数指定ですが、標準16色については色名による指定も可能です。標準16色名については「WAPのカラーパレット-標準16色」をご覧下さい。
|
<html> <head> <title>各種色指定</title> </head> <body bgcolor="yellow" text="black" link="green"> <a id="top"></a> <p><body>要素内で、文書の背景色やテキスト色、 リンク色を指定できます。</p><br /> <p>文字への<font color="red">色指定</font>もできます。</p> <br /> <p><a href="#top">ページトップへ</a></p> </body> </html> |
要素そのものがテキストへのスタイル指定をするものです。
ただし、要素として認識するものの、スタイルが変化しないものもあります。
C3003Pでは、<b>,<i>,<strong>は、変化しません。
スタイルシートを要素に適用させることで色等を変化させることは可能です。
<b> <big> <blink> <i> <marquee> <small> <strong> <u>
<ol>、<li>要素では、「A,B,C,D」、「a,b,c,d」を表示させることができます。
ただし、<li>要素の場合、指定したリスト項目のみへの適用となります。
|
<html> <head> <title>リストマーク</title> </head> <body> <p><ol>要素のマーク指定</p> <ol type="A"> <li>リスト項目1</li> <li>リスト項目2</li> <li>リスト項目3</li> </ol><br /> <p><li>要素のマーク指定</p> <ul> <li type="a">リスト項目1</li> <li>リスト項目2</li> <li>リスト項目3</li> </ul> </body> </html> |
以下の要素で、align属性による位置指定が可能です。
<caption> <div> <h1>〜<h6> <hr> <img> <p>
以下の要素は、要素そのものが位置指定をするものです。
HDMLの<center>タグと違い、</center>で閉じるまで有効となります。
<center>
|
<html> <head> <title>位置指定</title> </head> <body> <h2 align="center">align属性</h2> <p align="right">右寄せ</p> <p>デフォルトは左寄せ</p> <br /> <center> <h2>center要素</h2> </center>で閉じるまで中央揃えが有効となります。 <br /> 間に改行(<br />)が<br />入っても、中央揃えのままです。 </center> </body> </html> |
<img>要素のalign属性は、他のテキスト関連要素のalign属性とはその働きが異なり、周囲のテキストとの位置関係を指定するものです。
|
<html> <head> <title>画像の位置指定</title> </head> <body> <p><img>要素の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> |
<br />では、clear="true"により、画像へのテキストの回り込みを解除することができます。
<hr />では、alignの他、size=により水平線の太さ(単位:px)を、width=により水平線の長さ(単位:px)を指定可能です。
|
<html> <head> <title>改行と水平線</title> </head> <body> <p><br />要素の<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> |
<img>要素において、vspace、hspaceを指定することができます。
|
<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> |
XHTMLで作成した入力フォームを、HDML機と共用して使おうとすると、ゲートウェイ変換がうまくいかないことが多いようです。逆に、HDMLで記述した入力フォームは、WAP2.0対応機ではWMLに変換されますので、問題が起こることは少ないはずです。
ですから、入力フォームを、WAP2.0対応機とそれ以前の機種で共用にする場合は、HDMLで記述しておいた方が、今のところは無難のようです。
※以下のテンプレートの「some.cgi」は、架空のスクリプト名です。
ユーザーに「お名前」「E-Mail」「URL」「メッセージ」を入力してもらう入力フォームです。
WAP2.0対応機のみで使用することを前提にしていますので、ゲートウェイ変換によりHDML機でも表示させるには、
ようにしなければなりません(他にも気をつける所があるかもしれません)。
|
<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> |
ユーザーに、複数の選択肢の中から選んでもらう方式の入力フォームです。
WAP2.0対応機のみで使用することが前提です。
|
<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> |
EZwebで使うことのできるリスト関連要素は、<ol><ul><dir><dd><dt><dl><menu><li>です。
この内、主に使用するのは、多分<ol><ul><li>ではないかと思います。
HDMLのCHOICEカードのように、番号選択で該当ページにリンクを可能にします。
|
<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> |
スタイルシートを使用することで、<ul><menu><dir><li>要素のリスト項目の先頭につく画像(ビルトイン・アイコン)を指定することができます。
|
<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> |
デフォルトではテーブル枠は表示されません。
Openwave SDKではborder属性を指定すると枠が表示されますが、実機ではどうなのでしょうか。
また、携帯電話の幅以上のテーブルを作成することはできません。携帯電話は、横スクロールができませんので、当然と言えば当然ですが。
|
<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> |