HOMESEO/SEM記事一覧viewportとは?HTMLのmeta要素の正しい書き方と意味を解説SEO/SEMアクセス解析viewportとは?HTMLのmeta要素の正しい書き方と意味を解説2023/01/20ツイートシェアこの記事では、「viewportとは何か」「HTMLのmeta要素の正しい書き方と意味」について、詳しく解説していきます。viewportを適切に設定することで、どのデバイスのユーザーも快適にサイトを閲覧できるようになります。viewportについてよく知らないという方は、この記事を見ながら学んでいきましょう。(ズーム操作の可否)viewportが効かない原因と対策viewportのタグや記載場所に誤りがあるメディアクエリの記述にミスがあるキャッシュの消去まとめSEOに悩むサイト担当者必見!世界最高水準のテクニカルSEOツール「Lumar」URLを入れるだけでサイト内部の問題を一括検出。大規模サイトでも手軽に高度なSEO分析ができます!まずは無料デモクロールを試して、あなたのサイトの問題点を一括検出!今すぐサイトを無料診断するWordPress基礎知識大全を今すぐ無料ダウンロード>>viewportとは?viewport(ビューポート)とは、一言でいうと、表示領域のことです。今このページを見ている範囲がviewportです。正確に言うと、HTMLファイルのheadタグ内に記述するmeta要素のname属性値を指します。WEBサイトの制作者は、meta要素のviewportで指定することで、PC・モバイルなどの表示領域を指定できます。実際に指定するときは、head要素内にmeta要素のname属性を「viewport」と記述します。viewportは、Google推奨のレスポンシブWEBデザイン適用時には、必要不可欠のhtmlタグです。ユーザーがサイトを訪れた際、「このサイト見づらいな」と感じたら、自然とサイトを閉じてしまうことでしょう。viewportは、サイトのファーストインプレッションを決める重要な役割を果たします。ユーザーに直接見えない部分ではありますが、正しく設定し、見やすいサイトを構築していきましょう。content=”width=device-width,initial-scale=1′′></head>Googleは、現時点でこちらの記述を推奨しています。表示領域の幅を指定する方法もありますが、現在は端末画面の幅に合わせることを推奨しています。「width=device-width」を記述することで、表示領域の幅を、PCやスマホなどの端末画面の幅に合わせられます。「initial-scale=1」は初期のズーム倍率を表します。1に設定することで、初めに表示された時の違和感をなくします。これらの設定にすることで、どのデバイスでも表示領域が合わせられ、ズームの倍率もページ全てが見える癖のない初期ズーム倍率になります。したがって、この記述が一番問題が起こりにくい、最新の内容と言えます。content=”width=320′′></head>また、応急措置として、上記のように特定の幅に設定する方法もあります。表示がうまくいかない時などには有効ですが、こちらはGoogle非推奨の方法です。先ほどの「width=device-width」とは違って、どのサイズの画面でも同じサイズの表示になります。大きな画面で見たときには余白が生まれてしまい、小さな画面だと見切れる領域が生まれることがあります。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は、ページロードした時の倍率を指します。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=yesになっており、yesで許可、no(または0)でズームができないよう指定できます。viewportが効かない原因と対策viewportが機能しない原因は、主に「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のタグは、正しい場所に記載するようにしましょう。メディアクエリの記述にミスがあるメディアクエリの記述にミスがあると、正しく表示されない可能性があります。479px)」というCSSがあり、どこかに余計な半角スペースや誤字脱字があったとします。このような小さなミスがあるだけで、viewportは表示されなくなる可能性があります。基本的にGoogle推奨のレスポンシブwebデザインであれば問題ないので、特別なことは求められません。したがって、メディアクエリの書き方を紹介しているサイトからコピペして数値だけ変えるなど、ミスの少ない方法で対応するようにしましょう。キャッシュの消去CSSの記述に誤字脱字、文法の間違いなどがあると、指示が通らないことがあります。間違いがないにもかかわらず、CSSが反映されないケースがあります。このような場合、ブラウザのキャッシュデータを更新できていないことが原因として考えられます。キャッシュとは、過去に閲覧したWEBサイトのデータやファイルデータを一時保存し、ブラウザに再表示させる機能のことです。WEBサイトを最新の状態でブラウザに表示させるには、キャッシュを常に最新状態にしておく必要があります。viewportがうまく機能しない場合は、キャッシュを削除してみましょう。Chromeの場合は、「Shiftキー+ブラウザの再読み込みボタン」で削除できます。Macの場合は、「Shift+command+r」で削除できます。まとめ今回は、「viewportとは何か」「HTMLのmeta要素の正しい書き方と意味」を解説していきました。viewportを正しく機能させることで、ユーザーがわかりやすいサイトを作ることができます。サイトを作っているときにわからなくなってしまったら、こちらのページを参考にしてみてください。CMSのWordPressを徹底解説!初心者でも簡単に始められる基本設定から、サイトの成功を左右するSEO対策まで網羅。新規ブロガーもベテランも必見の完全ガイドです。byGMO」SEO対策でこんな思い込みしていませんか?大きいキーワードボリュームが取れないと売上が上がらない・・コンサルに頼んでもなかなか改善しないSEOはコンテンツさえ良ければ上がる大事なのは自社にあったビジネス設計です。けんと)2012年より一貫して検索エンジン領域のコンサルティング業務に従事。マーケティング部門立ち上げをおこなう。お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。名前メールアドレス電話番号(ハイフン(-)は必要ありません)送信することでプライバシーポリシーに同意したものとします。(木)14:00-17:00EC×SEOの必勝戦略~楽天・Yahoo!・Amazon・自社EC別に解説!上位表示をさせるコツ~本セミナーでは、「EC×SEOの必勝戦略」をテーマとし、主要モールECである楽天、Yahoo!、Amazon、そして自社ECサイトのSEO戦略と成功事例を紹介します。SiteサービスサイトLumarSEO内部分析ツール・Lumarは、内部対策の分析時間の大幅効率化が可能なツールです。グローバルカンパニーも利用し、その高度なSEO機能が評価され海外アワードで多くの賞を受賞しております。タスク管理機能もあり、発見したSEO課題をチーム関係者とスムーズに共有することも可能です。byGMO』は、Google検索エンジン上位表示対策だけではなく、ユーザーの検索体験と生み出される価値にフォーカスした施策を行います。Googleの検索エンジンが日本にリリースされた当初より、SEOに従事し、アルゴリズムの歴史を熟知しているプロが施策を監修します。byGMO」は、エリアごとに歯科医院を紹介するポータルサイトです。TECHのSEOノウハウを活かしたサイト設計により、検索ユーザーへの流入間口拡大を実現。集客・集患に課題を抱える歯科医院様と歯に関するお悩みを抱えるお客様をつなぐサービスを提供しています。USデジタルマーケティングに関することならお気軽にご相談くださいメルマガ登録メールマガジンはこちらからご登録ください。デジタルマーケティングに関するホットな情報をお届けいたします。TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。