このページの本文へ

DESIGN 実践!iPhone&Androidサイト制作ガイド ― 第2回

作って学ぶスマートフォン対応サイトの基本

2010年08月04日 10時00分更新

たにぐちまこと/H2O Space.

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

基本のHTMLを作成する

 最低限の制作環境が整ったところで、さっそく簡単なスマートフォン向けWebページを作成してみましょう。エディターを起動して、次のようなHTMLを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<title>スマートフォンサイトテスト</title>
</head>

<body>
</body>
</html>

 今回はHTML5で記述していますが、基本的にはHTML4やXHTMLなど、PC向けのHTML/XHTMLがほぼ利用できます(iモードなど携帯サイト用のHTMLは正しく表示できません)。続いて、基本的なマークアップを施していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<title>スマートフォンサイトテスト</title>
</head>

<body>
<h1>スマートフォンサイトテスト</h1>
<p>初めてのスマートフォン向けサイトです</p>
</body>
</html>

 まずはここまでの状態でWebサーバーにアップロードしてみましょう。iPhone/Androidで確認するとそれぞれ以下のように表示されます。

表示結果
サンプルコードをiPhoneで表示したところ同じくAndroidで表示したところ

 ここで、少し気になるところがあります。


Viewportの変更

 一見して分かるのは、文字が非常に小さく、右側に余白が目立つことです。このままだと拡大しないと本文を読むのは難しいでしょう。

 原因は「Viewport(ビューポート)」にあります。iPhoneやAndroidはPCサイトをそのまま表示できますが、画面が小さいため、PC向けのサイトを実際の縮尺で表示すると一部しか見えません。

zu2-3-1
PCサイトをiPhone/Androidで100%表示するとページの一部しか表示されない

 そこで、スマートフォンは自動的にページを縮小して表示する仕組みになっていて、この時に利用されるのが「Viewport」という値なのです。たとえばiPhoneの場合、Viewportが「980×1470ピクセル」に設定されています。つまり、横幅980ピクセルのディスプレイを、表示能力はそのままに小さくしたと考えるとよいでしょう。

zu2-3-2
Viewportの設定によって幅980ピクセルのディスプレイと同じように表示される

 PC向けのサイトを見る場合には便利ですが、このままではスマートフォン向けに作成したサイトも小さく表示されてしまいます。そこで、次のようにmeta要素でViewportを変更できます。meta要素はhead要素内に記述します。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
</head>

 これで、以下のように適切な大きさで表示できます。

Viewport
Viewportの値を設定すると意図したとおり適切に表示される

 ここで紹介したViewportの書式は次の通りです。

<meta name="viewport" content="width=【横幅】, initial-scale=【初期の倍率】, maximum-scale=【拡大可能な最大の倍率】">

 各項目の意味は、次の通りです。

・横幅
画面の横幅をピクセル単位で指定します。ただし、スマートフォンの場合は機種によって画面の横幅がまちまちで、本体の向き(縦方向・横方向)によっても違いがあるので、通常は「device-width」という特殊な値を設定するとよいでしょう。device-widthを指定すると、端末の横幅で自動的に調整されます。
・初期の倍率
表示した時の画面の倍率を指定します。たとえば「1」を指定すると1倍、「2」を指定すると2倍になります。
・拡大可能な最大の倍率
スマートフォンは2本指でピンチ(iPhone)したり、拡大ボタンをタップ(Android)したりすることで画面を拡大できます。この時の最大の倍率を指定します。「1」を指定すると拡大できなくなります。

画面を横にしたときの処理

 先ほど作成したページを表示した状態でスマートフォン本体を回転すると、画面が自動的に拡大されて表示されます(iPhone 4で回転ロックがかかっている場合は外してください)。

Viewport
本体を回転すると画面が拡大して表示される

 これはこれで見やすいかもしれませんが、多くの場合は横にしたら文字の大きさはそのままで、1行の文字数が増えることを期待するはずです。このような場合には、Viewportの「maximum-scale」を「1」に設定します。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

 これによって、本体を横向きにしても文字の大きさを変えずに1行の文字数を増やせます。サイトの性質にあわせて設定するとよいでしょう。

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

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

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

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

ランキング