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

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

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

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

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

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

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

CSSのvertical-alignで調整

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

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

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

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

.mark {
  vertical-align: super;
}

.mark {
  vertical-align: sub;
}

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

.mark {
  vertical-align: 20%;
}