みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
１分で理解できるHTML/CSS講座シリーズです。
今回は画像を画面いっぱいに表示する方法について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- 1分で画像を画面いっぱいに表示することができる
- %とvh,vwの違いが理解できる
１分で理解できるHTML/CSS講座シリーズはじめっ！
画像を画面いっぱいに表示してみよう
vhとは
要素の高さを設定する単位です。
画面いっぱいの表示を100として、どの割合のサイズにするかを指定します
/* 画面の高さを設定 */
height: 100vh;
vwとは
要素の幅を設定する単位です。
画面いっぱいの表示を100として、どの割合のサイズにするかを指定します
/* 画面の幅を設定 */
width: 100vw;
%との違いは？
上記の解説を読むと「%で良くない？？」という疑問が生まれると思います。
しかし、%はあくまで親要素に対する表示割合です。
ですので、親要素が画面いっぱいの領域を持っている必要があります。
一方のvh,vwは表示画面に対する比率なので、
100に設定すれば、確実に画面いっぱいの表示ができます。
実際に設定してみよう！
See the Pen
vh100 by samehack (@samehack)
on CodePen.
画面いっぱいに表示できるようになってえらい！
まとめ
- 画面いっぱいに表示したい場合、100vh,100vwという単位を使おう
- %は親要素に対する比率
- vh,vwは表示画面に対する比率
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
