レスポンシブウェブデザインにおけるviewportを理解しよう!

弊社の記事でもなんども紹介しておりますが、サイト制作においてスマホ最適化が必須となっている今、viewportの指定はWebデザイナーなら一度はつまづいたことがあるのではないでしょうか?結局、どうするのが1番いいのか、そもそもviewportって一体なんなのか、今回はviewportについて掘り下げて紹介したいと思います。

まずは、レスポンシブWebデザインとは?を理解しよう

以前弊社の記事でも紹介させていただいた、「今更聞けない?レスポンシブwebデザイン」の記事もぜひご参照ください。

レスポンシブウェブデザインとは、デバイスの種類ごとに別サイトを用意せず、ひとつのHTMLファイルで、パソコンやスマートフォン、タブレットに最適化されたページを実装することを指します。どうやってデバイスを判別するかというと、画面の大きさで判別をしていきます。グーグルにも推奨されている手法であり、URLも切り替わらなかったりとメリットも大きいので、弊社ではレスポンシブウェブデザインでのスマホ最適化がほとんどです。

他にも、同一URLでもパソコンとスマホで別HTMLを呼び出す手法の「ダイナミックサービング」というものもありますが、こちらはよほどスマホサイトなどに力を入れたい場合でないと、運営の手間がかかるためおすすめできません。ただ、デザインの幅は広がるので、ユーザー目線で考えるならばこちらの方が利便性の良いサイトを作ることが可能です。

viewportって何?

Webデザイナーでない方は「viewport」という言葉を聞いても、なんのことだかさっぱりわからないかと思います。「viewport」とは、「表示領域」のことを指しており、ブラウザにおけるウィンドウの画面幅(ウィンドウ幅)表示領域がviewportとなります。

スマホやタブレットの普及がなく、デスクトップPCだけの環境では意識する必要がなかった「viewport」の概念ですが、デスクトップPC幅とは画面サイズが異なる、スマホやタブレットの普及により、それぞれのデバイスで横幅がはみ出たりすることがないよう、指定する必要が出てきました。

横幅いっぱいでおさまらないコンテンツや本文は、横のスクロールがついて表示されてしまいます。そこで、パソコンの表示と全く同じにしておきたい場合や、レスポンシブウェブデザインの場合などviewportを指定することで、画面幅いっぱいにコンテンツや本文がおさまるようにしていくのです。

魔法の呪文<meta name=”viewport” content=”width=device-width,initial-scale=1″>

viewportの指定といっても、このようなコードをコピペして使用している方が多いのではないでしょうか?

大体の場合はこれで問題もなく、制作していけるので、このコードについて深く考えることもあまりないかと思います。ただ構造を理解することによって、何か問題が生じたときなど、柔軟に対応することができるようになるので、今回はこちらのコードについて詳しくご紹介したいと思います。

viewportで指定可能なもの

width(横幅)

viewportの横幅を指定できます。ピクセル単位での指定が可能です。初期値は980px、指定できる範囲としては、200px〜10000pxとなるようです。他にも、表示しているデバイス幅に合わせる、device-widthがあり、魔法の呪文で使われるものはこのdevice-widthが指定されています。

▼横幅を750pxにする場合

上記のように指定することで、横幅750pxの下層領域としてviewportが作られることになります。
こちらの幅とメディアクエリのブレイクポイントの幅を合わせておけば、問題なく最適化することも可能です。ただ、widthのピクセル値が効かない端末も一部あり(古いAndroidなど)、あまり推奨されている表記ではありません。

height(縦幅)

あまり使うことはありませんが、縦幅の指定をすることも可能です。横幅とのアスペクト比から計算される値が初期値となっているようです。widthと同じように、200px〜10000pxの間で指定でき、device-heightも指定可能です。

initial-scale(初期倍率)

そのページが表示されたときの倍率の設定です。width=device-widthを指定していて、initial-scaleを指定しない場合は、initial-scale=1と自動的になります。

