【HTML/CSS】上付き文字・下付き文字を表示する方法
記号の中には上付き文字や下付き文字を交えて表示する文字も存在しています。
実は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²で表示します。</p>
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
まとめ
いかがでしたか?
HTMLやCSSで上付き文字や下付き文字を表示する方法をご紹介しました。
特に上付き文字は注釈などで※印を表現することもあり、使用頻度は高い印象です。
ついつい忘れがちな上付き文字や下付き文字の表示ですが、覚えてしまえば簡単なので是非実線で使用してみて下さい。