XHTML BasicとCSS Mobile Profileを徹底マスターする

		＠IT｜＠IT情報マネジメント｜＠IT自分戦略研究所｜ QA＠IT｜イベントカレンダー
		Loading

　＠IT > Master of IP Network > Mobile Connection > XHTML BasicとCSS Mobile Profileを徹底マスターする

XHTMLで変わるモバイルコンテンツの世界(3)
XHTML BasicとCSS Mobile Profileを
徹底マスターする

佐藤　崇
2002/2/13

今回のおもな内容
XHTML Basicで使用できるタグ
CSS Mobile Profileを徹底マスター

前回「XHTML Basicを使ってWAP 2.0対応に挑戦する」では、XHTML Basicをベースにした簡単なWAP 2.0対応コンテンツを作成してみた。今回は、XHTML BasicとCSS Mobile Profileについて、より詳しい仕様を解説していく。

		XHTML Basicで使用できるタグ
		XHTML Basicで使用できるタグ

　XHTML Basicで使用できるタグを、タグ別に細かく解説しよう。

■ページ全体関連タグ

<html>

　XHTMLで構造上最も上位に位置するこのタグでは、アトリビュートの「xmlns=""」で使用するDTDに関する設定、「xml:lang=""」で使用言語の設定がそれぞれできる。ただし、これらはすでにXML宣言文部分で設定している内容なので、特に使用する必要はない。

<head>、<body>

　CHTMLやHTMLと同様、ページに関するさまざまな情報を規定するオブジェクトが入る場所が<head>であり、<body>には実際に表現されるオブジェクト（要素）が入る。<body>ではHDMLでは規定できなかった色（※注）、背景画像に関する設定が可能。設定方法はHTMLとほとんど変わりはない。

※注
　色指定に関してのルール（今後XHTML内ソースに記述する場合も、CSSで記述する場合も共通）にて注意すべき点としては、16進数表記ができるほか、以下の名称で指定することも可能だ（色の名称指定に関しては大文字・小文字どちらを使用しても構わない）。

Black（#000000）
Green（#008000）
Silver（#C0C0C0）
Lime（#00FF00）
Gray（#808080）
Olive（#808000）
White（#FFFFFF）
Yellow（FFFF00）
Maroon（#800000）
Navy（#000080）
Red（#FF0000）
Blue（#0000FF）
Teal（#008080）
Purple（#800080）
Fuchsia（#FF00FF）
Aqua（#00FFFF）

<style>

　スタイルシートを用いて、オブジェクトの表現などを詳細に設定するためのタグ。外部ファイルを呼び出す場合と、<style>～</style>内に直接書き込む場合とで記述方法が異なる。<link>タグを使用する場合もある。詳細については以下の「CSS Mobile Profile徹底マスター」の章を参考にしてほしい。

<title>

　タグとして<title>を使用すると、ページ全体のタイトルを定義できる。「title」に関しては各オブジェクトのアトリビュートとしても設定することができる（その場合は各要素に関するタイトル・説明のようなものと考えればよい）。<title>で指定した文字列をお気に入りやページ自体の名称としてWebブラウザに認識させることが可能だ。

<meta>

　規定したい内容を「http-equiv=""」「name=""」で規定し、その値を「content=""」に書くのがベースとなる。「http-equiv=""」で指定する部分は、HTTPヘッダに関連する部分となる。よく使用する値としてはキャッシュコントロールなどがあり、これは前回説明した。「name=""」で指定できるものは、検索エンジンのロボットに対する設定やページ管理情報などだ。値としては「author、description、keywords、generator、revised、others」などがある。検索エンジンのロボットに対する設定以外は、XHTML作成用オーサリングソフトなどを使用しない限りは、頻出する機能ではないだろう。

<meta http-equiv="content-type" 
            content="text/html;charset=x-sjis" />

            <meta name="keywords" content="HDML,EZweb,KDDI,WAP" 
            />

            <meta name="Description" content="EZweb対応サイト" 
            />

