携帯サイトの作成方法・作り方

それでは実際に携帯サイトの作成方法をみてみましょう。
携帯サイトはPCサイトに比べて、非常にシンプルに作成することができます。

①、ウィンドウズに標準装備されている「メモ帳」を開きます。
②、「メモ帳」に、灰色部分に記述してあるHTMLをコピー＆ペーストします。
③、灰色部分の青文字部分をオリジナルの内容に変更します。
    赤文字の部分は削除して構いません。
④、「メモ帳」のメニューから、「名前を付けて保存」→「ファイルの種類」を"すべてのファイル(*.*)"
    とします。
⑤、「ファイル名.htm」として保存すれば出来上がりです。（トップページは「index.htm」とします）
⑥、他にもサイトを作成したら、「ここにリンク先」という部分にそのファイル名を書きましょう。
⑦、カラーコードはこちらを参照してください。

<html> <!--今から携帯サイトのデータを書き始めますという意味です。-->
<head> <!--オマジナイみたいなものです。-->
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ここにサイトのタイトルを入力します</title>
</head> <!--オマジナイ終了。-->
<body> <!--携帯サイトの内容部分を書き始めますという意味です。-->
<center>
<img src ="ここに画像ファイル名を入力します。" alt="画像の説明文">
</center>
<hr> <!--区切り線です-->
<marquee bgcolor="カラーコード">
ここに書いた文字がスクロールします。
</marquee>
<hr> <!--区切り線です-->
<br> <!--改行です。-->
<font color="カラーコード">■</font>
<font color="カラーコード">サブタイトル</font>
<br> <!--改行です。-->
<font color="カラーコード">┣</font> <a href="ここにリンク先">リンク先</a>
<br> <!--改行です。-->
<font color="カラーコード">┣</font> <a href="ここにリンク先">リンク先</a>
<br> <!--改行です。-->
<font color="カラーコード">┗</font> <a href="ここにリンク先">リンク先</a>
<br> <!--改行です。-->
<hr> <!--区切り線です-->
<font color="カラーコード">●</font>
<a href="mailto:メールアドレス">メールはこちら</a>
<hr> <!--区切り線です-->
</body> <!--携帯サイトの内容部分を書き終わりますという意味です。-->
</html> <!--ここで携帯サイトのデータを書き終わりますという意味です。-->

サンプルはこちらです。
ブラウザがインターネットエクスプローラーの場合、「表示」→「ソース」を選択してください。
上記と同じようなHTMLが表示されるはずです。
ブラウザの幅をせばめると、携帯電話で表示したようになります。

NEXT LESSON  ＞＞  サーバーの準備