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

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

viewport【metaタグ】

pointこの用語のポイント

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

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

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

スポンサーリンク

簡単に書くよ

viewport【metaタグ】とは

HTMLファイルに記述する「スマホではこんな感じで表示してよ」な指示情報のこと
です。

image piyo

詳しく書くよ

予備知識として「HTMLファイル」は「ホームページ(の中の1ページ)」ね。
metaタグ」は「ホームページに記述する、人の目には見えないそのページに関する説明書き」です。

viewport

このmetaタグにはいろいろ種類があるのですが、その中で「このページはこんな感じで表示してよ」とスマホ向けの指示を書くmetaタグが「viewport」です。

viewport

実際の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」って単語が出てきたら「スマホでページを見たときの表示方法を指定してるんだな~」と、お考えください。

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