XHTML Basicを使ったモバイルページの作り方

モバイルページ(携帯電話対応ページ)をCHTMLで作っても、どの携帯電話でも問題なく表示されます。しかし、CHTMLはCSSが使えません。やはり、携帯電話やPDA、情報家電等で共通して使える言語となるとXHTML Basicだと思います。

XHTML Basic 1.0とは

携帯電話、PDA、情報家電等で共通して使える言語がXHTML Basic 1.0です。しかし、hrやb、big、small、sub、supのようなタグは使えません。その代わりにCSSが使えますので、多様な表現が可能です。

XHTML Basic 1.0は必要最小限のモジュール楽天だけで構成されています。XHTML Basic 1.0に従ってページを作成すれば、様々な端末に1つの言語で対応できるのです。

XHTML Basic 1.0で書いたモバイルページの例

XHTML Basic 1.0で書いたモバイルページは1行目でXML文書だということをブラウザに知らせます。普通のXHTMLやSSIの場合はこの記述で問題ありませんが、PHPの場合は先頭の行がエラーとなり表示できません。これは <? で始まるXML宣言が、PHPを省略して書く際の冒頭部分と同じなのでエラーとなる為です。PHPではこの省略を使えないように、.htaccessファイルに次の行を書き加えれば問題はありません。

php_flag short_open_tag Off

htmlタグ内で、XHTML 1.0はlang属性が使えますが、XHTML Basicではlang属性が使えません。 xml:langのみが使えます。

ヘッドタグ内にメタタグでテキスト文字のコードをShift_JISで書いていることを知らせます。当然文字コードはシフトJISで書きます。meta name="description"とmeta name="keywords"はSEO対策です。ページに的確なタイトルを付けて、タイトル(TITLEタグ)を書きます。

link rel="stylesheet" type="text/css" href="mobile.css"と外部CSSファイルの設定をします。ドコモのiモードは外部CSSに対応していないので注意します。

ボディタグ内は人にも検索ロボットにも見易いように、見出し(H1～H6タグ)を付けます。文章に段落を付けて、段落(Pタグ)を使って文章を構成していきます。段落以外は改行をしなくても良いのですが、適度に改行をしたい時は改行(BRタグ)で改行します。リンクをするにはリンク(Aタグ)を使います。

これだけでほぼ普通の文章は作れます。Pタグを使わず文章をタグ無しで書いても問題ありません。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="***********" />
<meta name="keywords" content="***,***,***" />
<link rel="stylesheet" type="text/css" href="mobile.css" />
<link rel="alternate" media="handheld" href="http://****.jp/***/***.htm" type="text/html" />
<title>*****</title>
</head>
<body>
<h1>*****</h1>
タグ無しで書いてもOKです。
<p>普通はPタグを使って文章を書きます。</p>
<br />
<a href="***">*****</a>
</body>
</html>

XHTML Basic 1.0で使えるその他のタグ

上記以外にもXHTML Basic 1.0で使える主なタグには、次のようなものがあります。

div　位置指定　align="left | center | right"
基本テーブル caption、table、td、th、tr
pre　ベタ書き(ソースをそのまま表示)
ul　リストの指定
li　リストの内容
form　フォーム　action="URL" method="get | post"
input　テキスト入力フィールド、ラジオボタン、チェックボックス
img　画像表示　GIFとJPEG画像は問題なく使えます

モバイル専用ページであることを検索ロボットに伝える方法

モバイル専用ページであることを検索ロボットに伝えるには、ヘッドタグ内に次のようにlinkタグを書きます。href内にはそのページのurlを書きます。このようにすると、検索ロボットがモバイルページだと認識してくれます。

<link rel="alternate" media="handheld" href="http://****.jp/***/***.htm" type="text/html">

XHTML Basic 1.0の文法を診断する

モバイルページが完成したら、HTML文法診断ページでXHTML Basic 1.0の文法チェックをしましょう。普通はかなり厳しい診断結果になりますが、重大なエラーでなければ良しとしましょう。

リンク集 |Sitemap |お問合せ |Pポリシー |修理掲示板