vminとは？初心者でもわかる使い方とデザインの基本共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

vminとは？

vminはCSSの長さの単位のひとつです。1vminは「ビューポートの小さい方の辺の長さの1%」を表します。ここでいうビューポートとはブラウザの表示領域のことです。つまり画面の幅と高さのうち短い方を基準にサイズを決めます。

なぜvminを使うのか

vminを使うと画面の向きやサイズに合わせて自動で大きさが変わるデザインが作りやすくなります。特にスマートフォンの縦長表示とデスクトップの横長表示を両方想定したいときに便利です。回転しても見やすさが保たれるのが特徴です。

vminとほかの単位の違い

vwはビューの幅の1%、vhは高さの1%、vminは幅と高さの小さい方の1%です。両方の長さに対して相対的に大きさが決まる点が特徴です。

実用的な使い方

よく使う例としてフォントサイズやボタンの幅・高さがあります。以下のように書くと、画面サイズに応じてサイズが自動で調整されます。

h1{ font-size: 4vmin; }

button{ padding: 2vmin 3vmin; }

.card{ width: 60vmin; }

注意点とコツ

vminはすべてのデバイスで同じ結果になる保証はありません。特に極端に小さい画面では読みやすさが落ちることもあります。適切な最小値を設定する工夫や clamp の利用、メディアクエリとの併用を検討しましょう。

単位の比較

単位	意味	特徴
px	ピクセル単位	固定的なサイズ
vw	ビューポート幅の1%	横幅に追従
vh	ビューポート高さの1%	縦方向に追従
vmin	ビューポートの短辺の1%	二方向の最小値に追従
vmax	ビューポートの長辺の1%	二方向の最大値に追従

まとめとして、vminは画面サイズに応じて自然に拡大縮小するデザインを実現するのに向いた単位です。使い方のコツを覚え、必要に応じて clamp やメディアクエリと組み合わせて使いましょう。

vminの関連サジェスト解説

vmin shift とは: vmin shift とは、公式なCSS用語ではありませんが、日常の解説では「vminという長さ単位を用いて要素の寸法や位置を相対的にずらすテクニック」の意味で使われることが多い表現です。vminはビューportの幅と高さのうち小さい方の100分の1です。画面サイズが変わっても値が相対的に変化するため、デザインの一貫性を保ちやすいという利点があります。使い方は calc と組み合わせるのが一般的で、フォントサイズをスライドさせる例として font-size: calc(12px + 0.8vmin); を使うと、画面が大きくなると文字も少し大きくなり、スマホでも読みやすさを保ちやすくなります。余白にも同様に padding: calc(2vmin + 6px); などと書くと、余白が画面サイズに応じて自然に変化します。さて、いわゆる『shift』の使い方ですが、ここでの shift は「ずらす・微調整する」という意味合いで使われます。例えば要素を中心に置く際に transform: translate(-50%, -50%) を使いますが、これに calc を加えて vmin だけずらすと、縦横どちらかの方向を画面向きに合わせて微調整できます。例: transform: translate(-50%, calc(-50% + 2vmin)); こうすると縦方向のずれを画面の高さに合わせて自動調整できます。もう一つの例として、絶対配置の要素を左上辺から少し離したい場合に left: calc(2vmin); top: calc(2vmin); のように指定するのも『vmin shift』の実践です。注意点は、vminは現代的なブラウザで広くサポートされますが、古いブラウザでは期待通り動かないこと。IEはvminをサポートしていません。デザインを公開する前に、主要なデバイスとブラウザで表示確認を行い、必要ならpxやemなどのフォールバックを用意しましょう。このテクニックの利点は、画面サイズに応じて要素の大きさと位置を滑らかに変化させ、デザイン崩れを防ぐ点です。vmin shift は公式用語ではないものの、初心者が現代的なレスポンシブデザインを理解する入り口として役立ちます。

vminの同意語

ビューポート最小辺基準単位: 画面の幅と高さのうち短い方を基準にして長さを決める相対長さの単位。1vminはビューポートの短い辺の長さの1%に相当します。
ビューポート最小次元基準単位: 画面の最小の次元を基準にした相対長さの単位。1vminは短い辺の長さの1%に等しいです。
画面短辺基準の相対長さ単位: 画面の短い辺を基準にした長さの単位。vminと同義で、1vminは画面の短辺の長さの1%に相当します。
最小辺基準のビューポート単位: ビューポートの最小辺を基準にした相対長さの単位で、CSSで長さを設定する際に用います。
ビューポート最小辺基準の単位（vmin）相当: vminはビューポートの最小辺を基準にした長さの単位で、1vminはビューポートの最小辺の長さの1%に相当します。

vminの対義語・反対語

vmax: vminの対義語。ビューポートの長辺（画面の長い方の寸法）を基準にする相対長さの単位。1vmaxはビューポートの長辺の1%を意味します。横長/縦長の長い方の寸法に合わせてサイズを決めたいときに使います。
最大視口基準(vmax): vmaxと同義の日本語表現。ビューポートの長辺を基準にする相対長さの意味を説明する際の名称です。
最大値: vminの対義語として捉える概念的な antonym。サイズや寸法の上限・最大値を示す語で、デザインやレイアウトの対比説明に使えます。

