From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/min()/index.html | 139 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 files/ja/web/css/min()/index.html (limited to 'files/ja/web/css/min()') diff --git a/files/ja/web/css/min()/index.html b/files/ja/web/css/min()/index.html new file mode 100644 index 0000000000..263df74da5 --- /dev/null +++ b/files/ja/web/css/min()/index.html @@ -0,0 +1,139 @@ +--- +title: min() +slug: Web/CSS/min() +tags: + - CSS + - CSS Function + - CSS 関数 + - Calculate + - Compute + - Function + - Layout + - Reference + - min +translation_of: Web/CSS/min() +--- +
{{CSSRef}}
+ +

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

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

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

+ +

構文

+ +

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

+ +

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

+ +

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

+ +

メモ

+ + + +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

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

+ +

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">
+ +

{{EmbedLiveSample("Growing_images_to_a_maximum_size", "100%", "110")}}

+ +

この例では、ロゴの幅はビューポートが 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>
+
+ +

{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}

+ +

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

+ +

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

+ +

+
+
+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}初回定義

+
+
ブラウザーの互換性

+
+
+
+
{{Compat("css.types.min")}}

+
+
関連情報

+
+
-- 
cgit v1.2.3-54-g00ecf