【CSS単位】%とvw,vhの違いについて説明します!

date_range 2023/09/17
GUARDIAN Marketing BLOG
星 翼
vhvw

皆さんこんにちは!株式会社ガーディアンの星と申します!


今回は、CSSの単位でよく見かけるであろう「%」と「vw,vh」の違いについて紹介します!

特にCSSのwidth,heightプロパティでよく使われています。


例:「width: 50%;」、「width: 50vw;」、「height: 50vh;」

このような感じで使われます。


今回はこの「%」と「vw,vh」の違いを理解して使いこなし、より効率よく正確なCSSを書きましょう!!

%指定は親要素の大きさを基準に「相対的」に大きさを指定します!

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


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

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


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

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


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

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

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も奥が深いですな、、、


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

人物

クリエイティブプロダクト部 クオリティコントロール班 星 翼(ほし つばさ)



WEB関連の情報を発信していきます!

記事を読んで役に立つようなコンテンツを配信出来たらいいなと思っています!


今回使用した技術:HTML,CSS