Responsive paragraph text that adjusts its size based on the viewport width.
clamp() 関数
clamp() 関数を使って、異なるデバイスに対してフォントサイズを柔軟に調整することができます。
clamp() は、最小値、優先値、最大値の3つの値を取ります。この関数を使うと、フォントサイズがある範囲内で変動し、
ビューポートの幅に応じてスケーリングされます。
以下の例では、ビューポートの幅に基づいてフォントサイズをスマートフォン、タブレット、
パソコンで変える方法を示します：
-----------------------------------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Font Size with Clamp</title>
<style>
h1 {
font-size: clamp(2rem, 5vw, 3rem); /* 最小2rem、ビューポート幅の5%、最大3rem */
}
p {
font-size: clamp(1rem, 3vw, 2rem); /* 最小1rem、ビューポート幅の3%、最大2rem */
}
</style>
</head>
<body>
<h1>Responsive Heading</h1>
<p>Responsive paragraph text that adjusts its size based on the viewport width.</p>
</body>
</html>
-----------------------------------------------------------------
上記のコードでは、h1 要素と p 要素のフォントサイズが clamp() 関数を使用して設定されています。
これにより、ビューポートの幅に応じてフォントサイズがスムーズに変わり、
異なるデバイス（スマートフォン、タブレット、パソコン）で適切なサイズに調整されます。
=====================================================================
clamp() 関数の優先サイズ（中間の値）は、ビューポートの幅に基づいてフォントサイズをスケーリングするための基準として使用されます。具体的には、この優先サイズは以下のように動作します：
ビューポートの幅が非常に小さい場合（スマートフォンなど）には、clamp() 関数の最小値が適用されます。
ビューポートの幅が非常に大きい場合（デスクトップなど）には、clamp() 関数の最大値が適用されます。
ビューポートの幅が中間の場合（タブレットなど）には、clamp() 関数の優先サイズが適用されます。この優先サイズは、通常ビューポートの幅に対する割合（例：vw）として指定されます。
したがって、優先サイズは、ビューポートの幅が中間の範囲（通常はタブレットサイズや小さめのデスクトップサイズ）の場合に適用されます。
以下にもう少し具体的な例を示します：
<style>
h1 {
font-size: clamp(2rem, 5vw, 3rem); /* 最小2rem、優先サイズ5vw、最大3rem */
}
p {
font-size: clamp(1rem, 3vw, 2rem); /* 最小1rem、優先サイズ3vw、最大2rem */
}
</style>
この場合：
スマートフォン（ビューポート幅が非常に小さい）では、h1 のフォントサイズは 2rem に近くなり、p のフォントサイズは 1rem に近くなります。
デスクトップ（ビューポート幅が非常に大きい）では、h1 のフォントサイズは 3rem に近くなり、p のフォントサイズは 2rem に近くなります。
タブレット（ビューポート幅が中間）では、h1 のフォントサイズは 5vw に近くなり、p のフォントサイズは 3vw に近くなります。
ビューポートの幅に応じて、フォントサイズがスムーズにスケーリングされ、最小値と最大値の間で適切なサイズに調整されます。
指定した特定部分に反映させるビューポートの幅の8%と4% のCSS VW単位
特定のh1
font-size: 8vw; /* ビューポートの幅の8% のcss */
特定のp
font-size: 4vw; /* ビューポートの幅の4% のcss*/
Japan Flag