携帯電話向け汎用サイトを作る簡易HTMLリファレンス

各キャリアの端末に対応した、携帯電話向け汎用サイトを作るためのHTMLについてまとめてみました。

ケータイサイトの記述仕様は将来的にXHTMLでその規格が統一されるという話があるものの、これまで各キャリアの対応はばらばらで、かつてのPCブラウザ戦争のような混沌の様相を呈していました。

このため、多くのサイトではキャリアに応じて表示するページを振り分けるなどの対策をしているようですが、この方法は個人で実践するにはいささか手間がかかりすぎてしまい効率がよくありません。

では、多くのキャリアに対応した携帯電話向けの汎用サイトを手間なく作るにはどうすればよいのでしょうか？

答えは単純で、シンプルなHTMLだけを使用するということです。

これにより、ある程度古い機種も含め国内ほぼ全てのキャリア端末に対応したケータイサイトを作成することができます。

以下、汎用的なケータイサイトで使用可能なタグと属性、および作成上の注意点について紹介します。

基本情報

html

HTML文書であることを宣言する

head

HTML文書のヘッダ情報を記述する

title

HTML文書のタイトルを指定する

body

HTML文書の本文領域を宣言する

bgcolor: 色(背景色)
text: 色(文字色)
link: 色(リンク文字色)

meta

HTML文書の情報を指定する
<meta http-equiv=”content-type” content=”text/html;charset=Shift_JIS” />

<!–～–>

HTMLソースにコメントを書く
コメント内に連続する「-」は使用できない

テキスト

br

文字列を改行する

p

段落を作成する

div

段落を作成する

align: 位置(left,center,right)

blink

文字列を点滅して表示する

center

文字列を中央揃えで表示する

font

文字の色や大きさを指定する

color: 色(文字色)

h1～h6

見出しの文字列を指定する

pre

タグやスペースをそのまま表示する

hr

水平線を表示する

align: width指定時の位置(left,center,right)

marquee

文字列を横方向にスクロールしながら表示する

direction: 方向(left 右→左,right 左→右)

リンク

a

他のアドレスにリンクを張る

href: (URL,mailto:メールアドレス,tel:電話番号,#名前)
accesskey: ダイレクトキーを指定する
name: 文書の特定の位置を指定する

フォーム

form

フォームを定義する

action: URL(送信先のアドレス)
method: タイプ(get,post)

input

各種インプットフォームを表示する

type=”text”

一行の文字入力フィールドを作成する

name: 名前(コントロール名)
value: 文字列(デフォルト文字列)
size: 横幅(バイト単位)
maxlenght: 最大文字数(バイト単位)

type=”submit”

送信ボタンを表示する

value: 文字列(ボタンの文字)

type=”password”

一行のパスワード入力フィールドを作成する

name: 名前(コントロール名)
value: 文字列(デフォルト文字列)
size: 横幅(バイト単位)
maxlenght: 最大文字数(バイト単位)

type=”checkbox”

チェックボックスを作成する

name: 名前(コントロール名　一つのグループに同じ名前)
value: 文字列(項目の値)

type=”radio”

ラジオボタンを表示する

name: 名前(コントロール名　一つのグループに同じ名前)
value: 文字列(項目の値)

type=”reset”

入力したデータを初期値に戻すボタンを表示する

value: 文字列(ボタンの文字)

type=”hidden”

固定文字列をCGIに送信する

name: 名前(コントロール名)
value: 文字列(固定文字列)

accesskey: ダイレクトキーを指定する

textarea

複数行入力できる文字入力フィールドを作成する

name: 名前(コントロール名)
rows: 行数
cols: 桁数

select

プルダウン式のメニューを作成する

name: 名前(コントロール名)
size: 行数(画面上に表示する項目数)

option

プルダウン式のメニューの項目を指定する

value: 文字列(項目の値)

画像

img

画像を表示する

src: URL(画像ファイルのアドレス)
alt: 文字列(説明文)

作成上の注意点

画像は、JPEG画像がiモードとSoftBankのごく一部を除くほぼすべての機種で使用できます。(残念ながらGIFはJPEGほど対応機種が多くないのでお勧めしません)

画像を使用する場合はサイズに注意が必要で、一般的に96ｘ96ピクセルに納めるのが理想的とされています。

また、HTMLファイルのサイズは5KB以下を目安にします。

HTMLファイルはシフトJISの文字コードで保存してください。(Windowsで作成したテキストファイルは基本的にこの文字コードで保存されます。)

絵文字は各キャリアでコードが統一されておらず、共通表示方法がないため使用できません。

この他、注意点等について参考になりそうなページを紹介しておきます。

表示確認

作成したページの表示確認は、各キャリアで用意されている端末エミュレータを使用するか、PCブラウザのユーザエージェントを書き換えることで行えます。

公開されているツールとその使用方法については、以下のページが参考になります。

携帯電話サイト作成ツール

ただし、サイトの公開前には必ず実機でテストするようにしましょう。

＊当記事の情報は個人的な調査によって記載したものであり、動作の保証はいたしませんのでご了承ください。

参考文献

ケータイHTMLコンパクトリファレンス

今回の記事で、HTMLタグの対応状況および解説については、こちらの書籍を参考にさせていただきました。読みやすくできており、サイト作成時には手元に置いておきたい一冊です。その他のタグ・属性の対応状況や、より詳しい解説が必要な方は購入をお勧めします。

ケータイサイト構築ガイドブック

各キャリアごとのサイト作成方法はもとより、動画・音声などのマルチメディアコンテンツや、アプリ、PHPによる動的サイトの構築まで解説されていて盛りだくさんな内容。より凝ったサイトを作りたいなら役立つかも。

追記(2007/07/27)

CodeZine：携帯シミュレータ入門（開発ツール, まとめ）
こちらのページでは沢山のケータイシミュレータが画像付きで紹介されています。

ナレッジエース