ホームページ作成/携帯・スマートフォンサイト作成入門

携帯サイトの作り方 第1回 作成方法の基礎(2ページ目)

携帯電話などから閲覧できる「ケータイサイト」を作ってみましょう。携帯端末に搭載されているブラウザに関するいくつかの制約を押さえておけば、あとは簡単に作成できます。まずは、携帯サイト作成の基本をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

2. XHTMLでベースを作る

PC向けのウェブサイトであれば、記述には HTML4.01 や XHTML1.1 など、いくつかの言語が使えます。 文字コードも SHIFT-JIS や EUC-JP、UTF-8など、様々な規格が使えます。 しかし、携帯端末向けのウェブサイトだと、使える言語や文字コードには制限があります。

記述に使う言語は「 XHTML Mobile Profile 1.0 」

携帯サイトを作るための言語としては、以前は「CompactHTML」や「HDML」などいくつかの規格がありました。 これらは、3大キャリア各社で採用規格や仕様が異なるため、単一ページで3大キャリアすべてに対応させるのは困難です。 また、スタイルシートで装飾が記述できないなど、不便でもあります。

現在発売されている携帯端末では、3大キャリアとも「XHTML」を解釈できるので、XHTMLで記述するのが良いでしょう。 XHTMLにもいくつかの規格がありますが、この記事では「XHTML Mobile Profile 1.0」を使って記述することにします。

「XHTML Mobile Profile 1.0」であれば、3大キャリア共通のページを作成できます。 また、検索エンジンからも「携帯サイト」であると認識されます。
※携帯端末向けのXHTMLとしては「XHTML Basic」がありますが、docomoが必要とするスタイルシートの記述方法が「XHTML Basic」では使えません(詳しくは後述)。 従って、現状で3大キャリア共通のページを作るには、「XHTML Mobile Profile 1.0」が最も良いでしょう。

文字コードは SHIFT-JIS

文字コードは、「SHIFT-JIS」を採用します。理由は、SHIFT-JISしか読まない端末があるためです。 作成したページは、文字コードを「SHIFT-JIS」にして保存して下さい。
※端末によっては、UTF-8やEUC-JPなどの文字コードが読めるものもありますが、SHIFT-JISしか読めない端末も多いため、SHIFT-JISで作成しておくのが良いでしょう。

携帯サイトを作るXHTMLソース(枠組み)

「 XHTML Mobile Profile 1.0 」を使って、文字コード「 SHIFT-JIS 」で記述するXHTMLソースは、以下のようになります。

<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
   <meta http-equiv="Content-Type" content="application/xhtml+xml ; charset=Shift_JIS" />
   <meta http-equiv="Content-Style-Type"  content="text/css" />
   <meta name="description" content="紹介文" />
   <title>ページタイトル</title>
</head>
<body>

(--- 本文領域 ---)

</body>
</html>

■1行目:<?xml version="1.0" encoding="Shift_JIS" ?>

XML宣言です。XHTMLで記述しているので最初にこの1行を書きます。 文字コードをSHIFT-JIS以外にした場合は、「encoding="Shift_JIS"」の部分を書き換えて下さい。 ただし、現状で携帯端末向けのサイトを作るならSHIFT-JISで作ることをお勧めします。(SHIFT-JISしか読まない機種があるため)

■2行目:<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML ~

「 XHTML Mobile Profile 1.0 」で記述していることを示すDOCTYPE宣言です。これはこのまま記述します。

■3行目:<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" ~

HTML要素と名前空間の記述です。これもこのまま記述します。
(コンテンツが日本語でない場合は「ja」の部分を修正する必要があります。)

■5行目:<meta http-equiv="Content-Type" content="application ~

MIMEタイプと文字コードを記述しています。XHTMLでは、MIMEタイプを「application/xhtml+xml」とする必要があります。 この記述は、特にdocomoの端末向けに必須です。 なお、文字コードをSHIFT-JIS以外にした場合は、「charset=Shift_JIS」の部分を書き換えます。
※docomoの端末向けには、このほか、HTTPヘッダでも正しいMIMEタイプを出力する必要があります。(次のページで解説)

■7行目:<meta name="description" content="紹介文" />

PC向けサイトと同じように、検索エンジン向けに紹介文を書いておきましょう。 必須ではありませんが、何か書いておくことをお勧めいたします。

■8行目:<title>ページタイトル</title>

タイトルは常時表示されない端末が多いですが、閲覧者がブックマークする際や、検索結果に表示される際などに使われます。 短く分かりやすいタイトルを付けておきましょう。

次に、ウェブサーバからMIMEタイプを出力する方法です。

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

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

  • 前のページへ
  • 1
  • 2
  • 3
  • 10
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます