【HTML / metaタグ】viewportの使い方・書き方まとめ
HTMLにおけるmetaタグの1つ、viewportの使い方や書き方のまとめです。 最も重要なことを簡潔にまとめてあります。
①スマホ画面で見やすくする
viewportとは
viewportとはスマホでの見え方を最適化するmetaタグです。 スマホが普及した現在では、必須のmetaタグとなっています。
具体的にどのように最適化するのかというと、スマホで見る横幅を指定することで、 小さい画面でもうまく見えるようになります。
後ほど書き方はご紹介しますが、横幅の指定方法は数値で指定する方法と、汎用的な指定方法があります。 スマホの画面サイズは様々なので、汎用的な指定方法が推奨されます。
viewportの使い方
viewportはスマホでアクセスされる可能性があるページに対して使います。 2017年12月現在、スマホからの検索がPCからの検索を超えており、Googleはスマホ検索をメインにすると公言しました。
よって、全てのページに対して設定するべきmetaタグといえます。
viewportの書き方
viewportは以下のように、HTMLでheadタグ内に書きます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
このままコピペで使用できます。 widthをどのスマホ画面サイズでも対応できるように「device-width」としています。
