「せっかく作ったWebサイト、スマホで見たら文字が豆粒みたいに小さい…！」
「レイアウトが崩れて横スクロールしてしまう…」
Web制作を始めたばかりの頃、こんなトラブルに直面したことはありませんか？
実はこれ、「Viewport（ビューポート）」の設定が正しくできていないことが原因かもしれません。
PCと違って画面の小さなスマートフォンでWebサイトを快適に見てもらうためには、このViewportの設定が欠かせません。なんだか難しそうな専門用語に聞こえるかもしれませんが、仕組みはとってもシンプル。たった1行のコードを追加するだけで解決することも多いんです。
この記事では、初心者の方でも迷わずスマホ対応ができるように、Viewportの正しい書き方やCSSでの活用テクニックを優しく解説します。コピペで使えるコードも用意したので、ぜひあなたのサイト作りにお役立てください。
ユーザーにとって見やすく、使いやすい素敵なサイトを一緒に作っていきましょう。
このページに書いてあること
Viewport（ビューポート）とは？初心者向けに基礎知識を解説
Webデザインの勉強を始めると、必ずと言っていいほど耳にする「Viewport（ビューポート）」。
直訳すると「表示ぞき窓」という意味ですが、Webの世界では「Webページが表示される領域」のことを指します。
もっと簡単に言うと、ブラウザという「画用紙」のサイズのことだと思ってください。この画用紙のサイズを正しく指定してあげないと、スマホのような小さな画面では内容がうまく収まらなかったり、小さくなりすぎたりしてしまうのです。
ここではまず、なぜViewportの設定が必要なのか、その基礎知識をしっかり理解しておきましょう。
スマホとPCでWebサイトの表示領域が異なる理由
私たちが普段使っているパソコンの画面は横幅が広く、たくさんの情報を一度に表示できますよね。一方で、スマートフォンの画面はとてもコンパクトです。
もしViewportの設定を何もしないと、スマートフォンは「これはPC向けの大きなサイトだな」と判断します。そして、PCサイトの全体像（一般的に横幅980px程度）を、小さなスマホ画面（横幅320px〜400px程度）の中に無理やり縮小して表示しようとするのです。
その結果、文字も画像もギュッと縮められてしまい、虫眼鏡がないと読めないような「豆粒表示」になってしまいます。これが、スマホとPCで表示領域の扱いが異なる大きな理由です。
HTMLにおけるViewport設定の役割と重要性
そこで登場するのが、HTMLの<head>タグ内に記述するViewportの設定です。
これを記述することで、ブラウザに対して「このサイトはスマホの画面幅に合わせて表示してね」と指示を出すことができます。
この指示（meta viewportタグ）があるおかげで、スマートフォンは無理な縮小表示をやめ、その端末の画面サイズに最適な大きさで文字や画像を表示してくれるようになります。
つまり、Viewport設定は「スマホ対応（モバイルフレンドリー）」を実現するためのパスポートのようなもの。これがないと、どんなにCSSでデザインを整えても、スマホでは正しく表示されない可能性が高いのです。
レスポンシブデザインとViewportの関係性
最近のWebサイト制作では、PCやスマホ、タブレットなど、あらゆる画面サイズに1つのHTMLファイルで対応する「レスポンシブデザイン」が主流です。
このレスポンシブデザインを作るためには、CSSの「メディアクエリ」という機能を使って、画面幅ごとにスタイルを切り替えます。しかし、このメディアクエリを正しく機能させるための前提条件こそが、Viewportの設定なのです。
Viewportで「画面幅＝端末の幅」と定義して初めて、CSSが「今はスマホの幅だから、このレイアウトにしよう」と正しく判断できるようになります。レスポンシブデザインとViewportは、切っても切り離せない関係にあると言えるでしょう。
コピペでOK！スマホ対応させるViewportの正しい書き方
Viewportの仕組みがわかったところで、次は実際にコードを書いてみましょう。
「コードを書く」といっても、難しい計算や複雑なプログラミングは必要ありません。基本的には、決まった定型文をHTMLファイルに貼り付けるだけでOKです。
ここでは、現在のWeb制作でスタンダードとされている「最も推奨される書き方」をご紹介します。まずはこのコードをコピーして使ってみてください。
HTMLのheadタグ内に記述する基本コード
以下のコードを、HTMLファイルの<head>タグの中に記述してください。場所は<meta charset="UTF-8">の下あたりが見やすくておすすめです。
<meta name="viewport" content="width=device-width, initial-scale=1">Code language: HTML, XML (xml)たったこれだけで、基本的なスマホ対応の設定は完了です。この1行が、スマホでの表示崩れを防ぎ、読みやすいサイズで表示するための魔法の呪文となります。
meta name=”viewport”の構造と意味
このコードは、HTMLのmeta（メタ）タグと呼ばれる要素の一つです。metaタグは、Webページの情報をブラウザや検索エンジンに伝える役割を持っています。
name="viewport"という部分は、「これからViewport（表示領域）に関する設定を書きますよ」という宣言です。そして、具体的な設定内容はcontent="..."の中にカンマ区切りで記述していきます。
もしGoogleのLighthouseなどのチェックツールで「a ‘viewport’ meta element was not specified」というエラーが出た場合も、このタグを追加することで解決できるでしょう。
width=device-widthで端末幅に合わせる
content属性の中にあるwidth=device-widthは、非常に重要な部分です。
これは「表示領域の横幅（width）を、端末の画面幅（device-width）に合わせてください」という意味を持っています。
iPhoneでもAndroidでも、あるいはタブレットでも、それぞれの機種が持っている画面幅に合わせて自動的に表示領域を調整してくれるのです。これを指定することで、PC用の広い幅が無理やり適用されるのを防ぐことができます。
initial-scale=1で初期倍率を最適化する
もう一つのinitial-scale=1は、「初期のズーム倍率」の設定です。
ページを開いた瞬間に、どれくらいの大きさで表示するかを指定します。1（または1.0）は「等倍」を意味します。
一部のモバイルブラウザでは、画面の向きを変えたときなどに勝手にズーム倍率が変わってしまうことがあります。このinitial-scale=1を記述しておくことで、常に意図した等倍サイズでページを表示させることができ、ユーザー体験を安定させることができるのです。
Viewportの各属性（プロパティ）の意味と推奨設定
先ほど紹介した基本コード以外にも、CSS Viewportにはいくつかの属性（プロパティ）が用意されています。
これらを調整することで、表示領域の幅を決めたり、ユーザーが画面をズームできるかどうかを制御したりすることができます。
ただし、設定によってはユーザーにとって使いにくいサイトになってしまうこともあるので、注意が必要ですね。それぞれの属性の意味と、推奨される設定について詳しく見ていきましょう。
Viewportの主な属性
Viewportに指定できる属性はいくつかありますが、代表的なものは以下の通りです。
- width（横幅）
表示領域の横幅を指定します。「320」のような正の整数（ピクセル値）か、デバイスの画面幅に合わせる「device-width」を指定できます。基本的には、どの端末でも最適に表示される「device-width」を使うのが一般的でしょう。 - height（高さ）
こちらは表示領域の高さを指定するものですが、widthと同様に正の整数や「device-height」を指定可能です。ただ、実務で使用する機会はあまり多くありません。 - initial-scale（初期倍率）
ページを開いた瞬間のズーム倍率を指定します。通常は「1」を指定して、等倍（原寸大）で表示されるようにします。 - maximum-scale / minimum-scale（最大・最小倍率）
ユーザーが手動でズームできる倍率の範囲を指定します。以前は最大倍率を制限することもありましたが、現在はアクセシビリティの観点から、極端な制限は避けるのが望ましいですね。 - user-scalable（ズームの許可）
ユーザーによるズーム操作を許可するかどうかを決めます。「yes」が許可、「no」が禁止です。
「no」に設定すると、小さな文字が見えにくいユーザーが拡大できずに困ってしまう可能性があります。特別な理由がない限りは「yes」にするか、この記述自体を省略して、ユーザーが自由にズームできるようにしておきましょう。
推奨される設定
これらを踏まえると、基本的には以下の設定が推奨されます。
<meta name="viewport" content="width=device-width, initial-scale=1">Code language: HTML, XML (xml)この記述であれば、デバイスの幅に合わせて表示され、かつ初期状態は等倍で見やすくなります。
また、iPhone X以降のような全画面ディスプレイの端末に対応するために viewport-fit=cover というプロパティを追加することもありますが、まずは上記の基本形を押さえておくと安心でしょう。
width（横幅）の指定方法
widthプロパティは、Viewportの横幅を指定します。
基本的には先ほど紹介したdevice-widthを指定するのが一般的です。
過去にはwidth=320のように数値を直接指定することもありましたが、現在はスマホの画面サイズが多種多様になっているため、特定の数値を指定することは推奨されません。特定の数値にしてしまうと、それより大きな画面のスマホで見たときに余白ができたり、小さな画面ではみ出したりしてしまうからです。
特別な事情がない限り、width=device-widthを選んでおけば間違いありません。
initial-scale（初期ズーム倍率）の調整
initial-scaleは、ページが読み込まれた時の初期ズームレベルです。
ここには通常1を指定します。
もしここを0.5などにすると、ページ全体が縮小されて表示され、逆に2.0などにすると最初から拡大された状態で表示されます。ユーザーがページを開いた瞬間に違和感なく閲覧できるように、基本的には等倍である1を設定しておくのがベストプラクティスです。
user-scalable（ユーザーによるズーム操作）の設定
user-scalableは、ユーザーがピンチイン・ピンチアウト（指でつまんで拡大・縮小）の操作をできるかどうかを決める設定です。
yes：ズーム操作を許可する（デフォルト）no：ズーム操作を禁止する
デザインを崩したくないという理由でuser-scalable=noを設定するケースも見られますが、視力の弱い方や小さな文字が読みにくい方にとっては、拡大できないサイトは非常に使いづらいものです。アクセシビリティ（誰にでも使いやすいこと）の観点から、基本的にはyes（または記述しない）が推奨されます。
maximum-scale（最大倍率）とminimum-scale（最小倍率）
maximum-scaleはユーザーが拡大できる最大倍率、minimum-scaleは最小倍率を指定します。
例えばmaximum-scale=2.0とすれば、2倍までしか拡大できなくなります。
これもuser-scalableと同様、ユーザーの自由な操作を制限してしまうことになります。「どうしてもこれ以上拡大されると困る」という特殊なアプリのようなUIでない限り、Webサイトでは特に制限を設けず、ユーザーの好みに任せるのが優しい設計と言えるでしょう。
CSSのViewport単位（vw・vh）を活用してデザインを調整する
ここまではHTMLのmetaタグとしてのViewportを見てきましたが、実はCSSにも「Viewport単位」と呼ばれる便利な単位が存在します。
これを使うと、画面のサイズに合わせて文字の大きさや要素の幅を柔軟に変化させることができます。
レスポンシブデザインをより洗練されたものにするために、このCSS Viewport単位についても知っておくと非常に便利です。具体的な使い方を見ていきましょう。
CSSにおけるViewport単位（vw・vh・vmin・vmax）とは
CSSのViewport単位は、現在のブラウザの表示領域（Viewport）のサイズを基準にした単位です。主に以下の4つがあります。
- vw (viewport width): Viewportの横幅の1%
- vh (viewport height): Viewportの高さの1%
- vmin: vwとvhのうち、小さい方の値
- vmax: vwとvhのうち、大きい方の値
例えば、画面幅が1000pxの場合、1vwは10pxになります。%指定が「親要素」のサイズを基準にするのに対し、これらの単位は「画面全体」を基準にするのが大きな特徴です。
vw（viewport width）を使って画面幅に応じたサイズにする
vwは、画面幅いっぱいに要素を広げたい時や、画面幅に応じてフォントサイズを調整したい時によく使われます。
例えば、親要素の幅に関係なく、ある画像だけを画面の端から端まで表示させたい場合にwidth: 100vw;を指定するテクニックがあります。また、PCとスマホで文字サイズを滑らかに変化させたい時に、font-size: 4vw;のように指定することもあります。ただし、PCの大画面だと文字が巨大になりすぎることがあるので、max-widthなどと組み合わせて使うのがコツです。
vh（viewport height）で画面の高さいっぱいに表示する
vhは、CSSのViewport（ビューポート）単位の一つで、Webサイトのトップページなどでよく使われます。「ヒーローイメージ」と呼ばれる大きなメイン画像を、画面の高さいっぱいに表示させたい時などに活躍しますね。
ただ、.hero { height: 100vh; }と指定すると、スマートフォンではアドレスバーやツールバーの分だけ画面からはみ出してしまうことがあるんです。
そんな時は、新しい単位を使って以下のように指定してみましょう。
height: 100dvh;（アドレスバーの出し入れに合わせて高さを調整）height: 100svh;（アドレスバーが出ている時の高さに合わせる）
これならスマホでも綺麗に収まり、没入感のある印象的なデザインを作ることができるでしょう。
CSS Viewport単位を使用する際の注意点
便利なViewport単位ですが、少し注意点もあります。
WindowsのPCなどでは、画面右側にスクロールバーが表示されますが、100vwはこのスクロールバーの幅を含んで計算されることがあります。そのため、width: 100vwを指定すると、スクロールバーの分だけ横幅がはみ出してしまい、不要な横スクロールが発生することがあるのです。
これを防ぐには、単にwidth: 100%を使うか、CSSでoverflow-x: hidden;を指定するなどの対策が必要になることがあります。状況に応じて使い分けてみてください。
Viewportが効かない・スマホ表示が崩れる時の原因と対処法
「正しく記述したはずなのに、なぜかスマホ表示がおかしい…」
Web制作の現場では、そんなトラブルもよく起こります。
metaタグを入れたのに効かない、横にグラグラ動いてしまう、といった問題には必ず原因があります。ここでは、初心者が陥りやすいミスとその解決策をまとめました。困ったときは、これらのポイントを一つずつチェックしてみてください。
metaタグの記述場所やスペルミスを確認する
まずは基本のキ、記述ミスがないかを確認しましょう。
よくあるのが、全角スペースや全角のダブルクォーテーション（”）が混ざってしまっているケースです。コードは必ず半角英数字で記述する必要があります。
また、記述する場所も重要です。meta viewportタグは、必ずHTMLの<head>〜</head>の間に書いてください。<body>の中に書いても効果はありません。他のmetaタグとごちゃごちゃになっていないか、整理して確認してみましょう。
スマホサイトの横幅がはみ出る（横スクロールする）原因
Viewportを設定したのに、スマホでサイトが横にはみ出して横スクロールしてしまう（ガタガタする）ことがあります。
この原因の多くは、画像や特定の要素に固定の横幅（例：width: 1000px）が指定されていることです。
スマホの幅（約375pxなど）よりも大きな固定幅の要素があると、画面からはみ出してしまいます。
CSSで画像に対してmax-width: 100%;を指定したり、固定幅ではなく%などの相対単位を使ったりして、要素が画面内に収まるように調整しましょう。
user-scalable=noが効かない場合の対応策
「ズームさせたくないからuser-scalable=noと書いたのに、iPhoneで拡大できてしまう」というケースです。
実は、iOS 10以降のSafariでは、アクセシビリティへの配慮からuser-scalable=noの指定を無視する仕様になっています。
これはAppleの方針によるものなので、無理に禁止しようとせず、ユーザーが自由に拡大縮小できる仕様を受け入れるのが現在の主流です。どうしてもという場合はJavaScriptなどで制御する方法もありますが、ユーザビリティの観点からはあまりおすすめできません。
「a ‘viewport’ meta element was not specified」というエラーへの対応
Webサイトの品質チェックツール「Lighthouse」などで、「a ‘viewport’ meta element was not specified」というエラーメッセージが出ることがあります。
これはシンプルに「Viewportのmetaタグが見つからないよ」という警告です。
この記事で紹介した基本のコードを<head>内に追加すれば、このエラーは消えます。もし記述しているのにエラーが出る場合は、スペルミスや記述場所が間違っていないか、もう一度よく見直してみましょう。
まとめ
今回は、スマホ対応に欠かせない「Viewport（ビューポート）」について解説しました。
難しい専門用語のように思えますが、やるべきことはシンプル。
HTMLのheadタグ内に<meta name="viewport" content="width=device-width, initial-scale=1">というおまじないコードを記述する、基本はこれだけです。
この1行があるだけで、あなたのWebサイトはスマホでも見やすく、ユーザーに優しい表示に生まれ変わります。
また、CSSのViewport単位（vw/vh）も使いこなせば、より現代的で素敵なデザインが作れるようになるでしょう。
ぜひ今日から設定を見直して、スマホユーザーにも快適なWebサイトを届けてあげてくださいね。
css viewportについてよくある質問
Q1. Viewportを設定しないとどうなりますか？
A. スマートフォンで表示した際に、PC用のサイト全体を小さな画面に無理やり縮小して表示してしまいます。そのため、文字や画像が豆粒のように小さくなり、ユーザーが拡大操作をしないと内容を読めなくなってしまいます。
Q2. user-scalable=no は設定したほうがいいですか？
A. 基本的には設定しない（yesにする）ことを推奨します。視力が弱い方など、文字を拡大して読みたいユーザーにとって、ズーム機能を禁止することは不便を強いることになるからです。アクセシビリティの観点から、ユーザーに操作を委ねるのが望ましいです。
Q3. width=device-width と initial-scale=1 は両方必要ですか？
A. はい、両方記述するのが現在のベストプラクティスです。width=device-widthで幅を合わせ、initial-scale=1で初期の倍率を整えることで、様々なデバイスやブラウザで最も安定した表示結果が得られます。
Q4. PCサイトのみの場合はViewportは不要ですか？
A. PC専用サイトとして運用し、スマホ対応を全く考えないのであれば不要です。しかし、現在は多くのユーザーがスマホからアクセスするため、Googleもスマホ対応（モバイルフレンドリー）を強く推奨しています。特別な理由がない限り、レスポンシブ対応を行いViewportを設定することをおすすめします。
Q5. CSSのvwと%の違いは何ですか？
A. %は「親要素」のサイズを基準にするのに対し、vwは「ブラウザの画面幅（Viewport）」そのものを基準にします。親要素の幅に関係なく画面いっぱいに表示したい場合などは、vwが便利です。
