【CSS単位】%とvw,vhの違いについて説明します！ | GUARDIAN Marketing BLOG | 成果を上げるサブスク型ホームページ制作|日本屈指5万サイトの実績|東京のガーディアン

%指定では、親要素の各プロパティの値を「100%」として計算します。

たとえば、親要素に対して「width: 500px;」と指定し、その子要素に対して「width: 50%;」と指定しました。

その場合、子要素の幅は何pxになるでしょうか、、、

正解は、「250px」になります！！

ちなみに子要素が「width: 10%;」の場合は「50px」ですね

ちなみに「%」は、高さ、幅、フォントサイズなど、様々なプロパティに使用することが可能です！

次は「vw,vh」ついて解説します！

ブラウザの画面サイズは、デバイスの種類（デスクトップ（PCなど）、タブレット、モバイル（スマホなど）など）、ディスプレイの物理的な大きさと解像度、ブラウザウィンドウのサイズなどによって異なります。

つまり、「vw,vh」は様々なブラウザウィンドウのサイズに対応できる便利なCSSプロパティの単位なのです！

より詳しく説明します！

「vw,vh」では画面のサイズを幅、高さをそれぞれ「100」と考えて、それに対する割合で大きさを指定します。

例を見ていきましょう！

〇ブラウザの幅が1000px、高さが500pxの時

　　「100vh」→高さ500px（ブラウザ画面のいっぱいの高さ）

　　「100vw」→幅1000px（ブラウザ画面のいっぱいの幅）

　　「50vh」→高さ250px（ブラウザ画面の半分の高さ）

　　「50vw」→幅500px（ブラウザ画面の半分の幅）

このようにブラウザの画面サイズを基準に大きさを指定するのが「vw,vh」の特徴です！

いかがでしたでしょうか？

今回はCSSの単位である「%」と「vw,vh」の違いについて書いてみました！

どちらも基準となる大きさから、「相対的」な割合で大きさを指定することは同じですが、基準とするものが違ってきます！

改めて違いをまとめますと

　%指定→親要素を基準とする

　vw,vh→ブラウザの画面サイズを基準とする

ということです！

うまく使い分けられると、より良いレイアウトが組めそうですね！！

それにしてもCSSも奥が深いですな、、、

最後までご覧いただき、ありがとうございました！！ 定期的に発信できたらと思います！