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

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

Una Kravets

レスポンシブ デザインが複雑になるにつれ、CSS は、作成者が細かく制御できるように絶えず進化しています。最新のブラウザで現在サポートされている min()、max()、clamp() の各関数は、ウェブサイトとアプリの作成をより動的でレスポンシブにするための最新ツールの一つです。これらの関数を使用して、要素のサイズとサイズ変更を制御し、要素間の間隔を維持して、柔軟で滑らかなタイポグラフィを作成できます。

数学関数 calc()、min()、max()、clamp() では、加算（+）、減算（-）、乗算（*）、除算（/）を含む数式を構成要素値として使用できます。

CSS 値と単位レベル 4

ブラウザ サポート

min()

対応ブラウザ

  • 79
  • 79
  • 75
  • 11.1

ソース

max()

対応ブラウザ

  • 79
  • 79
  • 75
  • 11.1

ソース

clamp()

対応ブラウザ

  • 79
  • 79
  • 75
  • 13.1

ソース

使用量

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

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

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

max() 関数は、この Codepen デモのオプションのリストから値を選択します。

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

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) の場合）のいずれかを使用できます。

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

最適な幅

Robert Bringhurst による The Elements of Typographic Style の調査によると、1 列のページセットでテキストサイズのセリフ体を設定する場合、45 ～ 75 文字の範囲で十分な行があると広く考えられています。」

テキスト ブロックの幅を 45 ～ 75 文字にするには、clamp() と ch（0 幅文字進数）単位を使用します。

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

これにより、ブラウザが段落の幅を決定できます。幅はデフォルトで 50% に設定されます。50% が 45ch よりも小さい場合は代わりに 45ch を使用し、50% が 75ch よりも幅が広い場合は 75ch を使用します。

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

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

min() 関数を使用して最大幅を設定します。

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

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

パディングを管理する

max() を使用して最小パディング サイズを設定することもできます。この例の提供元である CSS Tricks は、読者の 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);
}
max() 関数を使用してコンポーネントの最小パディングを設定します。 Codepen のデモをご覧ください。

Fluid タイポグラフィ

Mike Riethmeuller は、Fluid タイポグラフィを実現するために、clamp() 関数を使用して最小フォントサイズと最大フォントサイズを設定し、これらのサイズ間でスケーリングできるようにする手法を広めました。

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

clamp(), の前に、フォントのスケーリングを設計するには複雑なスタイル文字列が必要でした。これで、処理はブラウザに任せることができます。許容される最小フォントサイズ（タイトルに 1.5rem など）、最大サイズ（3rem など）、理想的なサイズ（5vw など）を設定します。これでタイポグラフィが完成しました。このタイポグラフィは、ごくわずかなコードで、限界の最小値と最大値に達するまで拡大します。

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

その他のリソース

Unsplash の @yer_a_wizard が投稿したカバー画像