東証スタンダード上場企業のジオコードが運営！

SEOがまるっと解るWebマガジン

セミナー情報資料ダウンロード

記事を探すメニュー

ジオコードのSEO

ジオコードSEOサービスTOP > SEOマガジン > 実践向け > viewportとは？HTMLの正しい設定方法と表示が変になる原因と対策

実践向け

更新日：2024年 02月 19日

viewportとは？HTMLの正しい設定方法と表示が変になる原因と対策

【監修】株式会社ジオコード SEO事業責任者
栗原勇一

Googleが推奨していることもあり、現状のWebサイトはレスポンシブデザインが必須となっています。そして、レスポンシブデザインの設定にはviewportが不可欠です。

本記事では、Web担当者なら知っておくべきviewportの正しい設定方法やトラブルの原因、対策などについてまとめました。

viewportとは？
viewportの正しい設定
- 基本の設定
- 応急処置的な設定
viewportで指定できる領域
viewportの設定を失敗するとどうなるのか？
viewportが効かない・表示かおかしいときの原因と対策
正しくviewportを設定してレスポンシブデザインを機能させよう

viewportとは？

viewportとはブラウザにおける表示領域の意味で、インターネットユーザーがWebサイトを訪れた際に見ているページ範囲を指します。

正確には、HTMLファイルのheadタグ内に書き入れるmeta要素のname属性値です。meta要素は検索エンジンやブラウザにWebページの内容を伝えるHTMLタグであり、HTMLの<head></head>内に記述することで機能します。meta要素により役割があり、情報を伝えたり指示したりできます。

meta要素のviewportで表示領域を指定すると、パソコンやダブレット、モバイルなど、ユーザーのデバイスの画面サイズに合わせて表示を変えられます。レスポンシブデザインには必須のHTMLタグであり、viewportを指定するか否かはWebサイトのファーストインプレッションを左右します。

viewportの正しい設定

viewportの設定はWebサイトの見え方に大きく影響します。正しく設定して見やすいWebサイトを構築しましょう。ここでは、基本設定と応急処置的な設定を解説します。

基本の設定

viewportは、Google推奨のレスポンシブデザイン適用時に必要不可欠なHTMLタグです。表示領域の幅を各デバイスに合わせるため、name属性には「viewport」、content属性には「width=device-width」と記述します。

また、ズーム倍率は初めにページが表示されたときに違和感がないように「initial-scale=1」と書き込みましょう。この2つを設定すると、どのデバイスでも表示領域の幅が合わせられてズーム倍率もページ全体が見える初期倍率になります。

応急処置的な設定

Webサイトのページが適切に表示されない場合は、応急処置的に表示領域の幅を特定のサイズに設定しましょう。例えば、日本国内で販売されているスマートフォンのポートレート表示幅は320px、ランドスケープ表示幅は480px以上であることが多いため、横幅を320pxと設定し、meta要素内のcontent属性を「width=320」と記述します。

表示領域の幅を指定する方法はGoogle非推奨ですが、応急処置としては役立ちます。ただし、横幅が指定のサイズになり、デバイスの画面サイズによってページの見え方が変わるため注意が必要です。大きい画面ではページ幅に余白ができ、小さな画面ではページが見切れることがあります。

viewportで指定できる領域

viewportで指定できる領域には、表示領域の横幅・縦幅、初期倍率、最小倍率・最大倍率、ズーム操作などがあります。それぞれの領域や基本設定を簡単にみていきましょう。

width

widthは表示領域の幅を決められるプロパティです。単位はピクセルで、200pxから10,000pxの範囲で指定できます。一般的には980pxがデフォルトとされていますが、例外もあるため注意しましょう。どのデバイスでも、表示領域を最適な状態にしたいなら「device-width」の設定がおすすめです。

widthのサイズを指定すると、デバイスによって見え方が変わってしまう可能性があります。widthを指定するときは、親要素の幅より子要素の幅が大きくならないようにしましょう。子要素の方を大きく設定すると、レイアウトが崩れてしまいます。

hight

hightは表示領域の縦幅を指定できるプロパティです。設定する機会は少ないですが、233pxから10,000pxの範囲で指定できます。デバイスの縦幅に合わせるなら「device-hight」と記述します。なお、hightのデフォルト値はwidthとデバイスのアスペクト比から自動算出されます。

initial-scale

initial-scaleは、Webサイトのページが表示された時の初期倍率を指します。minimum-scaleからmaximum-scaleまで指定でき、デフォルトの倍率は表示領域に合わせて自動算出されます。initial-scaleを指定しないと「initial-scale=1」となります。1に設定するとページを開いたときの最初の違和感をなくし、自然な状態で表示することが可能です。また、表示領域の幅を「width=device-width」に指定しても自動的に「initial-scale=1」に設定されます。

