min()の使い方

min()の使い方

CSSの min() 関数は、複数の値のうち「最も小さい値」を使う、という指定ができる関数です。

使い方例
→ 画面幅の5%（5vw）と24pxのうち、小さい方が適用されます。

主な用途
レスポンシブで「大きくなりすぎない」制御
例えば、画面が広いときは24px、狭いときはvwで自動縮小、など


width: min(90vw, 600px);  /* 画面幅の90%か600pxの小さい方 */
padding: min(4vw, 32px);  /* 4vwか32pxの小さい方 */




Copilotにこう質問しました。

min();を使う場合は、例えばデザインカンプなどで作った基となるサイズでvwを決めるのが正しいですか？例えば1440で作ってれば、1440, ipadで作ってれば768スマホだったら430など、その作ったの基準にすれば間違い無いですか？



その回答が以下です


はい、その理解で正しいです！min()を使う際は、デザインカンプの基準サイズでvw計算するのが正確です。

基本的な考え方
デザインカンプのサイズを基準にvwを計算する

例えば、デザインカンプで要素が500pxの場合：

カンプサイズ	計算式	vw値
1440px (PC)	500 ÷ 1440 × 100	34.72vw
768px (iPad)	500 ÷ 768 × 100	65.10vw
430px (SP)	500 ÷ 430 × 100	116.28vw



実践例
PCデザイン (1440px基準)

/* デザインカンプで500pxの場合 */
width: min(34.72vw, 500px);
/* 500 ÷ 1440 × 100 = 34.72vw */


iPadデザイン (768px基準)

@media screen and (max-width: 768px) {
  /* デザインカンプで300pxの場合 */
  width: min(39.06vw, 300px);
  /* 300 ÷ 768 × 100 = 39.06vw */
}


スマホデザイン (430px基準)

@media screen and (max-width: 430px) {
  /* デザインカンプで200pxの場合 */
  width: min(46.51vw, 200px);
  /* 200 ÷ 430 × 100 = 46.51vw */
}




メリット
正確な再現

デザインカンプ通りのサイズが保証される
レスポンシブ対応

画面サイズに応じて自動的に縮小
最大値を超えないように制限
計算が簡単

デザイン上のpx ÷ カンプ幅 × 100 = vw





注意点
複数のカンプがある場合

PC、タブレット、スマホそれぞれのカンプで別々に計算
メディアクエリで切り替える


/* PC (1440px基準) */
.element {
  width: min(34.72vw, 500px);
}

/* タブレット (768px基準) */
@media screen and (max-width: 768px) {
  .element {
    width: min(39.06vw, 300px);
  }
}

/* スマホ (430px基準) */
@media screen and (max-width: 430px) {
  .element {
    width: min(46.51vw, 200px);
  }
}


この方法で、デザインカンプを正確に再現しつつ、柔軟なレスポンシブデザインが実現できます！