ビューポート
中級読み方：ビューポート｜英語：Viewport
ブラウザでWebページが表示される領域のことだよ。metaタグで幅を設定してレスポンシブ対応するよ。いつ使う？ スマホ対応のサイトを作るとき、<head>の中に<meta name="viewport" content="width=device-width, initial-scale=1.0">と書くよ。間違いやすいポイント: このmetaタグを書き忘れると、スマホでPCサイズのまま縮小表示されてしまうよ。文字が小さくて読めないサイトの原因はこれが多いよ。
やさしい説明
ビューポートは、ブラウザで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% -->いつ使う？
HTMLファイルを作るたびに必ず書きます。スマホ対応のWebサイトを作るなら絶対に必要です。VS Codeの雛形（!+Tab）には最初から含まれています。
間違いやすいポイント
❌ viewport設定を書き忘れる
メディアクエリ（@media）でスマホ用CSSを書いても、viewport設定がないと効きません。「スマホで見ても変わらない…」と思ったらまずこれを確認しましょう。
❌ maximum-scale=1 でピンチズームを無効にする
ユーザーが拡大できなくなるのでアクセシビリティ違反です。この設定は使わないようにしましょう。
よくある疑問
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倍（等倍）にする設定です。これがないとブラウザが勝手にズームすることがあります。
関連用語
📖 関連レッスン
レッスンを見る →