レスポンシブレイアウトに欠かせない「viewport」の指定方法

「viewport」と聞くと「とりあえず書いておくべきもの」という認識をしている方も多いのではないでしょうか。Googleが推奨している形式で指定すれば問題はないため、その認識も間違いではありません。

とはいえ、レスポンシブデザインの基礎知識として抑えておきたい項目であるのも事実です。本記事で紹介するviewportの内容で、しっかりと基礎知識を抑えてレスポンシブデザインを実装しましょう。

基礎からおさらい！レスポンシブデザインとは？

レスポンシブデザインは「閲覧ユーザーの使用するデバイス・ブラウザ・OSそれぞれの環境に合わせて適切に表示されるように変化するWebサイトデザイン」です。

レスポンシブデザインに対応するための方法

本記事で紹介するviewportによるレスポンシブデザインの切り替えを必須の条件として、実際には以下の主な3つの方法でレスポンシブデザインは切り替わります。

CSS

レスポンシブデザインを切り替えるための王道的方法として、CSSでの切り替えが挙げられます。後述で紹介するJavascriptを使用してレスポンシブデザインを切り替える場合にも、細かなデバイスごとの表示設定はCSSで切り替えます。

CSSでの主な切り替え方法としては、各デバイスごとのサイズ設定をするメディアクエリと呼ばれる表示範囲を使ったデザインの切り替えが挙げられます。

Javascript

Javascriptを使ってレスポンシブデザインを切り替える場合、大きく分けて2つの

方法があります。

デバイスのサイズごとの処理
iOSやandroidなどのOSごとの切り替え

CSS単体でのレスポンシブデザインの切り替えと比べて、OSごとの切り替えができるのが特徴的です。ユーザーの使用するOSに合わせて表示を切り替える必要がある場合に推奨されます。

Bootstrap

Bootstrapは「フレームワーク」と呼ばれる作業効率化に特化したシステムです。既にレスポンシブデザインを切り替えるために必要な初期設定が施されているため、制作側はBootstrapで指定されているclassをHTMLに追加するだけでレスポンシブデザインを実装することができます。

レスポンシブデザインに必須要素「viewport」の徹底解説

viewportはただ書けばよいだけのものではなく、レスポンシブデザインを実装する上で基盤となる設定項目です。実際、viewportについての知識が不足していることによって、レスポンシブデザインの実装でつまづく方もいます。

そんな方でも把握しやすいように、viewportの全体像を解説します。

viewportとは

viewportはスマートフォンやタブレットなどのデバイスで、適切なレスポンシブデザインに切り替えるために必要がHTMLタグです。正式にはmeta viewportと呼ばれており、HTMLファイルの<head></head>の内部のmeta要素として記載します。

viewportを指定することでレスポンシブデザインの制御ができるようになるため、viewportは各デバイスでの表示領域としてレスポンシブデザインの切り替えを抑制することができます。

viewportを指定しないと適切に表示されず、スマートフォンでWebサイトを閲覧した際の拡大率やレスポンシブデザインなどが崩れてしまいます。

メディアクエリ・ブレイクポイントとは

viewportを指定したことによって取得された、デバイスの横幅のサイズをブレイクポイントといいます。CSSでレスポンシブデザインを制作する場合や、Javascritptで管理する場合にもブレイクポイントを使ってレスポンシブデザインを管理します。ブレイクポイントを起点として、各デバイスのサイズごとの表示を分岐させるための表記がメディアクエリです。例として、以下にCSSとJavascriptのそれぞれでのメディアクエリの書き方を記載しています。

@media screen and (max-width: 519px) {
  /* 520px以下の時に使用するCSSを記載  */
}

@media screen and (max-width: 959px) {
  /* 960px以下の時に使用するCSSを記載  */
}

var $win = $(window);

$win.on('load resize', function() {
  var windowWidth = $win.width();

  if (windowWidth > 1024) {
    // PCの処理
  } else if (windowWidth > 768) {
    // TABの処理
  } else {
    // SPの処理
  }
});

viewportの指定方法

viewportは<head></head>内にmetaタグとして記載することで指定できます。Googleが推奨している指定方法としては、以下のような表記が挙げられます。

<head>

<meta name="viewport" content="width=device-width,initial-scale=1">
</head>

width=device-widthとは？

Googleが推奨している指定方法ということもあり、ほとんどのWebサイトでは「width=device-width」と指定されています。width=device-widthは「表示するデバイスの幅

