実践！スマホサイトのviewport設定 第1回 viewportとはなにか？
viewportとは普段聞き慣れない言葉です。スマートフォン端末独特のページの表示方法に深くかかわっていて、デスクトップ環境では、意識する必要のなかった概念なのです。まずは、viewportの概念を理解するところからはじめましょう。
- カテゴリー
- HTML/CSS >
- HTML/CSSの実践
発行
viewportとはなにか？
viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。
例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。
ページがviewportからはみ出た場合は、スクロールをしてviewportを変えます。
スマートフォンの場合はどうでしょうか。どのように表示されるのでしょうか？
デスクトップ環境と異なり、スマートフォンのディスプレイは相対的に小さく、1ページが原寸で、viewport内におさまるとは限りません。
表示のされ方は、制作者がmeta要素のviewportで指定することができます。このmeta要素でのviewport指定をどのようにすればいいのかを解説していきます。
準備：viewport設定サンプルインデックスページ
サンプルページのインデックスに、スマートフォンでアクセスしておいてください。このシリーズで取り上げるさまざまなviewport設定のサンプルが確認できます。サンプルには番号が振られています。文中では「サンプル1」などサンプル番号とともに参照するサンプルを指定しています。
スマートフォンにどのようにページを表示するのか
スマートフォンに、ページがどのように表示されるのがいいのかという問題があります。ここで紹介するviewport指定は、多くのデスクトップ向けサイトと同様に、幅が小さいスマートフォンの画面にできるだけぴったりフィットした表示になります。
例えば、上記のサイトをスマートフォンで見る場合、以下のようにデスクトップと同じ見栄えをキープした表示を目指します。
サンプル1参照
デスクトップとスマートフォンでは、ディスプレイの解像度（画素数）が異なりますから、スマートフォンでは、相対的に小さい表示になりますが、viewportの指定次第で、ほぼ同じ見栄えをキープすることは可能です。
viewportをうまく指定できないとどうなる？
まずは、viewport設置はなにをコントロールするものなのか、直感的に理解してもらうために、viewport指定の失敗例をいくつか紹介します。
失敗例：viewportの指定がない
viewportを指定しないと、以下のように左右に必要でない余白ができてしまうことがあります。実際のコンテンツは若干縮小表示され、二本指でピンチインしてズームしないと、よく見えない状態です。
サンプル2参照
できれば不要な余白をなくして、コンテンツが縮小されないようにしたいところです。
失敗例：別のサイトから適当にviewport指定をコピーする
適当に別のサイトから、よくわからないままviewport指定をコピーしてきたりすると、以下のように、ページがズームされ、一部だけが見える状態になったりします。これでは、いったいなんのページなのか、全体が見渡せません。
サンプル3参照
スマートフォンサイトを設計するポイント
スマートフォンサイトはどのように表示されることを念頭に設計したらいいかを、ここで簡単にまとめておきます。
前提条件
- スケールは1、等倍で表示される
- ポートレート表示時の幅は320px
- ランドスケープ表示時の幅は480px以上
つまり、320px以上*のリキッドでページを作るのが、スマーフォンサイトには向いているといえます。
*注：320px以下の端末
一部、解像度が320px以下の端末も存在しますが、日本国内において、一般向けに販売されているラインナップの中にそれは（おそらくほぼ）存在していません。そのような端末は、海外においても、Webサイトを見る機能が省かれているようなモデルに当たります。
meta要素viewportの指定方法
meta要素のviewportの指定方法は、他のmeta要素と同じです*。head要素内に、meta要素のname属性をviewportとして記述します。content属性に、viewportのプロパティとその値を記述して、meta viewportの指定をします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="...">
<title>title here</title>
...
</head>
<body>
...ここでは軽く「この場所に書くんだ」と理解しておいてください。
*注：viewportの仕様
viewportの仕様に関しては、Apple、Google、Microsoft、Operaなど、それぞれのベンダーが、原則、独自に仕様を定めて実装しています。「結果として」仕様は、大変似通ったものになっていますが、共通の仕様があるわけではありません。また、実装も微妙に異なります。このあたりが開発者にとっては、やっかいで油断のならないところです。
次回は、viewportをきちんと指定するために知らなければいけないスマートフォンデバイスの特性、viewport指定で使うプロパティなど基礎知識を学びます。