From bc98dd5559051c3937a6c5ec176267c661a71424 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 15 Jun 2021 00:45:42 +0900 Subject: Web/CSS/max() を更新 (#1092) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/05/08 時点の英語版に同期 --- files/ja/web/css/max()/index.html | 70 ++++++++++++++------------------------- 1 file changed, 25 insertions(+), 45 deletions(-) diff --git a/files/ja/web/css/max()/index.html b/files/ja/web/css/max()/index.html index 90f463604c..cca3cfc571 100644 --- a/files/ja/web/css/max()/index.html +++ b/files/ja/web/css/max()/index.html @@ -4,7 +4,6 @@ slug: Web/CSS/max() tags: - CSS - CSS Function - - CSS 関数 - Calculate - Compute - Function @@ -12,28 +11,26 @@ tags: - Reference - Web - max - - 関数 +browser-compat: css.types.max translation_of: Web/CSS/max() ---
{{CSSRef}}
-

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

+

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

-
/* プロパティ: max(式 [, 式]) */
-width: max(10vw, 4em, 80px);
-
+
{{EmbedInteractiveExample("pages/css/function-max.html")}}
-

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

+

上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 max() の値はプロパティが取りうる最小の値を提供するものとして考えてください。

-

構文

+

構文

-

max() 関数は、引数としてカンマで区切った1つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。

+

max() 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。

-

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

+

式は、 (算術演算子を用いた) 数式、リテラル値、あるいは、有効な引数の型 ({{CSSxRef("<length>")}} など) に評価される {{CSSxRef("attr()", "attr()")}} などの式や、ネストされた {{CSSxRef("min()", "min()")}} や max() 関数を用いることができます。

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

-

メモ

+

メモ

-

形式文法

+

形式文法

{{CSSSyntax}} -

例

- -

画像を最小サイズ以上にする

- -

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

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

{{EmbedLiveSample("Making_images_at_least_a_minimum_size", "100%", "60")}}

+

例

-

この例では、ロゴの幅は 300px 以上になりますが、ビューポートが 600px よりも広くなったら、ここからビューポートの幅の 50% を保ちながら、ビューポートが拡大するに従って拡大します。

- -

フォントに最小値を設定する

+

フォントに最小値を設定する

CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。

-

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

+

多少の CSS を見てみましょう。

h1 {
   font-size: 2rem;
@@ -77,7 +59,7 @@ h1.responsive {
 }
-

フォントサイズは最小で 2rems、ページの既定のフォントサイズの2倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。

+

フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。

<h1>This text is always legible, but doesn't change size</h1>
 <h1 class="responsive">This text is always legible, and is responsive, to a point</h1>
@@ -87,9 +69,9 @@ h1.responsive {
 
 
max() 関数はプロパティに許される最小値を探るものと考えてください。

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

+
アクセシビリティの考慮

 
-
max() を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、入れ子になった {{CSSxRef("min", "min()")}} 関数を max() の中に使用し、その二番目の値として常に十分な大きさの相対的な長さの単位を持つようにします。

+
max() を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、 {{CSSxRef("min()", "min()")}} 関数を max() の中で入れ子にして使用し、その二番目の値として常に十分な大きさの相対的な長さの単位を持つようにします。

 
 
small {
   font-size: max(min(0.5vw, 0.5em), 1rem);
@@ -98,11 +80,11 @@ h1.responsive {
 
これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは 1rem になります。

 
 
 
-
仕様書

+
仕様書

 
 
@@ -114,24 +96,22 @@ h1.responsive {
  
-   
+   

  
  
   
{{SpecName("CSS4 Values", "#calc-notation", "max()")}}{{SpecName("CSS4 Values", "#funcdef-max", "max()")}}
    {{Spec2("CSS4 Values")}}
    初回定義
   

  
 

 
-
ブラウザーの互換性

-
-
+
ブラウザーの互換性

 
-
{{Compat("css.types.max")}}

+
{{Compat}}

 
-
関連情報

+
関連情報

 
 
    
- 
  • {{CSSxRef("calc", "calc()")}}
    • 
- 
  • {{CSSxRef("clamp", "clamp()")}}
    • 
- 
  • {{CSSxRef("min", "min()")}}
    • 
- 
  • CSS 値
    • 
+ 
  • {{CSSxRef("calc()", "calc()")}}
    • 
+ 
  • {{CSSxRef("clamp()", "clamp()")}}
    • 
+ 
  • {{CSSxRef("min()", "min()")}}
    • 
+ 
  • CSS 値
    • 
 

-- 
cgit v1.2.3-54-g00ecf