min()

min()CSS 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 min() 関数は <length><frequency>,、<angle><time><percentage><number><integer> が利用できるところならばどこでも使用することができます。

/* プロパティ: min(式 [, 式]) */
width: min(10vw, 4em, 80px);

上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 min() の値はプロパティが取りうる最大の値を提供するものとして考えてください。

構文

min() 関数は、引数としてカンマで区切った1つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。

式は (<length> などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 attr() などのその他の式にすることができます。

必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

メモ

  • 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも auto が指定されていたかのように扱われる可能性があります
  • max() や他の min() 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 calc() 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
  • 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <length> 構文値を使用できます。
  • min()max() の値を組み合わせたり、 min()clamp()calc() 関数の中で使用したりすることができます (そしてよく必要になります)。
  • 複数の制約を適用する場合は、3つ以上の引数を与えることができます。

形式文法

min( <calc-sum># )

where
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

where
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

where
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

最大サイズまで広がる画像

min() を使用すると、画像の最大幅を簡単に設定することができます。この例では、メディアクエリを使用せずに、 CSS は小さい端末ではウィンドウの半分まで伸びるロゴを生成しますが、広い端末では 300px を超えないようにしています。

.logo {
  width: min(50vw, 300px);
}
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">

この例では、ロゴの幅はビューポートが 600px 未満まで狭くならない限り 300px になり、ここからビューポートの幅の 50% を保ちながら、ビューポートが縮小するに従って縮小します。

ラベルと入力欄のために最大値を設定する

CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。

いくらか CSS を見てください。

input, label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}

ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。

<form>
  <label>Type something:</label>
  <input type="text">
</form>

アクセシビリティの考慮事項

min() を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。





仕様書

仕様書 状態 備考
CSS Values and Units Module Level 4
min() の定義
編集者草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
<min()>Chrome 完全対応 79Edge 完全対応 79Firefox 完全対応 75IE 未対応 なしOpera 完全対応 66Safari 完全対応 11.1WebView Android 完全対応 79Chrome Android 完全対応 79Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 11.3Samsung Internet Android 完全対応 12.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報