A Little Each Day

note to self

cssで画面の大きさに縛られず要素の高さや幅を画面いっぱいにする

こんにちは。本日はcssで高さ・横幅を自動で100%にする方法です。

従来通りだったらcssで%やpxを使い、レスポンシブデザインでデバイスごとに要素の高さや幅を書いていたと思います。

しかしながら、それでは親要素の高さ・幅に左右されてしまったり、コードが大量になる可能性があり、予期せぬエラーの温床につながる場合があります。

簡単なコードでそれらをデバイスの大きさに縛られずに100%表示できれば便利ですよね。

ビューポート単位(Viewport Units)を使えば簡単に実装することができるので、それらの長所・短所とともに見ていきましょう。

ビューポート単位とは

viewport units(ビューポート単位)とは画面の高さや幅に対して指定できる単位です。

昨今のweb界隈ではレスポンシブ対応は当たり前になっていますが、viewport unitsは画面の高さや幅を基準にできるのでレスポンシブデザインにはもってこいの単位なんです。

ビューポートは以下の4種類あります。

単位 名前 説明
vw Viewport Width ビューポートの幅の1/100
vh Viewport Height ビューポートの高さの1/100
vmin Minimum Viewport ビューポートの幅か高さの値が小さい方の1/100
vmax Maximun Viewport ビューポートの幅か高さの値が大きい方の1/100


それでは下で簡単な使い方を見ていきましょう。


高さ(vh)

要素に画面いっぱいに高さを広げるのはvhを使います。

.landing-page{
  height :100vh;
}


これの素晴らしいところは、たった一行で様々なデバイスで見た場合、要素を常に100%にしてくれるところです。


具体的には、ランディングページに使うとおすすめです。

昨今のよくあるランディングページは、背景に画像があり・大きなメッセージが書いてあって画面いっぱいに表示されている場合が多いと思います。

もちろん従来のcssでも実装は可能ですが、ビューポートを使えばこれだけで様々な大きさの画面で高さ100%で表示できます。


幅(vw)

要素に画面いっぱいに幅を広げるのはvwを使います。

.landing-page{
  width :100vw;
}


これだけで要素を画面の幅を問わず100%に広げることができます。


とても便利ですが一つ注意しなければならないことがあります。

ビューポートの幅というのは、ブラウザのスクロールバーを含んだサイズで計算されてしまいます。


つまり・・・

viewport units > html > body


という大きさの順になります。


なので、(width: 100%;)と(width: 100vw;)は同じ幅100%ですが、幅がスクロールバーの分だけ実質違います。


まとめ

今回はビューポートの概念や簡単な使い方を見てきましたが、ビューポートで要素を指定する場合は、

・高さはビューポート(vh)
・幅はパーセント(%)


で実装したほうが良さそうです。



本日は以上です。