目次

作成日

22 June 2011

スマートフォンを対象にしたHTML/CSSコーディングは、基本的にデスクトップ向けウェブサイトのコーディングができていれば、それほど難しくはありません。あとはスマートフォン特有の仕様や、コーディングのパターンを掴むことができれば大丈夫です。なお、HTML5をベースにしたマークアップや、CSS3でよく使われるプロパティなどについては、ADC内の小山田晃浩氏の連載「HTML5&CSS3入門 with HTML5 パック」をおすすめします。

今回はコーディングの前に知っておくべきこととして、スマートフォンのスクリーンサイズなどについて解説します。小さなスクリーンサイズを対象にデザイン/コーディングしますが、そのスクリーンサイズの値はHTML側で定義する必要があります。

iPhone/Android各機種のブラウザーについて

iPhoneとAndroidともにWebkitブラウザーがデフォルトブラウザーで、アプリとして提供されています。iPhoneに関しては現在のところWebkitブラウザーのみで、例外的に「Opera Mini」というプロキシブラウザー(Operaのサーバー側で処理されるブラウザー)が存在します。また、AndroidではWebkitブラウザーに限らず、「Firefox Mobile」や「Opera Mobile」などがあります。本連載では、基本的にデフォルトブラウザーのWebkitブラウザーを対象に解説しますが、他のブラウザーでも応用することが可能です。ただしAndroidの場合、そうしたブラウザー間だけでなく、機種間でも仕様が若干異なる可能性があるため、実務で本連載のノウハウを活かしていただく際は、必ずターゲットブラウザーおよび機種での実機検証を行うようにしましょう。

Viewportの理解

デスクトップ向けサイトでは、おおよそ横幅1000px前後かそれ以上での閲覧環境を想定して制作することが多いでしょう。一方、デスクトップよりもずっと小さなスクリーンであるスマートフォンでも、同じように各機種の幅を参考に制作すればよいのでしょうか。

例えば、iPhoneではどうでしょうか。結論から言うと、iPhoneでは“何もしなければ”横幅980pxでウェブサイトが表示されます。iPhoneのスクリーンはデスクトップのスクリーンのようには大きくないのに、なぜそのようになるのか不思議に思うかもしれません。ここで理解しないといけないのが「Viewport(ビューポート)」です。

※これ以降は、縦長型のスマートフォンかつ縦向き(Portraitモード)の状態を基準として解説します。

Viewportとはブラウザーの画面表示領域のことです。もう少し分かりやすく言えば、デスクトップでいうところのブラウザーウィンドウ上の表示サイズです。スマートフォンではデスクトップのようなリサイズできるウィンドウの概念はないため、その機種のスクリーンサイズがブラウザーウィンドウのサイズとなります。この通り素直に考えれば、iPhoneの3.5インチスクリーンの横幅320pxに合わせてViewportも320pxとなると考えてしまうのですが、実際にはこれが980pxとなります。

なぜそのようになっているかというと、スマートフォンブラウザーはデスクトップ向けサイトを閲覧できるのが特徴です。そのため、既存のウェブサイトをちょうど画面に収まるようにするには、Viewportのサイズをデスクトップ相当にしておく必要があります。

ちなみにAndroidの場合は、その機種のスクリーン幅以上のコンテンツでも、スクリーンに収まるように表示されます。

※すべてのAndroid機種においてこの挙動となるかは不明であるため、必要に応じて実機での検証が必要です。

iPhone、Androidいずれの場合も、このデフォルトの状態では文字や画像がとても小さく表示されます。これをちょうどよいサイズにする、つまりスマートフォンに適した表示にするために、Viewportをmetaタグで制御します。

<meta name="viewport" content="width=device-width">

