7.1 関数 min()
min() 関数は引数のリストから最小値を返すんだよ。これは、特定の限界を超えないように値を設定するのに便利だよ。
シンタックス:
セレクタ {
プロパティ: min(value1, value2 ...);
}
使用例:
この例では、ブロックの幅が300ピクセルを超えないようにするけど、親要素の100%が300ピクセル未満なら、その100%が使われるよ:
CSS
/* ブロックの幅は300px以下、でも100px以上 */
.block {
width: min(300px, 100%);
}
例2: フォントサイズの制限
この例では、フォントサイズが2emを超えないけど、5%がビューウィンドウの幅未満なら、その値が使われるよ:
CSS
.text {
font-size: min(2em, 5vw);
}
7.2 関数 max()
max() 関数は引数のリストから最大値を返すんだよ。これは、特定の限界を下回らないように値を設定するのに便利だよ。
シンタックス:
セレクタ {
プロパティ: max(value1, value2, ...);
}
使用例
この例では、ブロックの幅が200ピクセル未満にならないようにするけど、親要素の50%が200ピクセル以上なら、その50%が使われるよ:
CSS
/* ブロックの幅は200px以上、でもそれ以上可能 */
.block {
width: max(200px, 50%);
}
例2: 最小フォントサイズ
この例では、フォントサイズが1.5em未満にならないけど、2%がビューウィンドウの幅以上なら、その値が使われるよ:
CSS
.title {
font-size: max(1.5em, 2vw);
}
7.3 関数 clamp()
clamp() 関数は最小値と最大値で制限された値を返すんだよ。これは3つの引数を取るよ: 最小値、推奨値、最大値。
シンタックス:
セレクタ {
プロパティ: clamp(min, 式, max);
}
使用例
この例では、フォントサイズがビューウィンドウの幅によって変動するよ: 最小12ピクセル、最大24ピクセル、推奨値はビュー幅の2%:
CSS
/* 画面幅に応じて12pxから24pxのフォントサイズ */
.text {
font-size: clamp(12px, 2vw, 24px);
}
例2: ブロック幅の制限
この例では、ブロックの幅が親要素の幅に応じて変動するけど、200ピクセル未満および600ピクセル以上にはならないよ:
CSS
.box {
width: clamp(200px, 50%, 600px);
}
7.4 フル実装例
CSS
.container {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
}
.box {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
width: clamp(200px, 50%, 600px);
}
.text {
font-size: clamp(1em, 2vw, 2em);
}
.sidebar {
background-color: #2ecc71;
color: white;
padding: 10px;
text-align: center;
width: max(200px, 30%);
}
.text-small {
font-size: min(2em, 5vw);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>関数 min(), max() と clamp() の使用例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">幅: clamp(200px, 50%, 600px)</div>
<p class="text">フォントサイズ: clamp(1em, 2vw, 2em)</p>
<div class="sidebar">幅: max(200px, 30%)</div>
<p class="text-small">フォントサイズ: min(2em, 5vw)</p>
</div>
</body>
</html>
GO TO FULL VERSION