vminの共起語

vmin: ビューポートの幅と高さのうち小さい方を基準に1%を表すCSSの長さ単位。画面の縦横比が変わっても、最小辺を基準にサイズ感を安定させたいときに使う。
vw: ビューポート幅の1%を表す長さ単位。横方向のサイズをビューポート幅に対して相対的に決めたいときに用いる。
vh: ビューポート高さの1%を表す長さ単位。縦方向のサイズをビューポート高さに対して相対的に決めたいときに用いる。
vmax: ビューポートの幅と高さのうち大きい方を基準に1%を表す長さ単位。大きい方の変化に合わせたサイズ調整に適している。
ビューポート: ブラウザで表示される領域のこと。vw/vh/vmin/vmax はこの領域を基準に計算される長さ単位である。
レスポンシブデザイン: 画面サイズの変化に合わせてレイアウトやデザインを自動的に適応させる設計思想。
メディアクエリ: 特定の条件（例: 幅が600px以下）でCSSを切り替える仕組み。ビューポート系単位と組み合わせて使われる。
CSS長さ単位: CSSで長さを表す単位の総称。px、em、rem、%、vw、vh、vmin、vmax などが含まれる。
相対長さ: 親要素やビューポートに対して相対的に決まる長さ。例: %, vw, vh, vmin, vmax, em, rem。
絶対長さ: 固定的な長さ。例: px。
calc(): 長さを算術演算で組み合わせる関数。例: calc(50% - 20px)。
clamp(): 最小値・理想値・最大値の範囲内に長さを収める関数。例: font-size: clamp(1rem, 2vw, 3rem)。
min(): 複数の長さの中から最小値を返す関数。
max(): 複数の長さの中から最大値を返す関数。
px: ピクセル単位。デザイン上は固定的だが、デバイスの解像度に影響を受ける。
rem: ルート要素のフォントサイズを基準にする相対長さ。
em: 要素のフォントサイズを基準にする相対長さ。
%: 親要素のサイズを基準にする相対長さ（パーセント）。
ブラウザサポート: vmin/vw/vh/vmax は現行の主要ブラウザでサポートされているが、古いバージョンでは注意が必要。
ウィンドウサイズ: ブラウザウィンドウの横幅と縦幅。ビューポートとほぼ同義だが表示設定で差が出ることがある。
アスペクト比: 縦横比。ビューポートの比率に応じてvmin/vmaxの挙動が影響を受けることがある。
ブレークポイント: レスポンシブデザインでレイアウト切替の基準となる画面幅の値。
デバイス: スマートフォン、タブレット、PCなど、表示領域を決定する要因。
DPR: デバイスピクセル比。高解像度ディスプレイでは同じpxでも見た目が変わることがある。

vminの関連用語

vmin: CSSのビューポート相対長さの1つ。画面の幅と高さのうち小さい方を基準に、1vminはその1%です。レスポンシブなレイアウトやフォントサイズのスケーリングに使われます。
vmax: CSSのビューポート相対長さの1つ。画面の幅と高さのうち大きい方を基準に、1vmaxはその1%です。大きめのスケーリングを狙うときに適します。
vw: ビューポート幅を基準にした長さ。1vwはビューポート幅の1%。
vh: ビューポート高さを基準にした長さ。1vhはビューポート高さの1%。
viewport: 表示領域のこと。デバイスの画面サイズや向きに応じて変化します。
viewport単位: vw/vh/vmin/vmax の総称。画面サイズに応じて要素のサイズを動的に決定します。
fluidTypography: フォントサイズをビューポートに合わせて滑らかに拡大・縮小させるデザイン手法。通常は clamp() と vw/vmin の組み合わせで実現します。
clamp: 値を上下限で制御するCSS関数。例: clamp(12px, 2vw, 48px)。
min: 複数の値のうち最小値を返すCSS関数。
max: 複数の値のうち最大値を返すCSS関数。
calc: 演算を使って値を計算するCSS関数。例: calc(50% - 20px)。
media queries: 画面サイズや向きなどの条件に応じてスタイルを切り替える仕組み。レスポンシブデザインの要。
responsive design: デバイスに合わせてレイアウトを調整する設計思想。
最適なサイズ感の工夫: vmin/vmax の特性を活かして、デバイスごとに適切なサイズ感を実現します。
安全領域とenv(): safe-area-inset: ノッチやホームインジケータを避けるため、env() 関数と safe-area-inset 系の値を活用します。
新しいビューポート単位: ダイナミックビュー変更への対応として dvw/dvh/lvw/lvh/svw/svh などの新規単位が提案・導入されています。ブラウザサポートを確認してください。
ブラウザ互換性: vmin/vmax/vw/vh は主要ブラウザで広くサポートされていますが、古いブラウザでは未対応のことがあります。