CSSでの上付き文字と下付き文字【現役エンジニアが解説】

PROGRAM

今回は、CSSでの上付き文字と下付き文字について、それぞれに分け、簡単に解説していきます。

上付き文字(べき乗等)

上付き文字はvertical-alignプロパティをsuperにすると表現可能です。

インラインやテーブルセル要素限定ですが、font-sizeも調整することで再現できます。

.hoge1{
    vertical-align:super;
}

上記のコードでは、hoge1のクラスの要素(インラインもしくはテーブルセル要素)の文字を上付き文字にしています。

下付き文字(化学記号等)

下付き文字はvertical-alignプロパティをsubにすることで表現できます。

こちらもインラインやテーブルセル要素限定ですが、font-sizeも調整することで再現可能です。

.hoge2{
    vertical-align:sub;
}

上記のコードでは、hoge2のクラスを持つ要素(インラインもしくはテーブルセル要素)の文字を下付き文字にしています。

HTMLタグの上付き文字や下付き文字

上付き文字も下付き文字もCSSを使わずに、HTMLタグのみで表現することができます。

上付き文字はsupタグで、下付き文字はsubタグで、それぞれ表示することが可能となっています。

2<sup>3</sup>
H<sub>2</sub>O

上記のコードでは、supタグによる2の3乗のべき乗表示やsubタグによる水の化学記号表示といったHTMLタグだけで上付き文字と下付き文字を表しています。