こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

記号の中には上付き文字や下付き文字を交えて表示する文字も存在しています。
実はHTMLやCSSでもこれらの文字を表示することが出来るんです。
そこでこの記事ではHTMLやCSSで上付き文字や下付き文字を表示する方法をご紹介したいと思います。

上付き文字・下付き文字を表示する方法

WEBページで上付き文字・下付き文字を表示する方法はいくつか表示する方方があります。

• HTMLで上付き文字・下付き文字を表示する
• CSSで上付き文字・下付き文字を表示する
• 特殊文字で上付き文字・下付き文字を表示する

それぞれの方法を見ていきましょう。

HTMLで上付き文字・下付き文字を表示する

HTMLで上付き文字・下付き文字を表示する方法はこちら。

上付き文字は<sup>タグ、下付き文字は<sub>タグを使います。

<p>面積を表す平方メートルはm<sup>2</sup>で表示します。</p>
<p>水の化学記号はH<sub>2</sub>Oです。</p>

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

CSSで上付き文字・下付き文字を表示する

CSSで上付き文字・下付き文字を表示する方法はこちら。

上付き文字はvertical-alignプロパティでsuperを指定、下付き文字はvertical-alignプロパティでsubを指定します。

<p>面積を表す平方メートルはm<span class="sup">2</span>で表示します。</p>
<p>水の化学記号はH<span class="sub">2</span>Oです。</p>

.sup{
    vertical-align: super; 
}
.sub{
    vertical-align: sub;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

特殊文字で上付き文字を表示する

上付き文字は特殊記号で表現することも出来ます。

面積を表す平方メートルはm²のように特殊文字を交えて表示します。
特殊文字で表示することが出来るのは上付き文字のみです。下付き文字を特殊文字で表示することは出来ません。

<p>面積を表す平方メートルはm&sup2;で表示します。</p>

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
HTMLやCSSで上付き文字や下付き文字を表示する方法をご紹介しました。
特に上付き文字は注釈などで※印を表現することもあり、使用頻度は高い印象です。
ついつい忘れがちな上付き文字や下付き文字の表示ですが、覚えてしまえば簡単なので是非実線で使用してみて下さい。