minimum-scale(最小倍率)

最小縮小倍率の指定です。初期値は0.25で、0より大きく10未満の値を指定できます。

maximum-scale(最大倍率)

minimum-scaleと同様最大拡大倍率を指定できます。0より大きく10未満の値を指定することができ、初期値は1.6になっております。

user-scalable (ズーム操作の可否)

ユーザーがズームすることを許可するかどうかを指定できます。yesかnoまたは1か0で指定することができ、初期値はuser-scalable=yesになっています。

target-densitydpi (ターゲットとなる画面密度)

target-densitydpiは古いAndroid端末のために指定するものになります。ターゲットとなる画面密度の設定となりますが、target-densitydpi=device-dpi(ターゲットとなる画面密度をデバイスの画面密度と合わせる)とすることで端末ごとに表示される文字サイズも大きく変わってしまうことから、最近ではそうならないよう、target-densitydpi=medium-dpiに設定するか、そもそも記述しないことが多くなっているようです。
古いAndroid端末に向けてであり、最近のもの(Android4.2以降)では廃止されているので、気にする必要はないかもしれません。

メディアクエリについて

先ほど、viewportで指定する表示領域の幅と、メディアクエリのブレイクポイントの幅を合わせておけば、問題なくスマホ最適化することも可能だとご紹介しましたが、メディアクエリについても少し説明したいと思います。
メディアクエリ(Media Queries)とは、デバイスの解像度やウィンドウの幅(画面サイズ)、向きなどの指定条件に合わせて、パソコンとスマホで別々のcss(スタイルシート)を適用できる機能のことをいいます。メディアクエリを使用したcss(スタイルシート)の切り替えは、切り替え条件として「ブレイクポイント」(Break Point)を設定します。
このブレイクポイントは簡単に言うと、表示している画面幅が750px以下ならこのスタイルを、750pxより大きいならこのスタイルを、といったような形で切り替えが行われます。このメディアクエリによりレスポンシブウェブデザインを行うことが可能になりました。
しかしながら先ほども述べたように、一部viewportのidthのピクセル値が効かない端末もあることから、viewportで指定する幅とメディアクエリのブレイクポイントの値を合わせてスマホ最適化する方法は推奨されておりません。

まとめ:結局どうやって指定するのが1番いいのか?

ここまででviewportについてと、レスポンシブ化する仕組み、メディアクエリのことなども簡単にご理解いただけたかと思います。結局のところ、viewportの指定はどのようにするのが1番いいのか?
結局のところ、魔法の呪文である

に落ち着きます。メディアクエリさえ正しくなっていれば、この表記で問題が起こることはそうそうありません。
たまに起こってしまうスマホ表示の際の右側の謎の空白など、幅は全て収まっているし、心当たりも何もなく、どうしても解決できなさそうな場合はwidthにそのサイト幅を指定してあげると解決できることもあります。
たった一行の記述ではありますが、レスポンシブウェブデザインにおいて重要な記述のviewport、少し理解が深まったでしょうか?Webサイト制作の際、何気なく使用しているコードは他にもたくさんあるかと思います。そういったものもどういった記述なのか、どういった役割があるのか、など知識を深めていくと、またよりいっそう制作が楽しくなるので、どんどんいろいろなことを調べていきましょう!

このエントリーをはてなブックマークに追加

筆者

M.Nakayama

Bigmac inc. 制作部所属。 前職でBigmacと出会い、2015年6月制作部の立ち上げと共に入社。 オンとオフの切り替えをしっかりすることをモットーに、仕事の日はがっつり仕事、休みの日は子どもと目一杯遊び、家事に励むようにしています。 Webデザインからサイト構築まで幅広く携わっていますが、基本的には人が作った綺麗なデザインを寸法の狂いなくコーディングしていくことが好きで、難しいものができたときほど達成感・やりがいを感じます。シンプルでフラットなデザインが好物です。

筆者が最近執筆した記事