vh

ブイエイチ（値）

意味ビューポートの高さに基づく長さの単位

vhとは？

vhは長さの単位の一つで、ビューポートの高さに基づいています。1vhはビューポートの高さの1%に相当します。ビューポートとは、ブラウザで実際にコンテンツが表示される領域のことを指します。50vhは画面の高さの50%を表し、100vhは画面の高さの100%を表します。

vhの具体的な使い方

vh単位を使用して要素の高さを設定する例

<style>
    .vh-height {
        height: 50vh;
        background-color: lightblue;
        padding: 20px;
    }
</style>

<div class='vh-height'>
    ビューポートの高さの50%
</div>

div要素の高さをビューポートの高さの50%に設定しています。

vhに関するよくある質問

Q. vhとpxの違いは何ですか？

A. vhはビューポートの高さに対する相対的な単位で、1vhはビューポートの高さの1%を表します。一方、pxは固定的な単位で、デバイスの解像度に依存します。vhを使うと、異なる画面サイズでも一貫した相対的なサイズを維持できます。

Q. 100vhは常に画面全体を覆いますか？

A. 基本的には100vhはビューポートの全高を覆いますが、モバイルブラウザでは画面下部のツールバーなどにより、実際の表示領域が100vhより小さくなることがあります。これは「100vh問題」として知られています。

Q. vhは小数点を使えますか？

A. はい、vhは小数点を使用できます。例えば、50.5vhと指定することで、ビューポートの高さの50.5%を表現できます。これにより、より細かい調整が可能になります。

vhが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのvhやlinear、none、cm/mm/in、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。