クランプカード

このデモでは、clamp() を使用して幅を次のように設定しています。width: clamp(<min>, <actual>, <max>)

この値により、絶対的な最小サイズと最大サイズ、および実際のサイズが設定されます。値がある場合、次のようになります。

.parent {
  width: clamp(23ch, 60%, 46ch);
}

最小サイズは 23ch または 23 文字、最大サイズは 46ch（46 文字）です。文字幅の単位は、要素のフォントサイズ（具体的には 0 グリフの幅）に基づきます。「実際の」サイズは 50% です。これは、この要素の親の幅の 50% です。

ここでの clamp() 関数の役割は、この要素が 50% の幅を、50% が 46ch より大きい（広いビューポートの場合）または 23ch より小さくなる（小さいビューポートの場合）まで、50% の幅を維持できるようにすることです。動画で、カードの幅が親のストレッチと縮小に伴って、クランプされた最大ポイントまで増加し、クランプされた最小値まで減少する様子をご覧ください。その後、追加のプロパティを使用して、親の中心に固定されます。これにより、テキストの幅が広すぎたり（46ch 以上）したり、つぶれすぎて狭くなりすぎたり（23ch 未満）することがなくなり、レイアウトが読みやすくなります。

この方法を使用すると、レスポンシブ タイポグラフィを実装できます。例: font-size: clamp(1.5rem, 20vw, 3rem)この場合、見出しのフォントサイズは常に 1.5rem～3rem に固定されますが、20vw の実際の値に基づいて、ビューポートの幅に合わせて拡大または縮小されます。

これは、最小と最大のサイズ値を設定して読みやすさを確保するための優れた方法ですが、すべての最新のブラウザでサポートされているわけではないので、代替手段を用意したうえでテストしてください。

HTML

<div class="parent">
  <div class="card">
    <h1>Title Here</h1>
    <div class="visual"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }