はじめに
この実験では、CSS を使って流体的な文字装飾を実装する方法を学びます。流体的な文字装飾は、ビューポートの幅に応じてテキストが拡大縮小することを保証し、さまざまな画面サイズに対応しやすくなります。clamp()関数とfont-sizeの応答型の値を計算する式を使うことで、よりダイナミックでユーザーフレンドリーなデザインを作成できます。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 94%です。学習者から 100% の好評価を得ています。
流体的な文字装飾
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 でさらに多くの実験を練習することができます。