From e160f04ecb5945c3dcf028e9d836be665dbf0ddc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 20 Nov 2021 23:56:35 +0900 Subject: CSS Values and Units のプロパティを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/max()/index.html | 117 -------------------------------------- files/ja/web/css/max()/index.md | 117 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 117 insertions(+), 117 deletions(-) delete mode 100644 files/ja/web/css/max()/index.html create mode 100644 files/ja/web/css/max()/index.md (limited to 'files/ja/web/css/max()') diff --git a/files/ja/web/css/max()/index.html b/files/ja/web/css/max()/index.html deleted file mode 100644 index cca3cfc571..0000000000 --- a/files/ja/web/css/max()/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: max() -slug: Web/CSS/max() -tags: - - CSS - - CSS Function - - Calculate - - Compute - - Function - - Layout - - 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>")}} が使用できるところならばどこでも使用することができます。

- -
{{EmbedInteractiveExample("pages/css/function-max.html")}}
- -

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

- -

構文

- -

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

- -

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

- -

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

- -

メモ

- - - -

形式文法

- -{{CSSSyntax}} - -

例

- -

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

- -

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

- -

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

- -
h1 {
-  font-size: 2rem;
-}
-h1.responsive {
-  font-size: max(4vw, 2em, 2rem);
-}
-
- -

フォントサイズは最小で 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>
-
- -

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

- -

max() 関数はプロパティに許される最小値を探るものと考えてください。

- -

アクセシビリティの考慮

- -

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

- -
small {
-  font-size: max(min(0.5vw, 0.5em), 1rem);
-}
- -

これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは 1rem になります。

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Values", "#funcdef-max", "max()")}}{{Spec2("CSS4 Values")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - diff --git a/files/ja/web/css/max()/index.md b/files/ja/web/css/max()/index.md new file mode 100644 index 0000000000..cca3cfc571 --- /dev/null +++ b/files/ja/web/css/max()/index.md @@ -0,0 +1,117 @@ +--- +title: max() +slug: Web/CSS/max() +tags: + - CSS + - CSS Function + - Calculate + - Compute + - Function + - Layout + - 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>")}} が使用できるところならばどこでも使用することができます。

+ +
{{EmbedInteractiveExample("pages/css/function-max.html")}}
+ +

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

+ +

構文

+ +

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

+ +

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

+ +

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

+ +

メモ

+ + + +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

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

+ +

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

+ +

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

+ +
h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: max(4vw, 2em, 2rem);
+}
+
+ +

フォントサイズは最小で 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>
+
+ +

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

+ +

max() 関数はプロパティに許される最小値を探るものと考えてください。

+ +

アクセシビリティの考慮

+ +

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

+ +
small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}
+ +

これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは 1rem になります。

+ + + +

仕様書

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

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

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