ビューポート（ビューポート）
画面の表示領域を表す概念。Web では `<meta name="viewport">` でモバイル表示制御、3D では仮想カメラの可視領域、グラフィック API では描画矩形を指す。
概要
ビューポート（Viewport）は、画面上で実際に表示される領域を表す概念で、Web 開発・3D グラフィックス・グラフィック API で異なる文脈で使われる:
- Web ビューポート: ブラウザの可視領域、モバイル / タブレット / デスクトップで動的に変化
- 3D ビューポート: 仮想カメラの可視範囲、Three.js / Unity / Blender の表示領域
- OpenGL/Vulkan ビューポート: フレームバッファ上の描画矩形を定義
2026 年現在、Web 開発では dvh / svh / lvh の動的ビューポート単位、CSS Container Queries、Subgrid 等の新仕様が普及し、レスポンシブデザインのアプローチが大きく進化している。
Web 開発のビューポート（2026 年）
主要な meta タグ設定
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
| 属性 | 用途 |
|---|---|
width=device-width | デバイスの物理幅に追従（必須） |
initial-scale=1 | 初期ズーム倍率（1 が標準） |
viewport-fit=cover | iPhone Notch / Dynamic Island 領域までフル表示 |
interactive-widget=resizes-content | キーボード表示時のリサイズ動作（2024-） |
CSS ビューポート単位（2026 年標準）
| 単位 | 説明 |
|---|---|
vw / vh | ビューポート幅 / 高さの 1% |
dvh / dvw | Dynamic ビューポート、ブラウザ UI 表示状態に追従 |
svh / svw | Small ビューポート、最小サイズ |
lvh / lvw | Large ビューポート、最大サイズ |
dvi / dvb | 横書き / 縦書きの動的サイズ |
cqw / cqh | コンテナクエリの幅 / 高さ |
Container Queries（@container）
@container (min-width: 600px) {
.card { flex-direction: row; }
}
親コンテナのサイズに応じてレイアウトを変える。Media Queries の発展形。
3D / WebGL のビューポート
Three.js での設定
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
WebGL の glViewport
gl.viewport(0, 0, canvas.width, canvas.height);
フレームバッファ上のどの矩形に描画するかを指定。スプリットスクリーン / マルチビューで複数ビューポートを切り替える。
Unity / Unreal Engine のビューポート
| エンジン | 用語 | 設定 |
|---|---|---|
| Unity | Camera Viewport Rect | (x, y, w, h) を 0-1 で指定 |
| Unreal Engine | Player Camera Manager | Aspect Ratio Constraint |
| Blender | 3D Viewport | N キーパネルで詳細設定 |
モバイルでの注意点（2026 年）
- iOS Safari の Address Bar: スクロールで縮小、
100vhだと意図しない高さ。100dvhで対応 - iPhone Dynamic Island:
viewport-fit=cover+env(safe-area-inset-top)でレイアウト調整 - Android のジェスチャ領域:
env(safe-area-inset-bottom)で下部マージン確保 - iPad の Stage Manager: Multi-Window で動的にサイズ変化、Container Queries が威力
関連用語との違い
| 用語 | 違い |
|---|---|
| キャンバス | 描画用要素、ビューポートは表示領域 |
| ウィンドウ | OS のウィンドウ、ブラウザ内では viewport |
| スクロールビュー | スクロール可能領域、ビューポートはその一部 |
| ステージ | Flash / Animate 系の用語、コンテンツ全体 |
よくある質問
Q1: 100vh と 100dvh の使い分けは？
A: 2026 年は dvh が標準。ブラウザの Address Bar 表示状態に追従し、コンテンツが切れる問題を解決。古いブラウザ対応で vh フォールバックを併記。
Q2: Container Queries は Media Queries を置き換える？ A: 補完関係。Media Queries は画面全体（ビューポート）、Container Queries は親要素サイズ。Card / Sidebar 等のコンポーネントには Container Queries が圧倒的に便利。
Q3: WebGL の Viewport とフレームバッファの違いは？ A: フレームバッファは描画先のメモリ領域、Viewport はその中の描画矩形。複数 Viewport で 1 つのフレームバッファに分割描画可能（VR の左右目別レンダリング等）。
まとめ
- 画面の 表示領域 を表す概念で Web / 3D / Graphics API で文脈差
- 2026 年は dvh / svh / lvh + Container Queries が Web 標準
- モバイル対応は Dynamic Viewport + Safe Area Inset が定石