CSS 流体タイポグラフィー: スケーラブルなテキストにクランプ() を使用するためのガイド

目次

• はじめに
• clamp() 関数を使用して滑らかなタイポグラフィを実現する
• 結論

導入

CSS メディア クエリの作成は、特にやるべきことが多すぎる場合には、やりがいが楽しい場合があります。私たちは、レイアウトを構築したり、Web サイトの他の部分をレスポンシブにすることに集中しすぎて、ストレスが溜まってしまうことがよくあります。しかし、大量のメディア クエリを記述する必要がなく、画面サイズに関係なくテキストをスケーラブルにすることで、そのストレスを軽減できたらどうでしょうか?

CSS のクランプ() 関数を使用して滑らかなタイポグラフィを実現する方法を詳しく見ていきましょう。

Clamp() 関数を使用して滑らかなタイポグラフィを実現する

問題

これは、H1 タグと P タグを含む基本的な Web ページです。

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Fluid Typography</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            font-family: Arial, sans-serif;
            background: #333;
            color: white;
            text-align: center;
        }

        h1{
            font-size: 5rem;
        }

        p{
            font-size: 3rem;
            color: red;
        }
    </style>

    <h1 id="CSS-Fluid-Typography">CSS Fluid Typography</h1>
    <p>Why is this text not scalable</p>

次に、さまざまな画面サイズでテキストがどのように動作するかを見てみましょう

上記のテキストをレスポンシブにする簡単な方法は、メディア クエリを使用することですが、この記事では、CSS のクランプ() 関数を使用してテキストをレスポンシブにします。

その前に、まず vw (ビューポート幅) 単位を見てみましょう。 vw ユニットを使用すると、ビューポートの幅に相対してフォント サイズを設定し、テキストをレスポンシブにできます。

次の変更を加えて既存のコードを更新しましょう:

<style>
  h1 {
    font-size: 10vw; /* H1 size is 10% of the viewport width */
  }
  p {
    font-size: 5vw;  /* p size is 5% of the viewport width */
    color: red;
  }
</style>

ビューポートの幅が 1000px の場合:
h1のフォントサイズは100pxになります
pのフォントサイズは50pxになります
H1 と p のフォント サイズは、ビューポートの幅が変化するにつれて拡大または縮小し続けます。

どのように見えるか見てみましょう:

上の GIF から、vw の使用はレスポンシブ テキストには機能しますが、制約がないことがわかります。ビューポートの幅が増加すると、フォント サイズは際限なく増加し続けます。同様に、ビューポートの幅が減少すると、フォント サイズは縮小し続けます。

ここで、clamp() 関数が活躍します。 Clamp() を使用すると、フォント サイズの最小値、推奨値、および最大値を設定でき、定義された範囲内でテキストをどのように拡大縮小するかを制御できます。

解決策

clamp() 関数の使用

CSS のクランプ() 関数を使用すると、フォント サイズの範囲を設定できます。
一般的な形式は次のとおりです:

clamp(minimum, preferred, maximum)

• 最小: テキストを縮小できる最小サイズ。
• 推奨: 理想的なサイズ (多くの場合、ビューポート幅のパーセンテージ)
• 最大: テキストが拡大できる最大サイズ。

上記の例を使用して、コードを次のように変更してみましょう

h1{
  font-size: clamp(24px, 5vw, 48px); /* Font size scales between 24px and 48px */
}

p{
  font-size: clamp(16px, 3vw, 24px) /* Font size scales between 16px and 24px)
}

ブラウザ上でどのように見えるかを見てみましょう:

h1 要素と p 要素は、サイズが定義された範囲内に留まり、大きすぎたり小さすぎたりすることがないため、応答するようになります。

結論

この記事では、CSS のクランプ() 関数を使用して滑らかなタイポグラフィを実現する方法を学びました。ここまで読んでいただきありがとうございました。ぜひ「いいね！」を押して、この記事を他の人たちと共有してください。この記事から恩恵を受けることができます。

この記事についてどう思いますか?以下のコメントセクションでお気軽にご意見を共有してください。

追伸 私は現在、フロントエンド開発者の機会を探しています。見込み客をお持ちの場合、または採用を検討している場合は、お気軽に私の履歴書をチェックするか、LinkedIn で私と連絡を取ってください。ぜひご意見をお待ちしております!

以上がCSS 流体タイポグラフィー: スケーラブルなテキストにクランプ() を使用するためのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。