CSS を使った応答型流体的な文字装飾

はじめに

この実験では、CSS を使って流体的な文字装飾を実装する方法を学びます。流体的な文字装飾は、ビューポートの幅に応じてテキストが拡大縮小することを保証し、さまざまな画面サイズに対応しやすくなります。clamp()関数とfont-sizeの応答型の値を計算する式を使うことで、よりダイナミックでユーザーフレンドリーなデザインを作成できます。

Skills Graph

流体的な文字装飾

VM 内には既にindex.htmlとstyle.cssが用意されています。

ビューポートの幅に応じてサイズが調整されるテキストを作成するには、CSS を使うことができます。その方法の一つは、最小と最大のフォントサイズを設定するためにclamp()関数を使うことです。もう一つの方法は、フォントサイズに対する応答型の値を計算する式を使うことです。以下はfluid-typeクラスを持つ HTML 要素の例です。

<p class="fluid-type">Hello World!</p>

ビューポートの幅に応じてフォントサイズを1remと3remの間で調整するように設定する対応する CSS コードは以下の通りです。

.fluid-type {
  font-size: clamp(1rem, 8vw - 2rem, 3rem);
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは流体的な文字装飾の実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。