9/10 携帯サイトの作り方第1回作成方法の基礎 [ホームページ作成] All About

9. ソースのまとめ

「携帯サイトの作り方」第1回で解説してきた内容を使って、サンプル携帯サイトを作ったソースを以下にご紹介いたします。

まずは、ヘッダ部分のソースです。

<?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" />

最初のXML宣言やDOCTYPE宣言はそのまま記述します。この記述によって、3大キャリアで共通のページにできたり、検索エンジンに「携帯サイトである」と認識してもらえたりします。
文字コードはSHIFT-JISを採用しています。他の文字コードにする場合は「Shift_JIS」の記述（2カ所）を書き換えて下さい。

   <meta name="description" content="携帯端末で読める数コマまんが集！息抜きにどうぞ！" />
   <title>もばこまっ！</title>
</head>
<body>

name属性値に「description」を指定したmetaタグの記述は、必須ではありません。しかし、検索結果の内容表示に使われる可能性がありますから、ページの内容を表す短い文章を書いておきましょう。
ページタイトル（title要素）は、携帯端末では表示されない場合も多いですが、検索結果やブックマークした際などには使われますので、分かりやすく短いタイトルを付けておきましょう。

<div style="display:-wap-marquee; background-color:#cc0000; color:white;">
ｹｰﾀｲで読む数ｺﾏまんが!
</div>

最上部には、文字色と背景色を指定したボックス内で、マーキー(流れる文字)を使っています。

<h1 style="text-align:center; margin:0px;">
<a name="top" id="top"><img src="mobcom.gif" width="116" height="34" alt="もばこまっ！" /></a>
</h1>

タイトル（見出し）は、見出しを表す「h1」要素で記述していますが、実際に表示しているのは画像です。
見出し（h1要素）には、内容をセンタリングする装飾を施しています。タイトル画像部分には、ページ内リンクのリンク先にできるよう、name属性とid属性を使ったa要素を記述しています。

<div style="font-size:smaller; background-color:#ffe0e0;">
<span style="color:#ff0080;">もばこまっ！</span>では、ｹｰﾀｲで手軽に読める数ｺﾏの笑えるﾏﾝｶﾞを掲載しています。お楽しみ下さい。
</div>
<div style="font-size:smaller; text-align:center; color:#cc0080;">
最終更新日：2009/06/01
</div>
<hr />
<div style="font-size: smaller; color: #cc0000;">
●読むﾏﾝｶﾞを選択:<br />
</div>

上部の文章では、background-colorプロパティでボックスに背景色を付加したり、colorプロパティで文字色を加えたりしています。一部の文字にだけ色を付けるには、span要素を使います。
また、font-sizeプロパティで文字サイズを少し小さくしています。（どれくらい小さくなるかは端末によって異なります。また、数値でのサイズ指定は使えない端末もあるため、「smaller」や「xx-small」などのキーワードで指定しています。）

<div style="text-align:center;">
   <p><a href="yakiniku1.html"><img src="yakiniku.jpg" width="121" height="79" style="border:0px; margin:5px;" alt="「焼き肉」" /><br />(1) 焼き肉<br /></a></p>
</div>

画像をセンタリングして表示し、画像そのものをリンクにしています。
上記ソースの場合は、表示画像が yakiniku.jpg で、リンク先ページが yakiniku.html です。
画像は、GIF形式かJPEG形式を使います。どちらの形式を使うかは、どちらのサイズが（品質をできるだけ保ったまま）小さくなるかを比較してみて決めると良いでしょう。ここではJPEG形式を使っています。（4.58KB）

Page.10 : ソースのまとめ(後半)へ続きます >>