※まとめて記述はできない。1つ1つの設定を1つの<meta>タグを使用して定義していく。

HDML、HTMLと同様のコメントタグ。「」までの表記部分やタグなどの命令がすべてコメントアウトされ、Webブラウザには表示されない。

■テキスト関連タグ

<br>

　改行タグ。いままでと使用方法は変わらない。ただしHDMLにあった<line>、<wrap>タグがXHTMLには一切存在せず、その扱いはHTMLと同様となる。また、HDMLで厄介の種であった<br>による改行ごとに必要だった装飾などの関連タグは、<br>が入った後の行で指定しなくても無効になることはなくなった（便利になった）。なお、<br>自体は空要素なので文法的には<br />と記述するのが正しい。またHTMLと同様、回り込みの指定（解除など）ができるようになった。

<img src="logo.gif" 
            align="right" />

            画像が右寄せになりました。

            <br clear="all" />

            右寄せを解除しました。

※「all」以外に「right、left」を指定できる

<p>

　段落（パラグラフ）タグ。段落要素を定義できる。IEのようなPC用のWebブラウザでは段落と段落の間は2回改行が入った形で表現されるが、KDDIのブラウザでは、表示上では<br>が1つの場合と変わらない。<p>～</p>と<br>の表現自体は特に違いはない。

<h1>～<h6>

　見出し要素。WAP2.0対応端末では、保証されていないが、複数の大きさを持つフォント設定ができる端末が存在する（現在は複数のフォントサイズが表示できる端末でも「大・小」の2つのものが主力のようだ）。見出しのランクに応じた大きさで表示される場合がある。また「見出し」タグなので、その使用前後では自動的に改行される。

<font>

　このタグでは色に関する指定ができる（スタイルシートで指定するタグとしては使用できうる）。通常使用できる文字の大きさに関しては、現在は見出しタグでのみ使用することができる。

<u>

　要素に下線を引くことができる。ただしリンク処理と混同しやすいので、筆者としてはお勧めできない。

<marquee>

　要素内の文字列をスクロールさせることができる。HDMLで使用できた<line>タグと機能的には同様で、XHTML Basicのタグとして定義されているものではないが、WAP 2.0を実装するKDDIがiモードとの互換性のために実装した拡張タグと考えられる。「behavior=""」で動作定義を行い（動作する回数や種類を定義）、「direction=""」で動作方向を定義する。使用できるアトリビュートは、基本的にIEやiモードに実装されている<marquee>と同じ。背景色を指定したりもできる。

<marquee behavior="scroll" 
            direction="right" bgcolor="#ffffff" loop="1" 
            scrollamount="2">

            <font color="#ffffff">ようこそ私のホームページへ</font>

            </marquee>

<blink>

　文字列を点滅させることが可能。これも、XHTML Basicのタグとして定義されているものではないが、KDDIがiモードとの互換性のために実装した拡張タグと考えられる。

<center>

　HTMLやXHTML上においては、W3Cから事実上の廃止が決定されているいわゆるセンタリングタグだが、CHTMLなどの動向に配慮して、KDDIが拡張したうえで残したというもの。本来ならばスタイルシートを使用して制御すべき、とされる。

<pre>、<plaintext>

　両方とも要素内の文字列をそのまま表示するというもの。改行コードやスペース（\nや\t）などが表示上でもそのまま反映される。<plaintext>に関してはタグ自体もそのまま表示できる。ソースを表示したりするときに便利。iモードサイトなどでは改行のために<br>タグを省略し、利用者に少しでも無駄な文字列をダウンロードさせないために使用することも多い。

<div>、<span>

　要素を自由に定義したいときなどに使用。通常はDHTMLを使い回したり、CSSを使用するときに使う。<div>はブロックレベルで制御するものなので、その前後で自動的に改行される。<span>はインラインで使用するもので、細かく定義できる（レイアウト上も問題にならない）。

<hr>

