【HTML,CSS】viewportとは？【定義から分かりやすく解答】

「viewportの設定方法は分かるけど、その意味がいまいちしっかり分からない」、こんな疑問をもっていませんか？

それは、viewportの定義を明確にしていないことが原因です。

実は一口にviewportと言っても、viewportは2種類あるのです。その意味をこの記事で解説します。

レスポンシブ対応したサイトを作る時に、「viewport」の設定をしているけど、よく理解せずに「あの一行」を書いている。でもこの際しっかりと意味も理解したい。

この記事は、この様な方を想定読者として書いています。

ただ「呪文」のように、HTMLのメタタグを書いている人も実は多いのではないでしょうか？

結論、「viewport」の定義がしっかり分かれば、設定の意味内容は、実際そんなに難しくないです。

HTMLとCSSの基礎的な知識が備わっている方向けなので、もし自信がない方はまず、下記の記事をお読み下さい。HTML,CSSについてまとめてあります。

僕は三年前にプログラミングの独学を開始して、今では個人でお仕事を取ってきて、実務をこなせるまでに成長しました。そんな僕が、「viewport」という概念と、そのおすすめの設定方法、を丁寧に解説しますので、ぜひ最後までお読み下さい。

それではどうぞ！

「viewport」は2種類ある。

記事の冒頭部分で少し触れましたが、「viewport」には2種類あります。

この前提知識がないまま、viewportの設定方法などを解説した記事を読んでも、いまいちピントこないと思います。

これこそが「viewportってよくわからん」という状況の、最大の原因です。

結論、「viewport」には下記の２つがあります。

では、それぞれの定義について、詳しく解説しますね。

レイアウトviewport

レイアウトviewportは、webページがレンダリングされる「仮想の表示領域」のことを指します。

言い換えるとwebページのサイズと言ってもOKだと思います。

レイアウトviewportはあくまでも仮想の表示領域なので、デバイス幅は関係ないです。

注意してほしいのは、CSSのメディアクエリーでは、この「レイアウトviewport」のサイズによって適用するCSSを切り替えているということです。

ビジュアルviewport

ビジュアルViewport（視覚的ビューポート）とは、ユーザーの画面に実際に表示されている表示領域のことを指します。

注意してほしいのは、これもデバイスのサイズではないことです。

そして、ビジュアルviewportのサイズはユーザーによって変更することが可能です。

例えば、ピンチ操作によって、ビジュアルviewportは変更されます。

ピンチ操作とは、2本指でつまむように操作するあれです。

ビジュアルviewportのサイズの変更によって、webページのサイズ (レイアウトviewport) 自体が変更される訳ではないことにも注意して下さい。

「viewport」の設定方法。

「レイアウトviewport」と「ビジュアルviewport」の定義が明確になったところで、「それらをmetaタグによってどうやって設定するのか」が次に気になるところだと思います。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

基本的にこの一行を書けばOKです。

この設定をgoogleも推奨しているので、僕もこの一行を書くことをおすすめしています。

検索セントラル　レスポンシブ ウェブ デザイン

HTMLのheadタグの中に、上のmetaタグを書くことで、レスポンシブウェブデザインにおけるviewportの設定は完了しますが、「それって具体的にどういう設定なの？」というところについて、これから書いていきますね。

content属性の中の「width」は何を指定しているのか？

お決まりの指定の中でまず、「content属性の中のwidthは何を指定しているか」について、実例をお見せしながら解説します。

「レイアウトviewport」の値を設定できる。

<meta name="viewport" content="width=1300">

metaタグによって、viewportの設定をすると思いますが、実はcontent属性の「width」は「レイアウトviewport」の幅を指定しています。

なので上の例では、「レイアウトviewport」が「1300px」となります。

実際にwebサイトで試してみる。

今回は、架空の会社のwebサイトを作りました。

そこに下の様なコードをmetaタグに書きました。

<meta name="viewport" content="width=1300">

そうすると「レイアウトviewport」は1300pxになるはずです。

<div class="test">
  <div class="layout_viewport">レイアウトviewport:　<span></span></div>
</div>

上の様な方、コードをHTMLファイルのbody要素の中に、追加して、

.test {
  background-color: #fff;
  padding: 40px;
  font-size: 30px;
  position: fixed;
  top: 100px;
  left: 100px;
  z-index: 1000;
}

上の様なCSSのコードを書きました。

そして、

function show_layout_viewport () {
    document.querySelector('.layout_viewport span').textContent = document.documentElement.clientWidth;
    setTimeout(show_layout_viewport, 100);
}
show_layout_viewport();

この様なJavaScriptのコードも書きました。

document.documentElement.clientWidthで、ドキュメントの幅、つまりページのサイズを取得しています。

