XHTML Mobile Profileリファレンスバージョン 1.0

オープンウェーブシステムズ株式会社
東京都新宿区西新宿6-22-1
新宿スクエアタワー17F
http://www.openwave.com

本書について

本書は、Extensible Hypertext Markup Language Mobile Profile (XHTML-MP) 1.0 および Cascading Style Sheets (CSS) を使って Openwave モバイルブラウザ向けのワイヤレスサービス／アプリケーションを作成する開発者を対象に作成されています。一般的な XHTML-MP のプログラミング情報、XHTML-MP の要素と属性、CSS のプロパティとセレクタなどに関する説明があります。

Openwave SDK

Openwave ソフトウェア開発キット (SDK) は、XHTML-MP プログラムの開発、デバッグ、メンテナンスに便利なツールです。 SDK を用いれば、自分のローカルディスクやサーバーから、作成したコードをテストできます。 SDK 統合開発環境 (IDE) に統合されたツールとしては、エディタ、トランザクション情報の一覧を表示する出力ウィンドウ、ソースコードを表示する HTTP ウィンドウ、ヒストリやクッキーの表示機能などがあります。

対象読者

本書は、Openwave モバイルブラウザ向けに XHTML-MP と CSS を用いてワイヤレスサービスを作成する開発者を対象に書かれています。

本書を効果的に利用するには、以下の条件が満たされている必要があります。

ワイヤレス XHTML-MP ドキュメントを動的に作成するには、C++ や Perl などのプログラミング言語に習熟している必要があります。

表記規則

モバイルブラウザデバイス という用語は、ワイヤレス電話、PDA (パーソナルデジタルアシスタント)、双方向ポケットベルなど、Openwave Mobile Browser を搭載したすべての機器を指しています。この用語は、ハードウェアと、それにインストールされているブラウザソフトウェアの両方を指します。

本書で示す図や例はすべて、汎用的なモバイルブラウザデバイスです。

実際のモバイルブラウザデバイスの表示エリアとキー配列は大きく異なる点に留意してください。一部のモバイルブラウザデバイスは、本書の説明とはソフトキーの配置が異なります。また、ファンクションキーがほとんどあるいはまったくなく、accept、prev、options などのアクションを実装するために別の方法 (ジョグシャトルやその他ユーザーインタフェース手段など) を使用しているものもあります。

本書では、ユーザーが入力しなければならない情報は以下のように別のフォントを使って表記しています。

Test that appears like this と同じフォントで書かれている部分は、コマンド名、パス名、URL、その他ユーザーが入力しなければならない特定のテキストを表します。

Text that appears like this と同じフォントで書かれている部分は、ご使用の環境に合わせて適切な値と置き換える必要があるプレースホルダや変数を表します。

Text that appears like this と同じフォントで書かれている部分は、デフォルトの属性値を示します。

コード例

コードを示すときに、不要な部分は省略記号 (...) に置き換えてあります。たとえば、以下の例の省略記号は、このドキュメントのコードがこれだけではないことを意味しています。

コード例には行番号がついている場合がありますが、それらは参考のためあり、実際のコードの一部ではありません。

モジュール	説明	要素
構造	XHTML-MP ドキュメント用の主な構造要素。	以下を参照： <body> <head> <html> <title>
テキスト	基本的なテキストコンテナ要素と属性のすべて。	以下を参照： <abbr> <acronym> <address> <blockquote> <br> <cite> <code> <dfn> <div> <em> <h1> から <h6> <kbd> <p> <pre> <q> <samp> <span> <strong> <var>
ハイパーテキスト	他のリソースへのハイパーリンクを定義するために使用される要素。	以下を参照： <a>
リスト	リスト指向の要素。	以下を参照： <dl> <dt> <dd> <ol> <ul> <li>
基本フォーム	基本フォームに関連する要素。	以下を参照： <form> <input> <label> <select> <option> <textarea>
基本テーブル	基本テーブルに関連する要素。	以下を参照： <caption> <table> <td> <th> <tr>
イメージ	基本イメージの埋め込み。	以下を参照： <img>
オブジェクト	汎用的なオブジェクト組み込み用の要素。	以下を参照： <object> <param>
メタ情報	情報をドキュメントの宣言部に挿入する要素。	以下を参照： <meta>
リンク	外部リソースへのリンクの定義に使用できる要素。	以下を参照： <link>
ベース	ドキュメント内の相対 URI を解決するときに使用されるベース URI の定義に使用できる要素。	以下を参照： 15 ページの "<base>"
フォーム	拡張フォームの機能 (部分的な実装)。	以下を参照： <fieldset> <optgroup>
プレゼンテーション	追加のテキスト定義要素。	以下を参照： <b> <big> <hr> <i> <small>
スタイルシート	内部スタイルシートの宣言に使用する要素。	以下を参照： <style >

カラー名	RGB 値	カラー名	RGB 値
black	#0000	green	#008000
silver	#C0C0C0	lime	#00FF00
gray	#808080	olive	#808000
white	#FFFFFF	yellow	#FFFF00
maroon	#800000	navy	#000080
red	#FF0000	blue	#0000FF
purple	#800080	teal	#008080
fuchsia	#FF00FF	aqua	#00FFFF

<address> 要素

<b>

<b> 要素は、強調された太字スタイルで表示されるコンテンツを定義します。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<b> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<b>content</b>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<b> 要素に示すように表示されます。 <?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Bold Element</title>

</head>

<body>

<p style="text-align: center">normal text<br/>

<b><b> element</b>

</p>

</body>

</html>

<b> 要素

<base>

<base> 要素は、外部リソースへのデフォルトの参照を定義します。 <base> 要素は、<head> 要素に含まれます。

構文

属性

href	ドキュメントに含まれる外部参照を解決するためのベース URL。

例

次の XHTML-MP ドキュメント (被参照イメージファイルと同じ場所にはなりません) は、<base> 要素に示すように表示されます。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Base Element</title>

<base href="http://www.mysystem.com/images/"/>

</head>

<body>

<img src="logo.gif" alt="Logo"/><br/>

</body>

</html>

<base> 要素

<big>

<big> 要素は、より大きなフォントで表示されるコンテンツを定義します。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<big> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<big>content</big>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<big> 要素に示すように表示されます。 <?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Big Element</title>

</head>

<body>

<p style="text-align: center">normal text<br/>

<big><big> element</big>

</p>

</body>

</html>

<big> 要素

<blockquote>

<blockquote> 要素は、長い引用を定義します。 <blockquote> 要素のコンテンツは、行がインデントされて表示されます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<blockquote> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<blockquote>

content

</blockquote>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
cite	Web からとられたものならば、引用の URL。

例

以下の XHTML-MP ドキュメントは、<blockquote> 要素の表示に示すように表示されます。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Blockquote Element</title>

</head>

<body>

<p>This is a normal paragraph.</p>

<blockquote>

This is a <blockquote> element

displayed on multiple lines.

</blockquote>

</body>

</html>

<blockquote> 要素の表示

<body>

<body> 要素は、ドキュメントの本体を定義します。この要素に含まれる要素とコンテンツは、表示されるページを作成するために使用されます。

構文

<body>

document elements and content

</body>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

<body> 要素は、本書のすべての例に使用されています。

<br>

<br> 要素は、改行を作成します。タグは、例に示すように簡略表現が使えます。
style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<br> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<tag>

content

<br/>

more content

</tag>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

<address> の例を参照してください。

<caption>

<caption> 要素は、テーブルのキャプションを定義します。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<caption> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<caption>

content </caption>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

<table> の例を参照してください。

<cite>

<cite> 要素は、参考文献の引用を定義します。 <cite> 要素に含まれるコンテンツは、イタリック体で表示されます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<cite> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<cite>

a citation

</cite>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<cite> 要素に示すように表示されます。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Citation Element</title>

</head>

<body>

<p>

It was <cite>Teddy Roosevelt</cite> who said that

