携帯サイトの基本的な作り方

携帯サイトの基本的な作り方は、「一般的に普及している端末スペックに合わせて作る」ことになります。一度携帯サイトを作ってみると一定のパターンがあることに気が付きます。慣れてしまえばとても簡単にページを作ることができるようになるでしょう。

携帯サイトで使うHTMLタグのパターン

携帯サイトで良く見かけるHTMLの記述パターンです。簡単なページであれば、これらを組み合わせるだけで七~八割でき上がってしまいます。

HTML
<center>センタリングする</center>
<div align="center">センタリングする</div>
<div align="left">左寄せ</div>
<div align="right">右寄せ</div>
<font color="#FF0000">文字に色をつける</font>
<font size="1">文字を小さくする(端末によって大きさが異なる)</font>
<font size="5">文字を大きくする(端末によって大きさが異なる)</font>
<blink>文字を点滅させる</blink>
<marquee>流れる文字</marquee>
<img src="image.jpg" alt="画像の表示">
<a href="index.html">他のページへリンクする</a>
<hr>(仕切り線を引く)

上記のソース一行一行を「パーツ」として捉え、状況に応じて組み合わせて使っていくだけで携帯端末で見ることができるWebページが出来上がります。次に紹介するのは、組み合わせの一例です。

HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>携帯サイト</title>
<meta content="キーワード,キーワード" name="keywords">
<meta content="説明文を記述しましょう。" name="description">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#0000FF">
<marquee bgcolor="#000000">
<font color="#FFFFFF" size="1">マーキーで流れる文字は全角で32文字(64バイト)まで</font></marquee>

<div align="center">
<img src="sample_img/logo.gif" alt="タイトル画像"></div>

<hr>
<div>
テキストテキストテキストテキスト。<br>
<br>
テキストテキストテキスト。テキストテキストテキスト。<br>
<br>
テキストテキストテキストテキスト。
</div>

<hr>
<div align="center">
フッター</div>

</body>
</html>

上記ソースと同じサンプルページを確認する→サンプル

いかがでしょうか。「携帯サイト」を作るのは以外と簡単なようです。可能であれば自分が使っているキャリア以外の端末で、どのように表示されるのか確かめてみましょう。

携帯サイトリファレンス

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