HTMLやCSSで上付き・下付き文字を表示

上付き文字・下付き文字は、文字の上下に小さく表示される文字のことです。HTMLタグやCSSで上付きまたは下付き文字表現することができます。

HTMLのsupタグ・subタグを使用

上付き文字はsupタグを使用します。

<p>x<sup>2</sup></p>

<p>x<sup>2</sup></p>

下付き文字はsubタグを使用します。

<p>H<sub>2</sub>O</p>

<p>H<sub>2</sub>O</p>

HTMLの sup / sub タグは、「x²」「H₂O」のような計算式や化学式、「cm²」といった単位など、通例で上付き・下付きとなるテキストに使用するためのタグです。

それ以外で上付き・下付き文字を表現したい場合は、CSSの vertical-align プロパティを使用して調整します。

CSSのvertical-alignで調整

上付きの場合は vertical-align: super; 、下付きは vertical-align: sub; を指定します。

<p>注意<span class="mark">※</span></p>

<p>注意<span class="mark">※</span></p>

.mark {
  vertical-align: super;
}

.mark {
  vertical-align: super;
}

上付き文字を小さくしたい場合は font-size で調整します。

.mark {
  font-size: 0.6em;
  vertical-align: super;
}

.mark {
  font-size: 0.6em;
  vertical-align: super;
}

.mark {
  vertical-align: sub;
}

.mark {
  vertical-align: sub;
}

また数値指定で位置をずらす、という方法もあります。

.mark {
  vertical-align: 20%;
}

.mark {
  vertical-align: 20%;
}