　いわゆるヘアラインタグ。オブジェクトとして水平線を設置できる。「align=""」「size=""」「width=""」で大きさやレイアウトを指定できる。ただiモードと異なり、「color=""」で色が直接指定できないので注意。また空要素であることに留意したい。

■テーブル関連タグ

　モバイル向けコンテンツ記述言語としては、初めて仕様として組み込まれたテーブル関連のタグについてまとめて紹介する。カレンダや複雑な表記に威力を発揮するタグだが、狭い画面遷移のどの部分で効果的に使用するか、まだ試行錯誤の段階にあるのも事実だ。

<table>、<tr>、<td>、<caption>

　<table>は、テーブル（表）自体の最も上位に位置するタグ。この下位にはテーブルの行を定義する<tr>（table row）、セルを定義する<td>（table data）、<th>（table header）を配置できる。またテーブル自体の脚注を<caption>で配置できるのはHTMLと同じだ。ただし、<table>の中に<table>を入れる入れ子構造的な使用ができないことに注意したい。ただ、モバイルでありながらcellpadding、cellspacing、borderをきちんと区別して定義できるのには感服。基本的に<table>、<tr>、<th>、<td>、<caction>にて使用できるアトリビュートは、HTMLとまったく同じ。

<table width="90" 
            border="1" cellpadding="0" cellspacing="0">

            <caption align="botton">

            表サンプル

            </caption>

            <tr>

            <th bgcolor="#ff0000">1:</td>

            <td>目次</td>

            </tr>

            <tr>

            <th rowspan="2">2:</td>

            <td align="center">内容A</td>

            </tr>

            <tr>

            <th>3:</td>

            </tr>

            </table>

■リンク関連タグ

<a>

　アンカータグ。ドキュメントやイメージ画像などにリンクを張ることができる（HDMLと異なり画像自体に直接リンクを張ることができるようになった。ただし、XHTMLでは、HDMLで使用できたアクティビティが使用できないことに注意。リンクの行き先と戻り値は、すべてURI（URL）で規定していく必要がある）。

HDMLでは画像に直接リンクを張ること自体は文法上エラーではないが、ブラウザが画像のみを扱う形でデータを表示することができないため、例えば「http://imgburi.net」などのツールを使用する必要があった。またURLの一部に2バイトの文字列が入った、いわゆる国際規格としてはイレギュラーな記述をしても、ブラウザが対応してくれるようになった。

　またアクセスキーも使用できる。従来アクセスキーは、HDMLでは数字の1～9のキーのみ使用できたが（ほかのキーは文法的には正しくてもブラウザの挙動がおかしくなり、使用できなかった）、今後は「*、#」の記号まで含めてすべてのアクセスキーが使用できるように改善された。また一部のJ-スカイ対応端末ではアクセスキーを使用すると、その行で強制的に表示されていたアクセスキーに対応する番号表示がされなくなる（HDMLで記述したページをWAP2.0端末で表示すると問題なく表示されるが、これをXHTMLで書き直すと表示されなくなる）。

　また従来<a>でアクセスキーを使用した場合など、勝手に<a>タグの前後で改行されるなどの表示上予測しない仕様があったようだが、これも改善されている。端末によって表示されていたリンク前後の「[]」などの記号も、リンク自体への下線に変更され、より直感的となった。

　ただし前回も触れたが、<a>要素内に<br>、<img>が入ると、そこでいったん<a>タグが分断されるような形で表示されるので注意したい。

<base>

　<base>は、ページ全体のリンクやデータ関連の定義をするためにヘッダ部分で用いられるものだ。フレームのターゲットウィンドウを定義したり、相対URLのページ全体での設定などに用いられる。相対URLによるリンク先の記述とこのタグを使用することで、重複するURLを省略して記述することが可能となり、パケットを圧縮した記述をしたいときなどに便利だ。このタグはiモードでも利用できる。

		CSS Mobile Profileを徹底マスター
		CSS Mobile Profileを徹底マスター

