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/clamp()/index.html | 123 ++++++++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 files/ja/web/css/clamp()/index.html (limited to 'files/ja/web/css/clamp()') diff --git a/files/ja/web/css/clamp()/index.html b/files/ja/web/css/clamp()/index.html new file mode 100644 index 0000000000..e8f18e5e57 --- /dev/null +++ b/files/ja/web/css/clamp()/index.html @@ -0,0 +1,123 @@ +--- +title: clamp() +slug: Web/CSS/clamp() +tags: + - CSS + - CSS Function + - CSS 関数 + - Calculate + - Compute + - Function + - Layout + - Reference + - Web + - clamp + - ウェブ + - レイアウト + - 計算 + - 関数 +translation_of: Web/CSS/clamp() +--- +
{{CSSRef}}
+ +

clamp() は CSS の関数で、値を上限と下限の間に制限します。 clamp() によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 clamp() 関数は {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<integer>")}} のいずれでも使用することができます。

+ +

clamp(MIN, VAL, MAX) は {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX)) と同等です。

+ +
/* property: clamp(expression{3}) */
+width: clamp(10px, 4em, 80px);
+ +

上記の例では、幅が最大 80px、最小 10px ですが、 em が 2.5px から 20px の間であれば、 4em になります。

+ +

上記の場合で em が 16px の幅であると仮定しましょう。

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

構文

+ +

clamp() 関数は、3つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。

+ +

最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。

+ +

推奨値は、結果が最小値と最大値の間である限り使用される値の式です。

+ +

最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。

+ +

式は計算関数 (詳しくは {{CSSxRef("calc")}} を参照)、リテラル値、 {{CSSxRef("attr", "attr()")}} のように正しい引数の型 ({{CSSxRef("<length>")}} など) として評価されるその他の式、重複した {{CSSxRef("min")}} および {{CSSxRef("max")}} 関数などです。数式としては、 calc() 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。

+ +

式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。

+ +

メモ

+ + + +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

フォントへの最小値と最大値の設定

+ +

clamp() によって、ビューポートの大きさに合わせ、かつ最小フォントサイズを下回ったり最大フォントサイズを上回ったりすることなく、フォントの大きさを設定することができます。1行でメディアクエリを使用することなく、 Fluid Typography の中のコードと同じ効果を持ちます。

+ +
p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
+
+ +
<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>
+
+ +

{{EmbedLiveSample("Setting_a_minimum_and_max_size_for_a_font", "100%", "300")}}

+ +

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

+ +

TBD

+ +

仕様書

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

ブラウザーの互換性

+ + + +

{{Compat("css.types.clamp")}}

+ +

関連情報

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