適切にサポートされている CSS 関数を使用して、要素のサイズを制御し、適切な間隔を維持して、可変的なタイポグラフィを実装する方法を学びます。
レスポンシブ デザインが複雑になるにつれ、CSS は、作成者が細かく制御できるように絶えず進化しています。最新のブラウザで現在サポートされている min()
、max()
、clamp()
の各関数は、ウェブサイトとアプリの作成をより動的でレスポンシブにするための最新ツールの一つです。これらの関数を使用して、要素のサイズとサイズ変更を制御し、要素間の間隔を維持して、柔軟で滑らかなタイポグラフィを作成できます。
数学関数
CSS 値と単位レベル 4calc()
、min()
、max()
、clamp()
では、加算(+)、減算(-)、乗算(*)、除算(/)を含む数式を構成要素値として使用できます。
ブラウザ サポート
min()
max()
clamp()
使用量
該当する CSS 式の右側で min()
、max()
、clamp()
を使用できます。min()
と max()
では、値の引数リストを指定します。ブラウザがどちらが小さいか、または大きいかを判断します。たとえば width: min(1rem, 50%, 10vw)
の場合、ブラウザはこれらの相対単位のうち小さいものを計算し、その値を要素の幅として使用します。
max()
関数は、最大値に対して同じ処理を行います。
clamp()
を使用するには、最小値、計算元の理想的な値、最大値の 3 つの値を入力します。
これらの関数は、<length>
、<frequency>
、<angle>
、<time>
、<percentage>
、<number>
、<integer>
のいずれかが許可されている場所で使用できます。これらは、単独で使用する(font-size: max(0.5vw, 50%, 2rem)
の場合)、calc()
の場合(font-size: max(calc(0.5vw - 1em), 2rem)
の場合)、コンポーズの場合(font-size: max(min(0.5vw, 1em), 2rem)
の場合)のいずれかを使用できます。
これらの関数の使用方法の例を以下に示します。
最適な幅
Robert Bringhurst による The Elements of Typographic Style の調査によると、1 列のページセットでテキストサイズのセリフ体を設定する場合、45 ~ 75 文字の範囲で十分な行があると広く考えられています。」
テキスト ブロックの幅を 45 ~ 75 文字にするには、clamp()
と ch
(0 幅文字進数)単位を使用します。
p {
width: clamp(45ch, 50%, 75ch);
}
これにより、ブラウザが段落の幅を決定できます。幅はデフォルトで 50% に設定されます。50% が 45ch
よりも小さい場合は代わりに 45ch
を使用し、50% が 75ch
よりも幅が広い場合は 75ch
を使用します。
min()
または max()
のみを使用してこれを分割することもできます。要素の幅を常に 50%
にし、大画面では 75ch
の幅を超えないようにするには、width: min(75ch, 50%);
を使用して最大サイズを設定します。
同様に、width: max(45ch, 50%);
のように、max()
関数を使用して判読可能なテキストの最小サイズを設定できます。この場合、ブラウザは大きい方の値を選択します。つまり、要素は 45ch
以上にする必要があります。
パディングを管理する
max()
を使用して最小パディング サイズを設定することもできます。この例の提供元である CSS Tricks は、読者の Caluà de Lacerda Pataca が「大きな画面サイズでは要素にパディングを追加して、小さい画面サイズでは最小限のパディングを維持する」というアイデアを共有しています。これを行うには、calc()
または max()
を使用して、要素の両側から最小パディングを減算します(calc((100vw - var(--contentWidth)) / 2)
または max(2rem, 50vw - var(--contentWidth) / 2)
)。スタイルシートでは次のようになります。
footer {
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Fluid タイポグラフィ
Mike Riethmeuller は、Fluid タイポグラフィを実現するために、clamp()
関数を使用して最小フォントサイズと最大フォントサイズを設定し、これらのサイズ間でスケーリングできるようにする手法を広めました。
clamp(),
の前に、フォントのスケーリングを設計するには複雑なスタイル文字列が必要でした。これで、処理はブラウザに任せることができます。許容される最小フォントサイズ(タイトルに 1.5rem
など)、最大サイズ(3rem
など)、理想的なサイズ(5vw
など)を設定します。これでタイポグラフィが完成しました。このタイポグラフィは、ごくわずかなコードで、限界の最小値と最大値に達するまで拡大します。
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}
その他のリソース
- MDN の CSS の値と単位
- CSS の値と単位のレベル 4 仕様
- 内部要素の幅に関する CSS のトリックに関する記事
- Min(), max(), clamp() - Ahmad Shadeed による概要
Unsplash の @yer_a_wizard が投稿したカバー画像