　さて、次に、モバイル向けのCSS（Cascade Style Sheet：カスケード・スタイルシート） Mobile Profileを徹底的に解説しよう。WAP 2.0で使用できるスタイルシートはCSS方式で、これ以外のJavascript Style Sheetなどは使用できない。

　これまでの説明と重複する部分もあるが、CSSでは実装に3種類の方法を取ることが可能だ。

インラインスタイル
　要素を定義するタグに、直接「style=""」アトリビュートを使用して書き込むパターン。タグのアトリビュートを使用して直接スタイルを定義しているので、スタイルシートを使用しているというよりは、タグの延長線上で記述している感覚に近い。そのため使用するのに抵抗がないのではないだろうか。ただし、おのおのの要素で逐一スタイルを定義しなければならず、その分無駄も多くあまりお勧めできない。
ドキュメントレベルのスタイル
　スタイル情報をヘッダ部分の<style>～</style>部分にまとめて定義し、タグ要素単位でスタイルを指定したり、「id=""」「class=""」を指定し、その部分から引用するように指定する方法。ただしページ数が多くなるモバイルサイトの場合は、この場合でも逐一各ページのヘッダ部分に<style>～</style>を記述する必要がある。そのため、効率的とはいい難い。
アウトラインスタイル
2のスタイル情報を外部ファイル化したもの。

　CSSでは、「カスケード」という名前が示すとおり（カスケードとは滝の意味だが、これはさまざまな設定方法を段階的に行う設定ができるという意味）、この3種類の記述方法を混在させることができる。そして重複する場合、該当するタグに近いところが優先される。すなわちインラインスタイルが最も優先される。次にclassによって順番が定まる。さらに、詳細度が高いものが優先され、さらに直近に設定されたものが優先されるようだ。

　「id=""」「class=""」はXHTMLの各要素において使用できるアトリビュートだ。ともに要素IDを示すものと考えればよい。そのために、それぞれのタグにそれ相応の数だけ定義していかなければならなず、煩雑性という問題をはらんでしまう（これでは複雑になっただけで、スタイルシートを導入したメリットがない）。

　そこで個別のタグに割り付けずに、見え方のみを設定する方法を用いる。これを一般クラスと呼び、一般クラスとして設定することで、各種のタグに自由に同じスタイルを割りつけることができる。タグでは「class=""」として関連付けを行う。記述の方法はタグセレクタを記述せず、"."からクラス名を記述する。

.toptitle {color:red;text-align:center}

　またほとんどのタグは、ID設定によって、固有のIDを割り付けることができる。ID設定はスタイルクラスと同様に設定するが、タグセレクタとIDとの間を"#"で仕切る。なお、IDはページ中でただ1つのものでなければならないので、1カ所でのみ使用できる（Netscape 4ではタグセレクタを記述したときにスタイルを認識できなかった）。

#toptitle {color:red;text-align:center}

■スタイルのルール

　スタイルのルールには、HTMLのルールと異なる点がある。まず、スタイルルールではタグ名を認識するためのタグセレクタを、タグとは異なり、「<」と「>」を抜いた状態で設定する。さらに、中括弧「{}」を用い、「property」と「value」を「:」コロンで仕切って挿入する。また、複数のpropertyを入れるには「;」セミコロンで区切る。valueの設定に複数の値を入れる場合は、半角のスペースでつなぐとよい。

TAG_SELECTER {property1:value1;property2:value2_1 
            value2_2 ....}

※タグセレクタにはスタイルで指定したいタグを記述するが、タグ以外にもclassやidを使用してさらに細かく指定することもできる。

●マルチプルセレクタ
　複数のタグセレクタで同じプロパティを定義する場合は、カンマで区切ってタグセレクタを設定する。以下のように設定するとH1、H2、H3の文字が赤色になる。

H1,H2,H3 {color:red}

　そのほか、疑似クラス、ミックスクラスなどもCSS自体では使用できるようになっているが、Mobile Profileにおいては使用できない。

疑似クラス	`A:active {color:green;font-weight:bold}`
ミックスクラス	`A.act:visited {color:red}`

●3つのスタイルシート
　これらの原則をもとにして、3つのスタイルシートの記述をそれぞれ見てみよう。

(1)インラインスタイル

<p style="color:red;bgcolof:black">スタイルシート</p>

(2)ドキュメントスタイル

<STYLE>

            p {color:red;font-size:90pt}

            </STYLE>

            ----------途中省略-----------

            <p STYLE="color:red;bgcolof:black">スタイルシート</p>

　インラインの場合、タグに直接書き込むためセレクタと呼ばれるスタイル情報を制御する部分が必要ない（この場合だとpの部分）。

(3)外部スタイル

　すべてのページを統一したレイアウトにしたい場合に、1つのスタイルファイルをすべてのページから呼び出すことで、簡単に実現することができる。このようにスタイルファイルを作って、HTMLファイルの中に読み込む方法を外部スタイルシートと呼ぶ。外部スタイルについては、リンク（link）とインポート（import）の2種類の方式がある。

インポート方式
　外部スタイルシートを利用する方法の1つはインポートだ。STYLEタグの中で特別なコマンド"@import"を使用することでインポートが可能になる。@importを利用する場合は外部スタイルシートの存在するファイルへのパスを設定する。書式は次の通り。

@import url("外部スタイルシートのファイルのパス");

@importは<STYLE>～</STYLE>の中、または外部スタイルファイルを読み出す場合にはそのファイルの中の本来のスタイルルールの前に置くのが前提となる。

<STYLE> @import url（"http://hoge.co.jp/style/style.css"）; H1 {color:red;} </STYLE>
リンク方式
　もう1つの方法がリンクだ。リンクでは、スタイルシートファイルのURLを"href"で設定する。また、設定したファイルと、ソース（HTMLファイル）との関係を"rel"で設定する。ここではrel="stylesheet"としてスタイルシートであることを設定している。また、typeの設定でMIMEタイプとして"text/css"を設定する。

<link href="http://hoge.co.jp/style/style.css" rel="stylesheet" type="text/css">

※リンクとインポートの違い
　一見すると、リンクとインポートには違いがないように見える。実はスタイルを1つだけ定義する場合には、どちらを使っても同じ結果になるのだ。ところが、1つのドキュメントに複数のスタイルを次々にリンクした場合、またはインポートした場合には事情が変わってくる。複数のリンクでは、次々と定義を上書きしていってしまう。これに対して、インポートではスタイルはマージされる。設定したスタイルで矛盾が発生する場合は、より後方で設定されたスタイルが使用される。

　従来、Netscape 4がインポートをサポートしなかったので、外部スタイルシートの記述はもっぱらリンク方式が主流となってしまったが、本来は@importで記述すべきだと思われる。

※コメント
　HTMLと同様にスタイルシート内にコメントも記述できる。しかし、コメントの書式は異なり、"/*"で始まり、"*/"で終わる部分をコメントとして認識する。

/* コメント文です。*/

　今回は、XHTMLのタグやCSS Mobile Profileの仕様を細かく解説した。次回は、KDDI独自の機能、具体的にはマルチメディア関連の拡張機能（ダウンロード機能など）を中心に取り上げてみたい。

Profile

佐藤　崇（さとう　たかし）
　EZweb最大の検索総合サイト「w＠pnavi」やモバイル総合コミュニティ「itokio.com（イトキオコム）」を立ち上げたBITRATING代表。WebデザインやOpenwave在籍の経験などを生かし、コンテンツ提案・作成・運営・アドバイザリ活動などを幅広く展開。自身の立ち上げたサービスの月間総PVは2500万を超える。1999年慶大卒。

「連載 XHTMLで変わるモバイルコンテンツの世界」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

＠ITトップ｜Mobile Connectionフォーラムトップ｜会議室｜利用規約｜プライバシーポリシー｜サイトマップ