CSSのfont-variant-positionで上付き文字・下付き文字を設定する方法をわかりやすく解説

2024.09.15
スポンサーリンク

font-variant-positionプロパティは、テキストの位置を制御し、通常、上付き文字や下付き文字のスタイルに使用されます。このプロパティを使用すると、特定の部分のテキストが他のテキストよりも上または下に表示されるように調整できます。

スポンサーリンク

font-variant-positionの値とその効果の一覧

  • normal: デフォルトのテキスト位置を使用します。
  • sub: テキストを下付き文字（subscript）として表示します。
  • super: テキストを上付き文字（superscript）として表示します。

注意点と関連情報

このプロパティを使用する際は、特に科学的な数式や注釈を含むテキストなど、視覚的な位置が重要な場合に役立ちます。フォントによっては、上付き文字や下付き文字がデフォルトでサポートされない場合もありますが、ほとんどの標準フォントではサポートされています。

font-variant-positionプロパティが効かない時の原因と対策

フォントが上付き文字・下付き文字をサポートしていない

font-variant-positionプロパティは、フォントの上付き文字（superscript）や下付き文字（subscript）を制御しますが、使用しているフォントがこれらのスタイルをサポートしていない場合、プロパティの効果が発揮されません。
対策: 使用しているフォントが上付き文字や下付き文字をサポートしているか確認しましょう。サポートされていない場合は、これらのスタイルをサポートするフォントを選択するか、代替フォントを指定することで対応します。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 400px;
  background-color: #f9f9f9;
  text-align: center;
  overflow-wrap: break-word;
}

.css-sample-text {
  font-family: 'Times New Roman', serif;
  font-size: 24px;
}

font-variant-position: normal

デフォルトのテキスト位置の例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-font-variant-position-normal">H<sub>2</sub>O is water.</p>
</div>

CSSコード

.css-sample-font-variant-position-normal {
  font-variant-position: normal;
}

表示結果

H2O is water.

font-variant-position: sub

下付き文字（subscript）の例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-font-variant-position-sub">H<sub>2</sub>O is water.</p>
</div>

CSSコード

.css-sample-font-variant-position-sub {
  font-variant-position: sub;
}

表示結果

H2O is water.

font-variant-position: super

上付き文字（superscript）の例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-font-variant-position-super">E = mc<sup>2</sup></p>
</div>

CSSコード

.css-sample-font-variant-position-super {
  font-variant-position: super;
}

表示結果

E = mc2

まとめ

  • font-variant-positionは、テキストの位置を変更して、上付き文字や下付き文字を簡単に表示できる便利なプロパティです。
  • 科学的な表記や数式の表示に非常に便利で、特に正確な表現が必要な場合に役立ちます。
  • 選択するフォントによって、サポートされていない場合がありますが、ほとんどのフォントで適用可能です。
スポンサーリンク