HTML制作の準備
デザインカンプが完成したら次はHTMLの制作ですが、実際のコーディングに入る前にいくつか必要な準備があります。
第2回で紹介したとおり、スマートフォンサイトの制作では実機での確認が欠かせないため、実機からアクセスするためのWebサーバーが必要です。今回は私が普段使っている開発サーバーにサブドメインを設けてファイルを随時アップロードしながら確認することにしました。ローカル環境にWebサーバーを立てるか、レンタルサーバーなどを利用してテスト環境を用意してください（第2回を参照）。
HTMLテンプレートを用意する
iPhone、Androidに搭載されているブラウザー（ともにレンダリングエンジンはWebKit）はHTML5を積極的にサポートしています。今回のようなスマートフォン専用サイトではPCサイトのように過去のブラウザーを気にする必要はありませんので、HTML5でコーディングしましょう。以下のようなHTMLテンプレートを用意します。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
HTML 4.01やXHTML 1.0に比べ、DOCTYPEが極めてシンプルになり、meta要素の記述も少なくなっています。このHTMLテンプレートのhead要素に、必要な設定を追加していきます。
まず、スマートフォンサイトならではの手続きとして、第2回で紹介した「viewport」を設定します。viewportはhead要素内に以下のように記述して設定します。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
次に、リセットCSSを組込みます。文字のサイズや太さ、マージンなどのスタイルはブラウザーによって異なるため（ブラウザーの標準スタイルが適用される）、リセット用のCSSを適用してブラウザーの標準スタイルを無効にするわけです。HTML5用のリセットCSSはいくつかありますが、私はHTML5 Doctorが配布しているリセットCSSを愛用しています。最新版はGoogle Codeからダウンロードできます。
- ・html5resetcss - Project Hosting on Google Code
- http://code.google.com/p/html5resetcss/
ダウンロードしたCSSファイルは適当なフォルダにコピーし、ファイル名を変更します。ここでは「_shared/css」に「reset.css」という名前にしましたので、HTMLからは次のように参照します。
<link rel="stylesheet" href="_shared/css/reset.css">
最後に、title要素を実際のサイト名に変更したらHTML制作の準備が整いました。ここまでに設定したhead要素を確認しておきましょう。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>プレイグループ木場校</title>
<link rel="stylesheet" href="_shared/css/reset.css">
</head>
続いて、ページのコンテンツ（内容）をマークアップしていきます。
