5.1 関数 calc()
CSS関数は、スタイルシート内でさまざまな操作を実行するための効果的なツールを提供しています。
関数 calc(), min(), max(), clamp() は特に、レスポンシブで柔軟なデザインを作成するのに役立ちます。
これらの関数は、数学的操作や条件付きの値の計算を実行できます。
calc() 関数は、CSSで数学的操作を実行するために使用されます。異なる単位を組み合わせたり、
ピクセル (px)、パーセンテージ (%)、em、rem などを含む式を一つの計算式として扱えます。
構文:
セレクタ {
プロパティ: calc(式);
}
使用例
この例では、ブロックの幅は親要素の幅の50%から20ピクセルを引いた値になります:
CSS
/* ブロックの幅 - 親要素の半分から20pxを引く */
.block {
width: calc(50% - 20px);
}
5.2 関数 min(), max(), clamp()
CSSの関数 min(), max(), clamp()
関数 min()
min() 関数は複数の値を取り、その中から最小のものを返します。コンテキストに応じて変化する柔軟なサイズを作るのに便利です。
構文:
セレクタ {
プロパティ: min(値1, 値2);
}
例
この例では、コンテナの幅は50%または300ピクセルのどちらか小さい方になります:
CSS
.container {
width: min(50%, 300px);
}
関数 max()
max() 関数は複数の値を取り、その中から最大のものを返します。最小サイズの指定や適応性を確保するのに役立ちます。
関数 clamp()
clamp() 関数は3つの値を取ります：最小、推奨、最大。最小と最大の間で値を制限し、推奨値に近づけます。
5.3 CSS関数を使う利点
CSS関数を使う利点:
- 柔軟性. CSS関数は、動的に値を計算できるため、より柔軟で適応性のあるスタイルを作成できます。
- レスポンシブデザインの簡素化.
min(),max(),clamp()関数は、特定の範囲内で値を制限できるため、レスポンシブデザインの作成を大幅に簡素化します。 - メディアクエリの必要性削減. これらの関数を使用することで、異なる画面サイズに対応したスタイル適応のために必要なメディアクエリの数が減ります。
5.4 完全な実装例
CSS
.container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.block {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}
.block:nth-child(1) {
width: calc(50% - 20px);
}
.block:nth-child(2) {
width: min(300px, 100%);
}
.block:nth-child(3) {
width: max(200px, 50%);
}
.text {
font-size: clamp(12px, 2vw, 24px);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS関数の使用例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="block">幅がcalc(50% - 20px)のブロック</div>
<div class="block">幅がmin(300px, 100%)のブロック</div>
<div class="block">幅がmax(200px, 50%)のブロック</div>
<p class="text">フォントサイズがclamp(12px, 2vw, 24px)のテキスト</p>
</div>
</body>
</html>
GO TO FULL VERSION