近頃フルスクリーン写真を使ったサイトデザインが増えてきました。 第一印象のインパクトやデザイン性など、見ていて楽しくなるサイト作りの方法として注目を浴びている様子です。 しかしフルスクリーン写真を利用したデザインをレスポンシブで実現使用すると少し厄介な問題があります。 今回は「vh」という単位を利用した、フルスクリーンコンテンツの作り方を紹介します。 「vh」とは? 「vh」とは、「viewport height」という意味合いの単位です。 デバイスの表示領域(viewport)の高さに対しての割合を設定することができ、1vh = viewportの1/100で計算されています。 viewportを基準としたものにはこの他「vw(viewport width)」「vmin(viewport minimun)」「vmax(viewport max)」の3種類があり、vmax以外についてはほと
![vhを使ったレスポンシブなフルスクリーンコンテンツの作り方 - ECサイト構築運営に役立つ情報発信|モバイルファーストマーケティングラボ](https://cdn-ak-scissors.b.st-hatena.com/image/square/d5b8b622381a598db758c907eb5b444d87773ebc/height=288;version=1;width=512/https%3A%2F%2Fwww.aiship.jp%2Fknowhow%2Fwp-content%2Fuploads%2F2014%2F07%2Fc8d719048a16a3c042ae4fa09d0d35c6.jpg)