ビューポート
中級読み方：ビューポート｜英語：Viewport
ブラウザでWebページが表示される領域のことだよ。metaタグで幅を設定してレスポンシブ対応するよ。
やさしい説明
ビューポートは、ブラウザでWebページが実際に表示される領域のことです。スマホとPCでは画面の大きさが違いますよね。
ビューポートの設定がないと、スマホでもPC版のサイト（横幅1000px以上）がそのまま縮小表示されます。文字が豆粒のように小さくなって読めません。
metaタグで「画面の幅に合わせて表示してね」と指定すると、スマホではスマホ用の幅で、PCではPC用の幅で表示されます。これがレスポンシブデザインの第一歩です。
図解：viewport設定の効果
具体例・使い方
<!-- headタグの中に書く（必須！） -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- width=device-width → 端末の画面幅に合わせる -->
<!-- initial-scale=1.0 → 初期の拡大率は100% -->VS Code で ! + Tab を押すと生成されるHTMLの雛形には、viewport の metaタグが最初から含まれています。新しいHTMLファイルを作るたびに自動で入ります。
CSSのvw・vhとの関係
/* vw = ビューポートの横幅の1% */
.hero {
width: 100vw; /* ビューポート全幅 */
height: 100vh; /* ビューポート全高（ファーストビュー） */
}
/* clamp()でフォントサイズをビューポートに合わせて可変にする */
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
/* 最小1.5rem、最大3rem、ビューポート幅の5%で可変 */
}vw（viewport width）・vh（viewport height）はビューポートを基準にしたCSSの単位です。「画面いっぱいに広がるヒーローセクション」など、画面全体を使うレイアウトで活躍します。
いつ使う？
HTMLファイルを作るたびに必ず書きます。スマホ対応のWebサイトを作るなら絶対に必要です。メディアクエリと組み合わせてレスポンシブデザインを実現します。
間違いやすいポイント
❌ viewport設定を書き忘れる
メディアクエリ（@media）でスマホ用CSSを書いても、viewport設定がないと効きません。「スマホで見ても変わらない…」と思ったらまずこれを確認しましょう。
❌ maximum-scale=1 でピンチズームを無効にする
ユーザーが拡大できなくなるのでアクセシビリティ違反です。視力が弱い方が文字を拡大できなくなります。maximum-scale=1 や user-scalable=no は使わないようにしましょう。
よくある疑問
Q: viewportのmetaタグは必須？
A: スマホ対応するなら必須です。書かないとPCサイズで縮小表示されます。<meta name="viewport" content="width=device-width, initial-scale=1.0">を<head>に追加しましょう。
Q: width=device-widthとは？
A: 「画面の幅をデバイスの幅に合わせる」という意味です。これがないとスマホでも980pxなどPC幅で表示されてしまいます。
Q: initial-scale=1.0とは？
A: ページの初期ズーム倍率を1倍（等倍）にする設定です。これがないとブラウザが勝手にズームすることがあります。
関連用語
📖 関連レッスン
レッスンを見る →