HTMLの構成
携帯サイトのHTMLの構造
携帯サイトの基本構造はとても簡単。携帯サイトは、PCサイトと同様にHTMLという言語で構成されています。
ただ、PCサイトとまったく同じというわけではなく、少しばかり制約があります。逆に言ってしまえば、PCサイトよりも簡単になっているということです。
それでは早速、携帯サイトの最低限のフォーマットを覚えましょう。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>【ここにページタイトルを入れる】</title>
</head>
<body>
【ここにページの中身を記述する】
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>【ここにページタイトルを入れる】</title>
</head>
<body>
【ここにページの中身を記述する】
</body>
</html>
上記の<>で囲まれた言語で構成されたのがhtmlになります。また、<>を「タグ」と言います。
基本的には上記のような構成を、メモ帳などのテキストエディタなどに書き、赤字の部分に、それぞれコンテンツや内容に合わせて作成していくことになります。赤字以外の部分は、特に必要が無い限りは何も変更しなくても大丈夫です。
また、これらの全体を「ソース」とも言います。
※ソースは必ず半角英数で書いてください。大文字・小文字は特にどちらでもかまいません。
HTMLファイル
それでは、実際にテストページを作ってみましょう。
先ほど言ったように、メモ帳などのテキストエディタで、
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>あいさつ</title>
</head>
<body>
いらっしゃいませ！
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>あいさつ</title>
</head>
<body>
いらっしゃいませ！
</body>
</html>
このように記述しテキストを保存してください。
ご存知の方も多いかと思いますが、HTMLファイルの拡張子は「.html」か「.htm」です。「.txt」の拡張子で保存している場合は、「.html」か「.htm」に拡張子を直します。
それで、保存したファイルをブラウザで見てみると、
いらっしゃいませ！
と表示され、さらに、ブラウザのウインドウタイトル部分は「あいさつ」と表示されているはず。
基本的には、ページタイトルとページの中身の部分を作っていけば、携帯サイトを作ることができるようになります。
※HTMLのファイル名は必ず半角英数で保存してください。記号は極力避けた方が安全です。
