cssテクニック

子要素を親要素から高さと水平の真ん中に配置する

  /* position: relative;を指定した親要素の真ん中に配置 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

min()の使い方

CSSのmin()関数は、指定された複数の値のうち最小の値を返します。この例では、フォントサイズは4vw（ビューポート幅の4%）または20pxのうち、より小さい方が選択されます。したがって、ビューポート幅が500px以上になるとフォントサイズは20pxになります。

body {
  font-size: min(4vw, 20px);
}

clamp()関数の使い方

この例では、フォントサイズは16pxから24pxの範囲内で、ビューポート幅に応じて動的に変更されます。具体的には、ビューポート幅が小さい場合は最小の16pxが適用され、ビューポート幅が大きい場合は最大の24pxが適用されます。中間の幅では4vwに基づいたフォントサイズが適用されます。

body {
  font-size: clamp(16px, 4vw, 24px);
}