0Pricing
CSS Academy · レッスン

Min、Max、Clamp関数

min()、max()、clamp()を使って、コンテナーやビューポートのサイズに応じた柔軟なサイズ指定を行います。

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

CSS比較関数を使う理由

CSS比較関数を使うと、JavaScriptなしで条件付きのサイズ指定を表現できます。「このサイズを使うが、これらの上限・下限を超えない」という指定が可能です。これは、現代的で流動的なレスポンシブデザインの中核となる機能です。

min()関数

min()は、カンマで区切られた値のリストから最小の値を返します。ブラウザーは現在のビューポートサイズで最も小さい値を選択します。

<div class="container">Container width: min(800px, 90%)</div>

max()関数

max()は最大の値を返します。大きくなりながらも最小サイズを確保する場合に便利です。

<p>Text sized with max(1rem, 2vw)</p>

clamp()関数

clamp(min, preferred, max)は、値を最小値と最大値の間に制限します。preferred値には通常、vwのような流動的な値を指定します。

<h1>Clamped Heading</h1>

流動的なタイポグラフィのための clamp()

clamp() による流動的なタイポグラフィを使うと、複数のメディアクエリによる font-size の上書きが不要になります。

<h1>Main Heading</h1>
  <h2>Subheading</h2>
  <p>Body copy that scales fluidly with the viewport.</p>

流動的な間隔のための clamp()

同じパターンを間隔にも適用すると、マージンとパディングを自然にレスポンシブ対応できます。

<div class="section">Section with fluid padding</div>

コンテナのための min()

max-width を超えず、水平方向のスクロールも決して発生させない、安全なコンテナのパターンです。

<div class="wrapper">Safe wrapper container</div>

関数のネスト

比較関数はネストして、複雑な式を作成できます。

<p class="hero-text">Nested min/max inside clamp()</p>

clamp() と calc() の組み合わせ

2つのサイズ間を正確に流動的に補間するには、clamp() の中で calc() を使用します。

<h1>Precise fluid heading</h1>

min-content、max-content、fit-content

CSS には、キーワードによるサイズ値もあります。

  • min-content：オーバーフローしない最小サイズです
  • max-content：コンテンツに必要なだけのスペースを使用します
  • fit-content()：max-content と似ていますが、指定した上限で制限されます
<span class="tag">Tag label</span>

ブラウザーの対応状況

min()、max()、clamp() は、すべてのモダンブラウザーでサポートされています。プレフィックスは必要ありません。これらは、長さ、周波数、時間、数値のいずれかの値が指定できる場所で使用できます。

確認問題

600px 幅のビューポートで、見出しに font-size: clamp(1rem, 4vw, 3rem) が指定されています。フォントサイズはいくつになりますか。

まとめ

min() は最小の値を選び、max() は最大の値を選びます。clamp(min, preferred, max) は、流動的な値を範囲内に制限します。これらの関数は、現代的な流動的タイポグラフィと間隔を実現し、複数のメディアクエリによる上書きを不要にできることがよくあります。

よくある質問

「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は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「Min、Max、Clamp関数」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. 絶対単位：px、pt、cm
  2. 相対単位：emとrem
  3. ビューポート単位：vw、vh、dvh
  4. Min、Max、Clamp関数
← CSS Academyに戻る