それを、取得した値で、「.layout_viewport span」のセレクターにあたる要素の中を書き換えています。

実際に試してみると、ドキュメントの幅、つまりページのサイズが1300pxであることが分かります。

ドキュメントの幅がJavaScriptによって取得され、それがHTMLファイルの中に、表示されています。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

まるで「呪文」のように使われているこちらの設定にある、「width=content-width」を試してみます。

すると下記の画像の通りになりました。

「レイアウトviewport」のサイズが「device-width」つまりデバイスの画面幅に合わさるという指定です。

僕が使ったデバイスが「iPhone 12Pro」で、その画面幅が390pxです。しっかりと反映されています。

このように、レンダリングする「レイアウトviewport」のサイズをデバイスの幅と合わせることで、メディアクエリーでデバイスの幅によってCSSを切り替えることに成功する訳です。

content属性の中の「initial-scale」は何を指定しているのか？

<meta name="viewport" content="width=device-width, initial-scale=1.0">

こちらの設定の中で、でてくる「initial-scale」は何を指定しているのか解説します。

初期倍率が設定できる。

結論、「ビジュアルviewport」の画面幅に対しての初期の縮小倍率を設定することができます。

つまり下記の式が成り立ちます。

言い換えると、どのくらいズームしているか？ということですね。

「initial-scale=2」だと、390pxの画面幅だとすると、2倍にズームしているので、「ビジュアルviewport」は「195」となります。

実際にwebサイトで試してみる。

今回も実際にコードを書いて試します。

まず、下記のようなコードに変更しました。

<div class="test">
  <div class="layout_viewport">レイアウトviewport:　<span></span></div>
  <div class="visual_viewport">ビジュアルviewport:　<span></span></div>
</div>

これによって「ビジュアルviewport」も確認していきます。

function show_visual_viewport () {
    document.querySelector('.visual_viewport span').textContent = window.innerWidth;
    setTimeout(show_visual_viewport, 100);
}
show_visual_viewport();

この様なJavaScriptのコードを書きました。

「window.innerWidth」でウィンドウの内側のサイズを取得しています。

<meta name="viewport" content="width=1300 , initial-scale=1.0">

僕の「iPhone 12Pro」の画面幅は390pxなので、「initial-scale=1」とすると、そのまま画面幅が「ビジュアルviewport」になります。

1倍の縮小なので、縮小しないという指定になります。

この例で試してみますね。

すると、このように、僕の「iPhone 12Prp」の画面幅である「390px」が、「ビジュアルviewport」のサイズをとなっていることが確認できます。

<meta name="viewport" content="width=1300 , initial-scale=2.0">

このように設定して、試してみます。

このように、「ビジュアルviewport」が195pxとなっていることが確認できます。

initial-scaleを書かないとどうなるか？

initial-scaleを書かないとどうなるのか下記のコードで試してみます。

初期倍率を指定していない感じですね。

<meta name="viewport" content="width=1300 ">

すると下の画像の通りになります。

このように「ビジュアルviewport」の幅が「レイアウトviewport」の幅と等しくなるまで拡大してくれます。

※ですが、デバイスによって、ビジュアルviewportは一定の大きさまでしか広がりません。

<meta name="viewport" content="width=2000 ">

このように、「レイアウトviewport」を大きくして試してみました。

すると下の画像の通りになりました。

「ビジュアルviewport」が1560pxで止まってしまっています。

これ以上はピンチ操作でも限界なので、横スクロールするしかありませんね。

metaタグのviewportの設定をしないとどうなるのか？

metaタグでviewportの設定をしてない場合は、レイアウトviewportの値が980pxに設定されます。

なのでそれ以下の400pxとかにブレークポイントを設定していても、適用されません。

スマホ画面で見た時も、そのままではレイアウトviewportの値は変わらないため、webページのサイズは980pxのままなので、メディアクエリーも980pxの値を使って機能します。

なので「max-width: 400px」などのようにスマホ様に、メディアクエリーを用意しても、それが適用されません。

※厳密には、metaタグでviewportの設定が何も指定されてない場合、980px以下の画面幅のデバイスの場合は、レイアウトviewportの値が980pxになり、それより画面幅が大きいデバイスは、デバイスの画面幅がレイアウトviewportの幅となります。

Googleでも推奨されている設定方法。

Googleでも推奨されている設定方法をお伝えします。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

基本的にこちらの設定で問題ないと思います。

「レスポンシブ ウェブ デザイン」Google 検索セントラル

まとめ

この記事では、図を使って、「viewport」の定義から設定方法までを解説しました。

具体的に「レスポンシブウェブデザイン」を実現する方法も知りたい！

という方は、ぜひ下記の記事もお読み下さい！

最後まで読んでくれて、本当にありがとうございました！

ではまた！