実践!スマホサイトのviewport設定 第1回 viewportとはなにか? viewportとは普段聞き慣れない言葉です。スマートフォン端末独特のページの表示方法に深くかかわっていて、デスクトップ環境では、意識する必要のなかった概念なのです。まずは、viewportの概念を理解するところからはじめましょう。 viewportとはなにか? viewport︵ビューポート︶とは、日本語に訳すと﹁表示領域﹂という言葉がしっくりくると思います。 例えば、デスクトップ環境︵PCなど︶のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。 ページがviewportからはみ出た場合は、スクロールをしてviewportを変えます。 スマートフォンの場合はどうでしょうか。どのように表示されるのでしょうか? デスクトップ環境と異なり、スマートフォンのディスプレイは相対的に小さく、1
![実践!スマホサイトのviewport設定 | 第1回 viewportとはなにか?](https://cdn-ak-scissors.b.st-hatena.com/image/square/069495b460805c539af3ba2505a1604a65c5a230/height=288;version=1;width=512/https%3A%2F%2Fcodegrid.imgix.net%2Fimage.png%3Fixlib%3Djs-3.8.0%26w%3D1200%26h%3D630%26mark%3Dhttps%253A%252F%252Fcodegrid.imgix.net%252F~text%253Fixlib%253Djs-3.8.0%2526w%253D1000%2526txt%253Dviewport%2525E3%252581%2525A8%2525E3%252581%2525AF%2525E3%252581%2525AA%2525E3%252581%2525AB%2525E3%252581%25258B%2525EF%2525BC%25259F%2526txt-fit%253Dmax%2526txt-size%253D57%2526txt-font%253DHiragino%252520Sans%252520W5%2526txt-color%253Dfff%26mark-x%3D90%26mark-y%3D195%26blend%3D%2523BD1818%26blend-mode%3Doverlay%26txt%3D%25E5%25AE%259F%25E8%25B7%25B5%25EF%25BC%2581%25E3%2582%25B9%25E3%2583%259E%25E3%2583%259B%25E3%2582%25B5%25E3%2582%25A4%25E3%2583%2588%25E3%2581%25AEviewport%25E8%25A8%25AD%25E5%25AE%259A%2520%257C%2520%25E7%25AC%25AC1%25E5%259B%259E%26txt-align%3Dtop%252Cleft%26txt-font%3DHiragino%2520Sans%2520W5%26txt-size%3D30%26txt-pad%3D100%26txt-color%3Dfff)