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ソースに「 &copy; 」と記述することで表示できます。 (右図のエミュレータ上では「 © 」ではなく「 (c) 」と表示されていますが。)

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

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

サンプル携帯サイトのURL(QRコード)
 

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

おわりに

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

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

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

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



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。