[ 通常表示 ]  [ 簡易表示 ]  [ シンプル表示 ]

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

viewport【metaタグ】

pointこの用語のポイント

pointホームページに関する説明書きだよ

pointHTMLファイルのヘッダ部に記述するよ

point「スマホではこんな感じで表示してよ」な情報を書くよ

スポンサーリンク

簡単に書くよ

viewport【metaタグ】とは

metaタグのひとつ
であり

ホームページのファイル(HTMLファイル)に書く「スマホでは、こんな感じで表示してよ」な情報のこと
です。

image piyo

詳しく書くよ

順番に見ていきましょう。
まずは予備知識として「HTMLファイル」と「metaタグ」について簡単に説明します。
「そんなの説明されなくても知ってるよ!」な人は、適当に読み飛ばしてください。

HTMLファイルは、ざっくり説明すると「ホームページファイル」です。

あなたがホームページを見ようとすると、まず、ホームページを見るときに使うソフトWebブラウザ)からホームページのファイルが置いてあるコンピュータ(Webサーバ)に対して「このページをおくれ」なお願いが出されます。

viewport

そのお願いに対して、WebサーバさんからWebブラウザさんに「ほれ、そのページだよ」とお返事がきます。

viewport2

お返事を受け取ったWebブラウザさんは、受け取った内容(ホームページのファイル)を画面上に表示してくれます。

viewport3

この流れにおいて受け渡しされるファイルがHTMLファイルです。

viewport4

metaタグは「人の目には見えない、ホームページに関する説明書き(を書くときに使う目印)」です。

HTMLファイルの中身は

1.ヘッダ部
2.ボディ部


の2つで構成されています。

viewport5

ヘッダ部に書かれているのは、そのHTMLファイルの説明書きです。
例えば「どんな種類の文字で書かれていますよ~」や「このファイルのタイトルは○○ですよ~」といった内容が書かれています。

viewport6

ボディ部に書かれているのは、そのHTMLファイルの中身です。
ここに書かれている内容がHTMLファイルの本体と言えるでしょう。
みなさんがホームページを見たときに表示される内容が書かれています。

viewport7

metaタグは、HTMLファイルのヘッダ部に

<meta name="hoge" content="ほげほげ">

のような形式で書く「そのページの説明書き」です。

viewport8

あるいは、その説明書きを書くときに使う目印「<meta ~ >」が「metaタグ」です。

viewport9

metaタグに書かれている内容は、人間様には見えません。
Webブラウザさんや、ホームページの情報を収集して回っているプログラム検索エンジン)に向けて書かれる情報です。

viewport10

metaタグには、いろいろな種類があります。
また、日々増えています。

以上を踏まえて、いろいろあるmataタグのひとつで「このページは、こんな感じで表示してよ」とスマホ向けの指示を書くmetaタグが「viewport」です。

viewport11

実際のviewportは、例えば

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

のように書きます。
この例では「横幅は画面の幅と合わせて、最初は1倍の拡大(つまり拡大しないで)表示してよ」と言っています。
指示はセミコロン「;」区切りで複数書けますよ。

この指示が書いてあると、スマホのWebブラウザさんは指示に従ってページを表示してくれます。
パソコン用のWebブラウザさんはシカトしてぼーっとしてますけどね。

ちなみにviewportを使ってできる指定は以下の通りです。

指定説明
width横幅。「device-width」と指定すると「画面幅いっぱい」な指定になる
height高さ
initial-scale初期の倍率表示。最初はどれくらい拡大して表示する?な指定
maximum-scale最大の倍率表示。何倍まで拡大して良いことにする?な指定
minimum-scale最小の倍率表示。何倍まで縮小して良いことにする?な指定
user-scalable使う人が拡大・縮小しても良いか。「yes」「no」で指定

倍率うんぬんの項目は、表示内容の拡大・縮小に関する指定です。
スマホならではの指定ですね。

このように、スマホで見たときの表示に関する指定を「viewport」で行います。

image piyo2

一言でまとめるよ

まぁ「viewport」って単語が出てきたら「スマホでページを見たときの表示方法を指定してるんだな~」と、お考えください。

一番上に戻るよ
スポンサーリンク