intelligence without moral responsibility is dangerous.

</p>

</body>

</html>

<cite> 要素

<code>

<code> 要素は、コンピュータのコードテキストを定義します。 <code> 要素に含まれるコンテンツは、通常よりも小さなフォントで表示されます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<code> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<code>

content

</code>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<code> 要素に示すように表示されます。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Code Element</title>

</head>

<body>

<p>This is a normal paragraph and with the

<code><code> element</code> tucked

in the middle.

</p>

</body>

</html>

<code> 要素

<dd>

<dd> 要素は、定義記述を定義します。この要素と <dt> 要素は、<dl> 要素の中に含まれ、定義リストを作成します。 <dt> および <dl> を参照してください。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<dd> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<dl>

<dt>

term...

</dt>

<dd>

definition ...

</dd>

</dl>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、定義リスト要素に示すように表示されます。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Definition List Example</title>

</head>

<body>

<dl>

<dt>DES</dt>

<dd>data encryption standard</dd>

<dt>DHCP</dt>

<dd>dynamic host configuration protocol</dd>

<dt>DNIS</dt>

<dd>dialed number identification service</dd>

<dt>DNS</dt>

<dd>domain name system</dd>

</dl>

</body>

</html>

定義リスト要素

<dfn>

<dfn> 要素は、定義を定義します。 <dfn> 要素に含まれるコンテンツは、イタリック体で表示されます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<dfn> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<dfn>

content

</dfn>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<dfn> 要素に示すように表示されます。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Definition Element</title>

</head>

<body>

<p style="text-align: center">normal text<br/>

<dfn><dfn> element</dfn>

</p>

</body>

</html>

<dfn> 要素

<div>

<div> 要素は、ドキュメント内のセクションを定義します。 <div> 要素に含まれている要素は、<div> 要素で定義されたスタイルと align 属性に従って表示されます。スタイルシートの使い方を参照してください。

構文

<div>

elements

</div>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の <?xml <!DOCTYPE <html XHTML-MP ドキュメントは、<div> 要素に示すように表示されます。

version="1.0"?>

html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Division Element</title>

</head>

<body>

<div style="color:green">

<h1>The First</h1>

<p>div section</p>

<hr/>

</div>

<div style="color:#FF0000;">

<h2>New div</h2>

<p>section</p>

</div>

</body>

</html>

<div> 要素

<dl>

<dd> 要素は、定義記述を定義します。要素 <dd> と <dt> を <dl> 要素の内側に指定して、リストを作成します。 <dd> および <dt>を参照してください。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<dl> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<dd> の構文を参照してください。

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

<dd> の例を参照してください。

<dt>

<dd> 要素は、定義用語を定義します。この要素と <dt> 要素は、<dl> 要素の中に含まれ、定義リストを作成します。 <dd> および <dl> を参照してください。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<dt> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<dd> の構文を参照してください。

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

<dd> の例を参照してください。

<em>

<em> 要素は、強調コンテンツを定義します。 <em> 要素に含まれるコンテンツは、イタリック体で表示されます。

構文

<tag>content<em>content</em></tag>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<em> 要素に示すように表示されます。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>Traffic</title>

</head>

<body>

<h1 style="text-align: center">Traffic

Conditions<br/></h1>

<p>101: <em>Delays</em></p>

<p>280: Normal</p>

<p>880: Normal</p>

</body>

</html>

<em> 要素

<fieldset>

<fieldset> 要素は、その中に含まれる要素の周囲にボックスを描きます。これは通常、関連するフィールドをグループ化するために用いられます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<fieldset> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<fieldset> elements </fieldset>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<fieldset> 要素に示すように表示されます。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>Fieldset Element</title>

</head>

<body>

<p>Enter your address.</p><br/>

<fieldset>

Street: <input name="street"/><br/>

City: <input name="city"/><br/>

State: <input name="street"/><br/>

Zip Code: <input name="zip"/><br/>

</fieldset>

</body>

</html>

<fieldset> 要素

<form>

<form> 要素は、入力フォームを定義します。要素 <input>、<label>、<option>、<select>、および <textarea> を <form> 要素内で使って、入力フォームを作成します。

<form> 要素には、アクションが含まれている必要があります。

<form> 要素の中に、別の <form> 要素を指定することはできません。

構文

<form action="URL of form processing program"

method="method_type">

<select>, <label>, <option>, <textarea>

and <select> elements

</form>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
action	ユーザーがフォームを送信したときにデータが届けられる URL を指定します。
enctype	フォームのコンテンツを符号化するときに使用される MIME タイプ。
method	get \| post Web サーバーにデータを受け渡す HTTP メソッド。

method="get" を使用する場合、フォーム入力は URL に form_data が付加された要求として送信されます。これはデフォルトのメソッドです。ただし、フォーム入力に非 ASCII 文字が含まれている場合や、100 文字を超える場合は、method="post" を使用する必要があります 。

method="post" を使用した場合、フォーム入力は本体に form_data が設定された要求の形式で送出されます。ほとんどのブラウザは post 要求をブックマークに登録することはできません。

例

<input> の例および <option> の例を参照してください。

<h1> から <h6>

要素 <h1>、 <h2>、<h3>、<h4> 、<h5>、および <h6> は、見出しを定義します。見出し要素に含まれるコンテンツは、ボールド体で表示されます。表示サイズは、見出し番号が大きくなるにつれて小さくなります。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、見出し要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<h1> Heading h1 </h1>

<h2> Heading h2 </h2>

<h3> Heading h3 </h3>

<h4> Heading h4 </h4>

<h5> Heading h5 </h5>

<h6> Heading h6 </h6>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<h1> から <h6> の要素に示すように表示されます。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Heading Elements</title>

</head>

<body>

<h1>Heading <h1></h1>

<h2>Heading <h2></h2>

<h3>Heading <h3></h3>

<h4>Heading <h4></h4>

<h5>Heading <h5></h5>

<h6>Heading <h6></h6>

</body>

</html>

<h1> から <h6> の要素

<head>

<head> 要素は、ドキュメントを記述する要素を含んでいます。 <head> 要素に含めることができる要素は、<base>、<link>、<meta>、および <title> です。

構文

<head>

document description elements

</head>

属性

xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
profile	複数の URL をスペースで区切ったリスト。各 URL ページに関するメタデータ情報が収められています。

例

<head> 要素は、本書のすべての例に使用されています。

<hr>

<hr> 要素は、水平の罫線を定義します。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<hr> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<hr/>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

<div> の例を参照してください。

<html>

<html> 要素は、ひとつの XHTML ドキュメントの先頭と末尾を定義します。

構文

<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en">

elements

</html>

属性

xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
version	ドキュメントに使用されている HTML DTD のバージョンを指定します。 !DOCTYPE 宣言には使用されている DTD に関するバージョン情報が含まれているため、この属性はあまり意味がなくなりました。
xmlns	http://www.w3.org/1999/xhtmlXML ネームスペースを指定します。

例

<html> 要素は、本書のすべての例に使用されています。

<i>

<i> 要素は、イタリック体で表示されるコンテンツを定義します。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<i> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<i>content</i>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<i> 要素に示すように表示されます。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Italics Element</title>

</head>

<body>

<p style="text-align: center">normal text<br/>

<i><i> element</i>

</p>

</body>

</html>

<i> 要素

<img>

<img> 要素は、イメージを定義します。

Openwave モバイルブラウザでどの種類のイメージを表示出来るかは、Openwave SDK のインストールに関する説明を参照してください。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<img> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

アイコン

ブラウザは、XHTML ドキュメントで使用できる内蔵アイコンを多数持っています。これらのアイコンは、localsrc 属性を使ってアイコンの番号や名前を指定することで表示できます。アイコンに、利用できるアイコン、それらの番号、および名前を列挙します。

