XHTML モバイル・プロファイルでのマークアップ例(参考資料)。

ここでは、実際にXHTML モバイル・プロファイルで携帯電話向けコンテンツを書く場合のマークアップの一例を挙げておきます。

但し、HTMLのマークアップの方法をある程度知っている事を前提とします。

従いまして、マークアップが分からない方は、この中にコンテンツをぶち込めばサイトが構築出来ると言うものでは無い事をご承知置き下さい。

あくまでも一例ですので、もっとモバイルで使い易く出来ると言う方は挑戦される事をお奨めします。

現行機の場合、CSSを活用する事で、本文で面倒な物理マークアップをする事無く、自由なデザインが可能になります。

XHTML モバイル・プロファイルでのマークアップ例(参考資料)・目次。

ご注意願いたい事。(平成19年 3月19日 更新)

メニューページ(いわゆるトップページ)は、各コンテンツへのメニューを<dl>要素で記述する事にします。

この場合、

記述するようにします。

また、同様のものを、<link>要素でも記述しておきます。

<?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" xml:lang="ja">

<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis" />
<meta http-equiv="content-style-type" content="text/css" />

<title> (サイトの題名) </title>

<link rel="stylesheet" type="text/css" href=" (スタイルシートのURI) " />

<link rev="made" href="mailto: (連絡先メールアドレス) " title="ご連絡" />
<!-- メニューでの項目に合わせて適宜設定する。 -->
<link rel="next" rev="start" href=" (コンテンツ1のURI) " title=" (コンテンツ1の題名) " />
    …
<link rel="next" rev="start" href=" (コンテンツnのURI) " title=" (コンテンツnの題名) " />

</head>

<body>

<h1 id="top"> (サイトの題名) </h1>
<!-- ここに<p>要素で挨拶を入れる事も出来ますが、余計な挨拶は寧ろ邪魔かも知れません。 -->

<h2>メニュー</h2>
<dl class="menu">
    <dt><a rel="next" rev="start" href=" (コンテンツ1のURI) "> (コンテンツ1の題名) </a></dt>
    <dd> (コンテンツ1の概要や更新年月日) </dd>
        …
    <dt><a rel="next" rev="start" href=" (コンテンツnのURI) "> (コンテンツnの題名) </a></dt>
    <dd> (コンテンツnの概要や更新年月日) </dd>
    </dl>

<hr />

<ul class="footNavi">
    <li><a href="#top">ページの先頭</a></li>
    </ul>

<hr />

<div class="footer">
    <address>(c) <a href="mailto: (連絡先メールアドレス) "> (制作者名) </a></address>
    </div>

</body>
</html>

コンテンツのマークアップ例。(平成19年 3月19日 更新)

各コンテンツについては、決まった形を用意しておきます。

ページのヘッダ部(冒頭部)。(平成19年 3月19日 更新)

各コンテンツページの冒頭には、パンくずリスト代わりのナヴィゲーションリストを<ul>要素で記述しておきます。

このリストの先頭には、ページの本文へのアンカー(href="#top"属性を与えた<a>要素)を用意して、ナヴィゲーションを飛ばせるようにします。

このため、本文の先頭にはid="top"属性を与えたブロックレヴェル要素を入れる必要があります。

ナヴィゲーションには数字を属性値とするaccesskey属性を与え、ページ内の何処を見ていてもダイヤルボタン一つで関連ページに移動出来るようにします。

このときの番号は、最上位となるメニューページを"1"にして、階層に応じて番号を増やしていきます。

但し、"9"は次のページ, "7"は前のページとしますので、都合六段階までとなります。

ナヴィゲーションリストの最後は、当該ページの前ページがあるのであれば、そのページへのアンカーとします。

以上を纏めると、ナヴィゲーションリストは

一番目
本文へのアンカー
二番目〜最後の一つ前

階層にあわせたアンカーの並び

最後
前ページへのアンカー(前ページがある場合のみ)

と言う形になる訳です。

ページの本体(本文)。

本文は普通にマークアップすればよいのですが、必ず先頭にid="top"を附与したブロックレヴェル要素を置かなければなりません。

ただ、この場合、やはり見出しが先頭に来るのが順当と思われますので、id="top"属性を与えた<h1>要素で始める事にします。

あとは、普通にマークアップした本文を順次入れて行けば宜しいでしょう。

ページのフッタ部(末尾部)。

ページの末尾には、ページの本文先頭へのアンカーを用意します。

また、次ページがある場合は、そのリンクを用意します。

以上を踏まえてのコンテンツのマークアップ例。

以上を踏まえてのコンテンツページのマークアップ例は以下のようになると考えられます。

<?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" xml:lang="ja">

<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis" />
<meta http-equiv="content-style-type" content="text/css" />

<title> (ページの題名) </title>

<link rel="stylesheet" type="text/css" href=" (スタイルシートのURI) " />

<link rev="made" href="mailto: (連絡先メールアドレス) " title="ご連絡" />
<!-- 存在するページに関するものを適宜設定する。 -->
<link rel="start" href=" (メニューページのURI) " title=" (メニューページの題名) " />
<link rel="contents" href=" (このページから見たコンテンツ最上位のページのURI) " title=" (そのページの題名) " />
<link rel="chapter" href=" (このページから見たコンテンツ第二位のページのURI) " title=" (そのページの題名) " />
<link rel="section" href=" (このページから見たコンテンツ第三位のページのURI) " title=" (そのページの題名) " />
<link rel="subsection" href=" (このページから見たコンテンツ第四位のページのURI) " title=" (そのページの題名) " />
<link rel="up" href=" (このページから見たコンテンツ第四位のページのURI) " title=" (そのページの題名) " />
<link rel="prev" href=" (前ページのURI) " title=" (前ページの題名) " />
<link rel="next" href=" (次ページのURI) " title=" (次ページの題名) " />

</head>

<body>

<ul class="headNavi">
    <li><a href="#top">本文</a></li>
    <li>[1] <a accesskey="1" rel="nofollow" href=" (メニューページのURI) "> (メニューページの題名) </a></li>
    <li>[2] <a accesskey="2" rel="nofollow" href=" (このページから見たコンテンツ最上位のページのURI) "> (そのページの題名) </a></li>
    …
    <li>[7] <a accesskey="7" rel="prev" href=" (前ページのURI) "> (前ページの題名) </a></li>
    </ul>

<hr />

<h1 id="top"> (ページの題名) </h1>
…(コンテンツの本文)…

<hr />

<ul class="footNavi">
    <li><a href="#top">ページの先頭</a></li>
    <li>[9] <a accesskey="9" rel="next" href=" (次ページのURI) "> (次ページの題名) </a></li>
    </ul>

<hr />

<div class="footer">
    <address>(c) <a href="mailto: (連絡先メールアドレス) "> (制作者名) </a></address>
    </div>

</body>
</html>

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com