0Pricing
CSS Academy · レッスン

流動的な値のためのmin()、max()、clamp()

min()、max()、clamp()ショートハンドを使って、値を最小値と最大値の範囲に制限します。

「流動的な値のためのmin()、max()、clamp()」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

比較関数を使う理由

CSSの比較関数（min()、max()、clamp()）を使うと、メディアクエリなしでコンテキストに応じて変化するレスポンシブなサイズを実現できます。ブレークポイントベースの方法よりも、簡潔で洗練されたアプローチです。

min() — 最小値を選ぶ

min(a, b, ...)はすべての引数を評価し、最小の値を使用します。ここでいう「最小」とは視覚的な結果を指し、最も制約の厳しい選択肢という意味です。

  <div class="container">Container</div>

max() — 最大値を選ぶ

max(a, b, ...)は最大の値を選び、常に最低限の値を確保します。

  <p>Responsive text</p>

clamp(min, preferred, max)

clamp()は値を一定の範囲内に制限します。通常、推奨値（中央の引数）には流動的な値を指定します。minとmaxで絶対的な下限と上限を設定します。

  <h1>Clamped Heading</h1>

clamp()による流動的なタイポグラフィスケール

見出しのレベルごとに1つのclamp()を使用して、複数のブレークポイントでの上書きを置き換えます。

  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>

clamp()による流動的なスペーシング

padding、margin、gapにも流動的なサイズを適用できます。これは「intrinsic」なデザインの重要なテクニックです。

  <div class="section">
    <div class="grid"><div>A</div><div>B</div></div>
  </div>

幅の制限に使うmin()

最もすっきりしたコンテナのパターンです。ビューポートの幅の常に90%としつつ、1200pxを超えないように、1つの式で指定できます。

  <div class="wrapper">Wrapper</div>

最小フォントサイズに使うmax()

狭いビューポートでも本文の文字が小さくなりすぎないようにします。

  <p class="text-body">Body text that never gets too small.</p>

min/max/clampの入れ子

これらの関数は、複雑な制約を表現するために入れ子にできます。

  <div class="element">Padded element</div>

Gridでの比較関数

minmax()の中でmin()を使用すると、より安全なカラムの下限を設定できます。

  <div class="grid"><div>Card</div></div>

ブラウザー対応

3つの比較関数はすべて、モダンブラウザーで完全にサポートされています（Chrome 79以降、Firefox 75以降、Safari 11.1以降）。ベンダープレフィックスは必要ありません。

理解度チェック

見出しにfont-size: clamp(1rem, 3vw, 2.5rem)を指定しています。ルートのフォントサイズが16pxの場合、3vwが1remと等しくなるのはビューポート幅が何pxのときですか。

まとめ

min()は小さい値（上限）を選びます。max()は大きい値（下限）を選びます。clamp(min, preferred, max)は流動的な値を範囲内に制限します。これらを組み合わせると、メディアクエリなしで流動的なタイポグラフィとスペーシングを実現できます。特に強力なパターンは、見出しを自動的にレスポンシブにするclamp(1.5rem, 4vw, 3rem)です。

よくある質問

「流動的な値のためのmin()、max()、clamp()」レッスンは無料ですか？

はい。「流動的な値のためのmin()、max()、clamp()」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「流動的な値のためのmin()、max()、clamp()」で何を学びますか？

min()、max()、clamp()ショートハンドを使って、値を最小値と最大値の範囲に制限します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「流動的な値のためのmin()、max()、clamp()」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 動的な計算のためのcalc()
  2. 流動的な値のためのmin()、max()、clamp()
  3. Gridでのrepeat()とminmax()
  4. color-mix()と相対カラー構文
← CSS Academyに戻る