携帯サイトを作る際、キャリアの違いや端末の種類によって仕様が異なるため、なかなかXHTML化に踏み切れない方も多いのではないかと思います。
特に個人でホームページを作っている方やアフィリエイトサイトを運営している方にとっては、情報源がネット上だけで「具体的にどうやったらいいのか分からない」のではないかと思います。
実際にモバイルサイト制作の仕事に携わっている人でさえ、日々手探り状態で模索しながらやっているのが現状です。なぜなら、全てのキャリアの全端末を１００％完璧にカバーする方法が無い上に、日々端末や技術が進化しているからです。
ここでは、HTMLで記述した携帯サイトをXHTML化する方法を解説します。実際のソースを、どこがどのように違うのかを見る事で、今後携帯サイトをXHTMLで作る際に迷わない基礎知識を身に付けることが目的です。
HTMLとXHTMLを比較する
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で記述しなおしたバージョンです。実際のページを確かめる場合は、サンプルページを開いて下さい。
<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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では次のように終了させる必要があります。
<br />
<img />
<hr />
スタイルシートが効かない機種の対策
auでは「float」が無効になる端末があるため、「align」属性も指定します。
<img src="/images/sample_icon50.gif" alt="" style="float:left;" align="left" border="0" />
CSSのプロパティが無効になってしまう端末が存在する場合には、上記のimgタグ同様に念のため属性も一緒に記述しておきます。
<br style="clear:both;" clear="all" />
携帯サイトリファレンス
| 項目 | 概要 |
|---|---|
| 携帯サイトの基礎知識 | 携帯サイトを作る時に押さえておくべきポイント |
| 携帯サイトの基本的な作り方 | 携帯サイトで使えるタグは限られているので有効に使いましょう |
| HTMLをXHTML化する | 携帯サイトをHTMLからXHTML化する時に役立つ知識 |
| 3キャリア対応のXHTML携帯サイト | 携帯3キャリア対応の共通ページをXHTMLで作る方法 |
| 携帯サイトのフォントサイズ指定 | 携帯サイトで文字の大きさを決める際のコツを紹介 |
| 携帯サイトの見出し | 画像を使わなくてもできる携帯サイトの見出しサンプル |
| 文字入力モードの指定 | 文字入力が必要なフォームを設置する際の初期値を制御する方法 |