このページの本文へ

HTML5/CSS3で作るスマートフォンサイトの基本 (2/5)

2010年09月21日 10時00分更新

文●たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷

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>


 続いて、ページのコンテンツ(内容)をマークアップしていきます。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く