ビューポート【viewport】

概要

ビューポート（viewport）とは、覗き窓、表示域などの意味を持つ英単語。ITの分野では、ソフトウェアの表示設定などで、対象を表示する広さや範囲、領域などのことをビューポートということが多い。

Webページのビューポート

Webページの設定項目の一つで、ページを描画する領域のサイズや表示倍率などを指定したものをビューポートという。HTMLのmetaタグなどで指定する項目で、スマートフォンなど画面サイズの小さな機器でページを適切に表示するために導入された。

例えば、<meta name="viewport" content="width=320"> のように設定すると、実際の画面やブラウザウィンドウのサイズとは無関係に、ウィンドウ内の幅320ピクセルの領域のみを利用してページ内容の描画を行う。ウィンドウがこれより広ければ余白が生じ、狭けば右端が画面外にはみ出して横スクロールバーが現れる。

width属性を「device-width」とすれば、現在表示されているブラウザウィンドウの幅を表示領域の幅とする。パソコンなどでは広い幅となり、スマートフォンなどでは狭い幅となるため、CSSのメディアクエリなどを用いて幅に応じた要素の動的な配置（レスポンシブWebデザイン）を行う必要がある。

width属性以外にも、height属性で表示領域の高さを、initial-scale属性で初期の表示倍率を、minimum-scale属性で最小倍率を、maximum-scaleで最大倍率を、user-scalable属性（yes/no）で利用者による拡大・縮小操作の可否を指定できる。複数の属性を指定する場合は「,」（カンマ）で区切る。

様々なデバイスに対応するレスポンシブなサイトでは、ビューポート幅をウィンドウ幅に合わせ、初期の表示倍率を1.0（ブラウザ側の自動伸縮機能を無効にする）とした <meta name="viewport" content="width=device-width, initial-scale=1.0"> とするのが好ましいとされる。