この記事は人間が書きました

はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

`clamp()` 関数の仕組み

メディアクエリ（@media）を使うと、フォントサイズはブレイクポイントで「カクッ」と段階的に変わります。

clamp() 関数を使うと、フォントサイズが画面幅に応じて滑らかに変化するレイアウトを実現できます。これは「Fluid Typography」と呼ばれます。

clamp() 関数は最小値、推奨値、最大値の3つを指定します。

clamp(MIN, PREF, MAX)

MIN（最小値）：これ以上小さくならないという下限
PREF（推奨値）：この値が基本になるが、画面幅に応じて変化する値（vw 単位など）を指定
MAX（最大値）：これ以上大きくならないという上限

ブラウザは PREF の値を採用しようとしますが、それが MIN より小さくなったら MIN を、MAX より大きくなったら MAX を採用します。

例えば、font-size: clamp(24px, 5vw, 60px); は、次のような意味になります。

基本は画面幅の5%（5vw）のサイズになる
ただし、5vw が 24px より小さくなっても、24px を下回らない
そして、5vw が 60px より大きくなっても、60px を上回らない

作成したコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フロントエンド1000本ノック 0073</title>
</head>
<body>
  <h1 style="font-size: clamp(1.5rem, 4vw, 3rem);">こんにちは</h1>
</body>
</html>