を自動取得する」という意味合いであるため、width=device-widthを指定することでどのデバイスでWebサイトを表示しても適切にレスポンシブデザインが切り替わります。

initial-scale=1.0とは？

Webサイトをはじめて表示した時に表示される拡大の倍率を意味しており、1.0を指定することで等倍率での表示を指定しています。これにより、初期表示ではズームしていない状態の1.0で表示されます。

viewportで設定できる項目

viewportはGoogleの推奨設定が公式で掲載されていますが、制作するWebサイト仕様やペルソナ設計に合わせて変更することも可能です。

viewportを変更することで、閲覧ユーザーに合った拡大率や横幅を指定することが出来ます。

今回は設定できるviewportの項目を5つ紹介します。

width

Viewportの横幅をpx単位で指定することができ、初期値として960pxが設定されています。200pxから10000pxまで幅広く指定することができます。例えば、横幅を550pxで指定する場合には以下のように記載します。

<head>

<meta name="viewport" content="width=550,initial-scale=1">
</head>

メディアクエリとviewportのwidthを調整して合わせれば、問題なくレスポンシブデザインの切り替えが可能です。

しかし、特定のサイズのみ指定することになっているため、レスポンシブデザインを実装できているとは言い難いとGoogleは判断しています。Googleではwidthを数値で指定することを非推奨しており、SEO対策としても影響する可能性が高いため、理由が無ければGoogleの推奨している「width=device-width」を指定しましょう

height

レスポンシブデザインの観点で考えれば使う機会は少ないですが、デバイスの表示領域の縦サイズを指定できる数値です。初期値は横幅との比率から計算される値が指定されており、widthと同様に200~10000pxの間で指定ができます。device-heightを指定することもできますが、特別な理由がない限り指定しなくても問題ありません。

initial-scale

Webサイトを初期表示する時の表示倍率の設定数値です。初期値は1で指定されており、特別な理由がない限りは初期値である以下の指定が推奨されています。

initial-scale=1

minimum-scale/maximum-scale

Webサイトを閲覧時におけるズーム倍率の最小値/最大値を指定できる数値です。

minimum-scaleの初期値は0.25であり、0より大きく10未満の数値を指定できます。

maximum-scaleの初期値は1.6に設定されており、minimum-scaleと同様に0から10の数値を指定可能です。

user-scalable

ユーザーがWebサイトをズームして表示することを許可するかどうかを指定できます。yes/noもしくは1/0で指定することで表示許可の有無を指定します。特に指定をしない場合にはズーム表示を許可するyesが自動設定されます。

viewportが効かない？そんな時の対策ポイント

viewportはさまざまな画面幅のデバイスで適切にレスポンシブ表示が切り替わるための設定ではありますが、場合によってはviewportを指定していてもレスポンシブデザインが適切に切り替わらないこともあります。そんな時に試せる対策を〇つご紹介します。

CSSが適切かを確認する

viewportを適切に設定していたとしても、表示を切り替えるためのCSSに問題がある場合

は適切にレスポンシブデザインが切り替わりません。

レスポンシブデザインとして切り替えるためには、以下のポイントを確認しましょう。

メディアクエリの数値が正しく指定されているか
そもそもCSSが読み込まれているか
CSS自体の表記は正しいか

viewportの設定項目を確認する

viewportで設定できる項目として、を紹介しました。CSSが反映されているのにレスポンシブデザインが切り替わらない場合、これらの設定項目それぞれの相性の問題でviewportが適切に反映されていない可能性も挙げられます。

例えば、以下のように初期表示倍率のinitial-scaleを0.5に指定した場合には、画面が大きく表示されてしまいます。理由としては、表示倍率を0.5に指定することにより、表示が2倍になってしまうためです。

<head>

<meta name="viewport" content="width=device-width,initial-scale=0.5">
</head>

ブラウザ上で読み込まれているかを確認する

CSSやJavascriptなどの外部ファイルは<link>タグや<script>タグで読み込まなければ、ブラウザ上に反映されません。

viewportの表示やCSSが適切なのにレスポンシブデザインが切り替わらないという場合には、デベロッパーツールなどを使ってブラウザ上で外部ファイルが読み込まれているかを確認しましょう。

キャッシュを削除する

意外と改善が期待できるのがキャッシュの削除です。HTMLファイルやPHPファイルを更新し続けると、制作環境によっては前のキャッシュが残ってしまい現在の表示が反映されないこともあります。CSSやviewportの設定項目、ブラウザ上で読み込まれているかを確認して問題がなかった場合には、一旦キャッシュを削除してみるのがおすすめです。