例えば上記ように書くことで、「Viewportの横幅をデバイスの幅にする」ことができます。つまりiPhoneであれば、横幅980pxであったのが320pxになります。iPhoneを例にしていますが、他のAndroid機種でもこの指定によりほとんどの場合が横幅320pxとして描画されるようになります。その理由や解像度に関して補足することがありますが、別の回で解説しますので、ここでは横幅が320pxになるという程度で考えておいてください。

このmetaタグの指定が、スマートフォン向けに最適化したウェブサイトを作るために必要なルールとなります。なお、device-widthの指定に加えて一緒に指定されることが多いのが、次の指定です。

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

initial-scaleは「表示の初期倍率」です。つまり1.0は等倍サイズという指定です。この指定を推奨する理由は、後述のレイアウトの話の中で解説します。以降はこのinitial-scale=1.0の指定を含めたmeta viewportを前提に話を進めます。

またmeta viewportでは、他にもユーザによる拡大/縮小操作の倍率を指定したり、拡大/縮小操作自体を禁止することもできます。Yahoo! JAPANやlivedoorなどのサイトでは、下記のようにユーザによる拡大/縮小操作ができないようにしています。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">

ケースバイケースではありますが、これらはユーザによる任意の操作を禁止することになるので、筆者としてはあまり好ましい指定と考えてはいません。「ユーザにも親切である」という意図がなければ、この制限のある指定は避けるようにしましょう。

流動的なレイアウト

Viewportの指定は、CSSの指定通りに等倍で表示させるための下準備です。スクリーンサイズが横幅320pxになっている状態なので、それに収まるようにコーディングをしなければいけません。それではサイトの横幅を320pxで固定し、例えば下記のようなCSSを適用させておけばよいのでしょうか。

body { width; 320px; overflow: hidden; }

これは1つの方法ではありますが、これだと縦向きの状態のみの対策となってしまいます。ここでもう1つスマートフォンの表示環境の特徴として理解しておく必要があるのは、閲覧モードとしてPortrait(縦向き)とLandscape(横向き)の2つがあることです。そして前述のViewportのルール(横幅をデバイスの幅にする)では、iOSとAndroidともにLandscapeの場合にViewportのサイズが変わります。

「initial-scale=1.0」を推奨する理由

ここで補足したいのが、先ほどのwidth=device-widthの話です。これはiPhoneでの話ですが、meta viewportにinitial-scale=1.0を“指定しない”場合、LandscapeにしてもViewportは320pxのままとなり、コンテンツが少し拡大されたような状態になります。

デスクトップ向けサイトの場合、body要素やコンテンツ全体を包括するdiv要素などに、デスクトップのスクリーンに合わせて900px前後の幅で固定することは多いと思いますが、スマートフォン向けに構築する場合には小さな画面をフルに活用するために常にサイトの幅は100%となるようにコーディングしましょう。これは「Liquid Layout」や「Fluid Layout」と言われるような流動的なレイアウトを意識する必要があるということです。

流動的なレイアウトデザイン/コーディングは、スマートフォンだけでなく、iPadのようなタブレット、ネットブック、低解像度のモニタなどに対しても柔軟に対応できます。本連載ではスマートフォン向けのコーディングの話にはなりますが、ワンソース(1つのHTMLなど)でマルチデバイス対応を行う上で非常に重要な考え方/手法となります。

こうしたサイトの幅を、スクリーンサイズや機種のサイズ・環境などに合わせて柔軟にレイアウトが変わるようデザイン/コーディングする手法は「レスポンシブデザイン」または「アダプティブデザイン」と呼ばれます。この設計基準でスマートフォン/モバイルのような小さなスクリーンサイズを優先することは、前回にお話した「モバイル・ファースト」設計の1つといえます。

なお、Dreamweaverのマルチスクリーンプレビュー機能を使えば、複数のスクリーンサイズにおける表示結果を同時に確認することができます。各スクリーンサイズは任意の値に変更できるので、PortraitとLandscapeのサイズに設定しておくといいでしょう。

次回は、スマートフォンをターゲットにした実際のページコーディング方法を解説します。

関連情報