【CSS】width: 100%とwidth: 100vw、height: 100%とheight: 100vhはなにが違うの？🤔
width: 100%とwidth: 100vw、height: 100%とheight: 100vhはなにが違うの？🤔
`width: 100%`と`width: 100vw`、`height: 100%`と`height: 100vh`の違いについて説明します。これらはCSSで要素のサイズを指定するときに使われる単位ですが、その挙動には確かに違いがあります。
`width: 100%`と`width: 100vw`
`width: 100%`:
この指定は、要素の幅をその親要素の幅に合わせることを意味します。つまり、ある要素が`width: 100%`を持っている場合、その要素の幅は親要素の幅に対して100%になります。これは、要素がそのコンテナ内でどれだけの幅を取るかに関連します。
`width: 100vw`:
一方で、`vw`はビューポート幅の単位で、`100vw`はビューポート（ユーザーのブラウザウィンドウの可視領域）の幅全体を意味します。これにより、要素はブラウザウィンドウ全体の幅を占めるようになります。`100vw`は親要素の幅に依存せず、ビューポートのサイズに基づいています。
`height: 100%`と`height: 100vh`
`height: 100%`:
`height: 100%`は、要素の高さをその親要素の高さに合わせることを意味します。親要素の高さが指定されている場合、子要素はその高さの100%を占めるようになります。
`height: 100vh`:
`vh`はビューポート高さの単位で、`100vh`はビューポートの高さ全体を意味します。これを使用すると、要素はブラウザウィンドウの高さ全体を占めるようになり、これも親要素の高さには依存しません。
ビューポートのときに、スクロールバーを含めるか含めないかとかのなんかあったよね？🤔
スクロールバーの影響
ビューポート単位（`vw`や`vh`）を使用すると、スクロールバーの有無によって見た目が変わる可能性があります。`100vw`や`100vh`はブラウザのビューポートサイズを基準にしているため、もしスクロールバーが存在する場合、それらはスクロールバーを含めたビューポートのサイズを指します。これにより、`100vw`を持つ要素はスクロールバーを含む全幅を占めるため、水平スクロールバーが発生することがあります。
一方、パーセント単位（`%`）で指定されたサイズは、親要素のサイズに基づいているため、直接的にスクロールバーの存在に影響されることはありません。しかし、親要素やその他のスタイリングによっては、間接的にスクロールバーの表示に影響を及ぼすことがあります。
これらの違いを理解することで、デザインやレイアウトを正確にコントロールできるようになります。
（なるほど～。%は親要素に依存するから、親要素ありきで考えると、使い勝手良さそうな感じもするっすよね。🫠）
俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！ ご興味あれば、よろしくお願いいたしますッ！！
それでは、最後まで読んでいただき、ありがとうございましたッ！！
よろしくお願いしますッ！