viewportとは？HTMLのmeta要素の設定方法など徹底解説！

viewportとは、PCやモバイル（スマホ、タブレット）といったデバイスごとにコンテンツの表示領域を設定するためのHTML属性値（meta要素のname属性の属性値）のことです。直訳すると「表示領域」を意味し、読み方は「ビューポート」です。
このviewport（meta viewport）を設定してうまくレスポンシブデザインにできれば、SEOへの良い影響が期待できます。

一方、viewportを設定しなければ、レスポンシブデザイン対応できません。
具体的には、モバイル（スマホ、タブレット）でコンテンツを閲覧したときに、PC向けサイトの横幅になるので表示領域が最適化されません。
この場合、文字が画像が小さくて見ずらかったり、見ずらいので都度ピンチアウトやピンチインで拡大縮小して閲覧する手間が増えます。
結果、ユーザーの利便性が低下するので、Googleから評価されづらくなるというわけです。

こうした良くない状況を回避する為に、viewportを適切に扱って、より見やすく使いやすいコンテンツにしましょう。

この点踏まえて今回は、viewportの定義や設定方法、スマホで効かない原因など中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

viewportとは？

viewportとは、PCやモバイル（スマホ、タブレット）といったデバイスごとにコンテンツの表示領域を設定するためのHTML属性値（meta要素のname属性の属性値）のことです。直訳すると「表示領域」を意味し、読み方は「ビューポート」です。

例えば、PC向けのサイトを持っていて、スマートフォン（AndroidやiOS[iPhone]）やタブレット向けのサイトも最適にコンテンツを表示するようにしたいとします。
この場合、PC向けサイトのhtmlファイルのheadタグ内でmeta要素のname属性の属性値にviewportを記述します。

このように記述するHTML属性値がviewportというわけです。

viewportの設定方法

viewportの設定方法を基本とその他に分けて解説します。

• 基本の設定
• content属性の設定

基本の設定

viewportを設定するには、まずHTMLファイルのドキュメントの先頭であるheadタグを見つけます。
そのheadタグ内にmeta要素を記述して、そのmeta要素のname属性の属性値にviewportを記述します。
さらにcontent属性の属性値にwidth=device-width, initial-scale=1.0を記述します。

この記述がGoogleで推奨されてる基本的なviewportの設定方法です。

content属性の設定

viewportのcontent属性の設定は、属性値に「width=device-width」「user-scalable」「initial-scale」が記述できます。

• width=device-width
  meta viewport利用時に追加できる「width=device-width」は、表示領域の幅で、端末画面の幅に合わせる指定ができる、meta要素のcontent属性の属性値です。
• user-scalable
  meta viewport利用時に追加できる「user-scalable」は、ズームの操作で、許可する（yes）・許可しない（no）の指定ができる、meta要素のcontent属性の属性値です。
• initial-scale
  meta viewport利用時に追加できる「initial-scale」は、初期のズーム倍率で、倍率（minimum-scale～maximum-scale の範囲）指定ができる、meta要素のcontent属性の属性値です。
  「minimum-scale」は、倍率 （0～10 の範囲、初期値は 0.25）。「maximum-scale」は、倍率 （0～10 の範囲、初期値は 1.6）。

ちなみに、属性値でwidth=320 や width=1024 などの特定の幅（固定幅）を記述することもできます。

この記述は、特定の幅（固定幅）の記述は応急措置として便利ですが、Google非推奨のviewportの設定方法です。

viewportがスマホで効かない原因と対策

viewportがスマートフォン（android・ios[iphone]）で効かない原因がいくつかあります。

• HTMLタグの記述ミスや未指定のため
• CSSの記述ミスや未指定のため

HTMLタグの記述ミスや未指定のため

viewportがスマホで効かない原因は、HTMLタグの記述ミスや未指定のためです。

例えば、HTMLのheadタグ内にmeta要素のname属性の属性値でviewportの記述やcontent属性の記述を間違ってたとします。
また、HTMLのheadタグ内にviewportを設定してなかったとします。
この場合、モバイル（スマホ、タブレット）で閲覧したときに、コンテンツがPC向けの横幅で表示されてスマホの画面からはみ出ます。
つまり、表示領域が最適化されないので、viewportがスマホで効かないというわけです。

こうした状況を回避する為に、HTMLのheadタグ内で記述してるviewportの記述ミスを修正したり、headタグ内にviewportを設定しましょう。

CSSの記述ミスや未指定のため

viewportがスマホで効かない原因は、CSSの記述ミスや未指定のためです。

例えば、HTMLのheadタグ内にviewportを設定してる状態で、CSSで相対的な幅指定（width:100%;など）やメディアクエリ等の必要な記述を間違ってたとします。
また、相対的な幅指定（width:100%;など）やメディアクエリ等の必要な記述がなかったとします。
この場合、モバイル（スマホ、タブレット）で閲覧したときに、コンテンツがPC向けの横幅で表示されてスマホの画面からはみ出ます。
つまり、表示領域が最適化されないので、viewportがスマホで効かないというわけです。

こうした状況を回避する為に、相対的な幅指定やメディアクエリ等の必要なCSSの記述を追記したり、記述のミスを修正しましょう。

viewportを設定してレスポンシブデザインにする

viewportを設定してレスポンシブデザインにするには、CSSファイルに「メディアクエリ（media query）」でPC・スマホ・タブレット用のスタイルシートを記述します。

例えば、まずHTMLファイルにビューポート（meta viewport）を記述してる状態にします。

この状態で対象のCSSファイルにメディアクエリ（media query）を記述します。

そうすれば、PCやスマホ、タブレットで閲覧したときに、それぞれのデバイスの横幅に最適化されてコンテンツが表示されます。
つまり、viewportを設定してレスポンシブデザインにすることができるとうわけです。

ちなみに、通常（PC向け）の記述をベースに、レスポンシブWebデザイン（スマホ・タブレット用）に必要な記述だけ追記していきましょう。

まとめ：viewportを適切に扱って、より見やすく使いやすいコンテンツにしよう

viewportを適切に扱って、より見やすく使いやすいコンテンツにしましょう。

一方、viewportを不適切に扱えば、レスポンシブデザインになりません。
具体的には、viewportやCSSのメディアクエリの記述ミスをしたり、viewportの記述位置の間違えや記述しなければ、レスポンシブデザインにならないのでモバイルフレンドリーではありません。
この場合、モバイル（スマホやタブレット）で閲覧したときに、コンテンツが見づらく使いづらいです。
結果、ユーザーエクスペリエンスが低下してGoogleから評価されづらくなるというわけです。

こうした悪い状況を回避する為に、viewportを適切に扱って、より見やすく使いやすいコンテンツにしましょう。