このページの本文へ

DESIGN ゼロから始めるレスポンシブWebデザイン入門 ― 第3回

HTMLの用意とリセットCSSの作成

2012年06月19日 10時00分更新

菊池 崇/Web Directions East

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

【Follow up】viewportを理解しよう

 viewportは、iOSやAndroidなどのスマートフォンOSのブラウザーが採用している仮想ウィンドウのことで、スマートフォンにおけるWebサイト表示の最適化には欠かせない機能です。

viewportの機能

 viewportがどのような機能なのか確認してみましょう。図は、iPhone 3GSのSafariでYahoo! JAPANのトップページを表示したところです(Yahoo! JAPANにはスマートフォン用に最適化されたサイトもありますが、あえてPC用のサイトを表示しています)。

2-2-zu06.png
Yahoo! JAPANのPC用サイト

 iPhone 3GSの解像度は、320×480pxですので、本来であればページの一部しか表示されないはずですが、実際にはWebページは全体的に縮小され、横いっぱいに表示されています。幅320pxのiPhoneが、viewportによって幅960pxのウィンドウになりきって表示しているのです。不思議な現象ですが、これがスマートフォンのviewport機能です。

viewportの記述方法

 viewportの設定は、HTMLのhead要素内にmeta要素を使って記述することで変更できます。


<meta name="viewport" content="プロパティ">

 横幅のサイズだけでなく、ユーザーによる拡大・縮小操作の可否や、表示倍率なども表のようにviewportのプロパティで設定できます。

プロパティ説明
widthpxで任意に幅を指定
heightpxで任意に高さを指定
device-widthデバイスのスクリーンの幅
device-heightデバイスのスクリーンの高さ
initial-scale(0 - 10.0)最初の表示倍率
minimum-scale(0 - 10.0)最小の縮小率
maximum-scale(0 - 10.0)最大の拡大率
user-scalable(yes/no)ユーザーに拡大と縮小の許可をするかを設定。yesは有効、noは無効

 たとえば、viewportサイズを横幅320pxに指定する場合は以下のように記述します。


<meta name="viewport" content="width=320">

 viewportのプロパティを複数指定する場合は「,」で区切って記述します。以下は、viewportサイズを横幅320pxにし、最初の表示サイズを1.0倍に指定します。


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

ピンチインとピンチアウトの処理

 viewportのプロパティ「user-scalable」は、ユーザーのピンチイン(縮小)/ピンチアウト(拡大)の可否を指定できます。user-scalable=noと指定すればピンチイン/ピンチアウトを無効化できます。


<meta name="viewport" content="user-scalable=no">

 ただし、無効にした場合は、当然のことながらユーザーは拡大・縮小ができなくなります。小さな文字で表示されたWebサイトの閲覧に困ることになり、お年寄りや目が不自由な人のアクセシビリティの問題もあります。

 このような問題を念頭に、ピンチインとピンチアウトの機能をオフにしてもユーザーが十分に閲覧できる文字サイズや操作できるボタンサイズを考える必要があります。また、HTML5のcanvas要素を利用して作成されたゲームでは、ユーザーが誤って拡大してしまうことを防ぐために、ズーム機能を無効化している場合があります。この場合でもゲームの操作性は損なわないように配慮します。

CSSによる指定

 viewportはHTMLのmeta要素を利用して記述しますが、見栄えに関する指定は本来ならばスタイルシートに記述するべきであり、疑問が残るところです。W3Cは現在、CSSにviewportプロパティとして記述するルール作りを進めており、Opera Mobile 11に先行実装されています。

・meta要素での記述


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

・スタイルシートでの記述(Opera Mobile 11の場合)


@-o-viewport {
width : 320px;
zoom:1.0}

著者:菊池 崇(きくち・たかし)

著者近影

Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。

この連載が本になりました!

本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。

レスポンシブWebデザイン
マルチデバイス時代のコンセプトとテクニック

定価:2,625円 (本体2,500円)/形態:B5変 (232ページ)
ISBN:978-4-04-886323-0

Web Professionalトップへ

この連載の記事

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

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

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

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

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

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

ランキング