横はvw縦はvh～ついでにvminとvmaxをまとめて覚える

縦と横のサイズの指定は、レイアウトを作成する上でものすごく重要なことです。指定方法としては、％やpx、emやremでの指定方法以外にも、サイズを指定する単位としてvw、vhを学習していこうと思います。
あと、ついでにvminとvmaxも説明しておきます。

vwとvhは画面サイズに対しての単位になります

HTML

<div class="box">
  <p>サンプルテキスト</p>
</div>

CSS

.box {
  width:50vw;
  height:50vh;
  background:#999;
}

早速簡単に作成しましたが、表示されたボックスは50vwと50vhと言う単位でのボックスになります。
vwと言うのは画面の横幅に対しての割合、vhは画面の高さに対しての割合になります。
つまり今回は横の幅が画面の50%、高さは画面の高さの50%のボックスということになります。

画面サイズに対しての表示ですので、縦長の画面だと出力結果は全く違うものになります。

スマホだとこんな感じ

スマホの場合はvwとvhのサイズが変わるので縦長のボックスになります。
つまり、このように画面サイズに合わせたサイズの調整が可能になります。

100vwと100vhを使う時に気をつけること

つまり、100vwと100vhを指定すれば、画面全体が自動的に埋まる事になります。これは間違いないですね。

ですが、この100vwと100vhを使うときには1点だけ注意があります。

余白などがあると、横や縦の幅をはみ出してしまいます。特に、100vwの指定はスクロールバーが出てきた場合も同様にスクロールバーの分だけはみ出して、横スクロールバーが出てしまうなんてことになります。そういう場合は100%を使うほうが良いでしょう。

vminは縦横の短い方、vmaxは縦横の長い方

vminとvmaxはそれぞれ画面の短い側、長い側になります。
横長のデスクトップのような画面ですとvminが縦幅、vmaxが横幅になります。
逆にスマホですとvminが横幅、vmaxが縦幅になります。

横幅をvmax、縦幅をvminにした場合のそれぞれのボックス表示

PCでもスマホでも、縦横の比率が変わらないボックスを作る場合はこちらを使うことになりますが、地味に使いづらいので記憶の片隅においておくだけでも良いと思います。
これを使ったいい方法などありましたら教えていただけたら幸いです。

最後に

このように、サイズを指定する方法も色々な単位が存在しますので、それらを上手く利用すれば、レスポンシブデザインの助けになると思います。

もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！