1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
---
title: clamp()
slug: Web/CSS/clamp()
tags:
- CSS
- CSS Function
- CSS 関数
- Calculate
- Compute
- Function
- Layout
- Reference
- Web
- clamp
- ウェブ
- レイアウト
- 計算
- 関数
translation_of: Web/CSS/clamp()
---
<div>{{CSSRef}}</div>
<p><strong><code>clamp()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、値を上限と下限の間に制限します。 <code>clamp()</code> によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 <code>clamp()</code> 関数は {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<integer>")}} のいずれでも使用することができます。</p>
<p><code>clamp(MIN, VAL, MAX)</code> は <code>{{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))</code> と同等です。</p>
<pre class="brush: css; no-line-numbers">/* property: clamp(expression{3}) */
width: clamp(10px, 4em, 80px);</pre>
<p>上記の例では、幅が最大 80px、最小 10px ですが、 em が 2.5px から 20px の間であれば、 4em になります。</p>
<p>上記の場合で em が 16px の幅であると仮定しましょう。</p>
<pre class="brush: css; no-line-numbers">width: clamp(10px, 4em, 80px);
/* 1em = 16px, 4em = 16px * 4 = 64px */
width: clamp(10px, 64px, 80px);
/* clamp(MIN, VAL, MAX) は max(MIN, min(VAL, MAX))) と同等 */
width: max(10px, min(64px, 80px))
width: max(10px, 64px);
width: 64px;</pre>
<h2 id="Syntax" name="Syntax">構文</h2>
<p><code>clamp()</code> 関数は、3つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。</p>
<p>最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。</p>
<p>推奨値は、結果が最小値と最大値の間である限り使用される値の式です。</p>
<p>最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。</p>
<p>式は計算関数 (詳しくは {{CSSxRef("calc")}} を参照)、リテラル値、 {{CSSxRef("attr", "attr()")}} のように正しい引数の型 ({{CSSxRef("<length>")}} など) として評価されるその他の式、重複した {{CSSxRef("min")}} および {{CSSxRef("max")}} 関数などです。数式としては、 <code>calc()</code> 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。</p>
<p>式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。</p>
<h3 id="Notes" name="Notes">メモ</h3>
<ul>
<li>自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 <code>auto</code> がして甥されたものとして扱われる<em>ことが</em>あります。</li>
<li>式の値として <code>max()</code> および <code>min()</code> 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 <code>calc()</code> 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。</li>
<li>式は加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には {{CSSxRef("<length>")}} の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。</li>
<li>{{CSSxRef("min")}} および {{CSSxRef("max")}} を <code>clamp()</code> 関数の中で使用したくなるでしょう。</li>
</ul>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{CSSSyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Setting_a_minimum_and_max_size_for_a_font" name="Setting_a_minimum_and_max_size_for_a_font">フォントへの最小値と最大値の設定</h3>
<p><code>clamp()</code> によって、ビューポートの大きさに合わせ、かつ最小フォントサイズを下回ったり最大フォントサイズを上回ったりすることなく、フォントの大きさを設定することができます。1行でメディアクエリを使用することなく、 <a href="https://css-tricks.com/snippets/css/fluid-typography/">Fluid Typography</a> の中のコードと同じ効果を持ちます。</p>
<pre class="brush: css">p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
</pre>
<pre class="brush: html;"><p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>
</pre>
<p>{{EmbedLiveSample("Setting_a_minimum_and_max_size_for_a_font", "100%", "300")}}</p>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
<p>TBD</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}</td>
<td>{{Spec2('CSS4 Values')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.types.clamp")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{CSSxRef("calc")}}</li>
<li>{{CSSxRef("max")}}</li>
<li>{{CSSxRef("min")}}</li>
<li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS Values</a></li>
</ul>
|
