diff options
Diffstat (limited to 'files')
| -rw-r--r-- | files/ja/web/css/max()/index.html | 70 |
1 files 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() --- <div>{{CSSRef}}</div> -<p><strong><code>max()</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 <code>max()</code> 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。</p> +<p><strong><code>max()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 <code>max()</code> 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が使用できるところならばどこでも使用することができます。</p> -<pre class="brush: css; no-line-numbers">/* プロパティ: max(式 [, 式]) */ -width: max(10vw, 4em, 80px); -</pre> +<div>{{EmbedInteractiveExample("pages/css/function-max.html")}}</div> -<p>上の例では、幅は最小 80px ですが、ビューポートの幅が 800px より広いか em の幅が 20px より大きい場合は広くなります。言い換えれば、最小幅は 80px です。 <code>max()</code> の値はプロパティが取りうる<em>最小の</em>値を提供するものとして考えてください。</p> +<p>上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 <code>max()</code> の値はプロパティが取りうる<em>最小の</em>値を提供するものとして考えてください。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> -<p><code>max()</code> 関数は、引数としてカンマで区切った1つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。</p> +<p><code>max()</code> 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。</p> -<p>式は ({{CSSxRef("<length>")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr", "attr()")}} などのその他の式や、入れ子になった {{CSSxRef("min", "min()")}} および <code>max()</code> 関数にすることができます。</p> +<p>式は、 (算術演算子を用いた) 数式、リテラル値、あるいは、有効な引数の型 ({{CSSxRef("<length>")}} など) に評価される {{CSSxRef("attr()", "attr()")}} などの式や、ネストされた {{CSSxRef("min()", "min()")}} や <code>max()</code> 関数を用いることができます。</p> <p>式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。</p> -<h3 id="Notes" name="Notes">メモ</h3> +<h3 id="Notes">メモ</h3> <ul> <li>表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも <code>auto</code> が指定されていたかのように扱われる<em>可能性があります</em>。</li> @@ -42,32 +39,17 @@ width: max(10vw, 4em, 80px); <li><code>min()</code> と <code>max()</code> の値を組み合わせたり、 <code>max()</code> を <code>clamp()</code> や <code>calc()</code> 関数の中で使用したりすることができます (そしてよく必要になります)。</li> </ul> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h3 id="Formal_syntax">形式文法</h3> {{CSSSyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Making_images_at_least_a_minimum_size" name="Making_images_at_least_a_minimum_size">画像を最小サイズ以上にする</h3> - -<p><code>max()</code> を使用すると、画像の<strong>最小</strong>幅を簡単に設定することができます。この例では、メディアクエリを使用せずに、 CSS は大きい端末ではウィンドウの半分まで伸びるロゴを生成しますが、広い端末では 300px を超えないようにしています。</p> - -<pre class="brush: css;">.logo { - width: max(50vw, 300px); -} -</pre> - -<pre class="brush: html;"><img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"></pre> - -<p>{{EmbedLiveSample("Making_images_at_least_a_minimum_size", "100%", "60")}}</p> +<h2 id="Examples">例</h2> -<p>この例では、ロゴの幅は 300px 以上になりますが、ビューポートが 600px よりも広くなったら、ここからビューポートの幅の 50% を保ちながら、ビューポートが拡大するに従って拡大します。</p> - -<h3 id="Setting_a_minimum_size_for_a_font" name="Setting_a_minimum_size_for_a_font">フォントに最小値を設定する</h3> +<h3 id="Setting_a_minimum_size_for_a_font">フォントに最小値を設定する</h3> <p>CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。</p> -<p>いくらか CSS を見てください。</p> +<p>多少の CSS を見てみましょう。</p> <pre class="brush: css;">h1 { font-size: 2rem; @@ -77,7 +59,7 @@ h1.responsive { } </pre> -<p>フォントサイズは最小で 2rems、ページの既定のフォントサイズの2倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。</p> +<p>フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。</p> <pre class="brush: html;"><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 { <p><code>max()</code> 関数はプロパティに許される最小値を探るものと考えてください。</p> -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> +<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> -<p><code>max()</code> を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、入れ子になった {{CSSxRef("min", "min()")}} 関数を <code>max()</code> の中に使用し、その二番目の値として常に十分な大きさの<a href="/ja/docs/Web/CSS/length#Relative_length_units">相対的な長さの単位</a>を持つようにします。</p> +<p><code>max()</code> を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、 {{CSSxRef("min()", "min()")}} 関数を <code>max()</code> の中で入れ子にして使用し、その二番目の値として常に十分な大きさの<a href="/ja/docs/Web/CSS/Length#relative_length_units">相対的な長さの単位</a>を持つようにします。</p> <pre class="brush: css;">small { font-size: max(min(0.5vw, 0.5em), 1rem); @@ -98,11 +80,11 @@ h1.responsive { <p>これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは <em>1rem</em> になります。</p> <ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> </ul> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Specifications">仕様書</h2> <table class="standard-table"> <thead> @@ -114,24 +96,22 @@ h1.responsive { </thead> <tbody> <tr> - <td>{{SpecName("CSS4 Values", "#calc-notation", "max()")}}</td> + <td>{{SpecName("CSS4 Values", "#funcdef-max", "max()")}}</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> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.types.max")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li>{{CSSxRef("calc", "calc()")}}</li> - <li>{{CSSxRef("clamp", "clamp()")}}</li> - <li>{{CSSxRef("min", "min()")}}</li> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 値</a></li> + <li>{{CSSxRef("calc()", "calc()")}}</li> + <li>{{CSSxRef("clamp()", "clamp()")}}</li> + <li>{{CSSxRef("min()", "min()")}}</li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS 値</a></li> </ul> |