【ホームページ作成】携帯サイトの作り方 第1回 作成方法の基礎

▲携帯端末の表示確認ソフト

携帯電話などから閲覧できる「携帯サイト」を作ってみましょう。 「携帯サイト」と言っても、それほど特別な技術は必要ありません。 携帯端末のブラウザに関するいくつかの制約を押さえておけば、あとは普通のウェブサイトと同じように簡単に作成できます。

とはいえ、その「いくつかの制約」というのが少々面倒です。 例えば、docomo、au、Softbankの3大キャリアの携帯電話に搭載されているブラウザは、それぞれ様々な仕様が異なっています。 どの携帯端末でも同じように表示させるには、少し工夫が必要です。

また、単純にPC向けのHTMLと同じように記述したのでは、検索エンジンから「携帯端末向けのウェブサイト」だと認識されません。 携帯端末向けの検索結果にヒットさせるには、携帯端末向けのウェブサイトであることを示す条件を満たして作成しておく必要があります。

携帯サイトを作成するための基礎

そこで今回は、携帯サイトを作成するための基本として、
(1) 携帯サイトだと認識されるXHTMLの書き方
(2) docomo、au、Softbankの各社製端末で同じように見える装飾方法
(3) 色の加え方、画像の載せ方、リンクの作り方など、基本的な記述方法
……をご紹介いたします。
上記の点を押さえておけば、とりあえず最低限の「携帯サイト」はできあがります。

今回は、以下のようなサンプル携帯サイトを作ることを例にして、作成方法を解説します。

▲この記事で作成する携帯サイトのサンプル

このサンプル携帯サイトは、以下の場所で実際に公開していますので、お持ちの携帯端末で表示させてみて下さい。

それでは、作成方法を順番に見ていきましょう。

【携帯サイトの作り方 第1回 目次】

1. はじめに・サンプル (このページ)
2. XHTMLでベースを作る
3. HTTPヘッダでMIMEタイプを出力
4. 使える装飾方法と使えない装飾方法
5. 文字色・背景色・文字サイズなどの装飾基本
6. マーキー(流れる文字)を作る
7. サイズに気をつけて画像を掲載する
8. 通常のリンク・ページ内リンク・メール送信リンクを作る
9. ソースのまとめ

※必要な操作を順番に解説していますので、ページ順に読み進めることをお勧めいたします。
※携帯電話からの見え方を確認できる各社のソフトウェアについては、記事「実機を使わずに携帯電話からの見え方を確認」でご紹介しています。