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

9. ソースのまとめ（後半）

<div style="text-align:right; font-size:smaller;">
   <p><a href="#top">↑ﾍﾟｰｼﾞﾄｯﾌﾟへ</a></p>
</div>

ページの上部へ移動する「ページ内リンク」を設けています。
div要素で作るボックスには、text-alignプロパティで値「right」を指定しているので、右寄せで表示されます。

<hr />
<div style="font-size:smaller;">
<a href="mailto:?subject=%82%e0%82%ce%82%b1%82%dc%82%c1%81I&amp;body=http://mc.rumic.org/">友達にメールで教える</a><br />
<a href="about.html">このサイトについて</a><br />
</div>
<hr />

メールを送信するリンクを作っています。
ここでは、メールの送信先は（閲覧者が決めるため）指定していません。 href属性に「mailto:」とだけ記述してメールアドレスを省略すれば、送信先の選択を閲覧者に任せられます。
※送信先メールアドレスをあらかじめ記述しておいた場合でも、閲覧者は自由に送信先を変更できます。

<div style="margin:0px; font-size: smaller; background-color:#cc0000; color:white; text-align:right;">
Copyright &copy; LUM. 2009.
</div>

</body>
</html>

最後に、著作権表示を掲載しています。
Copyrightの記号「©」は、XHTMLソースに「 © 」と記述することで表示できます。 （右図のエミュレータ上では「 © 」ではなく「 (c) 」と表示されていますが。）

ソースのまとめは以上です。

ブツ切りにして紹介してきましたので、少々分かりにくかったかも知れません。 ソースを一括して閲覧したい場合は、下記のサンプル携帯サイトへ（PC用ブラウザで）アクセスし、直接ソースを覗いてみて下さい。

上記のQRコード画像をクリックすれば、今お使いのPC用ブラウザでもサンプル携帯サイトにアクセスできます。

おわりに

今回は、携帯サイトの作り方をざっとご紹介いたしました。 これで必要最低限の携帯サイトにはなるでしょう。
次回以降の記事では、「携帯サイトでよく見かけるメニューの作り方」、「携帯端末の数字キーでリンクを選択させる方法」、「携帯端末に搭載されている絵文字を表示させる方法」などをご紹介する予定です。

→ 続編：携帯サイトの作り方 第2回 番号キーで移動へ

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

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