viewportとは？HTMLのmeta要素の正しい書き方と意味を解説
ツイート
シェアこの記事では、「viewportとは何か」「HTMLのmeta要素の正しい書き方と意味」について、詳しく解説していきます。
viewportを適切に設定することで、どのデバイスのユーザーも快適にサイトを閲覧できるようになります。
まだviewportについてよく知らないという方は、この記事を見ながら学んでいきましょう。
viewportとは？
viewport（ビューポート）とは、一言でいうと、表示領域のことです。今このページを見ている範囲がviewportです。正確に言うと、HTMLファイルのheadタグ内に記述するmeta要素のname属性値を指します。
WEBサイトの制作者は、meta要素のviewportで指定することで、PC・モバイルなどの表示領域を指定できます。
実際に指定するときは、head要素内にmeta要素のname属性を「viewport」と記述します。
viewportは、Google推奨のレスポンシブWEBデザイン適用時には、必要不可欠のhtmlタグです。
ユーザーがサイトを訪れた際、「このサイト見づらいな」と感じたら、自然とサイトを閉じてしまうことでしょう。
viewportは、サイトのファーストインプレッションを決める重要な役割を果たします。ユーザーに直接見えない部分ではありますが、正しく設定し、見やすいサイトを構築していきましょう。
HTMLのmeta viewportの正しい設定とその意味
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
</head>
Googleは、現時点でこちらの記述を推奨しています。表示領域の幅を指定する方法もありますが、現在は端末画面の幅に合わせることを推奨しています。
「width=device-width」を記述することで、表示領域の幅を、PCやスマホなどの端末画面の幅に合わせられます。
また、「initial-scale=1」は初期のズーム倍率を表します。1に設定することで、初めに表示された時の違和感をなくします。
これらの設定にすることで、どのデバイスでも表示領域が合わせられ、ズームの倍率もページ全てが見える癖のない初期ズーム倍率になります。
したがって、この記述が一番問題が起こりにくい、最新の内容と言えます。
<head>
<meta name=”viewport” content=”width=320″>
</head>
また、応急措置として、上記のように特定の幅に設定する方法もあります。表示がうまくいかない時などには有効ですが、こちらはGoogle非推奨の方法です。
先ほどの「width=device-width」とは違って、どのサイズの画面でも同じサイズの表示になります。
つまり、大きな画面で見たときには余白が生まれてしまい、小さな画面だと見切れる領域が生まれることがあります。
メディアクエリを指定している場合のviewportの正しい設定は？
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
</head>
メディアクエリとは、レスポンシブWEBデザインを作るときに必要な要素です。
メディアクエリを指定している時のviewportの設定も、上記の形で問題ありません。この形であれば、基本的に立ち上げているブラウザ・デバイスの横幅に指定されます。
viewportで設定可能な要素
ここからは、viewportで設定可能な要素を説明します。
以下で説明する要素を理解することで、より見やすいサイト設計ができるようになります。
width（横幅）
widthは、表示領域の幅を決めるプロパティです。「device-width」を指定すると、端末の幅に合わせられます。
設定は、200〜1万の間で可能です。一般的には、980がデフォルトといわれていますが、例外もあるので、必ず確認するようにしましょう。
widthを指定するときは、親要素の幅を子要素がはみ出ないようにしましょう。
この設定にしてしまうと、ページの領域を超えて無駄な要素が広がってしまうので、レイアウトが崩れてしまう可能性があります。
また、widthは最大と最小の指定ができます。
最小幅をmin-width、最大幅をmax-widthで指定します。
min-widthは、これ以上小さくならないように設定ができるので、widthを％で指定した時などにセットで使うと効果を発揮します。
これは、「PCではちょうどいいけど、スマホで見るときには小さい」といった問題を解決できます。
一方、max-widthはこれ以上大きくならない幅を指定できます。「スマートフォンではちょうどいいけれど、PCで見るときには小さすぎる」といった問題を解決してくれます。
height（縦幅）
heightは、表示領域の高さを指定するプロパティです。
デフォルト時の表示は、widthと端末のアスペクト比から自動算出されます。pxで指定するときは、233〜1万の間で設定することができます。
initial-scale （初期倍率）
initial-scaleは、ページロードした時の倍率を指します。minimum-scale〜maximum-scaleで指定可能で、デフォルトは表示領域にページがフィットするよう、自動算出されるようになっています。
initial-scaleを指定しない場合は、initial-scale＝1となります。
maximum-scale（最大倍率）とminimum-scale（最小倍率）
maximum-scaleは最大拡大倍率、minimum-scaleは最小縮小倍率を示しています。
これらを指定することで、拡大・縮小した時の上限・下限を設定できます。
maximum-scaleのデフォルトは5.0で、minimum-scaleのデフォルトは0.25になります。
なお、initial-scaleとminimum-scaleは、同時に設定できないようになっています。その理由は、設定してしまうと縮小できなくなってしまうからです。
user-scalable （ズーム操作の可否）
user-scalableは、ユーザーがズームできるかを指定できる要素です。デフォルトはuser-scalable=yesになっており、yesで許可、no（または0）でズームができないよう指定できます。
viewportが効かない原因と対策
viewportが機能しない原因は、主に「viewportのタグや記載場所の誤り」「メディアクエリの記述ミス」「キャッシュが残っている」といったことが、考えられます。
基本的に、以下に書かれている対策をすれば解決できるので、ぜひ試してみてください。
viewportのタグや記載場所に誤りがある
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
</head>
viewportは、<head>と</head>の間に記載しなければ、機能しません。
headタグの中には、WEBページのさまざまな情報や設定を書きます。タグ内の情報は、サイトに直接表示されるものではありません。
あくまでも、サイト内の設定を作るためのタグだということを覚えておきましょう。
Googleは、width=device-widthを推奨しています。では、widthに値を入れると、どのようなことが起こるでしょう。
widthに値を入力してしまうと、初期の横幅が指定されてしまうため、Google推奨のレスポンシブWEBデザインができません。
また、initial-scale=2.0とした場合は、初期倍率が2倍に設定されてしまうため、サイト全体を閲覧できていない状態になってしまいます。
viewportのタグは、正しい場所に記載するようにしましょう。
メディアクエリの記述にミスがある
メディアクエリの記述にミスがあると、正しく表示されない可能性があります。
例えば、「@media screen and (max–width: 479px)」というCSSがあり、どこかに余計な半角スペースや誤字脱字があったとします。
このような小さなミスがあるだけで、viewportは表示されなくなる可能性があります。
基本的にGoogle推奨のレスポンシブwebデザインであれば問題ないので、特別なことは求められません。
したがって、メディアクエリの書き方を紹介しているサイトからコピペして数値だけ変えるなど、ミスの少ない方法で対応するようにしましょう。
キャッシュの消去
CSSの記述に誤字脱字、文法の間違いなどがあると、指示が通らないことがあります。また、間違いがないにもかかわらず、CSSが反映されないケースがあります。
このような場合、ブラウザのキャッシュデータを更新できていないことが原因として考えられます。
キャッシュとは、過去に閲覧したWEBサイトのデータやファイルデータを一時保存し、ブラウザに再表示させる機能のことです。
WEBサイトを最新の状態でブラウザに表示させるには、キャッシュを常に最新状態にしておく必要があります。
viewportがうまく機能しない場合は、キャッシュを削除してみましょう。
Google Chromeの場合は、「Shiftキー＋ブラウザの再読み込みボタン」で削除できます。
Macの場合は、「Shift＋command＋r」で削除できます。
まとめ
今回は、「viewportとは何か」「HTMLのmeta要素の正しい書き方と意味」を解説していきました。
viewportを正しく機能させることで、ユーザーがわかりやすいサイトを作ることができます。
サイトを作っているときにわからなくなってしまったら、こちらのページを参考にしてみてください。
- SEO対策でビジネスを加速させる「SEO Dash! byGMO」
-
SEO対策でこんな思い込みしていませんか？
- 大きいキーワードボリュームが取れないと売上が上がらない・・
- コンサルに頼んでもなかなか改善しない
- SEOはコンテンツさえ良ければ上がる
大事なのは自社にあったビジネス設計です。 御社の課題解決に直結するSEO施策をご提案します
- プロフィール
-
-
GMO TECH株式会社
- 2012年より一貫して検索エンジン領域のコンサルティング業務に従事。 2017年にGMO TECH社に参画。営業組織の構築、新商材開発、マーケティング部門立ち上げをおこなう。 現在、MEOコンサルティング、SEOコンサルティング、運用型広告などSEM領域全体を統括し、 お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。
-
GMO TECH株式会社
