このページは Cloud Translation API によって翻訳されました。

CSS min()、max()、clamp()

適切にサポートされている CSS 関数を使用して、要素のサイズを制御する方法、適切な間隔を維持する方法、滑らかなタイポグラフィを実装する方法について説明します。

Una Kravets

レスポンシブデザインの細かさが増す中、CSS は常に進化して著者は制御を強化しました。min() max()、 clamp() 関数、すべての最新ブラウザでサポートされサポートされているためより動的で応答性の高いウェブサイトやアプリを作成できます。これらを使用して、要素のサイズ設定とサイズ変更を制御する関数を使用して、柔軟で滑らかなタイポグラフィを作成できます

数学関数の calc()、min()、max()、clamp() では、加算（+）、減算（-）、乗算（*）、除算（/）を含む数式をコンポーネント値として使用できる
CSS 値とユニットレベル 4

ブラウザサポート

`min()`

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

`max()`

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

`clamp()`

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

用途

CSS の右側で min()、max()、clamp() を使用できます。表します。min() と max() には、値のリストが返され、ブラウザはどの値を最小か最大かですたとえば width: min(1rem, 50%, 10vw) の場合、ブラウザでは、これらの相対単位のうち最も小さいものが計算され、要素の幅の値を指定します。

</ph> <ph type="x-smartling-placeholder">

をご覧ください。 <ph type="x-smartling-placeholder">

</ph> min() 関数は、この例のオプションのリストから最小値を選択します。 Codepen のデモ。

max() 関数は、最大値に対して同じ処理を行います。

</ph> <ph type="x-smartling-placeholder">

をご覧ください。 <ph type="x-smartling-placeholder">

</ph> max() 関数は、このファイルのオプションのリストから値を選択します。 Codepen のデモ。

clamp() を使用するには、最小値、理想値、最大値の 3 つの値を入力します。計算元、最大値があります

</ph> <ph type="x-smartling-placeholder">

をご覧ください。 <ph type="x-smartling-placeholder">

</ph> clamp() 関数は、指定された最小値と最大値の間の値を維持します。この Codepen デモで最大値をご確認ください。

これらの機能は、<length>、<frequency>、 <angle>、<time>、<percentage>、<number>、<integer> を使用できます。マイページ（font-size: max(0.5vw, 50%, 2rem) のように）単独で使用できますが、 calc()（font-size: max(calc(0.5vw - 1em), 2rem) と同様）、または合成（ font-size: max(min(0.5vw, 1em), 2rem) など）。

以下に、これらの関数の使用方法の例を示します。

最適な幅

タイポグラフィの要素スタイル「45 文字から 75 文字までの文字は広く認知されているセリフ体のテキストフェースで 1 列のページセットとして十分な行の長さ表示されます。

テキストブロックの幅を 45 ～ 75 文字にするには、 clamp() と ch（ゼロ幅の文字進める）単位:

p {
  width: clamp(45ch, 50%, 75ch);
}

これにより、ブラウザが段落の幅を決定できるようになります。横のサイズをデフォルトは 50% です。50% が 45ch より小さい場合は、幅に 45ch が使用されます。 50% が 75ch より広い場合は 75ch を使用します。

</ph> <ph type="x-smartling-placeholder">

をご覧ください。 <ph type="x-smartling-placeholder">

</ph> clamp() 関数を使用して、最小の幅と最大の幅を設定します。Codepen のデモをご覧ください。

min() または max() だけを使用してこれを分割することもできます。もし要素の幅は常に 50% にし、大きい要素では幅が 75ch を超えないようにする必要があります width: min(75ch, 50%); を使用して最大サイズを設定します。

</ph> <ph type="x-smartling-placeholder">

をご覧ください。 <ph type="x-smartling-placeholder">

</ph> 最大幅を設定するには min() 関数を使用します。

同様に、max() を使用して判読可能なテキストの最小サイズを設定できます。 width: max(45ch, 50%); のように指定します。この場合ブラウザはより大きいため、要素の幅を 45ch 以上にする必要があります。

</ph> <ph type="x-smartling-placeholder">

をご覧ください。 <ph type="x-smartling-placeholder">

</ph> max() 関数を使用して最小幅を設定します。

パディングを管理する

max() を使用して最小パディングサイズを設定することもできます。この例は CSS のトリック、読者の Caluã de Lacerda Pataca 氏が、大きい画面サイズではパディングが追加され、小さい画面では最小限のパディングを確保サポートしています。これを行うには、calc() または max() を使用して、最小値を減算します。要素の両側からのパディング: calc((100vw - var(--contentWidth)) / 2)、または max(2rem, 50vw - var(--contentWidth) / 2)。スタイルシートで、次のようになります。

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

</ph> <ph type="x-smartling-placeholder">

max() 関数を使用してコンポーネントの最小パディングを設定します。 Codepen のデモをご覧ください。

流体タイポグラフィ

Fluid タイポグラフィを有効にするには: Mike Riethmeuller 氏は、これは、clamp() 関数を使用して、最小フォントサイズ、最大フォントサイズ、それらのサイズ間でのスケーリングが可能です

</ph> <ph type="x-smartling-placeholder">

をご覧ください。 <ph type="x-smartling-placeholder">

</ph> clamp() を使用して、滑らかなタイポグラフィを作成します。Codepen のデモをご覧ください。

clamp(), 以前は、フォントのスケーリングの設計には複雑なスタイル文字列が必要でした。さて、ブラウザには自動処理を任せることができます最小許容フォントの設定サイズ（タイトルの 1.5rem など）、最大サイズ（3rem など）、最適なサイズ（5vw など）。これで、ページのスペースに合わせてスケールするタイポグラフィが完成しました。最大値と最小値に達するまで、ビューポートの幅をごく少量のコード:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

その他のリソース

@yer_a_wizard のカバー画像スプラッシュを解除します。

CSS min()、max()、clamp()

ブラウザ サポート

min()

max()

clamp()

用途

最適な幅

パディングを管理する

流体タイポグラフィ

その他のリソース

ブラウザサポート

`min()`

`max()`

`clamp()`