アイコン
#	名前	#	名前	#	名前
1	exclamation1	66	divide	131	rolocard
2	exclamation2	67	calendar	132	check2
3	question1	68	smileyface	133	leaf
4	question2	69	star2	134	hound
5	lefttri1	70	rightarrow2	135	battery
6	righttri1	71	leftarrow2	136	scroll
7	lefttri2	72	gem	137	thumbtack
8	righttri2	73	checkmark1	138	lockkey
9	littlesquare1	74	dog	139	dollar
10	littlesquare2	75	star3	140	lefthand
11	isymbol	76	sparkle	141	righthand
12	wineglass	77	lightbulb	142	tablet
13	speaker	78	bird	143	paperclip
14	dollarsign	79	folder1	144	present
15	moon1	80	head1	145	tag
16	bolt	81	copyright	146	meal1
17	medsquare1	82	registered	147	books
18	medsquare2	83	briefcase	148	truck
19	littlediamond1	84	folder2	149	pencil
20	littlediamond2	85	phone1	150	Logo
21	bigsquare1	86	voiceballoon	151	envelope2
22	bigsquare2	87	creditcard	152	wrench
23	littlecircle1	88	uptri3	153	outbox
24	littlecircle2	89	downtri3	154	inbox
25	wristwatch	90	usa	155	phone2
26	plus	91	note3	156	factory
27	minus	92	clipboard	157	ruler1
28	star1	93	cup	158	ruler2
29	uparrow1	94	camera1	159	graph2
30	downarrow1	95	rain	160	meal2
31	circleslash	96	football	161	phone3
32	downtri1	97	book1	162	plug
33	uptri1	98	stopsign	163	family
34	downtri2	99	trafficlight	164	link
35	uptri2	100	book2	165	package
36	bigdiamond1	101	book3	166	fax
37	bigdiamond2	102	book4	167	partlycloudy
38	biggestsquare1	103	document2	168	plane
39	biggestsquare2	104	scissors	169	boat
40	bigcircle1	105	day	170	dice
41	bigcircle2	106	ticket	171	newspaper
42	uparrow2	107	cloud	172	train
43	downarrow2	108	envelope1	173	blackfull
44	sun	109	check	174	blankhalf
45	baseball	110	videocam	175	blankquarter
45	clock	111	camcorder	500	pclogo
47	moon2	112	house	501	lockcertificate
48	bell	113	flower	502	caps
49	pushpin	114	knife	503	lower
50	smallface	115	vidtape	504	numbers
51	heart	116	glasses	505	symbols
52	martini	117	roundarrow1	506	accept
53	bud	118	roundarrow2	507	checkbox
54	trademark	119	magnifyglass	508	edit
55	multiply	120	key	509	radio
56	document1	121	note1	510	view
57	hourglass1	122	note2	511	back
58	hourglass2	123	boltnut	512	bookmarks
59	floppy1	124	shoe	513	exit
60	snowflake	125	car	514	home
61	cross1	126	floppy2	515	inbox
62	cross2	127	chart	516	mark
63	rightarrow1	128	graph1	517	personal
64	leftarrow1	129	mailbox	518	reload
65	mug	130	flashlight

構文

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
alt	イメージが見つからないときに表示される代替テキスト。
height	強制イメージ高さ (ピクセル単位)
longdesc	イメージに関する長い説明を収めたドキュメントの URL (テキスト専用ブラウザ用)。
src	必須。挿入するイメージの URL。属性は必須ですが、ヌル値を使うことができます (src="")。
width	強制イメージ幅 (ピクセル単位)

例

以下の XHTML-MP ドキュメントは、<img> 要素アイコンに示すように表示されます。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Image Element</title>

</head>

<body>

<img src="" localsrc="moon2"/> -

<img src="" localsrc="star2"/><br/>

<img src="" localsrc="day"/> -

<img src="" localsrc="scissors"/><br/>

<img src="" localsrc="creditcard"/> -

<img src="" localsrc="110"/><br/>

<img src="" localsrc="85"/> -

<img src="" localsrc="moon1"/>

</body>

</html>

<img> 要素アイコン

以下の XHTML-MP ドキュメントは、<img> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Image Element</title>

</head>

<body>

<p style="text-align: center">gif image<br/>

<img src="logo.gif" alt="gif logo"/>

</p>

</body>

</html>

<img> 要素

<input>

<input> 要素は、ユーザーがデータを入力できるフィールドを定義します。フィールドは <form> 要素の中に含まれます。ユーザーがフォームを完成させ、適切なキーを押すと、<form> action 属性で指定された URL にデータが送られます。この送出値は、URL 符号化データの標準フォーマットに準拠しています。

