digilog.blog

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

2008/10/29(水)
XHTML
携帯サイトのページを作る場合、キャリアの違いや端末の種類によって、表示にかなりの差が出て来るので、なかなかXHTML化に踏み切れない人が多いと思います。

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

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

ここでは、HTMLで記述した内容と同じ見え方のウェブページを、XHTMLで記述する場合、どこがどのように違うのかを見る事で、今後携帯サイトをXHTMLで作る際に迷わない基礎知識を身に付けたいと思います。

実際に、XHTMLで凝った表現をする前に自分が繰り返し行った練習なので、効果的だと思います。
HTMLとXHTMLを比較する

■HTMLで記述した例 > 確認

scan_html20081029

<!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="images/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="images/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="images/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="images/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で記述した例 > 確認
scan_html20081029
<?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 content="携帯,サンプル" name="keywords" />
<meta content="携帯サイトのサンプルです。" name="description" />
<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 style="color:#000000; background-color:#ffffff;" text="#000000" bgcolor="#ffffff" link="#0000ff" vlink="#0000ff" alink="#0000aa">
<div style="text-align:center;"><img src="images/logo.gif" alt="TOP-LOGO" /></div>
<div style="font-size:xx-small; text-align:center;">携帯サイトのサンプルだよ!</div>

<div style="display:-wap-marquee; background-color:#333333;"><span style="color:#ffffff; font-size:xx-small;">マーキーで動かすよ★ ケータイで見ないと動かないよ★</span></div>

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

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

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

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

<div style="color:#999999; text-align:center;">………………………</div>
<div style="font-size:xx-small; text-align:center;">また広告枠かよ☆もういいよ</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:xx-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="color:#666666; font-size:xx-small; text-align:center;">- FOOTER -</div>
</body>
</html>


上記がHTMLで記述した携帯サイトのレイアウトをXHTML化したものです。タグの属性とCSSのプロパティの関係を良く見て、自分なりに色々といじってみることが大事です。

押さえておくポイント

<br>・<img>・<hr>などの空要素は、HTMLでは終了タグは必要ありませんが、XHTMLでは次のように終了させる必要があります。
<br />
<img />
<hr />

auでは「float」が無効になる端末があるため、「align」属性も指定します。
<img src="images/p50img.gif" alt="" style="float:left;" align="left" border="0" />
CSSのプロパティが無効になってしまう端末が存在する場合には、上記のimgタグ同様に念のため属性も一緒に記述しておきます。
<br style="clear:both;" clear="all" />
フォントサイズを変える場合、端末によって変化の度合いが異なることを頭に入れておく。
docomoの場合
小 … xx-small~small
中 … medium
大 … large~xx-large
auやSoftbankには5段階のものもある。


ここまできて、やっと携帯サイト用のXHTMLを覚えてきたと思ったら、こんどはdocomoで正しく表示されないなどの壁にぶつかると思います。

その件に関しては別記事で詳しく説明するとして、まずは「どこを、どういじれば、どう変わる」という基礎的な部分を繰り返しやって、慣れることが大事だと思います。

■続き
携帯サイト用XHTMLテンプレート≫
■コメント
コメント投稿
URL:
コメント:
PASS:
秘密: 管理人のみに公開
 

プロフィール

管理人:LOSTMAN
東京でWebディレクターをやっています。独学で楽しみながら興味のあることを投稿していきます。

タグキーワード

関連サイト

HTML講座
CSS講座
SEO講座
無料素材・画像
HOME
[ FC2 ID ]