maximum-scale/minimum-scale

viewportは初期倍率だけでなく、maximum-scale（最大倍率）とminimum-scale（最小倍率）も設定できます。指定できる範囲はどちらも0以上10未満で、デフォルトはmaximum-scaleが5.0、minimum-scaleが0.25です。minimum-scaleはinitial-scale（初期倍率）と同時設定できないので気をつけましょう。

user-scalable

user-scalableは、Webサイトを訪れたユーザーにズーム操作を許可するかしないかを指定できます。ズーム操作を許可する場合は「yes」、許可しない場合は「no」と記述します。デフォルトは「user-scalable=yes」でズーム可能な状態になっています。数値でも指定でき、0はno、1はyesと同意です。

viewportの設定を失敗するとどうなるのか？

表示領域を指定できるviewportの設定を失敗すると、Webサイトの見え方にさまざまな問題が生じることをご存じでしょうか。例えば、viewportを設定しないとページの左右に無駄な余白が表れたり、実際のページよりも小さく表示されたりします。縮小して表示されると文字や画像も小さくなり、肝心のコンテンツ内容が分かりづらくなってしまいます。

また、viewportを理解していない人が適当に設定したり、別のWebサイトから指定をコピーしたりすると、コンテンツがすべて表示されないなどのトラブルを生じかねません。きちんと表示されていないWebサイトはユーザーが離脱しやすく、要点が伝わりにくいでしょう。

viewportが効かない・表示かおかしいときの原因と対策

viewportが適切に機能しないときは、記述ミスやブラウザのキャッシュデータをチェックしましょう。具体的な原因や対策を知っておけば、トラブルが生じても焦らず対処できます。

viewportの記述が間違っている

HTMLファイルの<head>と</head>の間にさまざまな情報や設定を書き込むことで、Webサイトは正しく表示されて機能します。そのため、viewportはheadタグ内に記述してあることが大前提です。viewportが誤った場所に記述してあると不具合が生じます。

viewportがheadタグ内に記述してあっても、スペルミスや未指定があると想定したとおりには表示されません。また、widthやinitial-scaleを指定していると、レスポンシブデザインに対応できないだけでなく、見え方がおかしくなる可能性もあります。正しい場所に正しく記述・指定できているか注意深く確認しましょう。

メディアクエリの記述が間違っている

メディアクエリに、不要な半角スペースや誤字脱字があると、viewportが正しく表示されなくなります。小さなミスがないか確認してください。

基本的にGoogleが推奨しているレスポンシブデザインであれば表示に問題はないため、メディアクエリに特別な書き方は必要ありません。そのため、メディアクエリの書き方を解説したWebサイトなどからコピペするとよいでしょう。ベースはコピペで、変更する箇所だけ書き換える方がミスを防げます。

メディアクエリは一定の条件下でのみ指定したCSSを適用し、条件を満たさない場合は適用させないという指示ができます。レスポンシブデザインの設定に必要な記述方法なので、理解しておきましょう。

キャッシュデータが更新されていない

viewportやメディアクエリの記述に問題がない場合は、キャッシュデータが更新されていないことが原因かもしれません。キャッシュは一度閲覧したWebサイトの情報をブラウザに一時保存し、再表示させる機能です。Webサイトのページから新しいデータをダウンロードする工程を省くため、内容が変わっていても古いデータが表示される場合があります。

Webサイトのページを最新の状態でブラウザに表示したいなら、キャッシュも最新の状態に保っておきましょう。viewportが正しく機能しない場合はキャッシュを削除して、最新の状態にしてから再度確認してみましょう。

正しくviewportを設定してレスポンシブデザインを機能させよう

viewportは、Webサイトの見え方に関わる大切な要素です。Web担当者などのWebマーケティングに携わる人であれば、レスポンシブデザインの必須要素であるviewportの役割を理解して正しく設定できるとよいでしょう。今回紹介したviewportに関するありがちなトラブルの原因や、対策も参考にしてみてください。

HTMLやCSSがうまく記述できないなら、プロにサポートを依頼してはいかがでしょうか。ジオコードは18年以上にわたってSEOやコンテンツマーケティング、WebサイトのUI・UX改善に取り組んできたWebマーケティング会社です。多くの実績があり、SEOに関わるあらゆる悩みを解決してくれます。

資料請求はこちら：https://gc-seo.jp/download/seo-service-document/