【びゅーぽーと】
ビューポート とは？
最終更新:
💡 長いページの一部を見る、ブラウザの表示窓
ブラウザがウェブページを表示する領域。画面全体やページ全体とは区別する。ページの配置に使うレイアウトビューポートと、拡大などで実際に見える範囲を表すビジュアルビューポートがあり、表示幅や高さを設計するときに関わる。
📌 このページのポイント
- ページの表示領域で、ディスプレイ全体やページ全体とは違う
- 配置の基準と、実際に見える範囲を区別する
- meta viewportでモバイル表示の初期幅や倍率を伝える
- CSSのvh・svh・lvh・dvhは、どの高さを基準にするかが違う
ひよこ PCの画面全体のこと？
ペンギン先生 ブラウザのページ表示領域だよ。ウィンドウが小さければ画面全体より小さくなり、ツールバーなども含めない。ページ全体が長くても、ビューポートにはその一部が見えるんだ。
ひよこ meta viewportは何をする？
ペンギン先生 ひよこ 端末の画素数と同じ幅になる？
ペンギン先生 ひよこ 配置の領域と、見える領域は違う？
ペンギン先生 レイアウトビューポートは配置の基準で、ビジュアルビューポートは現在見えている範囲だよ。ピンチで拡大したりソフトキーボードが出たりすると、配置の幅が同じでも見える範囲が小さくなることがあるんだ。
ひよこ 100vhならいつも見える高さぴったり？
まとめ：ざっくりこれだけ覚えればOK！
「ビューポート」って出てきたら「ブラウザでページを見るための表示領域」と思えばだいたいOK！
📖 おまけ：英語の意味
「Viewport」 ＝ 表示領域
💬 ページを見る窓と考えると分かりやすいよ。ページが長ければ窓の外に続きがあり、スクロールすると見える部分が変わるんだ。