スマートフォンをはじめとしたモバイル端末でホームページを表示することを想定するとき、Viewportと呼ばれるタグを挿入します。 タグを挿入する時、例えば以下のようなコードを*コピー&ペーストしている方は多いのではないでしょうか。 貼り付けるだけでも問題ありませんが、構造を理解すれば好きなようにカスタマイズすることも可能です。 今回は、Viewportの基本的な概念から設定に関する具体的なコツをご紹介します。 Viewportとは? Viewportとは表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。 例えば、上記のようなホームページがあるとします。 モバイルのViewportを指定していない場合は、デスクトップサイトで表示される横幅をモバイル端末の横幅と合わせてしまうので、以下のように非常に小さくて閲覧しにくい状態で表示されてし
![コピペで済ませていませんか?改めて学び直したい「Viewport」のすべて](https://cdn-ak-scissors.b.st-hatena.com/image/square/2924090862a9ce70106790e70274e490ac3bd9ce/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F6033%2Fog_image%2Fdefault-3fef5f791ba407e030b678340def941c.jpg)