構文

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
accesskey	画面の左側のリンクの隣に表示されるキー (0-9、*、または #)。電話キーパッドで該当キーを押すと、電話機はそのリンクに定義されているタスクを実行します。リンクにそれが現れる順に番号をつけるときに便利です。
checked	checked フォームがロードされたときにオプションボタンまたはチェックボックスがチェックされるよう指定します。この属性を指定しなければ、チェックは行われません。
maxlength	type="text" および "password" と一緒に使用して、ユーザーがフィールドに入力できる最大文字数を設定します。
name	入力フィールド名。この属性に同じ名前を付けると、オプション (ラジオ) ボタンがこの属性と一緒にグループされるので、結果として、ユーザーはボタンをひとつ選択するだけでグループ全体を選択できます。
size	入力フィールドの幅。デフォルト値は 20 文字です。 type="password" および "text" と一緒に使用します。
src	イメージの URL。 type="image" と一緒に使用します。
tabindex	タブ設定順に位置を設定します。
type	text \| checkbox \| radio \| password \| hidden \| submit \| reset \| button 入力フィールドのタイプを指定します。
value	type="checkbox" と "radio" の場合、コントロールがオンになった時点で返される値を指定します。 type="button", "reset"と "submit" の場合、ボタンのテキストを指定します。 type="hidden"、"password"、および "text" の場合、コントロールのデフォルト値を指定します。

例

以下の XHTML-MP ドキュメントは、<input> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Input Element</title>

</head>

<body>

<form action="http://somesite.com/adduser" method="post">



<p>First name: <input type="text" name="firstname"/></p>

<p><label for="lname">Last name:</label>

<p><input type="text" id="lname" name="lastname"/></p>

<p><input type="radio" name="gender" value="Male"/>Male</p>

<p><input type="radio" name="gender" value="Female"/>Female</p>

<p><input type="checkbox" name="pet" value="Dog"/>Dog</p>

<p><input type="checkbox" name="pet" value="Cat"/>Cat</p>

<p><input type="submit" value="Send"/>

<input type="reset"/>

</form>

</body>

</html>

<input> 要素

<kbd>

<kbd> 要素は、キーボードテキストを定義します。 <kbd> 要素に含まれるコンテンツは、通常よりも小さなフォントで表示されます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<kbd> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<kbd>content</kbd>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<kbd> 表示に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Keyboard Element</title>

</head>

<body>

<p style="text-align: center">normal text<br/>

<kbd><kbd> element</kbd>

</p>

</body>

</html>

<kbd> 表示

<label>

<label> 要素は、for 属性を使用して <input> または <select> 要素のラベルを定義します。 <label> 要素は、フォームコントロール要素を含むこともできます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、label 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

<label>Customer Name:
<input type="text" name="CustomerName" size="25">
</label>

構文

<label for="element_id">label</label>

<label>label_text
<input type="text" name="name">
</label>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
accesskey	画面の左側のリンクの隣に表示されるキー (0-9、*、または #)。電話キーパッドで該当キーを押すと、電話機はそのリンクに定義されているタスクを実行します。リンクにそれが現れる順に番号をつけるときに便利です。
for	ラベルを必要とする別の要素の ID。

例

<input> の例および <option> の例を参照してください。

<li>

<li> 要素は、<ol> または <ul> 要素の中のリスト項目を定義します。 <ol> 要素は、順序なしのリストに使用されます。 <ul> 要素は、番号付きのリストに使用されます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<li> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<ol> の構文および <ul> の構文を参照してください。

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
value	番号付きの (<ol>) リストに項目の番号を設定します。

例

<ol> の例および <ul> の例を参照してください。

<link>

<link> 要素は、外部リソースドキュメントを定義します。これを使用して、外部のスタイルシートを参照できます。スタイルシートの使い方を参照してください。 <link> 要素は、<head> 要素に含まれます。

構文

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
charset	リンクがポイントするページの文字コードを設定します。
href	必須。リンクの宛先を設定します。
hreflang	リンクがポイントするページの基本言語を指定します。
media	リンクが適用する媒体。
rel	alternate \| appendix \| bookmark \| chapter \| contents \| copyright \| glossary \| help \| index \| next \| prev \| section \| start \| stylesheet \| subsection 現在のドキュメントからリンク先のドキュメントへのリンク関係を定義します。 rel="next" のとき、Openwave モバイルブラウザはリンク先ドキュメントをプリフェッチします。
rev	alternate \| appendix \| bookmark \| chapter \| contents \| copyright \| glossary \| help \| index \| next \| prev \| section \| start \| stylesheet \| subsection リンク先のドキュメントから現在のドキュメントへのリンク関係を定義します。
type	MIME タイプ。リンク先ドキュメントのコンテンツタイプに関するヒント情報。

例

XHTML <link> 要素で参照されている例題 CSS ファイルに以下が含まれています。

ol li { list-style-type: A }

h1 { color: red }

p { color: green }

この場合、以下の XHTML-MP ドキュメントは、<link> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Link Element</title>

<link href="linked_style.css" rel="stylesheet"
type="text/css">

</head>

<body>

<h1>H1 heading, red </h1>

<p>Text, green. </p>

<ol>

<li>List index UC "A".</li>

<li>List index UC "B".</li>

</ol>

</body>

</html>

<link> 要素

<meta>

<meta> 要素は、ドキュメントに関するメタ情報を含んでいます。メタ情報の例としては、検索エンジンへのキーワードや説明、ドキュメントの作成に使用されるプログラムに関する詳細などがあります。

<meta> 要素は表示されません。

<meta> 要素は無視されたり、ドキュメントから削除されます。ただし、<meta> タグがフォーム <meta http-equiv = "redirect" content = "http://somesite.com"> の形式で使用された場合、これはブラウザに別のページを表示させることが目的です。 <meta> タグは無視されるので、ハンドセットではページには何も表示されません。

<meta http-equiv="Expires" content="date"/>

<meta http-equiv="Cache-Control" content="max-age=age"/>

キャッシュ制御

従来の Web ブラウザと同様、Openwave モバイルブラウザもメモリキャッシュを持っています。メモリキャッシュは、ユーザーがアクセスした各ドキュメントをキャッシュに保存しておき、後で、サーバに対して再度要求を出さなくても、すばやく再表示できるようにします。装置がキャッシュにドキュメントを保持しておく期間のことを、time to live (生存期間： TTL) と呼んでいます。デフォルトの TTL は 30 日 (またはメモリの内容が破棄されるまで) です。ドキュメントに時間に影響されやすい情報が含まれている場合、TTL を通常よりも短くして、デバイスがサーバーからより短い周期でドキュメントを再ロードできるようにします。下記の例は、<meta> 文を使って TTL を設定する方法を示しています。

<meta http-equiv="cache-control" content="max-age=3600"
forua= true/>

max-age パラメータは、ドキュメントをキャッシュに保持しておく時間 (秒単位) を指定します。上の例は、デバイスに対して、1 時間 (3600 秒) 経過したらキャッシュからドキュメントを消去するよう指示しています。ドキュメントに対する適切な TTL を判断するには、その情報が時間による影響を受ける度合いと、サーバーからその情報を再ロードすることによるレスポンス時間の劣化の度合いとのバランスを考慮します。 max-age をゼロに設定すると、モバイルブラウザはユーザーがドキュメントをリンクを辿って移動するたびにドキュメントを再ロードします。ただし、ドキュメントを（バックキー等で）ヒストリー上を戻っていく場合には、キャッシュにある情報から表示します。

モバイルブラウザは続いて、ドキュメントの TTL が満了したときにのみ、HTTP サーバーを使って "if-modified-since" コンテンツネゴシエーションを実行します。ドキュメントには、キャッシュ制御 <meta> 要素内に "no-cache" を指定できます (これは " max-age=0" と等価)。ドキュメントのキャッシュ制御 <meta> 要素には "must-revalidate" も指定でき、これによってモバイルブラウザは、ユーザーが後方にドキュメントをヒストリーを遡って移動する場合でも TTL を再評価することができます。最後に、キャッシュ制御 <meta> タグがドキュメントに定義されていない場合、ブラウザは HTTP キャッシュヘッダーから HTTP/1.1 キャッシュモデルに基づいてドキュメントの TTL を導き出します。

<meta http-equiv="Cache-Control" content="must-revalidate"
forua= true/> <meta http-equiv="Cache-Control" content="no-cache"
forua= true/>

構文

属性

xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
content	メタ情報を http-equiv または名前に対応付けるよう設定します。
http-equiv	content-type \| expires \| refresh \| set-cookie \| cache-control <meta> タグのコンテンツを HTTP レスポンスヘッダーにバインドさせるかどうかを指定します。 cache-control 値は Openwave による拡張機能です。
name	author \| description \| keywords \| generator \| revised \| その他メタオブジェクト名
scheme	<meta> 要素のフォーマットを定義します。

例

以下の XHTML-MP ドキュメントの一部は、 <meta> 要素にメタ情報が含まれている例です。

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"/>

<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"/>

<meta name="revised" content=" Author , 6/10/99"/>

<object>

<object> 要素は、埋め込みオブジェクトを定義します。

オブジェクトが検出できなかったときに、<object> 要素のコンテンツが表示されます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<object> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
archive	アーカイブ対象の複数の URL アドレスをスペースで区切って列挙したリスト。アーカイブには、オブジェクトに関連するリソースが格納されます。
classid	オブジェクトの実装の URL の場所。
codebase	classid、data、および archive の各属性で指定された相対 URL を解決するために使用される URL の基本パス。
codetype	インターネットメディア MIME タイプ。
data	オブジェクトのデータをポイントする URL。
declare	オブジェクトを宣言としてのみ設定します。
height	オブジェクトのピクセル単位の高さ (イメージについてのみ)。
name	オブジェクト名
standby	オブジェクトがロードされている間表示されるメッセージ。
tabindex	タブ設定順に位置を設定します。
type	データ属性で指定された MIME タイプのデータ。
width	オブジェクトのピクセル単位の幅 (イメージについてのみ)。

例

この場合、以下の XHTML-MP ドキュメントは、<object> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Object Element</title>

</head>

<body>

<p style="text-align: center"><object>

element<br/>

<object data="../xb/logo.gif" type="image/gif"/>

</p>

</body>

</html>

<object> 要素

<ol>

<ol> 要素は、番号付きリスト定義します。 <ol> 要素の中に含まれる <li> 要素は順に番号が付けられます。 <li>を参照してください。

番号スタイルはスタイルシートプロパティを使って変更することができます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<ol> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<ol>

<li>first item</li>

<li>second item</li>

...

<li>nth item</li>

</ol>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
start	リストの最初の項目に番号値を設定します。

例

この場合、以下の XHTML-MP ドキュメントは、要素 <ol> および <li>に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Ordered List Element</title>

</head>

<body>

<ol>

<li>wedge</li>

<li>valance</li>

<li>camber</li>

<li>track bar</li>

</ol>

</body>

</html>

要素 <ol> および <li>

<optgroup>

<optgroup> 要素は、ドロップダウンリストに入れる項目グループを定義します。この要素は <option> 要素と一緒に使用します。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<optgroup> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<select>

<optgroup label=" label name ">

<option attributes > content </option>

...

<option attributes > content </option>

</optgroup>

<optgroup label=" label name ">

<option attributes > content </option>

...

<option attributes > content </option>

</optgroup>

</select>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
disabled	false \| true true に設定すると、ユーザーはこのオプショングループを選択できません。
label	オプショングループのラベル

<option>

<option> 要素は、ドロップダウンリストに入れる項目を定義します。 <select> を参照してください。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<option> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<select>

<option attributes > content </option>

...

<option attributes > content </option>

</select>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
selected	デフォルトの選択項目。リスト内でひとつだけ設定できます。
value	ユーザーがこの項目を選択したときに送出される値。

例

この場合、以下の XHTML-MP ドキュメントは、<option> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>Option Element</title>

</head>

<body>

<form action="http://somesite.com/prog" method="post">

<label for="city">select, option example</label>

<select name=&drq;city&drq;>

<option label="Los Angeles" value="la">

Los Angeles</option>

<option label="San Francisco" value="sf">

San Francisco</option>

<option label="Las Vegas" value="lv">

Las Vegas</option>

<option label="Reno" value="rn">Reno</option>

</select>

</form>

</body>

</html>

<option> 要素

<p>

<p> 要素は、段落を定義します。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<p> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<p> content </p>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

<cite> の例を参照してください。

<param>

<param> 要素は、オブジェクトのパラメータを定義します。 name 属性はオブジェクトのパラメータを、value 属性はそのパラメータに適用する値をそれぞれ定義します。

構文

属性

id	要素の ID
name	オブジェクト名
type	valuetype が ref のとき MIME タイプ。
value	実行時パラメータの値
valuetype	data \| ref \| object 値のタイプ。

<pre>

<pre> 要素は、プリフォーマットテキストを定義します。 <pre> 要素内のテキストは、スペースや改行をそのまま維持して表示されます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<pre> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

要素には、<img>、<object>、<small> などの要素を含めることはできません。

構文

<pre> content </pre>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
xml:space	preserve スペースを維持します。

例

この場合、以下の XHTML-MP ドキュメントは、<pre> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Preformatted Element</title>

</head>

<body>

<pre>

This is text that

is displayed just

as it was typed

</pre>

</body>

</html>

<pre> 要素

<q>

<q> 要素は、短い引用を定義します。 <q> 要素内のコンテンツは引用符で囲まれます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<q> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<q> content </q>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
cite	Web からとられたものならば、引用の URL。

例

以下の XHTML-MP ドキュメントは、<q> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Quotation Element</title>

</head>

<body>

<p><q>Don't be so hard on yourself, judge. You're a

tremendous slouch,</q> he said with a smile.</p>

</body>

</html>

<q> 要素

<samp>

<samp> 要素は、サンプルのコンピュータコードを定義します。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<samp> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<samp> content </samp>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<samp> の表示に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Sample Element</title>

</head>

<body>

<p style="text-align: center">normal text<br/>

<samp><samp> element</samp>

</p>

</body>

</html>

<samp> の表示

<select>

<select> 要素は、ドロップダウンメニューを定義します。 <select> 要素に含まれる <options> 要素で、メニューからの選択項目を指定します。

ユーザーがオプションを選択し、適切なキーを押すと、 <form> 要素の action 属性で指定されたフォームサーバーにデータが送られます。この送出値は、URL 符号化データの標準フォーマットに準拠しています。

構文

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
multiple	false \| true 複数の項目を選択できるかどうかを指定します。
name	リスト名
size	リストに入る表示項目の数を設定します。
tabindex	タブ設定順に位置付けを行います。

例

<option> の例を参照してください。

<small>

<small> 要素は、通常よりも小さなフォントで表示されるコンテンツを定義します。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<small> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<small> content </small>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<small> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Small Element</title>

</head>

<body>

<p style="text-align: center">normal text<br/>

<small><small> element</small>

</p>

</body>

</html>

<small> 要素

<span>

<span> 要素は、ドキュメント内のセクションを定義します。セクションに含まれるコンテンツは、<span> 要素属性で定義されたとおりに表示されます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<span> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<span> content </span>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<span> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Span Element</title>

</head>

<body>

<p>This is a paragraph

<span style="color:#0000FF;">with a section that must

stand out</span> from the rest of the paragraph.</p>

</body>

</html>

<span> 要素

<strong>

<strong> 要素は、強調コンテンツを定義します。コンテンツはボールド体で表示されます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<strong> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<strong> content </strong>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<strong> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Strong Element</title>

</head>

<body>

<p style="text-align: center">normal text<br/>

<strong><strong> element</strong>

</p>

</body>

</html>

<strong> 要素

<style >

<style> 要素は、内部スタイルシートをドキュメントの要素と対応付けます。スタイルシートは、スタイルシートの使い方の指定に従って適用されます。

<style> 要素は <head> 要素の中に含まれ、その内容は表示されません。

<style> 要素で指定されているスタイル定義の構文は、外部スタイルシート (CSS ファイル) の定義の構文と同じです。

構文

<head>

<style>

tag {style-property:value}

...

tag {style-property:value}

</style>

</head>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
media	スタイル設定が効力を及ぼす出力メディア
type	text/css \| text/javascript コンテンツのタイプを定義します。
xml:space	preserve スペースを維持します。

例

以下の XHTML-MP ドキュメントは、<strong> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<style>

p.red {color: red}

</style>

</head>

<body id="main">

<p class="red">This is a red paragraph.</p>

<p>This paragraph has no style settings.</p>

<p class="red">This is a red paragraph.</p>

</body>

</html>

<style> 要素

<table>

<table> 要素は、表を定義します。

要素に含まれる子要素は、表のコンテンツを表示するときに使用されます。 <td>、<th>、および <tr>を参照してください。

表の行が単一行を表示時するには広すぎると、セルが折りたたまれます。

構文

<table>

<tr>

<th>column head</th>

<th>column head</th>

</tr>

<tr>

<td>cell</td>

<td>cell</td>

</tr>

<tr>

<td>cell</td>

<td>cell</td>

</tr>

</table>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
summary	表の要約。音声合成の非ビジュアルブラウザ用に使用可能。

例

以下の XHTML-MP ドキュメントは、<table> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Table Example</title>

</head>

<body id= main >

<table title="Table 1">

<caption>Simple Table</caption>

<tr>

<th><strong>C1</strong></th>

<th><strong>C2</strong></th>

<th><strong>C3</strong></th>

<th><strong>C4</strong></th>

<th><strong>C5</strong></th>

</tr>

<tr>

<td>C11</td> <td>C12</td> <td>C13</td> <td>C14</td>

<td>C15</td>

</tr>

<tr>

<td>C21</td> <td>C22</td> <td>C23</td> <td>C24</td>

<td>C25</td>

</tr>

<tr>

<td>C31</td> <td>C32</td> <td>C33</td> <td>C34</td>

<td>C35</td>

</tr>

</table>

</body>

</html>

<table> 要素

<td>

<td> 要素は、表のセルを定義します。詳しくは、<table> を参照してください。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<td> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<tr><td> content </td>...<td> content </td></tr>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
abbr	セル内のコンテンツの省略形
align	left \| center \| right セル内のコンテンツを水平方向に揃えます。
axis	複数のカテゴリ名をカンマで区切ったリスト。リストはセルを分類します。
colspan	このセルに含めなければならない列数を設定します。値が 0 のとき、この列から表の最後の列までが結合されます。
headers	<th> 要素に適用されるヘッダーセルを指定するスペースで区切られたリスト。この属性を使うと、テキスト専用ブラウザが、与えられたセルに関するヘッダー情報を表示できるようになります。
rowspan	このセルに含めなければならない行数を設定します。値が 0 のとき、この行から表の最後の行までが結合されます。
scope	col \| row <td> 要素が与えるヘッダー情報を持つセルを指定します。この属性は、ヘッダーを使用するよりも単純な代替手段です。
valign	top \| middle \| bottom \| baseline セル内のコンテンツを垂直方向に揃えます。

例

<table> の例を参照してください。

<textarea>

<textarea> 要素は、複数行テキスト入力エリアを定義します。この要素の機能は、type="text" <input> 要素と同じですが、複数行を入力できる点のみ異なります。詳しくは、<form> を参照してください。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<textarea> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<textarea attributes> content </textarea>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
accesskey	画面の左側のリンクの隣に表示されるキー (0-9、*、または #)。電話キーパッドで該当キーを押すと、電話機はそのリンクに定義されているタスクを実行します。リンクにそれが現れる順に番号をつけるときに便利です。
cols	テキストエリアの幅を文字数で設定します。
name	テキストエリアの名前。
rows	テキストエリアの高さを行数で設定します。
tabindex	タブ設定順に位置付けを行います。

例

以下の XHTML-MP ドキュメントは、<textarea> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Textarea Element</title>

</head>

<body>

<form action="http://somesite.com/process" method="post">

<textarea cols="10" rows="2" name="symptoms">List symptoms here...</textarea>

</form>

</body>

</html>

<textarea> 要素

<th>

<th> 要素は、表のヘッダーセルを定義します。詳しくは、<table> を参照してください。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<th> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<tr><th> header </th>...<th> header </th></tr>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
abbr	セル内のコンテンツの省略形
align	left \| center \| right セル内のコンテンツを水平方向に揃えます。
axis	複数のカテゴリ名をカンマで区切ったリスト。リストはセルを分類します。
colspan	このセルに含めなければならない列数を設定します。値が 0 のとき、この列から表の最後の列までが結合されます。
headers	<th> 要素に適用されるヘッダーセルを指定するスペースで区切られたリスト。この属性を使うと、テキスト専用ブラウザが、与えられたセルに関するヘッダー情報を表示できるようになります。
rowspan	このセルに含めなければならない行数を設定します。値が 0 のとき、この列から表の最後の列までが結合されます。
scope	col \| row <td> 要素が与えるヘッダー情報を持つセルを指定します。この属性は、ヘッダーを使用するよりも単純な代替手段です。
valign	top \| middle \| bottom \| baseline セル内のコンテンツを垂直方向に揃えます。

例

<table> の例を参照してください。

<title>

<title> 要素はドキュメントのタイトルを定義するもので、<head> 要素の中に含まれます。タイトルはページの最上段に表示されます。

構文

<head>

<title> The Document Title </title>

</head>

属性

xml:lang

要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

<title> 要素は、本書のすべての例に使用されています。

<tr>

<tr> 要素は、表の行を定義します。この要素は <table> 要素の子であり、表をどのような形にするかを決定するために使用します。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<tr> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<tr><td> content </td>...<td> content </td></tr>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。
align	left \| center \| right 行を水平方向に揃えます。
valign	top \| middle \| bottom \| baseline 行を垂直方向に揃えます。

例

<table> の例を参照してください。

<ul>

<ul> 要素は、順序番号の付かないリストを定義します。 <ul> 要素の中に含まれる <li> 要素はバレット記号 (・) が付けられます。 <li>を参照してください。

バレットアイコンはスタイルシートプロパティを使って変更することができます。 <li> の例とスタイルシートの使い方を参照してください。

構文

<ul>

<li>first item</li>

<li>second item</li>

...

<li>nth item</li>

</ul>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、要素 <ul> および <li>に示すような表示になります。

順序番号のないリストの例：

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>Unordered List Element</title>

</head>

<body>

<ul>

<li>Grand Canyon</li>

<li>Yosemite</li>

<li>Yellowstone</li>

<li>Denali</li>

</ul>

</body>

</html>

要素 <ul> および <li>

<var>

<var> 要素は、変数を定義します。コンテンツはイタリック体で表示されます。

style 属性が設定されている場合、あるいはこれがスタイルシートセレクタと一致している場合、<var> 要素の内容は指定されたとおりに書式化され表示されます。スタイルシートの使い方を参照してください。

構文

<var> content </var>

属性

class	要素のクラス
id	要素の ID
style	スタイルプロパティを指定。スタイルシートの使い方を参照してください。
title	要素のタイトル
xml:lang	要素の言語コード。この属性の設定は、親要素で設定されている言語コードに優先します。

例

以下の XHTML-MP ドキュメントは、<var> 要素に示すような表示になります。

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

<head>

<title>The Variable Element</title>

</head>

<body>

<p style="text-align: center">normal text<br/>

<var><var> element</var>

</p>

</body>

</html>

<var> 要素

CSS セレクタ

CSS (Cascading Style Sheets) セレクタを使用すると、スタイルルールを適用する要素を指定することができます。セレクタは外部のスタイルシートおよび <style> 要素で使用します。

セレクタの使い方

グループ化

複数の要素に同じスタイルルールを適用していれば、グループ化を使ってスタイルシート内でスタイルルール文の数を最小限に抑えることができます。以下の例では、すべての見出し要素に対してフォントカラーとフォントファミリを 1 行で設定しています。

h1, h2, h3, h4, h5, h6 { color: red; font-family: sans-serif }

継承

通常、他の要素内に入れ子になっている要素は、外側の要素に適用されているスタイルルールを継承します (明示的にそれらのルールが変更されていない限り)。たとえば、<body> 要素に指定されているテキストカラーは、<body> 要素の中に含まれる <p> 要素内のテキストにも適用されます。

セレクタが周りのセレクタの値を継承しないこともありますが、そうしたケースはきわめてはっきりとしています。たとえば、マージントップのプロパティは継承されません。ある段落がドキュメント本体と同じトップマージンを持つことは、通常はないからです。

セレクタ

汎用セレクタ

汎用セレクタは、ドキュメント内のすべての要素に対してスタイルルールを指定します。このセレクタは、子孫あるいは子セレクタなどを始めとする他のセレクタと一緒に使用できます。

パターン	意味
*	すべての要素と一致。

<head>

<title>Universal Selector</title>

<style type="text/css" >

* { color: blue }

</style>

</head>

<body>

<h1>Blue heading</h1>

<p>And this is blue text</p>

</body>

タイプセレクタ

タイプセレクタは、特定の要素に対してスタイルルールを指定します。ドキュメント内の要素のすべてのインスタンスは、同じスタイルルールを使用します。

パターン	意味
E	任意の E 要素と一致。

<head>

<title>Type Selector</title>

<style type="text/css" >

h1 { color: blue }

</style>

</head>

<body>

<h1>Blue heading</h1>

</body>

子孫セレクタ

子孫セレクタを使用すると、ある要素が指定された要素の中に含まれている場合、その要素に対して親のスタイルルールを適用することができます。スタイルルールは、2 つの目の要素が最初の要素の中にどれだけ深く入れ子になっていても、それには関係なく適用されます。

パターン	意味
E F	E 要素の子孫である F 要素と一致。リストにある 2 つの要素に限定されません。汎用セレクタも使用できます。

<head>

<title>Descendent Selector</title>

<style type="text/css">

ol li {color: red}

</style>

</head>

<body>

<ol>

<li> List Item 1 is Red </li>

<li> List Item 2 is Red </li>

</ol>

<ul>

<li> List Item 1 is normal </li>

<li> List Item 2 is normal </li>

</ul>

</body>

子セレクタ

子セレクタは、子孫セレクタをさらに限定的にしたセレクタです。このセレクタを使用すると、スタイルルールを適用する入れ子を正確に指定できます。

パターン	意味
F>E	F 要素の子である E 要素と一致。汎用セレクタも使用できます。
G>F>E	G 要素の子である F 要素の子である E 要素と一致。
以下同様...

<head>

<title>Child Selector</title>

<style type="text/css">

div>p>strong {color: red}

</style>

</head>

<body>

<div class="bar">Table of Contents

<p>This <strong>word</strong> is red.</p>

</div>

</body>

クラスセレクタ

クラスセレクタは、クラス属性がスタイルシートに列挙されている値に設定されている要素に対して適用されます。クラスセレクタは個々の要素にも、すべての要素にも適用できます。

パターン	意味
.class_name	class_name にクラス属性が設定されている任意の要素に一致。
E.class_name	class_name にクラス属性が設定されている任意の E 要素に一致。

<head>

<title>Class Selector</title>

<style type="text/css">

h1.green { color: #00ff00 }

p.red { color: red }

</style>

</head>

<body>

<h1 class="green">Green heading</h1>

<p class="red">This text is red.</p>

</body>

リンク擬似クラスセレクタ

スタイルシートセレクタを使用すると、アクセス前およびアクセス後のリンクの表示を指定することができます。

これらのセレクタは、非ハイパーリンク要素には働きません。

パターン	意味
E:link	まだアクセスしたことのないリンクである要素 E と一致。
E:visited	以前にアクセスしたことのあるリンクである要素 E と一致。

<head>

<title>Link Pseudo Class Selectors</title>

<style type="text/css">

a:link {color: red }

a:visited {color : blue }

</style>

</head>

<body>

<a href="http://www.openwave.com">Openwave Systems</a>

</body>

ID セレクタ

ID セレクタは、id 属性がスタイルシートに列挙されている値に設定されている要素に対して適用されます。 ID セレクタは個々の要素にも、すべての要素にも適用できます。

パターン	意味
#id_name	id_name に id 属性が設定されている任意の要素に一致。
E#id_name	id_name に id 属性が設定されている任意の E 要素に一致。

<head>

<title>ID Selector</title>

<style type="text/css">

h1#green { color:green }

#red { color:red }

</style>

</head>

<body>

<h1 id="green">Green heading</h1>

<p id="red">This text is red.</p>

</body>

CSS プロパティ

Openwave モバイルブラウザは、以下に示す CSS プロパティをサポートしています。

テキストプロパティ

テキストプロパティは、テキストがページに表示されるスタイルに影響します。

プロパティ	説明	値	例
vertical-align	要素のベースラインの上下方向を、その親要素の line-height に合わせて設定します。インライン要素にのみ適用できます。	baseline, sub, super, top, text-top, middle, bottom, text-bottom	img {vertical-align: middle} ベースライン中央にイメージを配置します。
text-align	要素のテキストの横方向の揃えを設定します。ブロックレベル要素にのみ適用できます。	left right center	H3 {text-align: center} 行中央に見出しを配置します。
text-indent	要素の最初の行のインデントを設定します。段落に対して字下げ効果を得るためにもっともよく使用されます。ブロックレベルの要素にのみ適用され、負の値も使用できます。	cm em ex in mm pc px pt %	p {text-indent: 2em} 段落の先頭行を 2 em スペース分だけ字下げします。
word-spacing	単語と単語の間に、通常の間隔に加えて追加する空白の量を設定します。単語とは、その前後を空白で区切られた文字列と定義されます。	cm em ex in mm pc px pt %	p {word-spacing: 1pt} 段落内の各単語間に 1 ポイント分の間隔を追加します。
letter-spacing	文字と文字の間に、通常の間隔に加えて追加する空白の量を設定します。文字とは、任意の被表示文字と定義されます。	cm em ex in mm pc px pt %	p {letter-spacing: 0} 段落内の文字間に余分な空白が追加されないようにします。
white-space	要素内の空白の扱い方を定義します。	nowrap, overflow	h1 {white-space: nowrap } 見出しは折り返されません。
line-height	要素内のベースライン間の上下方向の距離を設定します。負の値は指定できません。	cm em ex in mm pc px pt %	p {line-height: 12pt} 段落内のベースライン間の距離を 12 ポイントに設定します。
text-decoration	テキストに一定の効果 (下線や点滅など) を設定します。値の組み合わせは可能です。	none, underline, blink	h1 {text-decoration: underline} すべてのレベル 1 の見出しに下線を引きます。

フォントプロパティ

Openwave モバイルブラウザは、以下の表に示すフォントプロパティをサポートしています。フォントプロパティのサポートにはフォント名のマッチングは含まれますが、フォント名の合成は含まれません。

プロパティ	説明	値	例
font-family	特定のフォント、汎用フォントファミリ、またはその両方の使用を宣言します。モバイル装置は一定数のフォントしかサポートしない場合があります。	family name generic name (serif Ç<Ç?ÇÕ sans-serif)	p {font-family: helvetica, arial, sans-serif} 段落を Helvetica (もし存在すれば) で表示します。このフォントが存在しなければ、Arial が試され、さらに sans-serif フォントファミリのいずれかのフォントが試されます。
font-style	イタリック体と平体のいずれかを選択します。	normal, italic	h1 {font-family: arial; font-style: italic} 見出しを Arial のイタリック体で表示します。
font-weight	通常のウェイトとボールドのウェイトのいずれかを選択します。	normal, bold	blockquote {font-weight: bold} <blockquote>要素をボールドで表示します。
font-size	フォントのサイズを設定します。絶対サイズ、相対サイズ、またはパーセンテージのいずれかで定義することができます。	larger, smaller, x-small, small, medium, large, x-large	p {font-size: 12pt} 段落を 12 ポイントのタイプで表示します。 h1 {font-size: 150%} すべてのレベル 1 のヘッドラインを通常よりも 150% 大きいサイズで表示します。
font	各種のフォントプロパティの簡略表現。	<font-family> <font-style> <font-weight> <font-size>	P { font: italic bold 12pt Times, serif } 段落は、イタリック体、ボールド、12pt の Times フォントで表示されます。 Times が存在しない場合、別の serif フォントが使用されます。

バックグラウンドプロパティ

バックグラウンドプロパティを使用すると、フォアグラウンドカラーやテキストカラー、バッググラウンドカラー、バッググラウンドイメージなどを設定できます。

プロパティ	説明	値	例
ÉJÉâÅ[	特定の要素のカラーを設定します。テキストの場合はテキストカラー、その他の要素 (HR など) の場合はフォアグラウンドカラーを設定します。モバイル装置は一定数のカラーしかサポートしない場合があります。	color name hex value	p {color: red} 段落テキストのカラーを赤色に設定します。
background-color	要素のバックグラウンドカラーを設定します。このバックグラウンドは、当該要素の境界線の端を超えて適用されます。モバイル装置は一定数のカラーしかサポートしない場合があります。	color name hex value	h1 {background-color: green} すべてのレベル 1 の見出しのバックグラウンドエリアを緑色で表示します。
background-image	バックグラウンドパターンにするイメージを設定します。他のバックグラウンドプロパティと組み合わせた場合、一方向のみタイルまたは繰り返しが可能。	url, localsrc	blockquote {background-image: url (..images/sand.gif)} <blockquote> 要素のバックグラウンドエリアにイメージ sand.gif を表示します。
background-repeat	バックグラウンドイメージの繰り返しスタイルを設定します。	repeat, repeat-x, repeat-y, no-repeat	blockquote {background-image: url (..images/sand.gif); background-repeat: repeat} <blockquote> 要素のバックグラウンドエリアにイメージ sand.gif を表示し、このイメージを上下左右に繰り返してバックグラウンドエリア全体を埋め尽くします。
background	より具体的なバックグラウンド関連プロパティの簡略表現。	<background-color> <background-image> <background-repeat>	table {background: #00FF00} ドキュメント内のすべての表に緑色のバックグラウンドを設定します。

マージンプロパティ

マージンプロパティは、要素のデフォルトのマージンを変更するときに使用します。

プロパティ	説明	値	例
margin-left	要素の左マージンのサイズを設定します。負の値を指定できます。	cm em ex in mm pc px pt %	div {margin-left: 6em} <div> 要素をページの左から 6 em スペース分の左マージンをとって配置します。
margin-right	要素の右マージンのサイズを設定します。負の値を指定できます。	cm em ex in mm pc px pt %	div {margin-right: 1em} <div> 要素をページの右から 1 em スペース分の右マージンをとって配置します。
margin-top	要素の上マージンのサイズを設定します。負の値を指定できます。	cm em ex in mm pc px pt %	div {margin-top: 2em } <div> 要素をページの上から 2 em スペース分下にさがった位置に配置します。
margin-bottom	要素の下マージンのサイズを設定します。負の値を指定できます。	cm em ex in mm pc px pt %	div {margin-bottom: 2cm} <div> 要素の下に 2 cm のマージンを作ります。
margin	マージン関連のプロパティの簡略表現	<margin-top> <margin-bottom> <margin-left> <margin-right>	h1 {margin: 10px}すべてのマージンを 20 ピクセル広げます。

ボーダープロパティ

ボーダープロパティは、要素にボーダー (境界線) を付けるときに使用します。 Openwave モバイルブラウザは、実線の境界線スタイルのみサポートしています。

プロパティ	説明	値	例
border-left-width	左側のボーダーの幅を設定します。	cm em ex in mm pc px pt %	table {border-left-width: 4px} 左側のボーダーを 4 ピクセル幅で表示します。
border-right-width	右側のボーダーの幅を設定します。	cm em ex in mm pc px pt %	table {border-right-width: 4px} 右側のボーダーを 4 ピクセル幅で表示します。
border-top-width	上部ボーダーの幅を設定します。	cm em ex in mm pc px pt %	table {border-top-width: 4px} 上部ボーダーを 4 ピクセル幅で表示します。
border-bottom-width	下部ボーダーの幅を設定します。	cm em ex in mm pc px pt %	table {border-bottom-width: 4px} 上部ボーダーを 4 ピクセル幅で表示します。
border-left-color	左側のボーダーのカラーを設定します。モバイル装置は一定数のカラーしかサポートしない場合があります。	color name hex value	table {border-left-color: #00FF00} 左側のボーダーを緑色で表示します。
border-right-color	右側のボーダーのカラーを設定します。モバイル装置は一定数のカラーしかサポートしない場合があります。	color name hex value	table {border-right-color: #00FF00} 右側のボーダーを緑色で表示します。
border-top-color	上部ボーダーのカラーを設定します。モバイル装置は一定数のカラーしかサポートしない場合があります。	color name hex value	table {border-top-color: #00FF00} 上部ボーダーを緑色で表示します。
border-bottom-color	下部ボーダーのカラーを設定します。モバイル装置は一定数のカラーしかサポートしない場合があります。	color name hex value	table {border-bottom-color: #00FF00} 下部ボーダーを緑色で表示します。
border-left	左側ボーダープロパティの簡略表現。	<border-left-width> <border-left-color>	table { border-left: 2pt #00FF00} 左側のボーダーを 2 ポイント幅の緑色で表示します。
border-right	右側ボーダープロパティの簡略表現。	<border-right-width> <border-right-color>	table { border-right: 2pt #00FF00} 右側のボーダーを 2 ポイント幅の緑色で表示します。
border-top	上部ボーダープロパティの簡略表現。	<border-top-width> <border-top-color>	table { border-top: 2pt #00FF00} 上部ボーダーを 2 ポイント幅の緑色で表示します。
border-bottom	下部ボーダープロパティの簡略表現。	<border-bottom-width> <border-bottom-color>	table { border-bottom: 2pt #00FF00} 下部ボーダーを 2 ポイント幅の緑色で表示します。
border	全ボーダープロパティの簡略表現。	<border-left> <border-right> <border-top> <border-bottom>	table {border: 4pt #FF0000 すべてのボーダーを 4 ポイント幅の赤色で表示します。

パディングプロパティ

パディングプロパティは、オブジェクトとそのマージンやボーダーを定義するために使用します。

プロパティ	説明	値	例
padding-left	オブジェクトとその左マージンまたはボーダーの間に左パディングを設定します。	cm em ex in mm pc px pt %	td { padding-left:1cm } 表セルの左パディングを 1 cm に設定します。
padding-right	オブジェクトとその右マージンまたはボーダーの間に右パディングを設定します。	cm em ex in mm pc px pt %	td { padding-right:1cm } 表セルの右パディングを 1 cm に設定します。
padding-top	オブジェクトとその上部マージンまたはボーダーの間に上部パディングを設定します。	cm em ex in mm pc px pt %	td { padding-top:1cm } 表セルの上部パディングを 1 cm に設定します。
padding-bottom	オブジェクトとその下部マージンまたはボーダーの間に下部パディングを設定します。	cm em ex in mm pc px pt %	td { padding-bottom:1cm } 表セルの下部パディングを 1 cm に設定します。
padding	パディングプロパティの簡略表現。	<padding-left> <padding-right> <padding-top> <padding-bottom>	td { padding-bottom:1cm } 表セルのすべてのパディングを 1 cm に設定します。

ディメンジョンプロパティ

ディメンジョンプロパティは、要素のデフォルトの高さと幅を変更するときに使用します。

プロパティ	説明	値	例
height	要素の高さを設定します。	cm em ex in mm pc px pt %	img.button {height: 70px} すべてのボタンクラスのイメージの高さを 70 ピクセルに設定します。
width	要素の幅を設定します。	cm em ex in mm pc px pt %	img.button {width: 100px} すべてのボタンクラスのイメージの幅を 100 ピクセルに設定します。

分類プロパティ

分類プロパティは、順序付きおよび順序なしリストのバレット、イメージ、および位置付けを定義するときに使用します。

プロパティ	説明	値	例
list-style-type	順序なしまたは順序付きリストに使用するバレットまたは番号の種類を宣言します。 list-item の表示値とともに要素に適用されます。	disc, circle, square decimal	ul {list-style-type: square} 順序なしリスト項目を四角いバレットを使って表示します。
list-style-image	順序なしリストのバレットとして使用するイメージを宣言します。 list-item の表示値とともに要素に適用されます。	src, localsrc	ul {list-style-image: url (../images/smiley.gif) } smiley.gif イメージをバレットとして使用して順序なしリスト項目を表示します。
list-style-position	リスト項目のコンテンツに関して、順序なしまたは順序付きリストのバレットまたは番号の位置を宣言します。 list-item の表示値とともに要素に適用されます。	inside, outside	ul {list-style-position: outside } ぶら下げインデントを作成します。 ul {list-style-postion: inside } バレットと 2 行目のテキストを左揃えにします。
list-style	list-style プロパティの簡略表現。	<list-style-type> <list-style-image> <list-style-position>	ol {list-style: decimal inside} 順序付きリストを番号数字が内側で揃えられるように表示します。

XHTML Mobile Profile リファレンス バージョン 1.0

目次

本書について

Openwave SDK

対象読者

表記規則

コード例

関連資料

SDK

WML

HDML

技術サポート、その他のリソース

はじめに

XHTML-MP のモジュール

モバイルサービスの設計

XHTML-MP のマークアップ規則

スタイルガイド

カラー

スタイルシートの使い方

<link> 要素の使い方

<style> 要素の使い方

スタイル属性の使い方

例

要素と属性

コメント

構文

<!DOCTYPE>

<a>

構文

属性

例

<a> 要素

<abbr>

構文

属性

<acronym>

構文

属性

<address>

構文

属性

例

<address> 要素

<b>

構文

属性

例

<b> 要素

<base>

構文

属性

例

<base> 要素

<big>

構文

属性

例

<big> 要素

<blockquote>

構文

属性

例

<blockquote> 要素の表示

<body>

構文

属性

例

<br>

構文

属性

例

<caption>

構文

属性

例

<cite>

構文

属性

例

<cite> 要素

XHTML Mobile Profile
リファレンス

バージョン 1.0