vmin

ブイミン（値）

意味ビューポートの幅と高さのうち、小さい方に基づく長さの単位

vminとは？

vminは、長さの単位の一つです。vminはビューポートの幅と高さのうち、小さい方の1%に相当する長さを、1vminとして指定するために使われます。ビューポートとは、ブラウザでページが表示される領域のことを指します。

vminの具体的な使い方

vmin単位を使用して要素のサイズを設定する例

<style>
    .vmin-size {
        width: 50vmin;
        height: 50vmin;
        background-color: lightcoral;
        padding: 20px;
    }
</style>

<div class='vmin-size'>
    ビューポートの小さい方の辺の50%
</div>

div要素の幅と高さをビューポートの幅または高さの小さい方の50%に設定しています。

vminに関するよくある質問

Q. vminとvmaxの違いは何ですか？

A. vminはビューポートの幅と高さのうち小さい方を基準とし、vmaxは大きい方を基準とします。例えば、ビューポートが800px × 600pxの場合、1vminは6px、1vmaxは8pxになります。

Q. vminはどんな時に使うべきですか？

A. vminは、要素のサイズを画面の向きに関係なく、常にビューポート内に収めたい場合に適しています。例えば、正方形のボタンや画像を、縦長・横長どちらの画面でも適切なサイズで表示したい場合に有用です。

Q. vminは古いブラウザでも使えますか？

A. vminは比較的新しいCSS単位で、Internet Explorer 9以下など、古いブラウザではサポートされていません。互換性が必要な場合は、代替手段（calc()関数との組み合わせなど）を用意するか、別の単位を使用することを検討してください。

vminが学べる書籍の紹介

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

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