【CSS Modules】absolute-size型の使い方
absolute-size型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
absolute-size定数は、CSSにおいて、ブラウザによって定義される絶対的なサイズを表す定数です。これは、主にfont-sizeプロパティの値として使用されるキーワードのグループを指すデータ型として機能します。具体的な数値ではなく、xx-small、x-small、small、medium、large、x-large、xx-largeといったキーワードで構成されており、それぞれが特定の絶対的な大きさを指定します。
これらのキーワードは、ウェブサイトのフォントサイズなどを指定する際に、ピクセル値のような固定的な単位ではなく、よりセマンティックかつ柔軟な方法を提供します。例えば、font-size: large;と指定することで、ユーザーのブラウザのデフォルト設定や環境に応じた「大きな」フォントサイズが適用されます。mediumが基準となり、それより小さくまたは大きくなるように段階的にサイズが設定されています。
absolute-size定数を使用するメリットは、ユーザーエージェント（ブラウザ）のデフォルト設定やユーザーが指定した基本フォントサイズを考慮し、アクセシビリティとユーザビリティを向上できる点にあります。コンテンツの相対的なサイズ関係を維持しつつ、閲覧環境に合わせて表示を最適化するのに役立ちます。ただし、これらのキーワードが実際にどのピクセル値にマッピングされるかはブラウザの実装に依存するため、すべての環境で完全に同じ見た目になるとは限らない点には留意が必要です。
公式リファレンス: <absolute-size>
構文(syntax)
1font-size: medium;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません