モダンCSS関数サンプル集｜aspect-ratio / calc / clamp / min / max

.ratio-box {
  width: 50%;             /* 幅だけ決めれば、高さは自動で計算される */
  aspect-ratio: 16 / 9;  /* 幅:高さ = 16:9 の比率を保つ */
}
/* 他によく使う比率 */
.square { aspect-ratio: 1 / 1; }   /* 正方形 */
.four-three { aspect-ratio: 4 / 3; } /* 昔のテレビ比率 */
.thumbnail { aspect-ratio: 3 / 2; }  /* 写真の標準サイズ */

/* 異なる単位を混ぜた計算が可能 */
.main {
  width: calc(100% - 240px);
  /* 100%（親幅）からサイドバーの240pxを引いた残りがメインの幅 */
}
/* 四則演算（+ - * /）がすべて使える */
.col {
  /* （全体幅 - gap×2）÷ 3列 */
  width: calc((100% - 32px) / 3);
}
/* ※ 演算子の前後にスペースが必要（+ や - は特に注意）*/
.box {
  height: calc(100vh - 60px);  /* 画面高さ - ヘッダー高さ */
}

/* clamp(最小値, 推奨値, 最大値) */
.hero-title {
  /* 最小20px、推奨5vw（画面幅の5%）、最大48px */
  /* → 画面が狭いと20px、広がるにつれて大きくなり、48pxで頭打ち */
  font-size: clamp(20px, 5vw, 48px);
}
.container {
  /* 最小320px、推奨90%、最大1200px */
  /* → @media なしでスマホからPCまで対応できる */
  width: clamp(320px, 90%, 1200px);
}
.padding {
  /* 余白もclampで流動的に */
  padding: clamp(16px, 4vw, 48px);
}

/* min()：小さい方を採用 → 最大幅の指定と同じ効果 */
.container {
  /* 80% と 600px を比較して小さい方 */
  /* → スマホでは80%幅、PCでは600pxを超えないように */
  width: min(80%, 600px);
  /* max-width: 600px; width: 80%; と同じ意味 */
}
/* max()：大きい方を採用 → 最小幅の確保と同じ効果 */
.sidebar {
  /* 200px と 30% を比較して大きい方 */
  /* → 最低でも200pxを確保しつつ、広い画面では30%まで広がる */
  width: max(200px, 30%);
  /* min-width: 200px; width: 30%; と同じ意味 */
}