【CSS Modules】font-variant-capsプロパティの使い方

font-variant-capsプロパティは、テキストのアルファベット大文字・小文字の表示形式を制御するためのプロパティです。このプロパティを使用することで、文字のサイズを維持しつつ、特定の大文字スタイルを適用したり、文字の高さを調整した大文字で表現したりすることができます。

このプロパティにはいくつかのキーワード値を設定できます。「normal」は、テキストを標準的な大文字・小文字の形式で表示し、特別な処理は行いません。「small-caps」を設定すると、元のテキストの小文字を、小文字と同じ高さに縮小した大文字（スモールキャップス）で表示します。大文字はそのまま通常の大文字で表示されます。これは、見出しや強調したい短いテキストで、可読性を保ちつつ装飾的な効果を与える際に役立ちます。一方、「all-small-caps」は、元のテキストが大文字・小文字どちらであっても、すべての文字を小文字と同じ高さに縮小した大文字で表示します。

他にも、「petite-caps」や「all-petite-caps」は、「small-caps」や「all-small-caps」と同様ですが、文字の高さがさらに小さくなります。「unicase」は、大文字はそのままに、小文字を大文字と同じ高さに引き伸ばして表示するスタイルです。「titling-caps」は、主にタイトルや見出しなど、大文字のみで構成されるテキストの表示に適した装飾的な大文字スタイルを適用します。

このように、font-variant-capsプロパティを利用することで、文字の表示スタイルを細かく調整し、デザインの意図に合わせたテキスト表現を柔軟に実現できるため、ウェブページの視覚的な品質向上に貢献します。

Copy
1p {
2  font-variant-caps: small-caps;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません