ウェブランサー

携帯サイトをHTMLからXHTML化する時に役立つ知識

携帯サイトを作る際、キャリアの違いや端末の種類によって仕様が異なるため、なかなかXHTML化に踏み切れない方も多いのではないかと思います。

特に個人でホームページを作っている方やアフィリエイトサイトを運営している方にとっては、情報源がネット上だけで「具体的にどうやったらいいのか分からない」のではないかと思います。

実際にモバイルサイト制作の仕事に携わっている人でさえ、日々手探り状態で模索しながらやっているのが現状です。なぜなら、全てのキャリアの全端末を100%完璧にカバーする方法が無い上に、日々端末や技術が進化しているからです。

ここでは、HTMLで記述した携帯サイトをXHTML化する方法を解説します。実際のソースを、どこがどのように違うのかを見る事で、今後携帯サイトをXHTMLで作る際に迷わない基礎知識を身に付けることが目的です。

HTMLとXHTMLを比較する

HTMLで記述した例

まずはHTMLで記述したサンプルページをご覧下さい。
サンプルページ

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>【HTML】携帯サンプルサイト</title>
<meta content="携帯,サンプル" name="keywords">
<meta content="携帯サイトのサンプルです。" name="description">
<link rel="alternate" media="handheld" href="alternate_page.htm">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#0000FF">
<div align="center">
<img src="sample_img/logo.gif" alt="TOP-LOGO"></div>
<div align="center">
<font size="1">携帯サイトのサンプルだよ!</font></div>

<marquee bgcolor="#333333">
<font color="#FFFFFF" size="1">マーキーで流れる文字!マーキーで文字を動かすよ!</font></marquee>

<div align="center">
<font size="1">↓広告枠とか作ってみるよ↓</font></div>
<div align="center">
<a href="###">おすすめリンクだよ<br>超おすすめなのだよ</a></div>

<div align="center"><font color="#999999">………………………</font></div>
<div>
<a href="###"><img src="sample_img/p50img.gif" alt="" border="0" align="left"></a>
<font color="#0066FF" size="1">▼コンテンツ1</font><br>
<font size="1">説明だよ!説明文が入るよ!説明だよ!説明文が入るよ!説明だよ!説明文が入るよ!</font><br clear="all">
</div>

<div align="center"><font color="#999999">………………………</font></div>
<div>
<a href="###"><img src="sample_img/p50img.gif" alt="" border="0" align="left"></a>
<font color="#0066FF" size="1">▼コンテンツ1</font><br>
<font size="1">説明だよ!説明文が入るよ!説明だよ!説明文が入るよ!説明だよ!説明文が入るよ!</font><br clear="all">
</div>

<div align="center"><font color="#999999">………………………</font></div>
<div>
<a href="###"><img src="sample_img/p50img.gif" alt="" border="0" align="left"></a>
<font color="#0066FF" size="1">▼コンテンツ1</font><br>
<font size="1">説明だよ!説明文が入るよ!説明だよ!説明文が入るよ!説明だよ!説明文が入るよ!</font><br clear="all">
</div>
<div align="center"><font color="#999999">………………………</font></div>
<div align="center">
<font size="1">また広告枠かよ☆もういいよ</font></div>
<div align="center"><a href="###">おすすめリンクだよ<br>超おすすめなのだよ</a></div>

<hr color="#999999">
<div>
<font color="#333333">■</font>カテゴリ別MENU<br>
<font color="#333333">├</font><a href="###">メニュー001</a><br>
<font color="#333333">├</font><a href="###">メニュー002</a><br>
<font color="#333333">├</font><a href="###">メニュー003</a><br>
<font color="#333333">├</font><a href="###">メニュー004</a><br>
<font color="#333333">└</font><a href="###">メニュー005</a></div>

<hr color="#999999">
<div>
<font color="#333333" size="1">■</font><font size="1">INFO</font><br>
<font color="#333333" size="1">├</font><font size="1"><a href="###">サイトについて</a></font><br>
<font color="#333333" size="1">├</font><font size="1"><a href="###">友達に教える</a></font><br>
<font color="#333333" size="1">└</font><font size="1"><a href="###">お問合せ</a></font></div>

<hr color="#999999">
<div align="center">
<font color="#666666" size="1">- FOOTER -</font></div>
</body>
</html>

XHTMLで記述した例

上記の内容をそのままXHTMLで記述しなおしたソースと比較してみて下さい。
サンプルページ

XHTML
<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>【XHTML】携帯サンプルサイト</title>
<meta name="keywords" content="携帯,サンプル" />
<meta name="description" content="携帯サイトのサンプルです。" />
<link rel="alternate" media="handheld" href="alternate_page.htm" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<![CDATA[
 a:link{color: #0000FF;}
 a:visited{color: #0000FF;}
 a:focus{color: #0000AA;}
]]>
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#0000FF" alink="#0000AA" style="color:#000000; background-color:#FFFFFF;">
<div style="text-align:center;">
<img src="sample_img/logo.gif" alt="TOP-LOGO" /></div>
<div style="text-align:center; font-size:x-small;">
携帯サイトのサンプルだよ!</div>

<div style="display:-wap-marquee; background-color:#333333;">
<span style="color:#FFFFFF; font-size:x-small;">マーキーで流れる文字!ケータイで見ないと動かないよ!</span></div>

<div style="text-align:center; font-size:x-small;">
↓広告枠とか作ってみるよ↓</div>
<div style="text-align:center;">
<a href="###">おすすめリンクだよ<br />超おすすめなのだよ</a></div>

<div style="text-align:center; color:#999999;">………………………</div>
<div>
<a href="###"><img src="sample_img/p50img.gif" alt="" style="float:left;" align="left" border="0" /></a>
<span style="color:#0066FF; font-size:x-small;">▼コンテンツ1</span><br />
<span style="font-size:x-small;">説明だよ!説明文が入るよ!説明だよ!説明文が入るよ!説明だよ!説明文が入るよ!</span>
<br style="clear:both;" clear="all" />
</div>

<div style="text-align:center; color:#999999;">………………………</div>
<div>
<a href="###"><img src="sample_img/p50img.gif" alt="" style="float:left;" align="left" border="0" /></a>
<span style="color:#0066FF; font-size:x-small;">▼コンテンツ1</span><br />
<span style="font-size:x-small;">説明だよ!説明文が入るよ!説明だよ!説明文が入るよ!説明だよ!説明文が入るよ!</span>
<br style="clear:both;" clear="all" />
</div>

<div style="text-align:center; color:#999999;">………………………</div>
<div>
<a href="###"><img src="sample_img/p50img.gif" alt="" style="float:left;" align="left" border="0" /></a>
<span style="color:#0066FF; font-size:x-small;">▼コンテンツ1</span><br />
<span style="font-size:x-small;">説明だよ!説明文が入るよ!説明だよ!説明文が入るよ!説明だよ!説明文が入るよ!</span>
<br style="clear:both;" clear="all" />
</div>

<div style="text-align:center; color:#999999;">………………………</div>

<div style="text-align:center; font-size:x-small;">
また広告枠かよ☆もういいよ</div>
<div style="text-align:center;">
<a href="###">おすすめリンクだよ<br />超おすすめなのだよ</a></div>

<hr style="border-color:#999999; border-style:solid;" />
<div>
<span style="color:#333333;">■</span>カテゴリ別MENU<br />
<span style="color:#333333;">├</span><a href="###">メニュー001</a><br />
<span style="color:#333333;">├</span><a href="###">メニュー002</a><br />
<span style="color:#333333;">├</span><a href="###">メニュー003</a><br />
<span style="color:#333333;">├</span><a href="###">メニュー004</a><br />
<span style="color:#333333;">└</span><a href="###">メニュー005</a></div>

<hr style="border-color:#999999; border-style:solid;" />
<div style="font-size:x-small;">
<span style="color:#333333;">■</span>INFO<br />
<span style="color:#333333;">├</span><a href="###">サイトについて</a><br />
<span style="color:#333333;">├</span><a href="###">友達に教える</a><br />
<span style="color:#333333;">└</span><a href="###">お問合せ</a></div>

<hr style="border-color:#999999; border-style:solid;" />
<div style="text-align:center; color:#666666; font-size:x-small;">- FOOTER -</div>
</body>
</html>

とにかくタグをいじってみよう

上記のサンプルページを元に、HTMLタグ、属性、スタイルシートがどのように使われているのか、じっくり比較してみて下さい。

使われている要素をパーツに分けてみると、数種類のパターンに分類することができます。自分なりに良く使うパターンをストックして、使いまわしたり組み合わせたりしながら、オリジナルのページを作ってみましょう。

HTMLからXHTMLへ変換する際のポイント

終了タグ

<br><img><hr>などの空要素に対して、HTMLでは終了タグを記述する必要はありません。しかし、XHTMLでは次のように終了させる必要があります。

XHTML
<br />
<img />
<hr />

スタイルシートが効かない機種の対策

auでは「float」が無効になる端末があるため、「align」属性も指定します。

XHTML
<img src="images/p50img.gif" alt="" style="float:left;" align="left" border="0" />

CSSのプロパティが無効になってしまう端末が存在する場合には、上記のimgタグ同様に念のため属性も一緒に記述しておきます。

XHTML
<br style="clear:both;" clear="all" />

携帯サイトリファレンス

携帯サイトの基礎知識 携帯サイトを作る時に押さえておくべきポイント
携帯サイトの基本的な作り方 携帯サイトで使えるタグは限られているので有効に使いましょう
HTMLをXHTML化する 携帯サイトをHTMLからXHTML化する時に役立つ知識
3キャリア対応のXHTML携帯サイト 携帯3キャリア対応の共通ページをXHTMLで作る方法
携帯サイトのフォントサイズ指定 携帯サイトで文字の大きさを決める際のコツを紹介
携帯サイトの見出し 画像を使わなくてもできる携帯サイトの見出しサンプル
文字入力モードの指定 文字入力が必要なフォームを設置する際の初期値を制御する方法
SNSをフォロー
コンテンツ
LINK