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

font-variant-positionプロパティは、テキスト内の特定の文字を上付き文字（superscript）や下付き文字（subscript）として表示する際の配置方法を制御するプロパティです。このプロパティを使用することで、数字や記号などが通常のテキストのベースラインより上下にずれて表示される視覚的なスタイルを適用できます。例えば、化学式におけるH₂Oのような下付き文字や、数学のべき乗におけるx²のような上付き文字、あるいは日付の表記における1ˢᵗのように、文字の特殊な位置を表現する際に活用されます。

このプロパティは主に以下の3つの値を指定できます。normalは、文字を通常のベースラインに沿って表示するデフォルトの状態を表します。subを指定すると、文字は下付き文字として表示され、通常のテキストのベースラインより少し下に配置されます。そして、superを指定すると、文字は上付き文字として表示され、通常のテキストのベースラインより少し上に配置されます。

これらの特殊な文字配置は、使用しているフォントがその機能（OpenTypeフォントのsupsやsubsなど）をサポートしている場合に最適に機能します。多くの場合、適切なフォントが選択されていれば、視覚的に美しい上付き・下付き文字が生成されます。HTMLの<sup>や<sub>要素も同様の視覚効果を提供しますが、font-variant-positionプロパティはCSSを通じてタイポグラフィの表現をより細かく、一貫性を持って制御したい場合に有効な手段となります。文書全体のデザインと調和させながら、テキストのセマンティクス（意味）を視覚的に強化するために用いられます。

Copy
1.example-element {
2  font-variant-position: super;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません