設計：CSS関数 clamp(), min(), max() を使って柔軟なサイズ指定を体験しよう

📁 作成ファイル・保存場所

css-practice フォルダに以下のファイルを作成してください。

ファイル名	内容
css-functions-clamp.html	clamp(), min(), max() を使ったレスポンシブ設計用HTMLファイル
css-functions-clamp.css	関数を使ったスタイルシート

HTMLとCSSは <link> タグで連携してください。

そもそも CSS関数とは？

CSS関数とは、スタイルを計算・条件判断して柔軟に指定できるようにする書き方です。
clamp() や min()、max() などはその代表で、画面サイズや条件に応じたスタイル切り替えができます。

clamp() とは？

font-size: clamp(1rem, 5vw, 2rem);

最小値（1rem）
理想値（5vw：画面幅の5%）
最大値（2rem）
このようにclampは「この範囲内で画面サイズに合わせて変化」するスタイルを一行で書けます。

min() とは？

font-size: min(2rem, 6vw);

指定した値のうち、小さい方を採用
画面が広がっても「指定値を超えないように」抑えたいときに便利

max() とは？

font-size: max(1rem, 2vw);

指定した値のうち、大きい方を採用
画面が狭くなっても「最低限のサイズを保ちたい」ときに便利

目的

CSS関数 clamp(), min(), max() の使い方を学ぶ
font-size を中心に、画面サイズに応じた柔軟なデザインを設計できるようになる
設計力・レスポンシブ対応力を高めるステップとして活用する

チェックポイント

font-size: clamp(...) の構文を正しく使えているか
min() と max() で条件によってサイズ切り替えができているか
ブラウザをリサイズしてサイズの変化を確認できているか
異なる関数の違いを理解し、用途に応じた使い分けができているか

HTML構造

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Practice 08</title>
    <link rel="stylesheet" href="css-practice08.css">
</head>

<body>
    <header>
        <h1 class="title">レスポンシブ見出し（clamp使用）</h1>
    </header>
    <main class="container">
        <section>
            <h2 class="subtitle">サブ見出し（min使用）</h2>
            <p class="text">この文章は max() を使って、画面が広くなっても読みやすいサイズになります。</p>
        </section>

        <section class="box">
            <h2 class="box__title">タイトル</h2>
            <p class="box__text">このセクションは padding に clamp() を使って調整されています。</p>
        </section>
    </main>
</body>

</html>

CSS関数の使い方

body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    padding: 2rem;
    line-height: 1.6;
    text-align: center;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.title {
    font-size: clamp(1.5rem, 5vw, 3rem);
    color: #333;
    margin-bottom: 1.5rem;
}

.subtitle {
    font-size: min(2rem, 6vw);
    color: #555;
    margin-bottom: 1rem;
}

.text {
    font-size: max(1rem, 2vw);
    color: #666;
}

.box {
    background: #e0f7fa;
    padding: clamp(1rem, 5vw, 3rem);
    margin: min(2rem, 5vw);
    border-radius: 8px;
}

.box__title {
    font-size: 1.5rem;
    margin-bottom: max(1rem, 2vh);
}

.box__text {
    font-size: 1rem;
}

/* CSS関数の補足
     clamp() → 最小・理想・最大を順に指定
     min()   → 小さい方を選ぶ
     max()   → 大きい方を選ぶ
     padding や margin にも応用できます */

画面幅を変えて、どのように文字サイズが変化するかを確認してみましょう。

応用：clamp() を padding に使ってみよう

.box {
  padding: clamp(1rem, 5vw, 3rem); /* 幅に応じて余白が変わる */
  margin: min(2rem, 5vw);          /* 小さい方の余白を使う */
}

応用ポイント

clamp() は padding, margin, gap にも応用できます
min() / max() は「制限つきの設計」に便利です
デザインの見た目だけでなく、可読性や操作性の最適化にもつながります

最後にやってみよう！

この課題では、あらかじめ指定された clamp(), min(), max() の値を使っていますが、
実際の画面幅や自分の好みに応じて、数値を自由に調整してみましょう。

最小値を変えると、どんな場面で読みづらくなる？
理想値（vw）を変えると、スマホとPCでどう変わる？
最大値を大きくしすぎると、何が起こる？

→ 自分でブラウザの幅を動かしながら確認することで、関数の理解が深まります！