【CSS Modules】relative-size型の使い方
relative-size型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
relative-sizeオブジェクトは、CSSにおいて、要素のフォントサイズを親要素のサイズに対して相対的に指定するためのキーワードの集合を表すオブジェクトです。これは主にfont-sizeプロパティの値として使用され、largerとsmallerという二つのキーワードを含みます。largerキーワードを指定すると、対象の要素のフォントサイズは親要素のフォントサイズよりも一段階大きく表示されます。反対にsmallerキーワードを指定すると、親要素のフォントサイズよりも一段階小さく表示されます。
これらのキーワードは、絶対的な数値（例: ピクセル値）でフォントサイズを固定するのではなく、コンテキストに応じて動的にサイズを調整したい場合に非常に有用です。例えば、Webページ全体でテキストのサイズバランスを保ちながら、特定の部分の文字だけを少し目立たせたい、あるいは控えめに表示したいといった状況で活躍します。親要素のフォントサイズが変更されても、これらの相対指定は自動的に適応されるため、レスポンシブデザインの調整や長期的なメンテナンスにおいても効率的なフォント管理を可能にします。この柔軟なアプローチは、Webコンテンツのアクセシビリティとユーザビリティの向上にも貢献します。
公式リファレンス: <relative-size>
構文(syntax)
1font-size: smaller;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません