実践
実践!スマホサイトのviewport設定
第1回 viewportとはなにか?

viewportとは普段聞き慣れない言葉です。スマートフォン端末独特のページの表示方法に深くかかわっていて、デスクトップ環境では、意識する必要のなかった概念なのです。まずは、viewportの概念を理解するところからはじめましょう。

2012年 04月26日発行

目次

viewportとはなにか?

viewport(ビューポート)とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。

例えば、デスクトップ環境(PCなど)のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。

デスクトップブラウザのviewport

ページがviewportからはみ出た場合は、スクロールをしてviewportを変えます。

ページがはみ出るとスクロール

スマートフォンの場合はどうでしょうか。どのように表示されるのでしょうか?

スマートフォンにはどう表示される?

デスクトップ環境と異なり、スマートフォンのディスプレイは相対的に小さく、1ページが原寸で、viewport内におさまるとは限りません。

1ページが収まらないことが多い

表示のされ方は、制作者がmeta要素のviewportで指定することができます。このmeta要素でのviewport指定をどのようにすればいいのかを解説していきます。

準備:viewport設定サンプルインデックスページ

サンプルページのインデックスに、スマートフォンでアクセスしておいてください。このシリーズで取り上げるさまざまなviewport設定のサンプルが確認できます。サンプルには番号が振られています。文中では「サンプル1」などサンプル番号とともに参照するサンプルを指定しています。

viewport設定サンプルインデックスページ

スマートフォンにどのようにページを表示するのか

スマートフォンに、ページがどのように表示されるのがいいのかという問題があります。ここで紹介するviewport指定は、多くのデスクトップ向けサイトと同様に、幅が小さいスマートフォンの画面にできるだけぴったりフィットした表示になります。

デスクトップ環境で表示された状態

例えば、上記のサイトをスマートフォンで見る場合、以下のようにデスクトップと同じ見栄えをキープした表示を目指します。

スマートフォン環境で表示したい状態
サンプル1参照

デスクトップとスマートフォンでは、ディスプレイの解像度(画素数)が異なりますから、スマートフォンでは、相対的に小さい表示になりますが、viewportの指定次第で、ほぼ同じ見栄えをキープすることは可能です。

viewportをうまく指定できないとどうなる?

まずは、viewport設置はなにをコントロールするものなのか、直感的に理解してもらうために、viewport指定の失敗例をいくつか紹介します。

失敗例:viewportの指定がない

viewportを指定しないと、以下のように左右に必要でない余白ができてしまうことがあります。実際のコンテンツは若干縮小表示され、二本指でピンチインしてズームしないと、よく見えない状態です。

スマートフォン環境でviewportが指定されていない状態
サンプル2参照

できれば不要な余白をなくして、コンテンツが縮小されないようにしたいところです。

失敗例:別のサイトから適当にviewport指定をコピーする

適当に別のサイトから、よくわからないまま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指定で使うプロパティなど基礎知識を学びます。

高津戸 壮
高津戸 壮
フロントエンド・エンジニア

Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。数多くのWebサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。 著書に『改訂版 Webデザイナーのための jQuery入門』(技術評論社、2014年11月14日)がある。 CSS Nite 2011ベストセッションにおいて、全170セッションの中から、ベスト10セッションに、CSS Nite 2013ベストセッションでは、全278セッション中、ベスト20セッションに選出。

外村 奈津子
外村 奈津子
エディター

情報出版社に在籍中、Mac雑誌、中高年向けフリーペーパー、コラムサイト運営、健康食雑誌、グラフィック・Web技術書籍編集、IT系ニュースサイトの編集記者を経験。その後フリーランスのエディター/ライターとして独立。2011年4月より株式会社ピクセルグリッドへ入社。ピクセルグリッドが提供するフロントエンド技術情報を提供するサービス「CodeGrid」の編集を担当している。